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