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 _ from 'lodash';
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';
29 class NsVirtualLinks extends React.Component {
32 this.Store = this.props.flux.stores.hasOwnProperty('NSVirtualLinkCreateStore') ? this.props.flux.stores.NSVirtualLinkCreateStore : this.props.flux.createStore(NSVirtualLinkCreateStore);
34 this.state.mode = 'viewing'; // Can be 'viewing'/'creating'/'editing'/'deleting'. Default is 'viewing'
35 this.selectedVirtualLink = null;
36 this.editingVirtualLink = null;
37 this.Store.listen(this.handleUpdate);
40 handleUpdate = (storeState) => {
41 // all we care about is if delete succeeded
42 if (storeState.deleteState == 'success') {
45 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0],
46 editingVirtualLink: null
51 componentWillMount() {
52 if (this.state.mode == 'viewing' && !this.state.selectedVirtualLink) {
54 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0]
58 if (!this.state.nsd) {
60 nsd: this.props.data.nsd
64 if (!this.state.nsrId) {
66 nsrId: this.props.data.id
72 componentWillUnmount() {
73 this.Store.unlisten(this.handleUpdate)
76 componentWillReceiveProps(nextProps) {
77 if (!this.state.nsd) {
79 nsd: nextProps.data.nsd
83 if (!this.state.nsrId) {
85 nsrId: nextProps.data.id
91 handleCreateVirtualLinkClick = (nsrId, event) => {
101 selectedVirtualLink: self.props.data && self.props.data['decorated-vlrs'] && self.props.data['decorated-vlrs'][0],
102 editingVirtualLink: null
106 handleDeleteVirtualLinkClick = (nsrId, virtualLinkId, event) => {
108 event.preventDefault();
109 event.stopPropagation();
110 this.Store.removeVirtualLink(nsrId, virtualLinkId);
113 handleSelectVirtualLinkClick = (virtualLinkId, event) => {
116 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _.find(this.props.data['decorated-vlrs'], {id: virtualLinkId}),
117 editingVirtualLink: null
120 handleEditVirtualLinkClick = (nsrId, vlrId, vldId, event) => {
121 event.stopPropagation();
124 editingVirtualLink: this.props.data && this.props.data['nsd'] && this.props.data['nsd']['vld'] && _.find(this.props.data['nsd']['vld'], {id: vldId}),
125 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _.find(this.props.data['decorated-vlrs'], {id: vlrId})
129 handleCancelCreate = () => {
133 createVirtualLinksTable = () => {
136 let nsr = this.props.data && this.props.data;
137 let nsd = nsr.nsd && nsr.nsd;
139 nsr['decorated-vlrs'] && nsr['decorated-vlrs'].map((vlr, vlrIndex) => {
140 let name = vlr.name || 'New virtual link being created';
141 let operationalStatus = vlr['operational-status'];
142 let vlrId = vlr['id'];
143 let vldId = vlr['vld-ref'];
145 let selectedClassName = (!(this.state.mode == 'creating') && ((this.state.selectedVirtualLink && this.state.selectedVirtualLink.id) == vlrId)) ? 'selectedVirtualLink' : ''
148 <tr key={vlrIndex} className={selectedClassName} onClick={this.handleSelectVirtualLinkClick.bind(this, vlrId)}>
150 <td>{operationalStatus}</td>
152 <a onClick={this.handleEditVirtualLinkClick.bind(this, this.props.data.id, vlrId, vldId)}>
153 <span className="oi" data-glyph="pencil" aria-hidden="true"></span>
155 <a onClick={this.handleDeleteVirtualLinkClick.bind(this, this.props.data.id, vldId)}>
156 <span className="oi" data-glyph="trash" aria-hidden="true"></span>
170 <table className="nsVirtualLinksTable">
173 <th style={{width: '50%'}}>Name</th>
174 <th style={{width: '35%'}}>Status</th>
175 <th style={{width: '15%'}}> </th>
184 {JSON.stringify(nsd)}
190 let nsVirtualLinksTable = this.createVirtualLinksTable();
192 let nsVirtualLinkCreateButton = (
193 <Button label='Create Virtual Link' className="dark" isLoading={false} onClick={this.handleCreateVirtualLinkClick.bind(this, this.props.data.id)} />
196 let nsVirtualLinkDetails = null;
197 if (this.state.mode == 'viewing') {
198 nsVirtualLinkDetails = (
199 <div className='nsVirtualLinkDetailsWrapper'>
200 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLR DETAILS</span>
202 <NSVirtualLinkDetails virtualLink={this.state.selectedVirtualLink} mode={this.state.mode} nsd={this.props.data}/>
206 nsVirtualLinkDetails = (
207 <div className='nsVirtualLinkDetailsWrapper'>
208 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLD DETAILS</span>
211 <NSVirtualLinkCreate vld={this.state.editingVirtualLink} mode={this.state.mode} nsd={this.state.nsd} nsrId={this.state.nsrId} onCancel={this.handleCancelCreate}/>
218 <div className='nsVirtualLinks'>
219 <div className='nsVirtualLinksListWrapper'>
220 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VIRTUAL LINKS</span>
222 <div className='nsVirtualLinksTableWrapper'>
223 {nsVirtualLinksTable}
225 <div className='nsVirtualLinksCreateButtonWrapper'>
226 {nsVirtualLinkCreateButton}
229 {nsVirtualLinkDetails}
234 export default SkyquakeComponent(NsVirtualLinks);