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 {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
21 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
22 import MonitoringParamsCarousel from '../monitoring_params/monitoringParamsCarousel.jsx';
23 import VnfrCard from '../vnfr/vnfrCard.jsx';
24 import {LaunchpadCard, LpCardNfviMetrics, EpaParams, NsrPrimitiveJobList} from '../launchpad_card/launchpadCard.jsx';
25 import VnfrConfigPrimitives from '../launchpad_card/vnfrConfigPrimitives.jsx';
26 import NsrConfigPrimitives from '../launchpad_card/nsrConfigPrimitives.jsx';
27 import NsrScalingGroups from '../launchpad_card/nsrScalingGroups.jsx';
28 import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
29 import NfviMetricBars from 'widgets/nfvi-metric-bars/nfviMetricBars.jsx';
30 import ParseMP from '../monitoring_params/monitoringParamComponents.js';
31 import PlacementGroupsInfo from './placementGroupsInfo.jsx';
32 import JobListCard from '../launchpad_card/jobListCard.jsx';
33 import NSVirtualLinks from '../virtual_links/nsVirtualLinks.jsx';
34 export default class RecordCard extends React.Component {
39 handleSelect = (index, last) => {
40 // console.log('Selected tab is', index, 'last index is', last);
49 let configPrimitivesProps = {};
50 let displayConfigPrimitives = false;
51 let configPrimitiveComponent = null;
52 let scalingGroupsProps = {};
53 let displayScalingGroups = false;
54 let scalingGroupComponent = null;
55 let consoleUrlsComponent = null;
56 let consoleUrlsList = [];
58 let displayNSVirtualLinks = false;
59 let nsVirtualLinksProps = {};
60 let nsVirtualLinksComponent = null;
65 switch(this.props.type) {
67 cardData = this.props.data[0];
68 // Disabling config primitives for VNF
69 configPrimitivesProps = [cardData];
70 displayConfigPrimitives = cardData['service-primitives-present'];
71 if (displayConfigPrimitives) {
72 configPrimitiveComponent = (
73 <div className="flex vnfrConfigPrimitiveContainer">
74 <VnfrConfigPrimitives data={configPrimitivesProps} />
75 {/* <NsrPrimitiveJobList jobs={cardData['config-agent-job']}/> */}
76 <div style={{display:'flex', flexDirection: 'column', flex: '1 1 40%'}}>
77 <div className="launchpadCard_title">
80 <div className="scrollContainer">
82 //Sort for recent on top
83 this.props.jobData.sort(function(a,b){
84 return parseInt(b['job-id']) - parseInt(a['job-id']);
86 //Return only vnfr configs
87 if(job["triggered-by"] == 'vnf-primitive') {
88 return job.vnfr.map(function(v){
89 //That match the currently selected job id
90 if(v.id == cardData.id) {
91 return v.primitive.map(function(p, i) {
92 return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={i} {...p} />
104 if (cardData['vdur']) {
105 cardData['vdur'].map((vdur, index) => {
106 let consoleLink = vdur['console-url'] ? 'Open VM Console' : 'None';
107 consoleUrlsList.push(
110 {vdur['name'] + '-' + vdur.id.substr(0,4)}
112 <a href={vdur['console-url']} target='_blank'>
118 consoleUrlsComponent = (
119 <div className="consoleUrlsComponent">
120 <ul className="consoleUrlsList">
126 components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
129 cardData = this.props.data.nsrs[0];
130 configPrimitivesProps = cardData;
131 scalingGroupsProps = cardData;
132 displayConfigPrimitives = cardData['service-primitive'];
133 displayScalingGroups = cardData['scaling-group-descriptor'] ? true : false;
134 let sortedJobs = this.props.jobData.sort(function(a,b){
135 return parseInt(b['job-id']) - parseInt(a['job-id']);
137 if (displayConfigPrimitives) {
138 configPrimitiveComponent = (
139 <div className="flex nsConfigPrimitiveContainer">
140 <NsrConfigPrimitives data={configPrimitivesProps} />
141 <div style={{display:'flex', flexDirection: 'column', flex: '1 1 40%'}}>
142 <div className="launchpadCard_title">
145 <div className="scrollContainer">
146 {sortedJobs.map(function(job, i){
147 if(job["triggered-by"] == 'ns-primitive') {
148 return <JobListCard type="nsr" job-id={job['job-id']} cardData={cardData} key={i} {...job} />
151 .concat(sortedJobs.map(function(job) {
152 if(!job.hasOwnProperty('job-name') && (job["triggered-by"] == 'ns-primitive')) {
153 return job.vnfr.map(function(v){
154 //That match the currently selected job id
155 if(v.id == cardData.id) {
156 return v.primitive.map(function(p, i) {
157 return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={i} {...p} />
169 if (displayScalingGroups) {
170 scalingGroupComponent = (
171 <div className="flex nsrScalingGroupContainer">
172 <NsrScalingGroups data={scalingGroupsProps} />
177 // Virtual Links tab content
178 displayNSVirtualLinks = true;
179 nsVirtualLinksProps = cardData;
180 if (displayNSVirtualLinks) {
181 nsVirtualLinksComponent = (
182 <div className='flex nsVirtualLinksContainer'>
183 <NSVirtualLinks data={nsVirtualLinksProps} />
188 components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
191 let mgmt_interface = cardData["dashboard-url"];
193 let metricsAndParams = [];
196 let nfviMetrics = <LpCardNfviMetrics data={cardData["nfvi-metrics"]} />;
197 metricsAndParams.push(<div className="monitoringParams" key="mp">
198 {components.sort().map(function(c, k) {
199 return <div key={k} className="mpSlide">{c.title}{c.component}</div>
202 metricsAndParams.push((<div key="nvfi" className="nfvi-metrics">
204 <EpaParams data={cardData["epa-params"]} />
210 mgmtHTML = <a href={mgmt_interface} target="_blank">Open Application Dashboard</a>;
212 if(this.props.isLoading) {
213 html = <DashboardCard className="loading" showHeader={true} title={cardData["short-name"]}><LoadingIndicator size={10} show={true} /></DashboardCard>
215 let glyphValue = (this.props.mmmrecordDetailsToggleValue) ? "chevron-left" : "chevron-right";
217 if (this.props.type == 'nsr') {
219 <Tab key={cardData.id}>NS Data</Tab>
221 } else if (this.props.type == 'vnfr') {
223 <Tab key={cardData.id}>VNF Data</Tab>
228 <TabPanel key={cardData.id + '-panel'}>
230 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>MONITORING PARAMETERS</span>
234 <div className="cardSectionFooter">
240 if (this.props.type == 'nsr') {
241 if (scalingGroupComponent) {
243 <Tab key={cardData.id + '-sg'}>Scaling Groups</Tab>
247 <TabPanel key={cardData.id + '-sg-panel'}>
249 {scalingGroupComponent}
251 <div className="cardSectionFooter">
256 if(cardData.hasOwnProperty('vnfd-placement-group-maps')
257 || cardData.hasOwnProperty('nsd-placement-group-maps')) {
259 <Tab key='placement_groups'>
264 <TabPanel key='placement_groups_panel'>
266 <PlacementGroupsInfo nsr={cardData} navRef={this.props.navRef} />
273 if (configPrimitiveComponent) {
274 let primitivesTabTitle = '';
275 if (this.props.type == 'nsr') {
276 primitivesTabTitle = 'Service Primitive';
277 } else if (this.props.type == 'vnfr') {
278 primitivesTabTitle = 'Service Primitive'
282 <Tab key={cardData.id + '-cp'}>{primitivesTabTitle}</Tab>
286 <TabPanel key={cardData.id + '-cp-panel'}>
287 <div className="configPrimitives">
288 {configPrimitiveComponent}
290 <div className="cardSectionFooter">
296 if (nsVirtualLinksComponent) {
297 let nsVirtualLinksTabTitle = 'Virtual Links';
299 <Tab key={cardData.id + '-nsvl'}>{nsVirtualLinksTabTitle}</Tab>
303 <TabPanel key={cardData.id + '-nsvl-panel'}>
304 <div className='nsVirtualLinks'>
305 {nsVirtualLinksComponent}
307 <div className="cardSectionFooter">
313 if (consoleUrlsComponent) {
314 let consoleUrlsTabTitle = '';
315 consoleUrlsTabTitle = 'VDU Console Links';
318 <Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
322 <TabPanel key={cardData.id + '-cp-panel'}>
323 <div className="consoleUrls">
324 {consoleUrlsComponent}
326 <div className="cardSectionFooter">
333 <DashboardCard className="recordCard" showHeader={true} title={cardData["short-name"]}>
334 <a onClick={this.props.recordDetailsToggleFn} className={"recordViewToggle " + (this.props.recordDetailsToggleValue ? "on": null)}><span className="oi" data-glyph={glyphValue} title="Toggle Details Panel" aria-hidden="true"></span></a>
335 <Tabs onSelect={this.handleSelect}>
347 RecordCard.defaultProps = {