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