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