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 Uptime from 'widgets/uptime/uptime.jsx';
  22 import Modal from 'react-awesome-modal';
  23
  24
  25 class JobListCard extends React.Component {
  26     constructor(props) {
  27         super(props);
  28         this.state = {};
  29         this.state.hideParameters = true;
  30         this.state.modalVisible = false;
  31     }
  32     openModal() {
  33         this.setState({
  34             modalVisible : true
  35         });
  36     }
  37
  38     closeModal() {
  39         this.setState({
  40             modalVisible : false
  41         });
  42     }
  43     getStatusColor(status) {
  44         let color;
  45         switch(status) {
  46             case 'success' : color = 'green'; break;
  47             case 'failure' : color = 'red'; break;
  48             default : color = 'yellow'; break;
  49         }
  50         return 'jobListCard--status_' + color;
  51     }
  52     toggleParametersView(hideParameters) {
  53         this.setState({
  54             hideParameters: !hideParameters
  55         })
  56     }
  57     getJobDetails(job) {
  58         let jobDetails = null;
  59         if (job['job-status-details']) {
  60             jobDetails = (
  61                 <section className='jobListCard--details'>
  62                     <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
  63                     <Modal
  64                         visible={this.state.modalVisible}
  65                         width="600"
  66                         height="400"
  67                         effect="fadeInUp">
  68                         <div>
  69                             <div className='jobListCard--details--content'>{job['job-status-details']}</div>
  70                             <h4 className='jobListCard--details--close' onClick={this.closeModal.bind(this)}>Close</h4>
  71                         </div>
  72                     </Modal>
  73                 </section>
  74             );
  75         }
  76         return jobDetails;
  77     }
  78     nsrCardHTML(props, key) {
  79         let self = this;
  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) => {
  84                 let k = null;
  85                 if(key) {
  86                     k = k + '-' + i;
  87                 }
  88                 return (
  89                     <div key={k || i} className="jobListCard--listitem">
  90                         <span className="jobListCard--parameter">{p.name}:</span> {p.value}
  91                     </div>
  92                 );
  93             });
  94         }
  95         let jobDetailsHTML = this.getJobDetails(this.props);
  96         return (
  97             <div className="jobListCard">
  98                 <div className="jobListCard--header">
  99                     <div className="jobListCard--name">
 100                         {props['job-name']}
 101                     </div>
 102                     <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
 103                 </div>
 104                 <div className="jobListCard--subtitle">
 105                     <span>ID: {this.props['job-id']}</span>
 106                 </div>
 107                 <div className="jobListCard--subtitle">
 108                     <Uptime initialTime={props['create-time']} run={false} /> ago
 109                 </div>
 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'}}>
 113                         {
 114                             parameterList(props)
 115                         }
 116                         {
 117                             props.vnfr && props.vnfr.map(function(v) {
 118                                 return v.primitive && v.primitive.map(function(p) {
 119                                     return parameterList(p, p.name)
 120                                 })
 121                             })
 122                         }
 123                     </div>
 124                 </div>
 125                 {jobDetailsHTML}
 126             </div>
 127         )
 128     }
 129     vnfrCardHTML(props) {
 130         let self = this;
 131         let jobListStatus = this.getStatusColor(props['execution-status'] );
 132         let hideParameters = this.state.hideParameters;
 133         return (
 134             <div className="jobListCard">
 135                 <div className="jobListCard--header">
 136                     <div className="jobListCard--name">
 137                         {props.name}
 138                     </div>
 139                     <div className={"jobListCard--status " + jobListStatus} title={jobListStatus.toUpperCase()}/>
 140                 </div>
 141                 <div className="jobListCard--subtitle">
 142                     <span>ID: {props['job-id']}</span>
 143                 </div>
 144                 <div className={"jobListCard--parameters"}>
 145                     <h4 onClick={self.toggleParametersView.bind(self, hideParameters)}>
 146                         { hideParameters ? 'Show' : 'Hide' } Parameters
 147                     </h4>
 148                     <div style={{display: hideParameters ? 'none' : 'initial'}}>
 149                         <div className={"jobListCard--list"}>
 150                             {
 151                                 props['parameter'] && props['parameter'].map((q, k) => {
 152                                         return (
 153                                             <div key={k} className="jobListCard--listitem">
 154                                                 <span className="jobListCard--parameter">{q.name}:</span> {q.value}
 155                                             </div>
 156                                         );
 157                                 })
 158                             }
 159                         </div>
 160                     </div>
 161                 </div>
 162             </div>
 163         )
 164     }
 165     render() {
 166         let html;
 167         let card = <div></div>
 168         if (this.props.type=="nsr") {
 169             card = this.nsrCardHTML(this.props);
 170         }
 171         if (this.props.type=="vnfr") {
 172             card = this.vnfrCardHTML(this.props);
 173         }
 174         return card;
 175     }
 176 }
 177 export default JobListCard;