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={job['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                 function buildProperties(obj) {
 144                   let p = [];
 145                     _.forEach(obj, function(v, k) {
 146                     p.push(
 147                       <div style={{margin: '0.5rem 0.5rem'}} key={k + '-' + vi}>
 148                         <div style={{margin: '0 0.5rem',
 149     fontWeight: 'bold', textTransform: 'uppercase', color: '#5b5b5b'}}>{k}</div>
 150                         <div style={{margin: '0 0.5rem'}}>{v.constructor.name == 'String' ? v : buildProperties(v)}</div>
 151                       </div>
 152                     )
 153                   });
 154                     return p;
 155                  }
 156                 volumesHTML.push(
 157                     <div key={vi}>
 158                       <div className="launchpadCard_title">
 159                         VOLUME
 160                       </div>
 161                       <div style={{display: 'flex', flexDirection: 'column'}}>
 162                       {
 163                         buildProperties(volume)
 164                       }
 165                       </div>
 166                     </div>
 167                 )
 168               })
 169             }
 170           });
 171           consoleUrlsComponent = (
 172             <div className="consoleUrlsComponent">
 173               <ul className="consoleUrlsList">
 174                 {consoleUrlsList}
 175                 {notice}
 176               </ul>
 177             </div>
 178           );
 179         }
 180         components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
 181         break;
 182       case 'nsr' :
 183         cardData = this.props.data.nsrs[0];
 184         configPrimitivesProps = cardData;
 185         scalingGroupsProps = cardData;
 186         displayConfigPrimitives = cardData['service-primitive'];
 187         displayScalingGroups = cardData['scaling-group-descriptor'] ? true : false;
 188         let sortedJobs = this.props.jobData.sort(function(a,b){
 189                     return parseInt(b['job-id']) - parseInt(a['job-id']);
 190                   });
 191         if (displayConfigPrimitives) {
 192           configPrimitiveComponent = (
 193             <div className="flex nsConfigPrimitiveContainer">
 194               <NsrConfigPrimitives data={configPrimitivesProps} />
 195               <div style={{display:'flex', flexDirection: 'column',     flex: '1 1 40%'}}>
 196                 <div className="launchpadCard_title">
 197                   JOB LIST
 198                 </div>
 199                 <div className="scrollContainer">
 200                   {sortedJobs.map(function(job, i){
 201                     if(job["triggered-by"] == 'ns-primitive') {
 202                       return <JobListCard type="nsr" job-id={job['job-id']} cardData={cardData} key={job['job-id'] + '-' + 'nsr'} {...job} />
 203                     }
 204                   })
 205                   .concat(sortedJobs.map(function(job) {
 206                     if(!job.hasOwnProperty('job-name') && (job["triggered-by"] == 'ns-primitive')) {
 207                       return job.vnfr.map(function(v, h){
 208                         //That match the currently selected job id
 209                         if(v.id == cardData.id) {
 210                           return v.primitive.map(function(p, i) {
 211                             return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={job['job-id'] + '-' + 'vnfr' + '-' + h} {...p} />
 212                           })
 213                         }
 214                       })
 215                     }
 216                   }))
 217                 }
 218                 </div>
 219               </div>
 220             </div>
 221           );
 222         }
 223         if (displayScalingGroups) {
 224           scalingGroupComponent = (
 225             <div className="flex nsrScalingGroupContainer">
 226               <NsrScalingGroups data={scalingGroupsProps} />
 227             </div>
 228           );
 229         }
 230
 231         // Virtual Links tab content
 232         displayNSVirtualLinks = true;
 233         nsVirtualLinksProps = cardData;
 234         if (displayNSVirtualLinks) {
 235           nsVirtualLinksComponent = (
 236             <div className='flex nsVirtualLinksContainer'>
 237               <NSVirtualLinks data={nsVirtualLinksProps} />
 238             </div>
 239           );
 240         };
 241
 242         components = ParseMP.call(this, cardData["monitoring-param"], "vnfr-id");
 243         break;
 244     }
 245     let mgmt_interface = cardData["dashboard-url"];
 246     let mgmtHTML;
 247     let metricsAndParams = [];
 248
 249
 250     let nfviMetrics = <LpCardNfviMetrics data={cardData["nfvi-metrics"]} />;
 251     metricsAndParams.push(<div className="monitoringParams" key="mp">
 252                           {components.map(function(c, k) {
 253                             return <div key={k} className="mpSlide">{c.title}{c.component}</div>
 254                           })}
 255                           </div>)
 256     metricsAndParams.push((<div key="nvfi" className="nfvi-metrics">
 257       { nfviMetrics }
 258       <EpaParams data={cardData["epa-params"]} />
 259     </div>))
 260
 261
 262
 263     if(mgmt_interface) {
 264       mgmtHTML = <a href={mgmt_interface} target="_blank">Open Application Dashboard</a>;
 265     }
 266       if(this.props.isLoading) {
 267         html = <DashboardCard className="loading" showHeader={true} title={cardData["short-name"]}><LoadingIndicator size={10} show={true} /></DashboardCard>
 268       } else {
 269         let glyphValue = (!this.props.recordDetailsToggleValue) ? "chevron-left" : "chevron-right";
 270
 271         if (this.props.type == 'nsr') {
 272           tabList.push(
 273             <Tab key={cardData.id}>NS Data</Tab>
 274           )
 275         } else if (this.props.type == 'vnfr') {
 276           tabList.push(
 277             <Tab key={cardData.id}>VNF Data</Tab>
 278           )
 279         }
 280
 281         tabPanels.push(
 282           <TabPanel key={cardData.id + '-panel'}>
 283
 284               <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>MONITORING PARAMETERS</span>
 285                 {mgmtHTML}
 286               </div>
 287               {metricsAndParams}
 288               <div className="cardSectionFooter">
 289               </div>
 290           </TabPanel>
 291         )
 292
 293
 294         if (this.props.type == 'nsr') {
 295           if (scalingGroupComponent) {
 296             tabList.push(
 297             <Tab key={cardData.id + '-sg'}>Scaling Groups</Tab>
 298           );
 299
 300           tabPanels.push(
 301               <TabPanel key={cardData.id + '-sg-panel'}>
 302                   <div>
 303                     {scalingGroupComponent}
 304                   </div>
 305                   <div className="cardSectionFooter">
 306                   </div>
 307               </TabPanel>
 308             );
 309           }
 310           if(cardData.hasOwnProperty('vnfd-placement-group-maps')
 311              || cardData.hasOwnProperty('nsd-placement-group-maps')) {
 312             tabList.push(
 313                <Tab key='placement_groups'>
 314                 Placement
 315                </Tab>
 316              );
 317             tabPanels.push(
 318                <TabPanel key='placement_groups_panel'>
 319                   <div>
 320                     <PlacementGroupsInfo nsr={cardData} navRef={this.props.navRef} />
 321                   </div>
 322               </TabPanel>
 323              );
 324           }
 325         }
 326
 327         if (configPrimitiveComponent) {
 328           let primitivesTabTitle = '';
 329           if (this.props.type == 'nsr') {
 330             primitivesTabTitle = 'Service Primitive';
 331           } else if (this.props.type == 'vnfr') {
 332             primitivesTabTitle = 'Config Primitive'
 333           }
 334
 335           tabList.push(
 336             <Tab key={cardData.id + '-cp'}>{primitivesTabTitle}</Tab>
 337           );
 338
 339           tabPanels.push(
 340             <TabPanel key={cardData.id + '-cp-panel'}>
 341               <div className="configPrimitives">
 342                 {configPrimitiveComponent}
 343               </div>
 344               <div className="cardSectionFooter">
 345               </div>
 346             </TabPanel>
 347           )
 348         }
 349
 350         if (nsVirtualLinksComponent) {
 351           let nsVirtualLinksTabTitle = 'Virtual Links';
 352           tabList.push(
 353               <Tab key={cardData.id + '-nsvl'}>{nsVirtualLinksTabTitle}</Tab>
 354           );
 355
 356           tabPanels.push(
 357             <TabPanel key={cardData.id + '-nsvl-panel'}>
 358               <div className='nsVirtualLinks'>
 359                 {nsVirtualLinksComponent}
 360               </div>
 361               <div className="cardSectionFooter">
 362               </div>
 363             </TabPanel>
 364           );
 365         }
 366
 367         if (consoleUrlsComponent) {
 368           let consoleUrlsTabTitle = '';
 369           consoleUrlsTabTitle = 'VDU Console Links';
 370
 371           tabList.push(
 372             <Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
 373           );
 374
 375           tabPanels.push(
 376             <TabPanel key={cardData.id + '-cp-panel'}>
 377               <div className="consoleUrls">
 378                 {consoleUrlsComponent}
 379               </div>
 380               <div className="cardSectionFooter">
 381               </div>
 382             </TabPanel>
 383           )
 384         }
 385
 386         if (displayVolumesTab) {
 387
 388           tabList.push(
 389             <Tab key={cardData.id + '-volumes'}>Volumes</Tab>
 390           );
 391
 392           tabPanels.push(
 393             <TabPanel key={cardData.id + '-volumes-panel'}>
 394               {volumesHTML}
 395               <div className="cardSectionFooter">
 396               </div>
 397             </TabPanel>
 398           )
 399         }
 400
 401         html = (
 402             <DashboardCard className="recordCard" showHeader={true} title={cardData["short-name"]}>
 403               <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>
 404               <Tabs onSelect={this.handleSelect}>
 405                 <TabList>
 406                     {tabList}
 407                 </TabList>
 408                 {tabPanels}
 409               </Tabs>
 410             </DashboardCard>
 411         );
 412       }
 413     return html;
 414   }
 415 }
 416 RecordCard.defaultProps = {
 417   type: "default",
 418   data: {},
 419   isLoading: true,
 420   jobData: []
 421 }