RIFT-14850: Volume styling update

[osm/UI.git] / skyquake / plugins / launchpad / src / recordViewer / recordCard.jsx

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
index e3c3dad..737ef70 100644 (file)
--- a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -31,6 +31,12 @@ 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';
+import LaunchpadFleetStore from '../launchpadFleetStore.js';
+
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+
+
 export default class RecordCard extends React.Component {
   constructor(props) {
     super(props)
@@ -40,7 +46,13 @@ export default class RecordCard extends React.Component {
       // console.log('Selected tab is', index, 'last index is', last);
   }
 
+  openConsole = (url, event) => {
+    event.preventDefault();
+    LaunchpadFleetStore.getVDUConsoleLink(url);
+  }
+
   render(){
+    let self = this;
     let html;
     let content;
     let card;
@@ -58,10 +70,13 @@ export default class RecordCard extends React.Component {
     let displayNSVirtualLinks = false;
     let nsVirtualLinksProps = {};
     let nsVirtualLinksComponent = null;
-
+    let displayVolumesTab = false;
+    let volumesHTML = [];
     let tabList = [];
     let tabPanels = [];
 
+    let notice = null;
+
     switch(this.props.type) {
       case 'vnfr' :
         cardData = this.props.data[0];
@@ -80,16 +95,18 @@ export default class RecordCard extends React.Component {
                 <div className="scrollContainer">
                 {
                   //Sort for recent on top
-                    this.props.jobData.sort(function(a,b){
+                  this.props.jobData
+                  .sort(function(a,b){
                     return parseInt(b['job-id']) - parseInt(a['job-id']);
-                  }).map(function(job){
+                  })
+                  .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 <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={i} {...p} />
+                            return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={ob['job-id'] + '-' + i} {...p} />
                           })
                         }
                       })
@@ -103,22 +120,55 @@ export default class RecordCard extends React.Component {
 
         if (cardData['vdur']) {
           cardData['vdur'].map((vdur, index) => {
-            let consoleLink = vdur['console-url'] ? 'Open VM Console' : 'None';
+            let consoleLink = vdur['console-url'] ? 'Obtain Token And Open VM Console' : 'None';
             consoleUrlsList.push(
               <li key={index}>
                 <h3>
                   {vdur['name'] + '-' + vdur.id.substr(0,4)}
                 </h3>
-                <a href={vdur['console-url']} target='_blank'>
-                  {consoleLink}
-                </a>
+                <span className='consoleLink' onClick={self.openConsole.bind(self, vdur["console-url"])}>
+                  {consoleLink} *
+                </span>
               </li>
             )
+            notice = <li className='notice'>* If a separate browser window does not open, please check if the popup was blocked and allow it.</li>
+            if(vdur.hasOwnProperty('volumes') && (vdur.volumes.length > 0)) {
+              displayVolumesTab = true;
+              vdur.volumer.map((volume, vi) => {
+                // let html = Prism.highlight(JSON.stringify(volume), Prism.languages.javascript, 'javascript');
+                // volumesHTML.push(
+                //     <pre className="language-js" key={index + '-' + vi}>
+                //       <code dangerouslySetInnerHTML={{__html: html}} />
+                //     </pre>
+                let properties = [];
+                 _.forEach(volume, function(v, k) {
+                    properties.push(
+                      <div style={{display: 'flex', margin: '0.5rem 0'}} key={k + vi}>
+                        <div style={{margin: '0 1rem',
+    fontWeight: 'bold', textTransform: 'uppercase'}}>{k}</div>
+                        <div>{v}</div>
+                      </div>
+                    )
+                  })
+                volumesHTML.push(
+                    <div key={vi}>
+                      <div className="launchpadCard_title">
+                        VOLUME
+                      </div>
+
+                      {
+                        properties
+                      }
+                    </div>
+                )
+              })
+            }
           });
           consoleUrlsComponent = (
             <div className="consoleUrlsComponent">
               <ul className="consoleUrlsList">
                 {consoleUrlsList}
+                {notice}
               </ul>
             </div>
           );
@@ -145,16 +195,16 @@ export default class RecordCard extends React.Component {
                 <div className="scrollContainer">
                   {sortedJobs.map(function(job, i){
                     if(job["triggered-by"] == 'ns-primitive') {
-                      return <JobListCard type="nsr" job-id={job['job-id']} cardData={cardData} key={i} {...job} />
+                      return <JobListCard type="nsr" job-id={job['job-id']} cardData={cardData} key={job['job-id'] + '-' + 'nsr'} {...job} />
                     }
                   })
                   .concat(sortedJobs.map(function(job) {
                     if(!job.hasOwnProperty('job-name') && (job["triggered-by"] == 'ns-primitive')) {
-                      return job.vnfr.map(function(v){
+                      return job.vnfr.map(function(v, h){
                         //That match the currently selected job id
                         if(v.id == cardData.id) {
                           return v.primitive.map(function(p, i) {
-                            return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={i} {...p} />
+                            return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={ob['job-id'] + '-' + 'vnfr' + '-' + h} {...p} />
                           })
                         }
                       })
@@ -195,7 +245,7 @@ export default class RecordCard extends React.Component {
 
     let nfviMetrics = <LpCardNfviMetrics data={cardData["nfvi-metrics"]} />;
     metricsAndParams.push(<div className="monitoringParams" key="mp">
-                          {components.sort().map(function(c, k) {
+                          {components.map(function(c, k) {
                             return <div key={k} className="mpSlide">{c.title}{c.component}</div>
                           })}
                           </div>)
@@ -313,7 +363,7 @@ export default class RecordCard extends React.Component {
         if (consoleUrlsComponent) {
           let consoleUrlsTabTitle = '';
           consoleUrlsTabTitle = 'VDU Console Links';
-          
+
           tabList.push(
             <Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
           );
@@ -329,6 +379,21 @@ export default class RecordCard extends React.Component {
           )
         }
 
+        if (displayVolumesTab) {
+
+          tabList.push(
+            <Tab key={cardData.id + '-volumes'}>Volumes</Tab>
+          );
+
+          tabPanels.push(
+            <TabPanel key={cardData.id + '-volumes-panel'}>
+              {volumesHTML}
+              <div className="cardSectionFooter">
+              </div>
+            </TabPanel>
+          )
+        }
+
         html = (
             <DashboardCard className="recordCard" showHeader={true} title={cardData["short-name"]}>
               <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>