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