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']) {
61 let jobDetailsArray = job['job-status-details'].split(/\\n/);
62 let jobDetailsText = [];
63 jobDetailsArray && jobDetailsArray.map((jobDetail) => {
64 jobDetailsText.push(jobDetail);
65 jobDetailsText.push(<br/>);
68 <section className='jobListCard--details'>
69 <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
71 visible={this.state.modalVisible}
76 <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
77 <p>{jobDetailsText}</p>
79 <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
87 nsrCardHTML(props, key) {
89 let jobListStatus = this.getStatusColor(this.props['job-status']);
90 let hideParameters = this.state.hideParameters;
91 let parameterList = function(props) {
92 return props['parameter'] && props['parameter'].map((p, i) => {
98 <div key={k || i} className="jobListCard--listitem">
99 <span className="jobListCard--parameter">{p.name}:</span> {p.value}
104 let jobDetailsHTML = this.getJobDetails(this.props);
106 <div className="jobListCard">
107 <div className="jobListCard--header">
108 <div className="jobListCard--name">
111 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
113 <div className="jobListCard--subtitle">
114 <span>ID: {this.props['job-id']}</span>
116 <div className="jobListCard--subtitle">
117 <Uptime initialTime={props['create-time']} run={false} /> ago
119 <div className={"jobListCard--parameters"}>
120 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>{hideParameters ? 'Show' : 'Hide'} Parameters</h4>
121 <div className={"jobListCard--list"} style={{display: hideParameters ? 'none' : 'flex'}}>
126 props.vnfr && props.vnfr.map(function(v) {
127 return v.primitive && v.primitive.map(function(p) {
128 return parameterList(p, p.name)
138 vnfrCardHTML(props) {
140 let jobListStatus = this.getStatusColor(props['execution-status'] );
141 let hideParameters = this.state.hideParameters;
143 <div className="jobListCard">
144 <div className="jobListCard--header">
145 <div className="jobListCard--name">
148 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
150 <div className="jobListCard--subtitle">
151 <span>ID: {props['job-id']}</span>
153 <div className={"jobListCard--parameters"}>
154 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
155 { hideParameters ? 'Show' : 'Hide' } Parameters
157 <div style={{display: hideParameters ? 'none' : 'initial'}}>
158 <div className={"jobListCard--list"}>
160 props['parameter'] && props['parameter'].map((q, k) => {
162 <div key={k} className="jobListCard--listitem">
163 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
176 let card = <div></div>
177 if (this.props.type=="nsr") {
178 card = this.nsrCardHTML(this.props);
180 if (this.props.type=="vnfr") {
181 card = this.vnfrCardHTML(this.props);
186 export default JobListCard;