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