X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2Flaunchpad_card%2FlaunchpadCard.jsx;fp=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2Flaunchpad_card%2FlaunchpadCard.jsx;h=e68a65924a5d036149961185b7c2b8bd03f8e1aa;hp=0000000000000000000000000000000000000000;hb=e29efc315df33d546237e270470916e26df391d6;hpb=9c5e457509ba5a1822c316635c6308874e61b4b9

diff --git a/skyquake/plugins/launchpad/src/launchpad_card/launchpadCard.jsx b/skyquake/plugins/launchpad/src/launchpad_card/launchpadCard.jsx
new file mode 100644
index 000000000..e68a65924
--- /dev/null
+++ b/skyquake/plugins/launchpad/src/launchpad_card/launchpadCard.jsx
@@ -0,0 +1,285 @@
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+import React from 'react';
+import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
+import './launchpad_card.scss';
+import LaunchpadNSInfo from './launchpadNSInfo.jsx';
+import LaunchpadHeader from './launchpadHeader.jsx';
+import MonitoringParamsCarousel from '../monitoring_params/monitoringParamsCarousel.jsx';
+import LaunchpadControls from './launchpadControls.jsx';
+import NfviMetricBars from 'widgets/nfvi-metric-bars/nfviMetricBars.jsx';
+import MetricBarGroup from 'widgets/metric-bars/metricBarGroup.jsx';
+import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
+import RecordViewStore from '../recordViewer/recordViewStore.js';
+import TreeView from 'react-treeview';
+
+import circleXImage from '../../node_modules/open-iconic/svg/circle-x.svg';
+
+class LaunchpadCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  shouldComponentUpdate(nextProps) {
+    return true;
+  }
+  openLaunch = () => {
+    this.context.router.push({pathname:'instantiate'});
+  }
+  render() {
+    let html;
+    let metrics = '';
+    let monitoring_params_data;
+    let deleting = false;
+    let metricsAndParameters = [];
+    let carousel = ''
+    let closeCardAction = this.props.closeButtonAction;
+
+    if(this.props.nsr && this.props.nsr.data) {
+      metrics = this.props.nsr.data.map((info, index)=> {
+          return (<LaunchpadNSInfo  key={index} name={info.name} data={info.data}/>)
+      });
+    }
+    // debugger
+    if(this.props.nsr && this.props.nsr["monitoring-param"]) {
+      monitoring_params_data = this.props.nsr["monitoring-param"];
+    } else {
+      monitoring_params_data = null;
+    }
+
+    if (this.props.nsr && this.props.nsr.deleting) {
+      deleting = true;
+    }
+
+    if(true) {
+      // metricsAndParameters.push(<LaunchpadControls controlSets={this.props.nsr.nsControls} />)
+      if (this.props.nsr) {
+        if (this.props.nsr["nfvi-metrics"]) {
+          metricsAndParameters.push((
+                                     <div className="nfvi-metrics" key="nfviMetrics">
+                                      <LpCardNfviMetrics key="nfvi-metrics" name="NFVI METRICS" id={this.props.id} data={this.props.nsr["nfvi-metrics"]} />
+                                     </div>
+                                     ))
+        }
+        if (this.props.nsr["epa-params"]) {
+          metricsAndParameters.push(<EpaParams key="epa-params" data={this.props.nsr["epa-params"]} />);
+        }
+      }
+      carousel = <MonitoringParamsCarousel component_list={monitoring_params_data} slideno={this.props.slideno}/>;
+    }
+
+    if(this.props.create){
+      html = (
+        <DashboardCard>
+          <div className={'launchpadCard_launch'} onClick={this.openLaunch} style={{cursor:'pointer'}}>
+            <img src={require("style/img/launchpad-add-fleet-icon.png")}/> Instantiate Network Service </div>
+        </DashboardCard>
+        );
+    } else {
+      let self = this;
+      let closeButton = (
+            <a onClick={self.props.closeButtonAction}
+              className={"close-btn"}>
+              <img src={circleXImage} title="Close card" />
+              </a>
+      );
+
+      html = (
+        <DashboardCard className={'launchpadCard'} closeCard={closeButton}>
+          <LaunchpadHeader nsr={this.props.nsr} name={this.props.name} isActive={this.props.isActive} id={this.props.id}/>
+          {
+          deleting ?
+          <div className={'deletingIndicator'}>
+            <LoadingIndicator size={10} show={true} />
+          </div>
+          :
+          <div className="launchpadCard_content">
+            <div className="launchpadCard_title">
+              NSD: {this.props.nsr.nsd_name}
+            </div>
+            {carousel}
+            {metricsAndParameters}
+          </div>
+          }
+        </DashboardCard>
+      );
+    }
+    return html;
+  }
+}
+LaunchpadCard.contextTypes = {
+    router: React.PropTypes.object
+};
+LaunchpadCard.propTypes = {
+  nsr: React.PropTypes.object,
+  isActive: React.PropTypes.bool,
+  name: React.PropTypes.string
+ };
+LaunchpadCard.defaultProps = {
+  name: 'Loading...',
+  data: {},
+  isActive: false
+};
+
+export class LpCardNfviMetrics extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  convertToArray(o){
+    let a = [];
+    Object.keys(o).map(function(k){
+      a.push(o[k]);
+    });
+    return a;
+  }
+  render() {
+    let mets = this.props.data;
+    let self = this;
+    let html = (
+      <div style={{overflow: 'hidden'}}>
+        <div className="launchpadCard_title">
+          NFVI-METRICS
+        </div>
+        <div className="metricBars">
+        { (mets && mets.length > 0 ) ? mets.map(function(m,i) {
+          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})} />
+        }) : <div className="empty"> NO NFVI METRICS CONFIGURED</div>}
+        </div>
+      </div>
+    )
+    return html;
+  }
+}
+export class EpaParams extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    let metrics =[];
+    let epa = this.props.data;
+    let count = 0;
+    for(let k in epa) {
+      let epaHTMLsub = [];
+      let epaHTML;
+      epaHTMLsub.push(buildParams(epa[k], count));
+      epaHTML = (
+        <li key={count + k}>
+          <h1>{k}</h1>
+          {
+            epaHTMLsub
+          }
+        </li>
+      );
+      metrics.push(epaHTML);
+      count++;
+    }
+    function buildParams(epa, index) {
+      let html = [];
+      let tCount = 0;
+      let checkForTotal = function checkForTotal(epa, html, i) {
+        for (let k in epa) {
+          if("total" in epa[k]) {
+            html.push(<dd key={"total" + tCount + k + i}>{k} : {epa[k].total} {(epa[k].total>1) ? 'vms' : 'vm'}</dd>)
+          } else {
+            html.push(<dt key={tCount + k + i}>{k}</dt>)
+            checkForTotal(epa[k], html, tCount)
+          }
+          tCount++;
+        }
+      }
+      checkForTotal(epa, html, index)
+      return (<dl key={"subTop-" + index}>{html}</dl>);
+    }
+    let display = (<ul>
+              {metrics}
+            </ul>)
+    // metrics = false;
+    if(metrics.length == 0) display = <div className="empty">NO EPA PARAMS CONFIGURED</div>
+    let html = (
+      <div style={{overflow: 'hidden'}}>
+        <div className="launchpadCard_title">
+          EPA-PARAMS
+        </div>
+        <div className={"launchpadCard_data-list" + ' ' + 'EPA-PARAMS'}>
+          {display}
+        </div>
+      </div>
+    )
+    return html;
+  }
+}
+
+
+export class NsrPrimitiveJobList extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render () {
+    let tree = null;
+    tree = this.props.jobs.sort(function(a,b){
+      return b['job-id'] > a['job-id'];
+    }).map(function(job, jindex) {
+          let nsrJobLabel = job['job-name'] ? job['job-name'] + ': ' + job['job-status'] : "NSR Job ID:" + job['job-id'] + ': ' + job['job-status']
+          return (
+              <TreeView key={jindex} nodeLabel={nsrJobLabel} className="nsrJob" defaultCollapsed={true}>
+                <h4>NSR Job Name: {job['job-name']}</h4>
+                <h4>NSR Job ID: {job['job-id']}</h4>
+                <h4>NSR Job Status: {job['job-status']}</h4>
+                  {job.vnfr ?
+                  <TreeView defaultCollapsed={true} className="vnfrJobs" nodeLabel="VNFR Jobs">
+                    {job.vnfr.map(function(v, vindex) {
+                      return (
+                        <TreeView key={vindex} nodeLabel="VNFR Job">
+                          <h5>VNFR ID: {v.id}</h5>
+                          <h5>VNFR Job Status: {v['vnf-job-status']}</h5>
+                            {v.primitive && v.primitive.map((p, pindex) => {
+                              return (
+                                <div key={pindex}>
+                                  <div>Name: {p.name}</div>
+                                  <div>Status: {p["execution-status"]}</div>
+                                </div>
+                              )
+                            })}
+                        </TreeView>
+                      )
+                    })}
+                  </TreeView>
+                  :null}
+              </TreeView>
+          )
+        });
+    let html = (
+      <div  className="nsConfigPrimitiveJobList">
+        <div className="launchpadCard_title">
+          JOB-LIST
+        </div>
+        <div className="listView">
+          <div>
+            {tree}
+          </div>
+        </div>
+      </div>
+    );
+    return html;
+  }
+}
+NsrPrimitiveJobList.defaultProps = {
+  jobs: []
+}
+
+export default LaunchpadCard