X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2FrecordViewer%2FrecordCard.jsx;h=06110f766bcc314643063f3a128d3f227281a501;hb=refs%2Ftags%2Fv3.0.2;hp=c928ffd0c2224605b6326117116678f6186d73d3;hpb=e5cb4d01688c97ccca8deea0a56489e213026314;p=osm%2FUI.git

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
index c928ffd0c..06110f766 100644
--- a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
@@ -32,8 +32,17 @@ 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 _forEach from 'lodash/forEach';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
 
-export default class RecordCard extends React.Component {
+import {SkyquakeRBAC, isRBACValid} from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
+import ROLES from 'utils/roleConstants.js';
+
+const PROJECT_ROLES = ROLES.PROJECT;
+
+class RecordCard extends React.Component {
   constructor(props) {
     super(props)
   }
@@ -66,12 +75,15 @@ 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;
 
+    let hasAccess = isRBACValid(this.context.userProfile, [PROJECT_ROLES.LCM_ADMIN, PROJECT_ROLES.PROJECT_ADMIN]);
+
     switch(this.props.type) {
       case 'vnfr' :
         cardData = this.props.data[0];
@@ -81,7 +93,7 @@ export default class RecordCard extends React.Component {
         if (displayConfigPrimitives) {
           configPrimitiveComponent = (
             <div className="flex vnfrConfigPrimitiveContainer">
-              <VnfrConfigPrimitives data={configPrimitivesProps} />
+              <VnfrConfigPrimitives data={configPrimitivesProps} hasAccess={hasAccess} />
             {/* <NsrPrimitiveJobList jobs={cardData['config-agent-job']}/> */}
             <div style={{display:'flex', flexDirection: 'column',     flex: '1 1 40%'}}>
                 <div className="launchpadCard_title">
@@ -101,7 +113,7 @@ export default class RecordCard extends React.Component {
                         //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={ob['job-id'] + '-' + i} {...p} />
+                            return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={job['job-id'] + '-' + i} {...p} />
                           })
                         }
                       })
@@ -127,6 +139,43 @@ export default class RecordCard extends React.Component {
               </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.volumes.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>
+                function buildProperties(obj) {
+                  let p = [];
+                    _forEach(obj, function(v, k) {
+                      if (!v) {
+                        return null;
+                      }
+                    p.push(
+                      <div style={{margin: '0.5rem 0.5rem'}} key={k + '-' + vi}>
+                        <div style={{margin: '0 0.5rem', fontWeight: 'bold', textTransform: 'uppercase', color: '#5b5b5b'}}>{k}</div>
+                        <div style={{margin: '0 0.5rem'}}>{(v.constructor.name == 'String' || v.constructor.name == 'Number') ? v : buildProperties(v)}</div>
+                      </div>
+                    )
+                  });
+                    return p;
+                 }
+                volumesHTML.push(
+                    <div key={index + vi}>
+                      <div className="launchpadCard_title">
+                        VOLUME ({vdur['name']})
+                      </div>
+                      <div style={{display: 'flex', flexDirection: 'column'}}>
+                      {
+                        buildProperties(volume)
+                      }
+                      </div>
+                    </div>
+                )
+              })
+            }
           });
           consoleUrlsComponent = (
             <div className="consoleUrlsComponent">
@@ -151,7 +200,7 @@ export default class RecordCard extends React.Component {
         if (displayConfigPrimitives) {
           configPrimitiveComponent = (
             <div className="flex nsConfigPrimitiveContainer">
-              <NsrConfigPrimitives data={configPrimitivesProps} />
+              <NsrConfigPrimitives data={configPrimitivesProps} hasAccess={hasAccess}  />
               <div style={{display:'flex', flexDirection: 'column',     flex: '1 1 40%'}}>
                 <div className="launchpadCard_title">
                   JOB LIST
@@ -168,7 +217,7 @@ export default class RecordCard extends React.Component {
                         //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={ob['job-id'] + '-' + 'vnfr' + '-' + h} {...p} />
+                            return <JobListCard type="vnfr" job-id={job['job-id']} cardData={cardData} key={job['job-id'] + '-' + 'vnfr' + '-' + h} {...p} />
                           })
                         }
                       })
@@ -207,7 +256,7 @@ export default class RecordCard extends React.Component {
     let metricsAndParams = [];
 
 
-    let nfviMetrics = <LpCardNfviMetrics data={cardData["nfvi-metrics"]} />;
+    let nfviMetrics = null //<LpCardNfviMetrics data={cardData["nfvi-metrics"]} />;
     metricsAndParams.push(<div className="monitoringParams" key="mp">
                           {components.map(function(c, k) {
                             return <div key={k} className="mpSlide">{c.title}{c.component}</div>
@@ -226,7 +275,7 @@ export default class RecordCard extends React.Component {
       if(this.props.isLoading) {
         html = <DashboardCard className="loading" showHeader={true} title={cardData["short-name"]}><LoadingIndicator size={10} show={true} /></DashboardCard>
       } else {
-        let glyphValue = (this.props.mmmrecordDetailsToggleValue) ? "chevron-left" : "chevron-right";
+        let glyphValue = (!this.props.recordDetailsToggleValue) ? "chevron-left" : "chevron-right";
 
         if (this.props.type == 'nsr') {
           tabList.push(
@@ -289,7 +338,7 @@ export default class RecordCard extends React.Component {
           if (this.props.type == 'nsr') {
             primitivesTabTitle = 'Service Primitive';
           } else if (this.props.type == 'vnfr') {
-            primitivesTabTitle = 'Service Primitive'
+            primitivesTabTitle = 'Config Primitive'
           }
 
           tabList.push(
@@ -329,11 +378,11 @@ export default class RecordCard extends React.Component {
           consoleUrlsTabTitle = 'VDU Console Links';
 
           tabList.push(
-            <Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
+            <Tab key={cardData.id + '-vducl'}>{consoleUrlsTabTitle}</Tab>
           );
 
           tabPanels.push(
-            <TabPanel key={cardData.id + '-cp-panel'}>
+            <TabPanel key={cardData.id + '-vducl-panel'}>
               <div className="consoleUrls">
                 {consoleUrlsComponent}
               </div>
@@ -343,6 +392,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>
@@ -364,3 +428,9 @@ RecordCard.defaultProps = {
   isLoading: true,
   jobData: []
 }
+RecordCard.contextTypes = {
+    router: React.PropTypes.object,
+    userProfile: React.PropTypes.object
+};
+
+export default SkyquakeComponent(RecordCard);