4 * Copyright 2016 RIFT.IO Inc
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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
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';
32 import circleXImage from '../../node_modules/open-iconic/svg/circle-x.svg';
34 class LaunchpadCard extends React.Component {
38 shouldComponentUpdate(nextProps) {
42 this.context.router.push({pathname:'instantiate'});
47 let monitoring_params_data;
49 let metricsAndParameters = [];
51 let closeCardAction = this.props.closeButtonAction;
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}/>)
59 if(this.props.nsr && this.props.nsr["monitoring-param"]) {
60 monitoring_params_data = this.props.nsr["monitoring-param"];
62 monitoring_params_data = null;
65 if (this.props.nsr && this.props.nsr.deleting) {
70 // metricsAndParameters.push(<LaunchpadControls controlSets={this.props.nsr.nsControls} />)
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"]} />
79 if (this.props.nsr["epa-params"]) {
80 metricsAndParameters.push(<EpaParams key="epa-params" data={this.props.nsr["epa-params"]} />);
83 carousel = <MonitoringParamsCarousel component_list={monitoring_params_data} slideno={this.props.slideno}/>;
86 if(this.props.create){
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>
96 <a onClick={self.props.closeButtonAction}
97 className={"close-btn"}>
98 <img src={circleXImage} title="Close card" />
103 <DashboardCard className={'launchpadCard'} closeCard={closeButton}>
104 <LaunchpadHeader nsr={this.props.nsr} name={this.props.name} isActive={this.props.isActive} id={this.props.id}/>
107 <div className={'deletingIndicator'}>
108 <LoadingIndicator size={10} show={true} />
111 <div className="launchpadCard_content">
112 <div className="launchpadCard_title">
113 NSD: {this.props.nsr.nsd_name}
116 {metricsAndParameters}
125 LaunchpadCard.contextTypes = {
126 router: React.PropTypes.object
128 LaunchpadCard.propTypes = {
129 nsr: React.PropTypes.object,
130 isActive: React.PropTypes.bool,
131 name: React.PropTypes.string
133 LaunchpadCard.defaultProps = {
139 export class LpCardNfviMetrics extends React.Component {
145 Object.keys(o).map(function(k){
151 let mets = this.props.data;
154 <div style={{overflow: 'hidden'}}>
155 <div className="launchpadCard_title">
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>}
168 export class EpaParams extends React.Component {
174 let epa = this.props.data;
179 epaHTMLsub.push(buildParams(epa[k], count));
188 metrics.push(epaHTML);
191 function buildParams(epa, index) {
194 let checkForTotal = function checkForTotal(epa, html, i) {
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>)
199 html.push(<dt key={tCount + k + i}>{k}</dt>)
200 checkForTotal(epa[k], html, tCount)
205 checkForTotal(epa, html, index)
206 return (<dl key={"subTop-" + index}>{html}</dl>);
212 if(metrics.length == 0) display = <div className="empty">NO EPA PARAMS CONFIGURED</div>
214 <div style={{overflow: 'hidden'}}>
215 <div className="launchpadCard_title">
218 <div className={"launchpadCard_data-list" + ' ' + 'EPA-PARAMS'}>
228 export class NsrPrimitiveJobList extends React.Component {
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']
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>
244 <TreeView defaultCollapsed={true} className="vnfrJobs" nodeLabel="VNFR Jobs">
245 {job.vnfr.map(function(v, vindex) {
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) => {
253 <div>Name: {p.name}</div>
254 <div>Status: {p["execution-status"]}</div>
267 <div className="nsConfigPrimitiveJobList">
268 <div className="launchpadCard_title">
271 <div className="listView">
281 NsrPrimitiveJobList.defaultProps = {
285 export default LaunchpadCard