skyquake/plugins/launchpad/src/recordViewer/recordCard.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 {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 {
  35   constructor(props) {
  36     super(props)
  37   }
  38
  39   handleSelect = (index, last) => {
  40       // console.log('Selected tab is', index, 'last index is', last);
  41   }
  42
  43   render(){
  44     let html;
  45     let content;
  46     let card;
  47     let cardData = {};
  48     let components = [];
  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 = [];
  57
  58     let displayNSVirtualLinks = false;
  59     let nsVirtualLinksProps = {};
  60     let nsVirtualLinksComponent = null;
  61
  62     let tabList = [];
  63     let tabPanels = [];
  64
  65     switch(this.props.type) {
  66       case 'vnfr' :
  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">
  78                   JOB LIST
  79                 </div>
  80                 <div className="scrollContainer">
  81                 {
  82                   //Sort for recent on top
  83                     this.props.jobData.sort(function(a,b){
  84                     return parseInt(b['job-id']) - parseInt(a['job-id']);
  85                   }).map(function(job){
  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} />
  93                           })
  94                         }
  95                       })
  96                     }
  97                   })}
  98                 </div>
  99               </div>
 100             </div>
 101           );
 102         }
 103
 104         if (cardData['vdur']) {
 105           cardData['vdur'].map((vdur, index) => {
 106             let consoleLink = vdur['console-url'] ? 'Open VM Console' : 'None';
 107             consoleUrlsList.push(
 108               <li key={index}>
 109                 <h3>
 110                   {vdur['name'] + '-' + vdur.id.substr(0,4)}
 111                 </h3>
 112                 <a href={vdur['console-url']} target='_blank'>
 113                   {consoleLink}
 114                 </a>
 115               </li>
 116             )
 117           });
 118           consoleUrlsComponent = (
 119             <div className="consoleUrlsComponent">
 120               <ul className="consoleUrlsList">
 121                 {consoleUrlsList}
 122               </ul>
 123             </div>
 124           );
 125         }
 126         components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
 127         break;
 128       case 'nsr' :
 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']);
 136                   });
 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">
 143                   JOB LIST
 144                 </div>
 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} />
 149                     }
 150                   })
 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} />
 158                           })
 159                         }
 160                       })
 161                     }
 162                   }))
 163                 }
 164                 </div>
 165               </div>
 166             </div>
 167           );
 168         }
 169         if (displayScalingGroups) {
 170           scalingGroupComponent = (
 171             <div className="flex nsrScalingGroupContainer">
 172               <NsrScalingGroups data={scalingGroupsProps} />
 173             </div>
 174           );
 175         }
 176
 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} />
 184             </div>
 185           );
 186         };
 187
 188         components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
 189         break;
 190     }
 191     let mgmt_interface = cardData["dashboard-url"];
 192     let mgmtHTML;
 193     let metricsAndParams = [];
 194
 195
 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>
 200                           })}
 201                           </div>)
 202     metricsAndParams.push((<div key="nvfi" className="nfvi-metrics">
 203       { nfviMetrics }
 204       <EpaParams data={cardData["epa-params"]} />
 205     </div>))
 206
 207
 208
 209     if(mgmt_interface) {
 210       mgmtHTML = <a href={mgmt_interface} target="_blank">Open Application Dashboard</a>;
 211     }
 212       if(this.props.isLoading) {
 213         html = <DashboardCard className="loading" showHeader={true} title={cardData["short-name"]}><LoadingIndicator size={10} show={true} /></DashboardCard>
 214       } else {
 215         let glyphValue = (this.props.mmmrecordDetailsToggleValue) ? "chevron-left" : "chevron-right";
 216
 217         if (this.props.type == 'nsr') {
 218           tabList.push(
 219             <Tab key={cardData.id}>NS Data</Tab>
 220           )
 221         } else if (this.props.type == 'vnfr') {
 222           tabList.push(
 223             <Tab key={cardData.id}>VNF Data</Tab>
 224           )
 225         }
 226
 227         tabPanels.push(
 228           <TabPanel key={cardData.id + '-panel'}>
 229
 230               <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>MONITORING PARAMETERS</span>
 231                 {mgmtHTML}
 232               </div>
 233               {metricsAndParams}
 234               <div className="cardSectionFooter">
 235               </div>
 236           </TabPanel>
 237         )
 238
 239
 240         if (this.props.type == 'nsr') {
 241           if (scalingGroupComponent) {
 242             tabList.push(
 243             <Tab key={cardData.id + '-sg'}>Scaling Groups</Tab>
 244           );
 245
 246           tabPanels.push(
 247               <TabPanel key={cardData.id + '-sg-panel'}>
 248                   <div>
 249                     {scalingGroupComponent}
 250                   </div>
 251                   <div className="cardSectionFooter">
 252                   </div>
 253               </TabPanel>
 254             );
 255           }
 256           if(cardData.hasOwnProperty('vnfd-placement-group-maps')
 257              || cardData.hasOwnProperty('nsd-placement-group-maps')) {
 258             tabList.push(
 259                <Tab key='placement_groups'>
 260                 Placement
 261                </Tab>
 262              );
 263             tabPanels.push(
 264                <TabPanel key='placement_groups_panel'>
 265                   <div>
 266                     <PlacementGroupsInfo nsr={cardData} navRef={this.props.navRef} />
 267                   </div>
 268               </TabPanel>
 269              );
 270           }
 271         }
 272
 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'
 279           }
 280
 281           tabList.push(
 282             <Tab key={cardData.id + '-cp'}>{primitivesTabTitle}</Tab>
 283           );
 284
 285           tabPanels.push(
 286             <TabPanel key={cardData.id + '-cp-panel'}>
 287               <div className="configPrimitives">
 288                 {configPrimitiveComponent}
 289               </div>
 290               <div className="cardSectionFooter">
 291               </div>
 292             </TabPanel>
 293           )
 294         }
 295
 296         if (nsVirtualLinksComponent) {
 297           let nsVirtualLinksTabTitle = 'Virtual Links';
 298           tabList.push(
 299               <Tab key={cardData.id + '-nsvl'}>{nsVirtualLinksTabTitle}</Tab>
 300           );
 301
 302           tabPanels.push(
 303             <TabPanel key={cardData.id + '-nsvl-panel'}>
 304               <div className='nsVirtualLinks'>
 305                 {nsVirtualLinksComponent}
 306               </div>
 307               <div className="cardSectionFooter">
 308               </div>
 309             </TabPanel>
 310           );
 311         }
 312
 313         if (consoleUrlsComponent) {
 314           let consoleUrlsTabTitle = '';
 315           consoleUrlsTabTitle = 'VDU Console Links';
 316
 317           tabList.push(
 318             <Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
 319           );
 320
 321           tabPanels.push(
 322             <TabPanel key={cardData.id + '-cp-panel'}>
 323               <div className="consoleUrls">
 324                 {consoleUrlsComponent}
 325               </div>
 326               <div className="cardSectionFooter">
 327               </div>
 328             </TabPanel>
 329           )
 330         }
 331
 332         html = (
 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}>
 336                 <TabList>
 337                     {tabList}
 338                 </TabList>
 339                 {tabPanels}
 340               </Tabs>
 341             </DashboardCard>
 342         );
 343       }
 344     return html;
 345   }
 346 }
 347 RecordCard.defaultProps = {
 348   type: "default",
 349   data: {},
 350   isLoading: true,
 351   jobData: []
 352 }