skyquake/plugins/launchpad/src/virtual_links/nsVirtualLinks.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   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
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  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.
  16  *
  17  */
  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
  29 class NsVirtualLinks extends React.Component {
  30         constructor(props) {
  31                 super(props);
  32             this.Store = this.props.flux.stores.hasOwnProperty('NSVirtualLinkCreateStore') ?
  33                                 this.props.flux.stores.NSVirtualLinkCreateStore : this.props.flux.createStore(NSVirtualLinkCreateStore, 'NSVirtualLinkCreateStore');
  34                 this.state = {};
  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);
  39         }
  40
  41         handleUpdate = (storeState) => {
  42                 // all we care about is if delete succeeded
  43                 if (storeState.deleteState == 'success') {
  44                         this.setState({
  45                                 mode: 'viewing',
  46                                 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0],
  47                                 editingVirtualLink: null
  48                         });
  49                 }
  50         }
  51
  52         componentWillMount() {
  53                 if (this.state.mode == 'viewing' && !this.state.selectedVirtualLink) {
  54                         this.setState({
  55                                 selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && this.props.data['decorated-vlrs'][0]
  56                         });
  57                 }
  58
  59                 if (!this.state.nsd) {
  60                         this.setState({
  61                                 nsd: this.props.data.nsd
  62                         });
  63                 }
  64
  65                 if (!this.state.nsrId) {
  66                         this.setState({
  67                                 nsrId: this.props.data.id
  68                         });
  69                 }
  70
  71         }
  72
  73         componentWillUnmount() {
  74                 this.Store.unlisten(this.handleUpdate)
  75         }
  76
  77         componentWillReceiveProps(nextProps) {
  78                 if (!this.state.nsd) {
  79                         this.setState({
  80                                 nsd: nextProps.data.nsd
  81                         });
  82                 }
  83
  84                 if (!this.state.nsrId) {
  85                         this.setState({
  86                                 nsrId: nextProps.data.id
  87                         });
  88                 }
  89         }
  90
  91
  92         handleCreateVirtualLinkClick = (nsrId, event) => {
  93                 this.setState({
  94                         mode: 'creating'
  95                 });
  96         }
  97
  98         resetState = () => {
  99                 let self = this;
 100                 this.setState({
 101                         mode: 'viewing',
 102                         selectedVirtualLink: self.props.data && self.props.data['decorated-vlrs'] && self.props.data['decorated-vlrs'][0],
 103                         editingVirtualLink: null
 104                 })
 105         }
 106
 107         handleDeleteVirtualLinkClick = (nsrId, virtualLinkId, event) => {
 108                 let self = this;
 109                 event.preventDefault();
 110                 event.stopPropagation();
 111                 this.Store.removeVirtualLink(nsrId, virtualLinkId);
 112         }
 113
 114         handleSelectVirtualLinkClick = (virtualLinkId, event) => {
 115                 this.setState({
 116                         mode: 'viewing',
 117                         selectedVirtualLink: this.props.data && this.props.data['decorated-vlrs'] && _find(this.props.data['decorated-vlrs'], {id: virtualLinkId}),
 118                         editingVirtualLink: null
 119                 });
 120         }
 121         handleEditVirtualLinkClick = (nsrId, vlrId, vldId, event) => {
 122                 event.stopPropagation();
 123                 this.setState({
 124                         mode: 'editing',
 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})
 127                 });
 128         }
 129
 130         handleCancelCreate = () => {
 131                 this.resetState();
 132         }
 133
 134         createVirtualLinksTable = () => {
 135                 let trows = [];
 136
 137                 let nsr = this.props.data && this.props.data;
 138                 let nsd = nsr.nsd && nsr.nsd;
 139
 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'];
 145
 146                         let selectedClassName = (!(this.state.mode == 'creating') && ((this.state.selectedVirtualLink && this.state.selectedVirtualLink.id) == vlrId)) ? 'selectedVirtualLink' : ''
 147
 148                         trows.push(
 149                                 <tr key={vlrIndex} className={selectedClassName} onClick={this.handleSelectVirtualLinkClick.bind(this, vlrId)}>
 150                                         <td>{name}</td>
 151                                         <td>{operationalStatus}</td>
 152                                         <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>
 155                                                 </a>
 156                                                 <a onClick={this.handleDeleteVirtualLinkClick.bind(this, this.props.data.id, vldId)}>
 157                                                         <span className="oi" data-glyph="trash" aria-hidden="true"></span>
 158                                                 </a>
 159                                         </td>
 160                                 </tr>
 161                         );
 162                 });
 163
 164                 let tbody = (
 165                         <tbody>
 166                                 {trows}
 167                         </tbody>
 168                 );
 169
 170                 return (
 171                         <table className="nsVirtualLinksTable">
 172                             <thead>
 173                                 <tr>
 174                                         <th style={{width: '50%'}}>Name</th>
 175                                     <th style={{width: '35%'}}>Status</th>
 176                                     <th style={{width: '15%'}}> </th>
 177                                 </tr>
 178                             </thead>
 179                             {tbody}
 180                         </table>
 181                 );
 182
 183                 return (
 184                         <div>
 185                                 {JSON.stringify(nsd)}
 186                         </div>
 187                 );
 188         }
 189
 190         render() {
 191                 let nsVirtualLinksTable = this.createVirtualLinksTable();
 192
 193                 let nsVirtualLinkCreateButton = (
 194                         <Button label='Create Virtual Link' className="dark" isLoading={false} onClick={this.handleCreateVirtualLinkClick.bind(this, this.props.data.id)} />
 195                 );
 196
 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>
 202                                         </div>
 203                         <NSVirtualLinkDetails virtualLink={this.state.selectedVirtualLink} mode={this.state.mode} nsd={this.props.data}/>
 204                 </div>
 205                         );
 206                 } else {
 207                         nsVirtualLinkDetails = (
 208                                 <div className='nsVirtualLinkDetailsWrapper'>
 209                         <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VLD DETAILS</span>
 210                                         </div>
 211                         {
 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}/>
 213                         }
 214                 </div>
 215             );
 216                 }
 217
 218                 return (
 219                         <div className='nsVirtualLinks'>
 220                 <div className='nsVirtualLinksListWrapper'>
 221                         <div className="launchpadCard_title" style={{textAlign:'right'}}><span style={{float:'left'}}>VIRTUAL LINKS</span>
 222                                         </div>
 223                         <div className='nsVirtualLinksTableWrapper'>
 224                                 {nsVirtualLinksTable}
 225                         </div>
 226                         <div className='nsVirtualLinksCreateButtonWrapper'>
 227                                 {nsVirtualLinkCreateButton}
 228                         </div>
 229                 </div>
 230                 {nsVirtualLinkDetails}
 231             </div>
 232                 );
 233         }
 234 }
 235 export default SkyquakeComponent(NsVirtualLinks);