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 import LaunchpadFleetStore from '../launchpadFleetStore.js';
  35
  36 export default class RecordCard extends React.Component {
  37   constructor(props) {
  38     super(props)
  39   }
  40
  41   handleSelect = (index, last) => {
  42       // console.log('Selected tab is', index, 'last index is', last);
  43   }
  44
  45   openConsole = (url, event) => {
  46     event.preventDefault();
  47     LaunchpadFleetStore.getVDUConsoleLink(url);
  48   }
  49
  50   render(){
  51     let self = this;
  52     let html;
  53     let content;
  54     let card;
  55     let cardData = {};
  56     let components = [];
  57     let configPrimitivesProps = {};
  58     let displayConfigPrimitives = false;
  59     let configPrimitiveComponent = null;
  60     let scalingGroupsProps = {};
  61     let displayScalingGroups = false;
  62     let scalingGroupComponent = null;
  63     let consoleUrlsComponent = null;
  64     let consoleUrlsList = [];
  65
  66     let displayNSVirtualLinks = false;
  67     let nsVirtualLinksProps = {};
  68     let nsVirtualLinksComponent = null;
  69
  70     let tabList = [];
  71     let tabPanels = [];
  72
  73     let notice = null;
  74
  75     switch(this.props.type) {
  76       case 'vnfr' :
  77         cardData = this.props.data[0];
  78         // Disabling config primitives for VNF
  79         configPrimitivesProps = [cardData];
  80         displayConfigPrimitives = cardData['service-primitives-present'];
  81         if (displayConfigPrimitives) {
  82           configPrimitiveComponent = (
  83             <div className="flex vnfrConfigPrimitiveContainer">
  84               <VnfrConfigPrimitives data={configPrimitivesProps} />
  85             {/* <NsrPrimitiveJobList jobs={cardData['config-agent-job']}/> */}
  86             <div style={{display:'flex', flexDirection: 'column',     flex: '1 1 40%'}}>
  87                 <div className="launchpadCard_title">
  88                   JOB LIST
  89                 </div>
  90                 <div className="scrollContainer">
  91                 {
  92                   //Sort for recent on top
  93                     this.props.jobData.sort(function(a,b){
  94                     return parseInt(b['job-id']) - parseInt(a['job-id']);
  95                   }).map(function(job){
  96                     //Return only vnfr configs
  97                     if(job["triggered-by"] == 'vnf-primitive') {
  98                       return job.vnfr.map(function(v){
  99                         //That match the currently selected job id
 100                         if(v.id == cardData.id) {
 101                           return v.primitive.map(function(p, i) {
 102                             return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={i} {...p} />
 103                           })
 104                         }
 105                       })
 106                     }
 107                   })}
 108                 </div>
 109               </div>
 110             </div>
 111           );
 112         }
 113
 114         if (cardData['vdur']) {
 115           cardData['vdur'].map((vdur, index) => {
 116             let consoleLink = vdur['console-url'] ? 'Obtain Token And Open VM Console' : 'None';
 117             consoleUrlsList.push(
 118               <li key={index}>
 119                 <h3>
 120                   {vdur['name'] + '-' + vdur.id.substr(0,4)}
 121                 </h3>
 122                 <span className='consoleLink' onClick={self.openConsole.bind(self, vdur["console-url"])}>
 123                   {consoleLink} *
 124                 </span>
 125               </li>
 126             )
 127             notice = <li className='notice'>* If a separate browser window does not open, please check if the popup was blocked and allow it.</li>
 128           });
 129           consoleUrlsComponent = (
 130             <div className="consoleUrlsComponent">
 131               <ul className="consoleUrlsList">
 132                 {consoleUrlsList}
 133                 {notice}
 134               </ul>
 135             </div>
 136           );
 137         }
 138         components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
 139         break;
 140       case 'nsr' :
 141         cardData = this.props.data.nsrs[0];
 142         configPrimitivesProps = cardData;
 143         scalingGroupsProps = cardData;
 144         displayConfigPrimitives = cardData['service-primitive'];
 145         displayScalingGroups = cardData['scaling-group-descriptor'] ? true : false;
 146         let sortedJobs = this.props.jobData.sort(function(a,b){
 147                     return parseInt(b['job-id']) - parseInt(a['job-id']);
 148                   });
 149         if (displayConfigPrimitives) {
 150           configPrimitiveComponent = (
 151             <div className="flex nsConfigPrimitiveContainer">
 152               <NsrConfigPrimitives data={configPrimitivesProps} />
 153               <div style={{display:'flex', flexDirection: 'column',     flex: '1 1 40%'}}>
 154                 <div className="launchpadCard_title">
 155                   JOB LIST
 156                 </div>
 157                 <div className="scrollContainer">
 158                   {sortedJobs.map(function(job, i){
 159                     if(job["triggered-by"] == 'ns-primitive') {
 160                       return <JobListCard type="nsr" job-id={job['job-id']} cardData={cardData} key={i} {...job} />
 161                     }
 162                   })
 163                   .concat(sortedJobs.map(function(job) {
 164                     if(!job.hasOwnProperty('job-name') && (job["triggered-by"] == 'ns-primitive')) {
 165                       return job.vnfr.map(function(v){
 166                         //That match the currently selected job id
 167                         if(v.id == cardData.id) {
 168                           return v.primitive.map(function(p, i) {
 169                             return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={i} {...p} />
 170                           })
 171                         }
 172                       })
 173                     }
 174                   }))
 175                 }
 176                 </div>
 177               </div>
 178             </div>
 179           );
 180         }
 181         if (displayScalingGroups) {
 182           scalingGroupComponent = (
 183             <div className="flex nsrScalingGroupContainer">
 184               <NsrScalingGroups data={scalingGroupsProps} />
 185             </div>
 186           );
 187         }
 188
 189         // Virtual Links tab content
 190         displayNSVirtualLinks = true;
 191         nsVirtualLinksProps = cardData;
 192         if (displayNSVirtualLinks) {
 193           nsVirtualLinksComponent = (
 194             <div className='flex nsVirtualLinksContainer'>
 195               <NSVirtualLinks data={nsVirtualLinksProps} />
 196             </div>
 197           );
 198         };
 199
 200         components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
 201         break;
 202     }
 203     let mgmt_interface = cardData["dashboard-url"];
 204     let mgmtHTML;
 205     let metricsAndParams = [];
 206
 207
 208     let nfviMetrics = <LpCardNfviMetrics data={cardData["nfvi-metrics"]} />;
 209     metricsAndParams.push(<div className="monitoringParams" key="mp">
 210                           {components.sort().map(function(c, k) {
 211                             return <div key={k} className="mpSlide">{c.title}{c.component}</div>
 212                           })}
 213                           </div>)
 214     metricsAndParams.push((<div key="nvfi" className="nfvi-metrics">
 215       { nfviMetrics }
 216       <EpaParams data={cardData["epa-params"]} />
 217     </div>))
 218
 219
 220
 221     if(mgmt_interface) {
 222       mgmtHTML = <a href={mgmt_interface} target="_blank">Open Application Dashboard</a>;
 223     }
 224       if(this.props.isLoading) {
 225         html = <DashboardCard className="loading" showHeader={true} title={cardData["short-name"]}><LoadingIndicator size={10} show={true} /></DashboardCard>
 226       } else {
 227         let glyphValue = (this.props.mmmrecordDetailsToggleValue) ? "chevron-left" : "chevron-right";
 228
 229         if (this.props.type == 'nsr') {
 230           tabList.push(
 231             <Tab key={cardData.id}>NS Data</Tab>
 232           )
 233         } else if (this.props.type == 'vnfr') {
 234           tabList.push(
 235             <Tab key={cardData.id}>VNF Data</Tab>
 236           )
 237         }
 238
 239         tabPanels.push(
 240           <TabPanel key={cardData.id + '-panel'}>
 241
 242               <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>MONITORING PARAMETERS</span>
 243                 {mgmtHTML}
 244               </div>
 245               {metricsAndParams}
 246               <div className="cardSectionFooter">
 247               </div>
 248           </TabPanel>
 249         )
 250
 251
 252         if (this.props.type == 'nsr') {
 253           if (scalingGroupComponent) {
 254             tabList.push(
 255             <Tab key={cardData.id + '-sg'}>Scaling Groups</Tab>
 256           );
 257
 258           tabPanels.push(
 259               <TabPanel key={cardData.id + '-sg-panel'}>
 260                   <div>
 261                     {scalingGroupComponent}
 262                   </div>
 263                   <div className="cardSectionFooter">
 264                   </div>
 265               </TabPanel>
 266             );
 267           }
 268           if(cardData.hasOwnProperty('vnfd-placement-group-maps')
 269              || cardData.hasOwnProperty('nsd-placement-group-maps')) {
 270             tabList.push(
 271                <Tab key='placement_groups'>
 272                 Placement
 273                </Tab>
 274              );
 275             tabPanels.push(
 276                <TabPanel key='placement_groups_panel'>
 277                   <div>
 278                     <PlacementGroupsInfo nsr={cardData} navRef={this.props.navRef} />
 279                   </div>
 280               </TabPanel>
 281              );
 282           }
 283         }
 284
 285         if (configPrimitiveComponent) {
 286           let primitivesTabTitle = '';
 287           if (this.props.type == 'nsr') {
 288             primitivesTabTitle = 'Service Primitive';
 289           } else if (this.props.type == 'vnfr') {
 290             primitivesTabTitle = 'Service Primitive'
 291           }
 292
 293           tabList.push(
 294             <Tab key={cardData.id + '-cp'}>{primitivesTabTitle}</Tab>
 295           );
 296
 297           tabPanels.push(
 298             <TabPanel key={cardData.id + '-cp-panel'}>
 299               <div className="configPrimitives">
 300                 {configPrimitiveComponent}
 301               </div>
 302               <div className="cardSectionFooter">
 303               </div>
 304             </TabPanel>
 305           )
 306         }
 307
 308         if (nsVirtualLinksComponent) {
 309           let nsVirtualLinksTabTitle = 'Virtual Links';
 310           tabList.push(
 311               <Tab key={cardData.id + '-nsvl'}>{nsVirtualLinksTabTitle}</Tab>
 312           );
 313
 314           tabPanels.push(
 315             <TabPanel key={cardData.id + '-nsvl-panel'}>
 316               <div className='nsVirtualLinks'>
 317                 {nsVirtualLinksComponent}
 318               </div>
 319               <div className="cardSectionFooter">
 320               </div>
 321             </TabPanel>
 322           );
 323         }
 324
 325         if (consoleUrlsComponent) {
 326           let consoleUrlsTabTitle = '';
 327           consoleUrlsTabTitle = 'VDU Console Links';
 328
 329           tabList.push(
 330             <Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
 331           );
 332
 333           tabPanels.push(
 334             <TabPanel key={cardData.id + '-cp-panel'}>
 335               <div className="consoleUrls">
 336                 {consoleUrlsComponent}
 337               </div>
 338               <div className="cardSectionFooter">
 339               </div>
 340             </TabPanel>
 341           )
 342         }
 343
 344         html = (
 345             <DashboardCard className="recordCard" showHeader={true} title={cardData["short-name"]}>
 346               <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>
 347               <Tabs onSelect={this.handleSelect}>
 348                 <TabList>
 349                     {tabList}
 350                 </TabList>
 351                 {tabPanels}
 352               </Tabs>
 353             </DashboardCard>
 354         );
 355       }
 356     return html;
 357   }
 358 }
 359 RecordCard.defaultProps = {
 360   type: "default",
 361   data: {},
 362   isLoading: true,
 363   jobData: []
 364 }