X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2FrecordViewer%2FrecordCard.jsx;h=8a67c96719445b6421a7d8a6b04b357bed83c5a4;hp=41f70073d9999eedb9a08bf5cbf0f2e1aa952195;hb=c2edea79c193c2817fdf42a3b3dca683335dffa7;hpb=23b52a272f8520ebac6391e72d5f8576152db8cb

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
index 41f70073d..8a67c9671 100644
--- a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
@@ -106,7 +106,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} />
                           })
                         }
                       })
@@ -132,14 +132,38 @@ 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('volumer') && (vdur.volumer.length > 0)) {
+            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');
+              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) {
+                    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 != 'Object' ? v : buildProperties(v)}</div>
+                      </div>
+                    )
+                  });
+                    return p;
+                 }
                 volumesHTML.push(
-                    <pre className="language-js" key={index + '-' + vi}>
-                      <code dangerouslySetInnerHTML={{__html: html}} />
-                    </pre>
+                    <div key={vi}>
+                      <div className="launchpadCard_title">
+                        VOLUME
+                      </div>
+                      <div style={{display: 'flex', flexDirection: 'column'}}>
+                      {
+                        buildProperties(volume)
+                      }
+                      </div>
+                    </div>
                 )
               })
             }
@@ -184,7 +208,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} />
                           })
                         }
                       })
@@ -242,7 +266,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(
@@ -305,7 +329,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(