3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
19 import React from 'react';
20 import './jobListCard.scss'
21 import TreeView from 'react-treeview';
22 import Uptime from 'widgets/uptime/uptime.jsx';
23 import Modal from 'react-awesome-modal';
26 class JobListCard extends React.Component {
30 this.state.hideParameters = true;
31 this.state.modalVisible = false;
44 getStatusColor(status) {
47 case 'success' : color = 'green'; break;
48 case 'failure' : color = 'red'; break;
49 default : color = 'yellow'; break;
51 return 'jobListCard--status_' + color;
53 toggleParametersView(hideParameters) {
55 hideParameters: !hideParameters
59 let jobDetails = null;
60 if (job['job-status-details'] || job['execution-error-details']) {
61 let jobDetailsArray = [];
62 if (job['job-status-details']) {
63 jobDetailsArray = job['job-status-details'].split(/\\n/);
64 } else if (job['execution-error-details']) {
65 jobDetailsArray = job['execution-error-details'].split(/\\n/);
67 let jobDetailsText = [];
68 jobDetailsArray && jobDetailsArray.map((jobDetail) => {
69 jobDetailsText.push(jobDetail);
70 jobDetailsText.push(<br/>);
73 <section className='jobListCard--details'>
74 <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
76 className='jobListCard--details--modal'
77 visible={this.state.modalVisible}
81 <div className='jobListCard--details--tree'>
82 <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
83 <p>{jobDetailsText}</p>
85 <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
93 nsrCardHTML(props, key) {
95 let jobListStatus = this.getStatusColor(this.props['job-status']);
96 let hideParameters = this.state.hideParameters;
97 let parameterList = function(props) {
98 return props['parameter'] && props['parameter'].map((p, i) => {
104 <div key={k || i} className="jobListCard--listitem">
105 <span className="jobListCard--parameter">{p.name}:</span> {p.value}
110 let jobDetailsHTML = this.getJobDetails(this.props);
112 <div className="jobListCard">
113 <div className="jobListCard--header">
114 <div className="jobListCard--name">
117 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
119 <div className="jobListCard--subtitle">
120 <span>ID: {this.props['job-id']}</span>
122 <div className="jobListCard--subtitle">
123 <Uptime initialTime={props['create-time']} run={false} /> ago
125 <div className={"jobListCard--parameters"}>
126 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>{hideParameters ? 'Show' : 'Hide'} Parameters</h4>
127 <div className={"jobListCard--list"} style={{display: hideParameters ? 'none' : 'flex'}}>
132 props.vnfr && props.vnfr.map(function(v) {
133 return v.primitive && v.primitive.map(function(p) {
134 return parameterList(p, p.name)
144 vnfrCardHTML(props) {
146 let jobListStatus = this.getStatusColor(props['execution-status'] );
147 let hideParameters = this.state.hideParameters;
148 let jobDetailsHTML = this.getJobDetails(this.props);
150 <div className="jobListCard">
151 <div className="jobListCard--header">
152 <div className="jobListCard--name">
155 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
157 <div className="jobListCard--subtitle">
158 <span>ID: {props['job-id']}</span>
160 <div className={"jobListCard--parameters"}>
161 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
162 { hideParameters ? 'Show' : 'Hide' } Parameters
164 <div style={{display: hideParameters ? 'none' : 'initial'}}>
165 <div className={"jobListCard--list"}>
167 props['parameter'] && props['parameter'].map((q, k) => {
169 <div key={k} className="jobListCard--listitem">
170 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
184 let card = <div></div>
185 if (this.props.type=="nsr") {
186 card = this.nsrCardHTML(this.props);
188 if (this.props.type=="vnfr") {
189 card = this.vnfrCardHTML(this.props);
194 export default JobListCard;