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'] || 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/);
  66             }
  67             let jobDetailsText = [];
  68             jobDetailsArray && jobDetailsArray.map((jobDetail) => {
  69                 jobDetailsText.push(jobDetail);
  70                 jobDetailsText.push(<br/>);
  71             });
  72             jobDetails = (
  73                 <section className='jobListCard--details'>
  74                     <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
  75                     <Modal
  76                         className='jobListCard--details--modal'
  77                         visible={this.state.modalVisible}
  78                         width="600"
  79                         height="400"
  80                         effect="fadeInUp">
  81                         <div className='jobListCard--details--tree'>
  82                             <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
  83                                 <p>{jobDetailsText}</p>
  84                             </TreeView>
  85                             <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
  86                         </div>
  87                     </Modal>
  88                 </section>
  89             );
  90         }
  91         return jobDetails;
  92     }
  93     nsrCardHTML(props, key) {
  94         let self = this;
  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) => {
  99                 let k = null;
 100                 if(key) {
 101                     k = k + '-' + i;
 102                 }
 103                 return (
 104                     <div key={k || i} className="jobListCard--listitem">
 105                         <span className="jobListCard--parameter">{p.name}:</span> {p.value}
 106                     </div>
 107                 );
 108             });
 109         }
 110         let jobDetailsHTML = this.getJobDetails(this.props);
 111         return (
 112             <div className="jobListCard">
 113                 <div className="jobListCard--header">
 114                     <div className="jobListCard--name">
 115                         {props['job-name']}
 116                     </div>
 117                     <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
 118                 </div>
 119                 <div className="jobListCard--subtitle">
 120                     <span>ID: {this.props['job-id']}</span>
 121                 </div>
 122                 <div className="jobListCard--subtitle">
 123                     <Uptime initialTime={props['create-time']} run={false} /> ago
 124                 </div>
 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'}}>
 128                         {
 129                             parameterList(props)
 130                         }
 131                         {
 132                             props.vnfr && props.vnfr.map(function(v) {
 133                                 return v.primitive && v.primitive.map(function(p) {
 134                                     return parameterList(p, p.name)
 135                                 })
 136                             })
 137                         }
 138                     </div>
 139                 </div>
 140                 {jobDetailsHTML}
 141             </div>
 142         )
 143     }
 144     vnfrCardHTML(props) {
 145         let self = this;
 146         let jobListStatus = this.getStatusColor(props['execution-status'] );
 147         let hideParameters = this.state.hideParameters;
 148         let jobDetailsHTML = this.getJobDetails(this.props);
 149         return (
 150             <div className="jobListCard">
 151                 <div className="jobListCard--header">
 152                     <div className="jobListCard--name">
 153                         {props.name}
 154                     </div>
 155                     <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
 156                 </div>
 157                 <div className="jobListCard--subtitle">
 158                     <span>ID: {props['job-id']}</span>
 159                 </div>
 160                 <div className={"jobListCard--parameters"}>
 161                     <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
 162                         { hideParameters ? 'Show' : 'Hide' } Parameters
 163                     </h4>
 164                     <div style={{display: hideParameters ? 'none' : 'initial'}}>
 165                         <div className={"jobListCard--list"}>
 166                             {
 167                                 props['parameter'] && props['parameter'].map((q, k) => {
 168                                         return (
 169                                             <div key={k} className="jobListCard--listitem">
 170                                                 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
 171                                             </div>
 172                                         );
 173                                 })
 174                             }
 175                         </div>
 176                     </div>
 177                 </div>
 178                 {jobDetailsHTML}
 179             </div>
 180         )
 181     }
 182     render() {
 183         let html;
 184         let card = <div></div>
 185         if (this.props.type=="nsr") {
 186             card = this.nsrCardHTML(this.props);
 187         }
 188         if (this.props.type=="vnfr") {
 189             card = this.vnfrCardHTML(this.props);
 190         }
 191         return card;
 192     }
 193 }
 194 export default JobListCard;