skyquake/plugins/launchpad/src/virtual_links/nsVirtualLinkCreate.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 Utils from 'utils/utils.js';
  20 import _ from 'lodash';
  21 import './nsVirtualLinks.scss';
  22 import NSVirtualLinkCreateStore from './nsVirtualLinkCreateStore.js';
  23 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
  24 import TextInput from 'widgets/form_controls/textInput.jsx';
  25 import ScreenLoader from 'widgets/screen-loader/screenLoader.jsx';
  26 import Button from 'widgets/button/rw.button.js';
  27 import SelectOption from 'widgets/form_controls/selectOption.jsx';
  28
  29
  30
  31 class NsVirtualLinkCreate extends React.Component {
  32         constructor(props) {
  33                 super(props);
  34             this.Store = this.props.flux.stores.hasOwnProperty('NSVirtualLinkCreateStore') ? this.props.flux.stores.NSVirtualLinkCreateStore : this.props.flux.createStore(NSVirtualLinkCreateStore);
  35                 this.state = this.Store.getState();
  36                 this.Store.listen(this.handleUpdate);
  37         }
  38
  39         componentWillMount() {
  40                 (!this.state.nsrId && this.props.nsrId) && this.Store.saveNSRId(this.props.nsrId);
  41                 this.Store.saveMode(this.props.mode);
  42                 switch (this.props.mode) {
  43                         case 'creating':
  44                                 if (!this.state.vld) {
  45                                         this.Store.saveVld({});
  46                                 }
  47                                 break;
  48                         case 'editing':
  49                                 this.Store.saveVld(this.props.vld);
  50                                 break;
  51                 }
  52                 if (this.props.nsd && this.props.nsd['constituent-vnfd']) {
  53                         let memberVnfIndexRefs = [];
  54                         let vnfdIdRefs = [];
  55                         this.props.nsd['constituent-vnfd'].map((cVNFD, cVNFDI) => {
  56                                 memberVnfIndexRefs.push({
  57                                         label: cVNFD['member-vnf-index'],
  58                                         value: cVNFD['member-vnf-index']
  59                                 });
  60                                 vnfdIdRefs.push({
  61                                         label: cVNFD['vnfd-id-ref'],
  62                                         value: cVNFD['vnfd-id-ref']
  63                                 });
  64                         });
  65
  66                         let ipProfileNames = [];
  67                         this.props.nsd['ip-profiles'] && this.props.nsd['ip-profiles'].map((ipProfile, ipProfileIndex) => {
  68                                 ipProfileNames.push({
  69                                         label: ipProfile['name'],
  70                                         value: ipProfile['name']
  71                                 });
  72                         })
  73
  74                         this.Store.saveMemberVnfIndexRefs(memberVnfIndexRefs);
  75                         this.Store.saveVnfdIdRefs(vnfdIdRefs);
  76                         this.Store.saveIpProfileNames(ipProfileNames);
  77                 }
  78         }
  79
  80         componentWillReceiveProps(nextProps) {
  81                 if (nextProps != this.props) {
  82                         if (nextProps.mode != this.props.mode) {
  83                                 // mode change
  84                                 this.Store.saveMode(nextProps.mode);
  85                                 switch (nextProps.mode) {
  86                                         case 'creating':
  87                                                 // switching from editing to creating
  88                                                 this.Store.saveVld({});
  89                                                 break;
  90                                         case 'editing':
  91                                                 // switching from creating to editing
  92                                                 this.Store.saveVld(nextProps.vld);
  93                                                 break;
  94                                 }
  95                         } else {
  96                                 // no mode change, but props changed
  97                                 switch (nextProps.mode) {
  98                                         case 'creating':
  99                                                 // switching from creating to creating
 100                                                 // TODO: can't figure out how to empty out without affecting create being erased
 101                                                 break;
 102                                         case 'editing':
 103                                                 // switching from editing to editing
 104                                                 if ((nextProps.vld && nextProps.vld.id) != (this.props.vld && this.props.vld.id)) {
 105                                                         this.Store.saveVld(nextProps.vld);
 106                                                 }
 107                                                 break;
 108                                 }
 109                         }
 110                 }
 111         }
 112
 113         componentWillUnmount() {
 114                 this.Store.saveVld({});
 115                 this.Store.unlisten(this.handleUpdate);
 116         }
 117
 118         handleUpdate = (storeState) => {
 119                 this.setState(storeState);
 120         }
 121
 122         handleSubmit = (mode, e) => {
 123                 e.preventDefault();
 124                 this.Store.persistVirtualLink(mode);
 125         }
 126
 127         handleCancel = (e) => {
 128                 e.preventDefault();
 129                 this.props.onCancel && this.props.onCancel();
 130         }
 131
 132         transformValue(field, value) {
 133                 let transformedValue = (field.transform && field.transform(value)) || value;
 134                 if (typeof transformedValue == 'object') {
 135                         transformedValue = JSON.stringify(transformedValue);
 136                 }
 137                 return transformedValue;
 138         }
 139
 140         handleFirstLevelKeyChange = (key, e) => {
 141                 this.Store.updateFirstLevelKey(key, e);
 142         }
 143
 144         handleSecondLevelKeyChange = (firstLevelKey, secondLevelKey, e) => {
 145                 this.Store.updateSecondLevelKey(firstLevelKey, secondLevelKey, e);
 146         }
 147
 148         handleFirstLevelListKeyChange = (listName, index, keyName, e) => {
 149                 this.Store.updateFirstLevelListKeyChange(listName, index, keyName, e);
 150         }
 151
 152         handleAddConnectionPointRef = () => {
 153                 this.Store.addConnectionPointRef();
 154         }
 155
 156         handleRemoveConnectionPoint = (vCPRI, e) => {
 157                 this.Store.removeConnectionPointRef(vCPRI);
 158         }
 159
 160
 161         updateVLDInitParamsType = (type) => {
 162                 this.Store.updateVLDInitParamsType(type);
 163         }
 164
 165         updateVLDInitParamsValue = (currentVLDInitParamsType, e) => {
 166                 this.Store.updateVLDInitParamsValue(currentVLDInitParamsType, e);
 167         }
 168
 169         render() {
 170                 let self = this;
 171
 172                 let typeOptions = this.state.typeOptions;
 173                 let overlayTypeOptions = this.state.overlayTypeOptions;
 174                 let currentVLDInitParamsType = this.state.currentVLDInitParamsType;
 175                 let memberVnfIndexRefs = this.state.memberVnfIndexRefs;
 176                 let vnfdIdRefs = this.state.vnfdIdRefs;
 177                 let vnfdConnectionPointRefs = this.state.vnfdConnectionPointRefs;
 178                 let ipProfileNames = this.state.ipProfileNames;
 179
 180                 let connectionPointsHtml = [];
 181
 182                 this.state.vld && this.state.vld['vnfd-connection-point-ref'] && this.state.vld['vnfd-connection-point-ref'].map((vCPR, vCPRI) => {
 183                         connectionPointsHtml.push(
 184                                 <li className='vnfd-connection-points-list-item'>
 185                                         <div>
 186                                                 <span>
 187                                                         VNFD CONNECTION POINT REF - {vCPRI}
 188                                                 </span>
 189                                                 <a key={'vnfd-connection-point-delete-' + vCPRI} onClick={this.handleRemoveConnectionPoint.bind(self, vCPRI)} title="Delete">
 190                                         <span key={'trash-' + vCPRI} className="oi" data-glyph="trash" aria-hidden="true"></span>
 191                                 </a>
 192                         </div>
 193                         <SelectOption key={'vnfd-connection-point-ref-member-vnfd-index-ref-' + vCPRI} label={'MEMBER VNF INDEX REF'} initial={memberVnfIndexRefs[0].value} options={memberVnfIndexRefs} onChange={this.handleFirstLevelListKeyChange.bind(self, 'vnfd-connection-point-ref', vCPRI, 'member-vnf-index-ref')} defaultValue={this.state.vld['vnfd-connection-point-ref'] && this.state.vld['vnfd-connection-point-ref'][vCPRI] && this.state.vld['vnfd-connection-point-ref'][vCPRI]['member-vnf-index-ref']}/>
 194                         <SelectOption key={'vnfd-connection-point-ref-vnfd-id-ref-' + vCPRI} label={'VNFD ID REF'} initial={vnfdIdRefs[0].value} options={vnfdIdRefs} onChange={this.handleFirstLevelListKeyChange.bind(self, 'vnfd-connection-point-ref', vCPRI, 'vnfd-id-ref')} defaultValue={this.state.vld['vnfd-connection-point-ref'] && this.state.vld['vnfd-connection-point-ref'][vCPRI] && this.state.vld['vnfd-connection-point-ref'][vCPRI]['vnfd-id-ref']}/>
 195                         <TextInput key={'vnfd-connection-point-ref-vnfd-connection-point-ref-' + vCPRI} label='VNFD CONNECTION POINT REF' className='value' type='text' value={this.state.vld['vnfd-connection-point-ref'] && this.state.vld['vnfd-connection-point-ref'][vCPRI] && this.state.vld['vnfd-connection-point-ref'][vCPRI]['vnfd-connection-point-ref']} onChange={this.handleFirstLevelListKeyChange.bind(self, 'vnfd-connection-point-ref', vCPRI, 'vnfd-connection-point-ref')} />
 196                                 </li>
 197                         );
 198                 });
 199
 200
 201                 let vldHTML = this.state.vld && (
 202                         <div>
 203                                 <h3>DETAILS</h3>
 204                                 <TextInput key={'id'} className='value' label={'ID'} type='text' value={this.state.vld.id} onChange={this.handleFirstLevelKeyChange.bind(self, 'id')} readonly={this.state.mode == 'editing' ? true:false} />
 205                                 <TextInput key={'name'} className='value' label={'NAME'} type='text' value={this.state.vld.name} onChange={this.handleFirstLevelKeyChange.bind(self, 'name')} />
 206                                 <TextInput key={'short-name'} className='value' label={'SHORT NAME'} type='text' value={this.state.vld['short-name']} onChange={this.handleFirstLevelKeyChange.bind(self, 'short-name')} />
 207                                 <TextInput key={'vendor'} className='value' label={'VENDOR'} type='text' value={this.state.vld.vendor} onChange={this.handleFirstLevelKeyChange.bind(self, 'vendor')} />
 208                                 <TextInput key={'description'} className='value' label={'DESCRIPTION'} type='text' value={this.state.vld.description} onChange={this.handleFirstLevelKeyChange.bind(self, 'description')} />
 209                                 <TextInput key={'version'} className='value' label={'VERSION'} type='text' value={this.state.vld.version} onChange={this.handleFirstLevelKeyChange.bind(self, 'version')} />
 210                                 <SelectOption label={'TYPE'} initial={typeOptions[0].value} options={typeOptions} onChange={this.handleFirstLevelKeyChange.bind(self, 'type')} defaultValue={this.state.vld['type']} />
 211                                 <TextInput key={'root-bandwidth'} className='value' label={'ROOT BANDWIDTH'} type='text' value={this.state.vld['root-bandwidth']} onChange={this.handleFirstLevelKeyChange.bind(self, 'root-bandwidth')} />
 212                                 <TextInput key={'leaf-bandwidth'} className='value' label={'LEAF BANDWIDTH'} type='text' value={this.state.vld['leaf-bandwidth']} onChange={this.handleFirstLevelKeyChange.bind(self, 'leaf-bandwidth')} />
 213                                 <h3>PROVIDER NETWORK</h3>
 214                                 <TextInput key={'physical-network'} className='value' label={'PHYSICAL NETWORK'} type='text' value={this.state.vld['provider-network'] && this.state.vld['provider-network']['physical-network']} onChange={this.handleSecondLevelKeyChange.bind(self, 'provider-network', 'physical-network')} />
 215                                 <SelectOption label={'OVERLAY TYPE'} initial={overlayTypeOptions[0].value} options={overlayTypeOptions} onChange={this.handleSecondLevelKeyChange.bind(self, 'provider-network', 'overlay-type')} defaultValue={this.state.vld['provider-network'] && this.state.vld['provider-network']['overlay-type']}/>
 216                                 <TextInput key={'segmentation_id'} className='value' label={'SEGMENTATION ID'} type='text' value={this.state.vld['provider-network'] && this.state.vld['provider-network']['segmentation_id']} onChange={this.handleSecondLevelKeyChange.bind(self, 'provider-network', 'segmentation_id')} />
 217                                 <h3>VNF CONNECTION POINTS
 218                                         <a className="plusButton" onClick={this.handleAddConnectionPointRef}>
 219                                 <span className="oi" data-glyph="plus"
 220                                       title="Add connection point ref" aria-hidden="true"></span>
 221                                 </a>
 222                                 </h3>
 223                         <ul className='vnfd-connection-points-list'>
 224                                         {connectionPointsHtml}
 225                                 </ul>
 226                                 <h3>INIT PARAMS</h3>
 227                                 <div className="inputControls-radioGroup">
 228                                         <label className="inputControls-radio">
 229                                                 <input type="radio" name={'ip-profile-ref'} onChange={this.updateVLDInitParamsType.bind(self, 'ip-profile-ref')} checked={currentVLDInitParamsType == 'ip-profile-ref'} value='ip-profile-ref' />
 230                                                 IP Profile
 231                                         </label>
 232                                         <label className="inputControls-radio">
 233                                                 <input type="radio" name={'vim-network-name'} onChange={this.updateVLDInitParamsType.bind(self, 'vim-network-name')} checked={currentVLDInitParamsType == 'vim-network-name'} value='vim-network-name' />
 234                                                 VIM Network Name
 235                                         </label>
 236                                         <label className="inputControls-radio">
 237                                                 <input type="radio" name={'unknown'} onChange={this.updateVLDInitParamsType.bind(self, 'unknown')} checked={currentVLDInitParamsType == 'unknown'} value='unknown' />
 238                                                 Unknown
 239                                         </label>
 240                                 </div>
 241                                 {
 242                                         (currentVLDInitParamsType == 'unknown') ?
 243                                                 null
 244                                         :
 245                                                 (currentVLDInitParamsType == 'vim-network-name') ?
 246                                                         <TextInput label='NETWORK NAME' onChange={this.updateVLDInitParamsValue.bind(self, currentVLDInitParamsType)} value={this.state.vld[currentVLDInitParamsType]} />
 247                                                 :
 248                                                         <SelectOption label={'IP PROFILE NAME'} initial={ipProfileNames[0].value} options={ipProfileNames} onChange={this.updateVLDInitParamsValue.bind(self, currentVLDInitParamsType)} />
 249                                 }
 250                         </div>
 251                 );
 252
 253                 return (
 254                         <form className={'createVirtualLink'} onKeyDown={this.evaluateCreateVirtualLink}>
 255                                 {vldHTML}
 256                                 <div className='buttonGroup'>
 257                                         <Button label='Submit' onClick={this.handleSubmit.bind(self, this.state.mode)} className='dark' type='submit' />
 258                                         <Button label='Cancel' onClick={this.handleCancel.bind(self)} className='dark' type='reset' />
 259                                 </div>
 260                         </form>
 261                 );
 262         }
 263 }
 264
 265 export default SkyquakeComponent(NsVirtualLinkCreate);