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 className='jobListCard--details--modal'
72 visible={this.state.modalVisible}
76 <div className='jobListCard--details--tree'>
77 <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
78 <p>{jobDetailsText}</p>
80 <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
88 nsrCardHTML(props, key) {
90 let jobListStatus = this.getStatusColor(this.props['job-status']);
91 let hideParameters = this.state.hideParameters;
92 let parameterList = function(props) {
93 return props['parameter'] && props['parameter'].map((p, i) => {
99 <div key={k || i} className="jobListCard--listitem">
100 <span className="jobListCard--parameter">{p.name}:</span> {p.value}
105 let jobDetailsHTML = this.getJobDetails(this.props);
107 <div className="jobListCard">
108 <div className="jobListCard--header">
109 <div className="jobListCard--name">
112 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
114 <div className="jobListCard--subtitle">
115 <span>ID: {this.props['job-id']}</span>
117 <div className="jobListCard--subtitle">
118 <Uptime initialTime={props['create-time']} run={false} /> ago
120 <div className={"jobListCard--parameters"}>
121 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>{hideParameters ? 'Show' : 'Hide'} Parameters</h4>
122 <div className={"jobListCard--list"} style={{display: hideParameters ? 'none' : 'flex'}}>
127 props.vnfr && props.vnfr.map(function(v) {
128 return v.primitive && v.primitive.map(function(p) {
129 return parameterList(p, p.name)
139 vnfrCardHTML(props) {
141 let jobListStatus = this.getStatusColor(props['execution-status'] );
142 let hideParameters = this.state.hideParameters;
144 <div className="jobListCard">
145 <div className="jobListCard--header">
146 <div className="jobListCard--name">
149 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
151 <div className="jobListCard--subtitle">
152 <span>ID: {props['job-id']}</span>
154 <div className={"jobListCard--parameters"}>
155 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
156 { hideParameters ? 'Show' : 'Hide' } Parameters
158 <div style={{display: hideParameters ? 'none' : 'initial'}}>
159 <div className={"jobListCard--list"}>
161 props['parameter'] && props['parameter'].map((q, k) => {
163 <div key={k} className="jobListCard--listitem">
164 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
177 let card = <div></div>
178 if (this.props.type=="nsr") {
179 card = this.nsrCardHTML(this.props);
181 if (this.props.type=="vnfr") {
182 card = this.vnfrCardHTML(this.props);
187 export default JobListCard;