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

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
  21 import './launchpad_card.scss';
  22 import LaunchpadNSInfo from './launchpadNSInfo.jsx';
  23 import LaunchpadHeader from './launchpadHeader.jsx';
  24 import MonitoringParamsCarousel from '../monitoring_params/monitoringParamsCarousel.jsx';
  25 import LaunchpadControls from './launchpadControls.jsx';
  26 import NfviMetricBars from 'widgets/nfvi-metric-bars/nfviMetricBars.jsx';
  27 import MetricBarGroup from 'widgets/metric-bars/metricBarGroup.jsx';
  28 import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
  29 import RecordViewStore from '../recordViewer/recordViewStore.js';
  30 import TreeView from 'react-treeview';
  31
  32 import circleXImage from '../../node_modules/open-iconic/svg/circle-x.svg';
  33
  34 class LaunchpadCard extends React.Component {
  35   constructor(props) {
  36     super(props);
  37   }
  38   shouldComponentUpdate(nextProps) {
  39     return true;
  40   }
  41   openLaunch = () => {
  42     this.context.router.push({pathname:'instantiate'});
  43   }
  44   render() {
  45     let html;
  46     let metrics = '';
  47     let monitoring_params_data;
  48     let deleting = false;
  49     let metricsAndParameters = [];
  50     let carousel = ''
  51     let closeCardAction = this.props.closeButtonAction;
  52
  53     if(this.props.nsr && this.props.nsr.data) {
  54       metrics = this.props.nsr.data.map((info, index)=> {
  55           return (<LaunchpadNSInfo  key={index} name={info.name} data={info.data}/>)
  56       });
  57     }
  58     // debugger
  59     if(this.props.nsr && this.props.nsr["monitoring-param"]) {
  60       monitoring_params_data = this.props.nsr["monitoring-param"];
  61     } else {
  62       monitoring_params_data = null;
  63     }
  64
  65     if (this.props.nsr && this.props.nsr.deleting) {
  66       deleting = true;
  67     }
  68
  69     if(true) {
  70       // metricsAndParameters.push(<LaunchpadControls controlSets={this.props.nsr.nsControls} />)
  71       if (this.props.nsr) {
  72         if (this.props.nsr["nfvi-metrics"]) {
  73           metricsAndParameters.push((
  74                                      <div className="nfvi-metrics" key="nfviMetrics">
  75                                       <LpCardNfviMetrics key="nfvi-metrics" name="NFVI METRICS" id={this.props.id} data={this.props.nsr["nfvi-metrics"]} />
  76                                      </div>
  77                                      ))
  78         }
  79         if (this.props.nsr["epa-params"]) {
  80           metricsAndParameters.push(<EpaParams key="epa-params" data={this.props.nsr["epa-params"]} />);
  81         }
  82       }
  83       carousel = <MonitoringParamsCarousel component_list={monitoring_params_data} slideno={this.props.slideno}/>;
  84     }
  85
  86     if(this.props.create){
  87       html = (
  88         <DashboardCard>
  89           <div className={'launchpadCard_launch'} onClick={this.openLaunch} style={{cursor:'pointer'}}>
  90             <img src={require("style/img/launchpad-add-fleet-icon.png")}/> Instantiate Network Service </div>
  91         </DashboardCard>
  92         );
  93     } else {
  94       let self = this;
  95       let closeButton = (
  96             <a onClick={self.props.closeButtonAction}
  97               className={"close-btn"}>
  98               <img src={circleXImage} title="Close card" />
  99               </a>
 100       );
 101       if (this.props.hasAccess) {
 102         closeButton = null;
 103       }
 104       html = (
 105         <DashboardCard className={'launchpadCard'} closeCard={closeButton}>
 106           <LaunchpadHeader nsr={this.props.nsr} name={this.props.name} isActive={this.props.isActive} id={this.props.id}/>
 107           {
 108           deleting ?
 109           <div className={'deletingIndicator'}>
 110             <LoadingIndicator size={10} show={true} />
 111           </div>
 112           :
 113           <div className="launchpadCard_content">
 114             <div className="launchpadCard_title">
 115               NSD: {this.props.nsr.nsd_name}
 116             </div>
 117             {carousel}
 118             {metricsAndParameters}
 119           </div>
 120           }
 121         </DashboardCard>
 122       );
 123     }
 124     return html;
 125   }
 126 }
 127 LaunchpadCard.contextTypes = {
 128     router: React.PropTypes.object
 129 };
 130 LaunchpadCard.propTypes = {
 131   nsr: React.PropTypes.object,
 132   isActive: React.PropTypes.bool,
 133   name: React.PropTypes.string
 134  };
 135 LaunchpadCard.defaultProps = {
 136   name: 'Loading...',
 137   data: {},
 138   isActive: false
 139 };
 140
 141 export class LpCardNfviMetrics extends React.Component {
 142   constructor(props) {
 143     super(props)
 144   }
 145   convertToArray(o){
 146     let a = [];
 147     Object.keys(o).map(function(k){
 148       a.push(o[k]);
 149     });
 150     return a;
 151   }
 152   render() {
 153     let mets = this.props.data;
 154     let self = this;
 155     let html = (
 156       <div style={{overflow: 'hidden'}}>
 157         <div className="launchpadCard_title">
 158           NFVI-METRICS
 159         </div>
 160         <div className="metricBars">
 161         { (mets && mets.length > 0 ) ? mets.map(function(m,i) {
 162           return <MetricBarGroup key={i} index={i} title={m.title} lp_id={self.props.id} data={m.data.sort(function(a,b){return a.id > b.id})} />
 163         }) : <div className="empty"> NO NFVI METRICS CONFIGURED</div>}
 164         </div>
 165       </div>
 166     )
 167     return html;
 168   }
 169 }
 170 export class EpaParams extends React.Component {
 171   constructor(props) {
 172     super(props)
 173   }
 174   render() {
 175     let metrics =[];
 176     let epa = this.props.data;
 177     let count = 0;
 178     for(let k in epa) {
 179       let epaHTMLsub = [];
 180       let epaHTML;
 181       epaHTMLsub.push(buildParams(epa[k], count));
 182       epaHTML = (
 183         <li key={count + k}>
 184           <h1>{k}</h1>
 185           {
 186             epaHTMLsub
 187           }
 188         </li>
 189       );
 190       metrics.push(epaHTML);
 191       count++;
 192     }
 193     function buildParams(epa, index) {
 194       let html = [];
 195       let tCount = 0;
 196       let checkForTotal = function checkForTotal(epa, html, i) {
 197         for (let k in epa) {
 198           if("total" in epa[k]) {
 199             html.push(<dd key={"total" + tCount + k + i}>{k} : {epa[k].total} {(epa[k].total>1) ? 'vms' : 'vm'}</dd>)
 200           } else {
 201             html.push(<dt key={tCount + k + i}>{k}</dt>)
 202             checkForTotal(epa[k], html, tCount)
 203           }
 204           tCount++;
 205         }
 206       }
 207       checkForTotal(epa, html, index)
 208       return (<dl key={"subTop-" + index}>{html}</dl>);
 209     }
 210     let display = (<ul>
 211               {metrics}
 212             </ul>)
 213     // metrics = false;
 214     if(metrics.length == 0) display = <div className="empty">NO EPA PARAMS CONFIGURED</div>
 215     let html = (
 216       <div style={{overflow: 'hidden'}}>
 217         <div className="launchpadCard_title">
 218           EPA-PARAMS
 219         </div>
 220         <div className={"launchpadCard_data-list" + ' ' + 'EPA-PARAMS'}>
 221           {display}
 222         </div>
 223       </div>
 224     )
 225     return html;
 226   }
 227 }
 228
 229
 230 export class NsrPrimitiveJobList extends React.Component {
 231   constructor(props) {
 232     super(props)
 233   }
 234   render () {
 235     let tree = null;
 236     tree = this.props.jobs.sort(function(a,b){
 237       return b['job-id'] > a['job-id'];
 238     }).map(function(job, jindex) {
 239           let nsrJobLabel = job['job-name'] ? job['job-name'] + ': ' + job['job-status'] : "NSR Job ID:" + job['job-id'] + ': ' + job['job-status']
 240           return (
 241               <TreeView key={jindex} nodeLabel={nsrJobLabel} className="nsrJob" defaultCollapsed={true}>
 242                 <h4>NSR Job Name: {job['job-name']}</h4>
 243                 <h4>NSR Job ID: {job['job-id']}</h4>
 244                 <h4>NSR Job Status: {job['job-status']}</h4>
 245                   {job.vnfr ?
 246                   <TreeView defaultCollapsed={true} className="vnfrJobs" nodeLabel="VNFR Jobs">
 247                     {job.vnfr.map(function(v, vindex) {
 248                       return (
 249                         <TreeView key={vindex} nodeLabel="VNFR Job">
 250                           <h5>VNFR ID: {v.id}</h5>
 251                           <h5>VNFR Job Status: {v['vnf-job-status']}</h5>
 252                             {v.primitive && v.primitive.map((p, pindex) => {
 253                               return (
 254                                 <div key={pindex}>
 255                                   <div>Name: {p.name}</div>
 256                                   <div>Status: {p["execution-status"]}</div>
 257                                 </div>
 258                               )
 259                             })}
 260                         </TreeView>
 261                       )
 262                     })}
 263                   </TreeView>
 264                   :null}
 265               </TreeView>
 266           )
 267         });
 268     let html = (
 269       <div  className="nsConfigPrimitiveJobList">
 270         <div className="launchpadCard_title">
 271           JOB-LIST
 272         </div>
 273         <div className="listView">
 274           <div>
 275             {tree}
 276           </div>
 277         </div>
 278       </div>
 279     );
 280     return html;
 281   }
 282 }
 283 NsrPrimitiveJobList.defaultProps = {
 284   jobs: []
 285 }
 286
 287 export default LaunchpadCard