2 import React from 'react';
3 import { Link } from 'react-router';
5 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
6 import LaunchpadFleetActions from'../launchpadFleetActions';
7 import LaunchpadFleetStore from '../launchpadFleetStore';
8 import UpTime from 'widgets/uptime/uptime.jsx';
11 * TODO: Handle when page is loading. See recordView for ref
16 * key - NSR property name
17 * label - Text to display for the header column label
18 * colClass - class to add for rendering this column
19 * transform: function to call to display the value for the property
23 // was using 'short-name'
26 colClass: 'nsColNsName',
27 transform: function(nsr, key) {
29 let title = '"' + val + '" Click to open the viewport dashboard.';
30 let sdnpresent = nsr['sdn-account'] ? true: false;
32 <Link className="nsViewportLink"
33 to={{pathname: '/viewport', query: {id: nsr.id,
34 sdnpresent: sdnpresent}}}
44 colClass: 'nsColNsdName',
45 transform: function(nsr, key) {
48 <span title={val}>{val}</span>
53 key: 'operational-status',
55 colClass: 'nsColStatus',
56 transform: function(nsr, key, isLoading) {
59 if (nsr['operational-status'] == 'running') {
60 if(nsr['config-status'] == 'configuring') {
63 val = 'Configuration Failed'
66 val = nsr['operational-status'];
72 <span title={val} style={{'textTransform': 'capitalize'}}>{val}</span>);
78 colClass: 'nsColUptime',
79 transform: function(nsr, key) {
81 return (<UpTime initialTime={val} run={true} />);
87 * Render the network service grid header row
89 class NsListHeader extends React.Component {
92 const {fieldKeys, ...props} = this.props;
94 <div className="nsListHeaderRow">
95 {fieldKeys.map( (field, index) =>
96 <div className={"nsListHeaderField " + field.colClass}
101 <div className="nsListHeaderField nsColAction"></div>
108 * Render a row for the network service
110 class NsListItem extends React.Component {
115 this.state.isLoading = this.isLoading(props)
116 this.state.failed = false;
119 renderFieldBody(nsr, field, isLoading) {
120 return field.transform(nsr, field.key, isLoading);
129 classNames(isCardOpen) {
130 return "nsListItemRow" + (isCardOpen ? " openedCard" : "");
134 openDashboard(nsr_id) {
135 window.location.href = '//' + window.location.hostname +
136 ':' + window.location.port + '/index.html' +
137 window.location.search +
138 window.location.hash + '/' + nsr_id + '/detail';
139 launchpadFleetStore.closeSocket();
142 componentWillReceiveProps(props) {
144 isLoading: this.isLoading(props)
148 return !((props.nsr['operational-status'] == 'running') && (props.nsr['config-status'] == 'configured'))
150 actionButton(glyphValue, title, onClick) {
152 <div className="actionButton" onClick={onClick}>
153 <span className="oi" data-glyph={glyphValue}
154 title={title} aria-hidden="true"></span>
160 let failed = this.state.failed;
161 let isLoading = this.state.isLoading || failed;
162 const {nsr, isCardOpen, fieldKeys, ...props} = this.props;
165 <div className={this.classNames(isCardOpen)} data-id={nsr.id}>
166 {fieldKeys.map( (field, index) =>
167 <div className={"nsListItemField " + field.colClass}
169 <div className="cellValue">
170 {self.renderFieldBody(nsr, field, isLoading)}
174 <div className="nsListItemField nsColAction">
175 <div className="cellValue">
178 ? this.actionButton("circle-x",
179 "Close network service card",
181 LaunchpadFleetActions.closeNsrCard(nsr.id);
183 : this.actionButton("arrow-circle-right",
184 "Open network service card",
186 LaunchpadFleetActions.openNsrCard(nsr.id);
197 * Used for development/debugging layout
199 class EmptyNsListItem extends React.Component {
201 const {fieldKeys, ...props} = this.props;
203 <div className={"nsListItemRow"} >
204 {fieldKeys.map( (field, index) =>
205 <div className={"nsListItemField " + field.colClass}
209 <div className="nsListItemField nsColAction">
217 * Used for development/debugging layout
219 class MockNsListItem extends React.Component {
224 nsd_name: 'Dungeon X',
225 'operational-status': 'Hunting',
226 'create-time': 1163507750
230 const {fieldKeys, mockNsr, isCardOpen, ...props} = this.props;
235 return (<NsListItem nsr={nsr}
236 fieldKeys={fieldKeys}
237 isCardOpen={isCardOpen}
242 MockNsListItem.defaultProps = {
247 class NsList extends React.Component {
251 for (var i=0; i < count; i++) {
253 <EmptyNsListItem key={ "empty_"+i}
254 fieldKeys={this.props.fieldKeys} />
262 let isCardOpen = false;
263 for (var i=0; i < count; i++) {
264 isCardOpen = !isCardOpen;
266 <MockNsListItem key={ "empty_"+i}
267 fieldKeys={this.props.fieldKeys} isCardOpen={isCardOpen} />
274 const {nsrs, openedNsrIDs, fieldKeys, ...props} = this.props;
276 <div className="nsList">
277 <NsListHeader fieldKeys={fieldKeys} />
278 <div className="nsList-body">
279 <div className="nsList-body_content">
280 {nsrs.map((nsr, index) =>
281 <NsListItem key={nsr.id} nsr={nsr}
282 fieldKeys={fieldKeys}
283 isCardOpen={openedNsrIDs.includes(nsr.id)} />
285 {this.mockNsRows(this.props.mockNsRows)}
286 {this.emptyRows(this.props.emptyRows)}
294 NsList.defaultProps = {
300 export default class NsListPanel extends React.Component {
302 handleInstantiateNetworkService = () => {
303 this.context.router.push({pathname:'instantiate'});
305 handleShowHideToggle(newState) {
307 LaunchpadFleetActions.setNsListPanelVisible(newState);
311 let plusButton = require("style/img/launchpad-add-fleet-icon.png");
314 <div className="nsListPanelToolbar">
316 <div className="button"
317 onClick={this.handleInstantiateNetworkService} >
318 <img src={plusButton}/>
319 <span>Instantiate Service</span>
326 const {nsrs, openedNsrIDs, emptyRows, isVisible, ...props} = this.props;
327 const fieldKeys = FIELD_KEYS;
328 let glyphValue = (isVisible) ? "chevron-left" : "chevron-right";
330 let totalNSRs = nsrs && nsrs.length;
333 let scalingOutNSRs = 0;
334 let scalingInNSRs = 0;
335 let initializingNSRs = 0;
337 nsrs && nsrs.map((nsr) => {
338 nsr['operational-status'] == 'running' && runningNSRs++;
339 nsr['operational-status'] == 'failed' && failedNSRs++;
340 nsr['operational-status'] == 'scaling-out' && scalingOutNSRs++;
341 nsr['operational-status'] == 'scaling-in' && scalingInNSRs++;
343 nsr['operational-status'] == 'init' ||
344 nsr['operational-status'] == 'vl-init-phase' ||
345 nsr['operational-status'] == 'vnf-init-phase'
346 ) && initializingNSRs++;
355 <div className='nsrSummary'>
356 <span className='nsrSummaryItem'>Total: {totalNSRs}</span>
357 <span className='nsrSummaryItem'>Running: {runningNSRs}</span>
358 <span className='nsrSummaryItem'>Failed: {failedNSRs}</span>
359 <span className='nsrSummaryItem'>Scaling Out: {scalingOutNSRs}</span>
360 <span className='nsrSummaryItem'>Scaling In: {scalingInNSRs}</span>
361 <span className='nsrSummaryItem'>Initializing: {initializingNSRs}</span>
368 <DashboardCard className="nsListPanel" showHeader={true}
370 {this.panelToolbar()}
371 <a onClick={this.handleShowHideToggle(!isVisible)}
372 className={"nsListPanelToggle"}>
374 data-glyph={glyphValue}
375 title="Toggle Details Panel"
376 aria-hidden="true"></span></a>
377 <NsList nsrs={nsrs} openedNsrIDs={openedNsrIDs}
378 fieldKeys={fieldKeys} emptyRows={emptyRows} />
385 <DashboardCard className="leftMinimizedNsListPanel" showHeader={true}
387 <a onClick={this.handleShowHideToggle(!isVisible)}
388 className={"nsListPanelToggle"}>
390 data-glyph={glyphValue}
391 title="Toggle Details Panel"
392 aria-hidden="true"></span></a>
398 NsListPanel.contextTypes = {
399 router: React.PropTypes.object
401 NsListPanel.defaultProps = {