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 Uptime from 'widgets/uptime/uptime.jsx';
22 import Modal from 'react-awesome-modal';
25 class JobListCard extends React.Component {
29 this.state.hideParameters = true;
30 this.state.modalVisible = false;
43 getStatusColor(status) {
46 case 'success' : color = 'green'; break;
47 case 'failure' : color = 'red'; break;
48 default : color = 'yellow'; break;
50 return 'jobListCard--status_' + color;
52 toggleParametersView(hideParameters) {
54 hideParameters: !hideParameters
58 let jobDetails = null;
59 if (job['job-status-details']) {
61 <section className='jobListCard--details'>
62 <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
64 visible={this.state.modalVisible}
69 <div className='jobListCard--details--content'>{job['job-status-details']}</div>
70 <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
78 nsrCardHTML(props, key) {
80 let jobListStatus = this.getStatusColor(this.props['job-status']);
81 let hideParameters = this.state.hideParameters;
82 let parameterList = function(props) {
83 return props['parameter'] && props['parameter'].map((p, i) => {
89 <div key={k || i} className="jobListCard--listitem">
90 <span className="jobListCard--parameter">{p.name}:</span> {p.value}
95 let jobDetailsHTML = this.getJobDetails(this.props);
97 <div className="jobListCard">
98 <div className="jobListCard--header">
99 <div className="jobListCard--name">
102 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
104 <div className="jobListCard--subtitle">
105 <span>ID: {this.props['job-id']}</span>
107 <div className="jobListCard--subtitle">
108 <Uptime initialTime={props['create-time']} run={false} /> ago
110 <div className={"jobListCard--parameters"}>
111 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>{hideParameters ? 'Show' : 'Hide'} Parameters</h4>
112 <div className={"jobListCard--list"} style={{display: hideParameters ? 'none' : 'flex'}}>
117 props.vnfr && props.vnfr.map(function(v) {
118 return v.primitive && v.primitive.map(function(p) {
119 return parameterList(p, p.name)
129 vnfrCardHTML(props) {
131 let jobListStatus = this.getStatusColor(props['execution-status'] );
132 let hideParameters = this.state.hideParameters;
134 <div className="jobListCard">
135 <div className="jobListCard--header">
136 <div className="jobListCard--name">
139 <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
141 <div className="jobListCard--subtitle">
142 <span>ID: {props['job-id']}</span>
144 <div className={"jobListCard--parameters"}>
145 <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
146 { hideParameters ? 'Show' : 'Hide' } Parameters
148 <div style={{display: hideParameters ? 'none' : 'initial'}}>
149 <div className={"jobListCard--list"}>
151 props['parameter'] && props['parameter'].map((q, k) => {
153 <div key={k} className="jobListCard--listitem">
154 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
167 let card = <div></div>
168 if (this.props.type=="nsr") {
169 card = this.nsrCardHTML(this.props);
171 if (this.props.type=="vnfr") {
172 card = this.vnfrCardHTML(this.props);
177 export default JobListCard;