X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2FrecordViewer%2FrecordCard.jsx;fp=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2FrecordViewer%2FrecordCard.jsx;h=e3c3dadceea8fe93e77b25f15d506dc531fe737a;hb=e29efc315df33d546237e270470916e26df391d6;hp=0000000000000000000000000000000000000000;hpb=9c5e457509ba5a1822c316635c6308874e61b4b9;p=osm%2FUI.git diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx new file mode 100644 index 000000000..e3c3dadce --- /dev/null +++ b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx @@ -0,0 +1,352 @@ + +/* + * + * 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 {Tab, Tabs, TabList, TabPanel} from 'react-tabs'; +import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx'; +import MonitoringParamsCarousel from '../monitoring_params/monitoringParamsCarousel.jsx'; +import VnfrCard from '../vnfr/vnfrCard.jsx'; +import {LaunchpadCard, LpCardNfviMetrics, EpaParams, NsrPrimitiveJobList} from '../launchpad_card/launchpadCard.jsx'; +import VnfrConfigPrimitives from '../launchpad_card/vnfrConfigPrimitives.jsx'; +import NsrConfigPrimitives from '../launchpad_card/nsrConfigPrimitives.jsx'; +import NsrScalingGroups from '../launchpad_card/nsrScalingGroups.jsx'; +import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx'; +import NfviMetricBars from 'widgets/nfvi-metric-bars/nfviMetricBars.jsx'; +import ParseMP from '../monitoring_params/monitoringParamComponents.js'; +import PlacementGroupsInfo from './placementGroupsInfo.jsx'; +import JobListCard from '../launchpad_card/jobListCard.jsx'; +import NSVirtualLinks from '../virtual_links/nsVirtualLinks.jsx'; +export default class RecordCard extends React.Component { + constructor(props) { + super(props) + } + + handleSelect = (index, last) => { + // console.log('Selected tab is', index, 'last index is', last); + } + + render(){ + let html; + let content; + let card; + let cardData = {}; + let components = []; + let configPrimitivesProps = {}; + let displayConfigPrimitives = false; + let configPrimitiveComponent = null; + let scalingGroupsProps = {}; + let displayScalingGroups = false; + let scalingGroupComponent = null; + let consoleUrlsComponent = null; + let consoleUrlsList = []; + + let displayNSVirtualLinks = false; + let nsVirtualLinksProps = {}; + let nsVirtualLinksComponent = null; + + let tabList = []; + let tabPanels = []; + + switch(this.props.type) { + case 'vnfr' : + cardData = this.props.data[0]; + // Disabling config primitives for VNF + configPrimitivesProps = [cardData]; + displayConfigPrimitives = cardData['service-primitives-present']; + if (displayConfigPrimitives) { + configPrimitiveComponent = ( +
+ + {/* */} +
+
+ JOB LIST +
+
+ { + //Sort for recent on top + this.props.jobData.sort(function(a,b){ + return parseInt(b['job-id']) - parseInt(a['job-id']); + }).map(function(job){ + //Return only vnfr configs + if(job["triggered-by"] == 'vnf-primitive') { + return job.vnfr.map(function(v){ + //That match the currently selected job id + if(v.id == cardData.id) { + return v.primitive.map(function(p, i) { + return + }) + } + }) + } + })} +
+
+
+ ); + } + + if (cardData['vdur']) { + cardData['vdur'].map((vdur, index) => { + let consoleLink = vdur['console-url'] ? 'Open VM Console' : 'None'; + consoleUrlsList.push( +
  • +

    + {vdur['name'] + '-' + vdur.id.substr(0,4)} +

    + + {consoleLink} + +
    • + ) + }); + consoleUrlsComponent = ( +
    + +
    + ); + } + components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id"); + break; + case 'nsr' : + cardData = this.props.data.nsrs[0]; + configPrimitivesProps = cardData; + scalingGroupsProps = cardData; + displayConfigPrimitives = cardData['service-primitive']; + displayScalingGroups = cardData['scaling-group-descriptor'] ? true : false; + let sortedJobs = this.props.jobData.sort(function(a,b){ + return parseInt(b['job-id']) - parseInt(a['job-id']); + }); + if (displayConfigPrimitives) { + configPrimitiveComponent = ( +
    + +
    +
    + JOB LIST +
    +
    + {sortedJobs.map(function(job, i){ + if(job["triggered-by"] == 'ns-primitive') { + return + } + }) + .concat(sortedJobs.map(function(job) { + if(!job.hasOwnProperty('job-name') && (job["triggered-by"] == 'ns-primitive')) { + return job.vnfr.map(function(v){ + //That match the currently selected job id + if(v.id == cardData.id) { + return v.primitive.map(function(p, i) { + return + }) + } + }) + } + })) + } +
    +
    +
    + ); + } + if (displayScalingGroups) { + scalingGroupComponent = ( +
    + +
    + ); + } + + // Virtual Links tab content + displayNSVirtualLinks = true; + nsVirtualLinksProps = cardData; + if (displayNSVirtualLinks) { + nsVirtualLinksComponent = ( +
    + +
    + ); + }; + + components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id"); + break; + } + let mgmt_interface = cardData["dashboard-url"]; + let mgmtHTML; + let metricsAndParams = []; + + + let nfviMetrics = ; + metricsAndParams.push(
    + {components.sort().map(function(c, k) { + return
    {c.title}{c.component}
    + })} +
    ) + metricsAndParams.push((
    + { nfviMetrics } + +
    )) + + + + if(mgmt_interface) { + mgmtHTML = Open Application Dashboard; + } + if(this.props.isLoading) { + html = + } else { + let glyphValue = (this.props.mmmrecordDetailsToggleValue) ? "chevron-left" : "chevron-right"; + + if (this.props.type == 'nsr') { + tabList.push( + NS Data + ) + } else if (this.props.type == 'vnfr') { + tabList.push( + VNF Data + ) + } + + tabPanels.push( + + +
    MONITORING PARAMETERS + {mgmtHTML} +
    + {metricsAndParams} +
    +
    +     + ) + + + if (this.props.type == 'nsr') { + if (scalingGroupComponent) { + tabList.push( + Scaling Groups + ); + + tabPanels.push( + +
    + {scalingGroupComponent} +
    +
    +
    +     + ); + } + if(cardData.hasOwnProperty('vnfd-placement-group-maps') + || cardData.hasOwnProperty('nsd-placement-group-maps')) { + tabList.push( + + Placement + + ); + tabPanels.push( + +
    + +
    +     + ); + } + } + + if (configPrimitiveComponent) { + let primitivesTabTitle = ''; + if (this.props.type == 'nsr') { + primitivesTabTitle = 'Service Primitive'; + } else if (this.props.type == 'vnfr') { + primitivesTabTitle = 'Service Primitive' + } + + tabList.push( + {primitivesTabTitle} + ); + + tabPanels.push( + +
    + {configPrimitiveComponent} +
    +
    +
    +     + ) + } + + if (nsVirtualLinksComponent) { + let nsVirtualLinksTabTitle = 'Virtual Links'; + tabList.push( + {nsVirtualLinksTabTitle} + ); + + tabPanels.push( + +
    + {nsVirtualLinksComponent} +
    +
    +
    +     + ); + } + + if (consoleUrlsComponent) { + let consoleUrlsTabTitle = ''; + consoleUrlsTabTitle = 'VDU Console Links'; + + tabList.push( + {consoleUrlsTabTitle} + ); + + tabPanels.push( + +
    + {consoleUrlsComponent} +
    +
    +
    +     + ) + } + + html = ( + + + + + {tabList} + + {tabPanels} + + + ); + } + return html; + } +} +RecordCard.defaultProps = { + type: "default", + data: {}, + isLoading: true, + jobData: [] +}