skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   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
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  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.
  16  *
  17  */
  18
  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';
  24
  25
  26 class JobListCard extends React.Component {
  27     constructor(props) {
  28         super(props);
  29         this.state = {};
  30         this.state.hideParameters = true;
  31         this.state.modalVisible = false;
  32     }
  33     openModal() {
  34         this.setState({
  35             modalVisible : true
  36         });
  37     }
  38
  39     closeModal() {
  40         this.setState({
  41             modalVisible : false
  42         });
  43     }
  44     getStatusColor(status) {
  45         let color;
  46         switch(status) {
  47             case 'success' : color = 'green'; break;
  48             case 'failure' : color = 'red'; break;
  49             default : color = 'yellow'; break;
  50         }
  51         return 'jobListCard--status_' + color;
  52     }
  53     toggleParametersView(hideParameters) {
  54         this.setState({
  55             hideParameters: !hideParameters
  56         })
  57     }
  58     getJobDetails(job) {
  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/>);
  66             });
  67             jobDetails = (
  68                 <section className='jobListCard--details'>
  69                     <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
  70                     <Modal
  71                         visible={this.state.modalVisible}
  72                         width="600"
  73                         height="400"
  74                         effect="fadeInUp">
  75                         <div>
  76                             <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
  77                                 <p>{jobDetailsText}</p>
  78                             </TreeView>
  79                             <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
  80                         </div>
  81                     </Modal>
  82                 </section>
  83             );
  84         }
  85         return jobDetails;
  86     }
  87     nsrCardHTML(props, key) {
  88         let self = this;
  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) => {
  93                 let k = null;
  94                 if(key) {
  95                     k = k + '-' + i;
  96                 }
  97                 return (
  98                     <div key={k || i} className="jobListCard--listitem">
  99                         <span className="jobListCard--parameter">{p.name}:</span> {p.value}
 100                     </div>
 101                 );
 102             });
 103         }
 104         let jobDetailsHTML = this.getJobDetails(this.props);
 105         return (
 106             <div className="jobListCard">
 107                 <div className="jobListCard--header">
 108                     <div className="jobListCard--name">
 109                         {props['job-name']}
 110                     </div>
 111                     <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
 112                 </div>
 113                 <div className="jobListCard--subtitle">
 114                     <span>ID: {this.props['job-id']}</span>
 115                 </div>
 116                 <div className="jobListCard--subtitle">
 117                     <Uptime initialTime={props['create-time']} run={false} /> ago
 118                 </div>
 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'}}>
 122                         {
 123                             parameterList(props)
 124                         }
 125                         {
 126                             props.vnfr && props.vnfr.map(function(v) {
 127                                 return v.primitive && v.primitive.map(function(p) {
 128                                     return parameterList(p, p.name)
 129                                 })
 130                             })
 131                         }
 132                     </div>
 133                 </div>
 134                 {jobDetailsHTML}
 135             </div>
 136         )
 137     }
 138     vnfrCardHTML(props) {
 139         let self = this;
 140         let jobListStatus = this.getStatusColor(props['execution-status'] );
 141         let hideParameters = this.state.hideParameters;
 142         return (
 143             <div className="jobListCard">
 144                 <div className="jobListCard--header">
 145                     <div className="jobListCard--name">
 146                         {props.name}
 147                     </div>
 148                     <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
 149                 </div>
 150                 <div className="jobListCard--subtitle">
 151                     <span>ID: {props['job-id']}</span>
 152                 </div>
 153                 <div className={"jobListCard--parameters"}>
 154                     <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
 155                         { hideParameters ? 'Show' : 'Hide' } Parameters
 156                     </h4>
 157                     <div style={{display: hideParameters ? 'none' : 'initial'}}>
 158                         <div className={"jobListCard--list"}>
 159                             {
 160                                 props['parameter'] && props['parameter'].map((q, k) => {
 161                                         return (
 162                                             <div key={k} className="jobListCard--listitem">
 163                                                 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
 164                                             </div>
 165                                         );
 166                                 })
 167                             }
 168                         </div>
 169                     </div>
 170                 </div>
 171             </div>
 172         )
 173     }
 174     render() {
 175         let html;
 176         let card = <div></div>
 177         if (this.props.type=="nsr") {
 178             card = this.nsrCardHTML(this.props);
 179         }
 180         if (this.props.type=="vnfr") {
 181             card = this.vnfrCardHTML(this.props);
 182         }
 183         return card;
 184     }
 185 }
 186 export default JobListCard;