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
 102       html = (
 103         <DashboardCard className={'launchpadCard'} closeCard={closeButton}>
 104           <LaunchpadHeader hasAccess={this.props.hasAccess} nsr={this.props.nsr} name={this.props.name} isActive={this.props.isActive} id={this.props.id}/>
 105           {
 106           deleting ?
 107           <div className={'deletingIndicator'}>
 108             <LoadingIndicator size={10} show={true} />
 109           </div>
 110           :
 111           <div className="launchpadCard_content">
 112             <div className="launchpadCard_title">
 113               NSD: {this.props.nsr.nsd_name}
 114             </div>
 115             {carousel}
 116             {metricsAndParameters}
 117           </div>
 118           }
 119         </DashboardCard>
 120       );
 121     }
 122     return html;
 123   }
 124 }
 125 LaunchpadCard.contextTypes = {
 126     router: React.PropTypes.object
 127 };
 128 LaunchpadCard.propTypes = {
 129   nsr: React.PropTypes.object,
 130   isActive: React.PropTypes.bool,
 131   name: React.PropTypes.string
 132  };
 133 LaunchpadCard.defaultProps = {
 134   name: 'Loading...',
 135   data: {},
 136   isActive: false
 137 };
 138
 139 export class LpCardNfviMetrics extends React.Component {
 140   constructor(props) {
 141     super(props)
 142   }
 143   convertToArray(o){
 144     let a = [];
 145     Object.keys(o).map(function(k){
 146       a.push(o[k]);
 147     });
 148     return a;
 149   }
 150   render() {
 151     let mets = this.props.data;
 152     let self = this;
 153     let html = (
 154       <div style={{overflow: 'hidden'}}>
 155         <div className="launchpadCard_title">
 156           NFVI-METRICS
 157         </div>
 158         <div className="metricBars">
 159         { (mets && mets.length > 0 ) ? mets.map(function(m,i) {
 160           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})} />
 161         }) : <div className="empty"> NO NFVI METRICS CONFIGURED</div>}
 162         </div>
 163       </div>
 164     )
 165     return html;
 166   }
 167 }
 168 export class EpaParams extends React.Component {
 169   constructor(props) {
 170     super(props)
 171   }
 172   render() {
 173     let metrics =[];
 174     let epa = this.props.data;
 175     let count = 0;
 176     for(let k in epa) {
 177       let epaHTMLsub = [];
 178       let epaHTML;
 179       epaHTMLsub.push(buildParams(epa[k], count));
 180       epaHTML = (
 181         <li key={count + k}>
 182           <h1>{k}</h1>
 183           {
 184             epaHTMLsub
 185           }
 186         </li>
 187       );
 188       metrics.push(epaHTML);
 189       count++;
 190     }
 191     function buildParams(epa, index) {
 192       let html = [];
 193       let tCount = 0;
 194       let checkForTotal = function checkForTotal(epa, html, i) {
 195         for (let k in epa) {
 196           if("total" in epa[k]) {
 197             html.push(<dd key={"total" + tCount + k + i}>{k} : {epa[k].total} {(epa[k].total>1) ? 'vms' : 'vm'}</dd>)
 198           } else {
 199             html.push(<dt key={tCount + k + i}>{k}</dt>)
 200             checkForTotal(epa[k], html, tCount)
 201           }
 202           tCount++;
 203         }
 204       }
 205       checkForTotal(epa, html, index)
 206       return (<dl key={"subTop-" + index}>{html}</dl>);
 207     }
 208     let display = (<ul>
 209               {metrics}
 210             </ul>)
 211     // metrics = false;
 212     if(metrics.length == 0) display = <div className="empty">NO EPA PARAMS CONFIGURED</div>
 213     let html = (
 214       <div style={{overflow: 'hidden'}}>
 215         <div className="launchpadCard_title">
 216           EPA-PARAMS
 217         </div>
 218         <div className={"launchpadCard_data-list" + ' ' + 'EPA-PARAMS'}>
 219           {display}
 220         </div>
 221       </div>
 222     )
 223     return html;
 224   }
 225 }
 226
 227
 228 export class NsrPrimitiveJobList extends React.Component {
 229   constructor(props) {
 230     super(props)
 231   }
 232   render () {
 233     let tree = null;
 234     tree = this.props.jobs.sort(function(a,b){
 235       return b['job-id'] > a['job-id'];
 236     }).map(function(job, jindex) {
 237           let nsrJobLabel = job['job-name'] ? job['job-name'] + ': ' + job['job-status'] : "NSR Job ID:" + job['job-id'] + ': ' + job['job-status']
 238           return (
 239               <TreeView key={jindex} nodeLabel={nsrJobLabel} className="nsrJob" defaultCollapsed={true}>
 240                 <h4>NSR Job Name: {job['job-name']}</h4>
 241                 <h4>NSR Job ID: {job['job-id']}</h4>
 242                 <h4>NSR Job Status: {job['job-status']}</h4>
 243                   {job.vnfr ?
 244                   <TreeView defaultCollapsed={true} className="vnfrJobs" nodeLabel="VNFR Jobs">
 245                     {job.vnfr.map(function(v, vindex) {
 246                       return (
 247                         <TreeView key={vindex} nodeLabel="VNFR Job">
 248                           <h5>VNFR ID: {v.id}</h5>
 249                           <h5>VNFR Job Status: {v['vnf-job-status']}</h5>
 250                             {v.primitive && v.primitive.map((p, pindex) => {
 251                               return (
 252                                 <div key={pindex}>
 253                                   <div>Name: {p.name}</div>
 254                                   <div>Status: {p["execution-status"]}</div>
 255                                 </div>
 256                               )
 257                             })}
 258                         </TreeView>
 259                       )
 260                     })}
 261                   </TreeView>
 262                   :null}
 263               </TreeView>
 264           )
 265         });
 266     let html = (
 267       <div  className="nsConfigPrimitiveJobList">
 268         <div className="launchpadCard_title">
 269           JOB-LIST
 270         </div>
 271         <div className="listView">
 272           <div>
 273             {tree}
 274           </div>
 275         </div>
 276       </div>
 277     );
 278     return html;
 279   }
 280 }
 281 NsrPrimitiveJobList.defaultProps = {
 282   jobs: []
 283 }
 284
 285 export default LaunchpadCard