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';
29 class NsVirtualLinks extends React.Component {
32 this.Store = this.props.flux.stores.hasOwnProperty('NSVirtualLinkCreateStore') ?
33 this.props.flux.stores.NSVirtualLinkCreateStore : this.props.flux.createStore(NSVirtualLinkCreateStore, 'NSVirtualLinkCreateStore');
35 this.state.mode = 'viewing'; // Can be 'viewing'/'creating'/'editing'/'deleting'. Default is 'viewing'
36 this.selectedVirtualLink = null;
37 this.editingVirtualLink = null;
38 this.Store.listen(this.handleUpdate);
41 handleUpdate = (storeState) => {
42 // all we care about is if delete succeeded
43 if (storeState.deleteState == 'success') {
46 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0],
47 editingVirtualLink: null
52 componentWillMount() {
53 if (this.state.mode == 'viewing' && !this.state.selectedVirtualLink) {
55 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0]
59 if (!this.state.nsd) {
61 nsd: this.props.data.nsd
65 if (!this.state.nsrId) {
67 nsrId: this.props.data.id
73 componentWillUnmount() {
74 this.Store.unlisten(this.handleUpdate)
77 componentWillReceiveProps(nextProps) {
78 if (!this.state.nsd) {
80 nsd: nextProps.data.nsd
84 if (!this.state.nsrId) {
86 nsrId: nextProps.data.id
92 handleCreateVirtualLinkClick = (nsrId, event) => {
102 selectedVirtualLink: self.props.data && self.props.data['decorated-vlrs'] && self.props.data['decorated-vlrs'][0],
103 editingVirtualLink: null
107 handleDeleteVirtualLinkClick = (nsrId, virtualLinkId, event) => {
109 event.preventDefault();
110 event.stopPropagation();
111 this.Store.removeVirtualLink(nsrId, virtualLinkId);
114 handleSelectVirtualLinkClick = (virtualLinkId, event) => {
117 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _find(this.props.data['decorated-vlrs'], {id: virtualLinkId}),
118 editingVirtualLink: null
121 handleEditVirtualLinkClick = (nsrId, vlrId, vldId, event) => {
122 event.stopPropagation();
125 editingVirtualLink: this.props.data && this.props.data['nsd'] && this.props.data['nsd']['vld'] && _find(this.props.data['nsd']['vld'], {id: vldId}),
126 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _find(this.props.data['decorated-vlrs'], {id: vlrId})
130 handleCancelCreate = () => {
134 createVirtualLinksTable = () => {
137 let nsr = this.props.data && this.props.data;
138 let nsd = nsr.nsd && nsr.nsd;
140 nsr['decorated-vlrs'] && nsr['decorated-vlrs'].map((vlr, vlrIndex) => {
141 let name = vlr.name || 'Undergoing virtual link operation';
142 let operationalStatus = vlr['operational-status'];
143 let vlrId = vlr['id'];
144 let vldId = vlr['vld-ref'];
146 let selectedClassName = (!(this.state.mode == 'creating') && ((this.state.selectedVirtualLink && this.state.selectedVirtualLink.id) == vlrId)) ? 'selectedVirtualLink' : ''
149 <tr key={vlrIndex} className={selectedClassName} onClick={this.handleSelectVirtualLinkClick.bind(this, vlrId)}>
151 <td>{operationalStatus}</td>
153 <a onClick={this.handleEditVirtualLinkClick.bind(this, this.props.data.id, vlrId, vldId)}>
154 <span className="oi" data-glyph="pencil" aria-hidden="true"></span>
156 <a onClick={this.handleDeleteVirtualLinkClick.bind(this, this.props.data.id, vldId)}>
157 <span className="oi" data-glyph="trash" aria-hidden="true"></span>
171 <table className="nsVirtualLinksTable">
174 <th style={{width: '50%'}}>Name</th>
175 <th style={{width: '35%'}}>Status</th>
176 <th style={{width: '15%'}}> </th>
185 {JSON.stringify(nsd)}
191 let nsVirtualLinksTable = this.createVirtualLinksTable();
193 let nsVirtualLinkCreateButton = (
194 <Button label='Create Virtual Link' className="dark" isLoading={false} onClick={this.handleCreateVirtualLinkClick.bind(this, this.props.data.id)} />
197 let nsVirtualLinkDetails = null;
198 if (this.state.mode == 'viewing') {
199 nsVirtualLinkDetails = (
200 <div className='nsVirtualLinkDetailsWrapper'>
201 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLR DETAILS</span>
203 <NSVirtualLinkDetails virtualLink={this.state.selectedVirtualLink} mode={this.state.mode} nsd={this.props.data}/>
207 nsVirtualLinkDetails = (
208 <div className='nsVirtualLinkDetailsWrapper'>
209 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLD DETAILS</span>
212 <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}/>
219 <div className='nsVirtualLinks'>
220 <div className='nsVirtualLinksListWrapper'>
221 <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VIRTUAL LINKS</span>
223 <div className='nsVirtualLinksTableWrapper'>
224 {nsVirtualLinksTable}
226 <div className='nsVirtualLinksCreateButtonWrapper'>
227 {nsVirtualLinkCreateButton}
230 {nsVirtualLinkDetails}
235 export default SkyquakeComponent(NsVirtualLinks);