/*
- *
+ *
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
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)
// 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;
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];
<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={job['job-id'] + '-' + i} {...p} />
})
}
})
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.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(
+ <div key={vi}>
+ <div className="launchpadCard_title">
+ VOLUME
+ </div>
+ <div style={{display: 'flex', flexDirection: 'column'}}>
+ {
+ buildProperties(volume)
+ }
+ </div>
+ </div>
+ )
+ })
+ }
});
consoleUrlsComponent = (
<div className="consoleUrlsComponent">
<ul className="consoleUrlsList">
{consoleUrlsList}
+ {notice}
</ul>
</div>
);
<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={job['job-id'] + '-' + 'vnfr' + '-' + h} {...p} />
})
}
})
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>)
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(
if (this.props.type == 'nsr') {
primitivesTabTitle = 'Service Primitive';
} else if (this.props.type == 'vnfr') {
- primitivesTabTitle = 'Service Primitive'
+ primitivesTabTitle = 'Config Primitive'
}
tabList.push(
if (consoleUrlsComponent) {
let consoleUrlsTabTitle = '';
consoleUrlsTabTitle = 'VDU Console Links';
-
+
tabList.push(
<Tab key={cardData.id + '-cp'}>{consoleUrlsTabTitle}</Tab>
);
)
}
+ 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>