3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
18 import React from 'react';
19 import NSVirtualLinkCreateStore from './nsVirtualLinkCreateStore.js';
20 import Button from 'widgets/button/rw.button.js';
21 import Utils from 'utils/utils.js';
22 import _find from 'lodash/find';
23 import './nsVirtualLinks.scss';
24 import UpTime from 'widgets/uptime/uptime.jsx';
25 import NSVirtualLinkDetails from './nsVirtualLinkDetails.jsx';
26 import NSVirtualLinkCreate from './nsVirtualLinkCreate.jsx';
27 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
28 import ROLES from 'utils/roleConstants.js';
29 import {SkyquakeRBAC, isRBACValid} from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
31 const PROJECT_ROLES = ROLES.PROJECT;
32 const PLATFORM = ROLES.PLATFORM;
34 class NsVirtualLinks extends React.Component {
37 this.Store = this.props.flux.stores.hasOwnProperty('NSVirtualLinkCreateStore') ?
38 this.props.flux.stores.NSVirtualLinkCreateStore : this.props.flux.createStore(NSVirtualLinkCreateStore, 'NSVirtualLinkCreateStore');
40 this.state.mode = 'viewing'; // Can be 'viewing'/'creating'/'editing'/'deleting'. Default is 'viewing'
41 this.selectedVirtualLink = null;
42 this.editingVirtualLink = null;
43 this.Store.listen(this.handleUpdate);
46 handleUpdate = (storeState) => {
47 // all we care about is if delete succeeded
48 if (storeState.deleteState == 'success') {
51 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0],
52 editingVirtualLink: null
57 componentWillMount() {
58 if (this.state.mode == 'viewing' && !this.state.selectedVirtualLink) {
60 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0]
64 if (!this.state.nsd) {
66 nsd: this.props.data.nsd
70 if (!this.state.nsrId) {
72 nsrId: this.props.data.id
78 componentWillUnmount() {
79 this.Store.unlisten(this.handleUpdate)
82 componentWillReceiveProps(nextProps) {
83 if (!this.state.nsd) {
85 nsd: nextProps.data.nsd
89 if (!this.state.nsrId) {
91 nsrId: nextProps.data.id
97 handleCreateVirtualLinkClick = (nsrId, event) => {
107 selectedVirtualLink: self.props.data && self.props.data['decorated-vlrs'] && self.props.data['decorated-vlrs'][0],
108 editingVirtualLink: null
112 handleDeleteVirtualLinkClick = (nsrId, virtualLinkId, event) => {
114 event.preventDefault();
115 event.stopPropagation();
116 this.Store.removeVirtualLink(nsrId, virtualLinkId);
119 handleSelectVirtualLinkClick = (virtualLinkId, event) => {
122 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _find(this.props.data['decorated-vlrs'], {id: virtualLinkId}),
123 editingVirtualLink: null
126 handleEditVirtualLinkClick = (nsrId, vlrId, vldId, event) => {
127 event.stopPropagation();
130 editingVirtualLink: this.props.data && this.props.data['nsd'] && this.props.data['nsd']['vld'] && _find(this.props.data['nsd']['vld'], {id: vldId}),
131 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _find(this.props.data['decorated-vlrs'], {id: vlrId})
135 handleCancelCreate = () => {
139 createVirtualLinksTable = () => {
142 let nsr = this.props.data && this.props.data;
143 let nsd = nsr.nsd && nsr.nsd;
145 nsr['decorated-vlrs'] && nsr['decorated-vlrs'].map((vlr, vlrIndex) => {
146 let name = vlr.name || 'Undergoing virtual link operation';
147 let operationalStatus = vlr['operational-status'];
148 let vlrId = vlr['id'];
149 let vldId = vlr['vld-ref'];
151 let selectedClassName = (!(this.state.mode == 'creating') && ((this.state.selectedVirtualLink && this.state.selectedVirtualLink.id) == vlrId)) ? 'selectedVirtualLink' : ''
154 <tr key={vlrIndex} className={selectedClassName} onClick={this.handleSelectVirtualLinkClick.bind(this, vlrId)}>
156 <td>{operationalStatus}</td>
158 isRBACValid(this.context.userProfile, [PROJECT_ROLES.LCM_ADMIN, PROJECT_ROLES.PROJECT_ADMIN]) ?
160 <a onClick={this.handleEditVirtualLinkClick.bind(this, this.props.data.id, vlrId, vldId)}>
161 <span className="oi" data-glyph="pencil" aria-hidden="true"></span>
163 <a onClick={this.handleDeleteVirtualLinkClick.bind(this, this.props.data.id, vldId)}>
164 <span className="oi" data-glyph="trash" aria-hidden="true"></span>
180 <table className="nsVirtualLinksTable">
183 <th style={{width: '50%'}}>Name</th>
184 <th style={{width: '35%'}}>Status</th>
186 isRBACValid(this.context.userProfile, [PROJECT_ROLES.LCM_ADMIN, PROJECT_ROLES.PROJECT_ADMIN]) ?
187 <th style={{width: '15%'}}> </th> : null
197 {JSON.stringify(nsd)}
203 let nsVirtualLinksTable = this.createVirtualLinksTable();
205 let nsVirtualLinkCreateButton = (
206 <Button label='Create Virtual Link' className="dark" isLoading={false} onClick={this.handleCreateVirtualLinkClick.bind(this, this.props.data.id)} />
209 let nsVirtualLinkDetails = null;
210 if (this.state.mode == 'viewing') {
211 nsVirtualLinkDetails = (
212 <div className='nsVirtualLinkDetailsWrapper'>
213 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLR DETAILS</span>
215 <NSVirtualLinkDetails virtualLink={this.state.selectedVirtualLink} mode={this.state.mode} nsd={this.props.data}/>
219 nsVirtualLinkDetails = (
220 <div className='nsVirtualLinkDetailsWrapper'>
221 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLD DETAILS</span>
224 <NSVirtualLinkCreate vld={this.state.editingVirtualLink} mode={this.state.mode} nsd={this.state.nsd} nsrId={this.state.nsrId} onSuccess={this.resetState.bind(this)} onCancel={this.handleCancelCreate}/>
231 <div className='nsVirtualLinks'>
232 <div className='nsVirtualLinksListWrapper'>
233 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VIRTUAL LINKS</span>
235 <div className='nsVirtualLinksTableWrapper'>
236 {nsVirtualLinksTable}
238 <div className='nsVirtualLinksCreateButtonWrapper'>
239 { isRBACValid(this.context.userProfile, [PROJECT_ROLES.LCM_ADMIN, PROJECT_ROLES.PROJECT_ADMIN]) ? nsVirtualLinkCreateButton : null}
242 {nsVirtualLinkDetails}
247 export default SkyquakeComponent(NsVirtualLinks);