3 * Copyright 2016 RIFT.IO Inc
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
9 * http://www.apache.org/licenses/LICENSE-2.0
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.
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';
31 class NsVirtualLinkCreate extends React.Component {
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);
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) {
46 if (!this.state.vld) {
47 this.Store.saveVld({});
51 this.Store.saveVld(this.props.vld);
54 if (this.props.nsd && this.props.nsd['constituent-vnfd']) {
55 let memberVnfIndexRefs = [];
57 this.props.nsd['constituent-vnfd'].map((cVNFD, cVNFDI) => {
58 memberVnfIndexRefs.push({
59 label: cVNFD['member-vnf-index'],
60 value: cVNFD['member-vnf-index']
63 label: cVNFD['vnfd-id-ref'],
64 value: cVNFD['vnfd-id-ref']
68 let ipProfileNames = [];
69 this.props.nsd['ip-profiles'] && this.props.nsd['ip-profiles'].map((ipProfile, ipProfileIndex) => {
71 label: ipProfile['name'],
72 value: ipProfile['name']
76 this.Store.saveMemberVnfIndexRefs(memberVnfIndexRefs);
77 this.Store.saveVnfdIdRefs(vnfdIdRefs);
78 this.Store.saveIpProfileNames(ipProfileNames);
82 componentWillReceiveProps(nextProps) {
83 if (nextProps != this.props) {
84 if (nextProps.mode != this.props.mode) {
86 this.Store.saveMode(nextProps.mode);
87 switch (nextProps.mode) {
89 // switching from editing to creating
90 this.Store.saveVld({});
93 // switching from creating to editing
94 this.Store.saveVld(nextProps.vld);
98 // no mode change, but props changed
99 switch (nextProps.mode) {
101 // switching from creating to creating
102 // TODO: can't figure out how to empty out without affecting create being erased
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);
115 componentWillUnmount() {
116 this.Store.saveVld({});
117 this.Store.unlisten(this.handleUpdate);
120 handleUpdate = (storeState) => {
121 this.setState(storeState);
124 handleSubmit = (mode, e) => {
126 this.Store.persistVirtualLink(mode);
129 handleCancel = (e) => {
131 this.props.onCancel && this.props.onCancel();
134 transformValue(field, value) {
135 let transformedValue = (field.transform && field.transform(value)) || value;
136 if (typeof transformedValue == 'object') {
137 transformedValue = JSON.stringify(transformedValue);
139 return transformedValue;
142 handleFirstLevelKeyChange = (key, e) => {
143 this.Store.updateFirstLevelKey(key, e);
146 handleSecondLevelKeyChange = (firstLevelKey, secondLevelKey, e) => {
147 this.Store.updateSecondLevelKey(firstLevelKey, secondLevelKey, e);
150 handleFirstLevelListKeyChange = (listName, index, keyName, e) => {
151 this.Store.updateFirstLevelListKeyChange(listName, index, keyName, e);
154 handleAddConnectionPointRef = () => {
155 this.Store.addConnectionPointRef();
158 handleRemoveConnectionPoint = (vCPRI, e) => {
159 this.Store.removeConnectionPointRef(vCPRI);
163 updateVLDInitParamsType = (type) => {
164 this.Store.updateVLDInitParamsType(type);
167 updateVLDInitParamsValue = (currentVLDInitParamsType, e) => {
168 this.Store.updateVLDInitParamsValue(currentVLDInitParamsType, e);
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;
182 let connectionPointsHtml = [];
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'>
189 VNFD CONNECTION POINT REF - {vCPRI}
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>
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')} />
203 let vldHTML = this.state.vld && (
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>
225 <ul className='vnfd-connection-points-list'>
226 {connectionPointsHtml}
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' />
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' />
238 <label className="inputControls-radio">
239 <input type="radio" name={'unknown'} onChange={this.updateVLDInitParamsType.bind(self, 'unknown')} checked={currentVLDInitParamsType == 'unknown'} value='unknown' />
244 (currentVLDInitParamsType == 'unknown') ?
247 (currentVLDInitParamsType == 'vim-network-name') ?
248 <TextInput label='NETWORK NAME' onChange={this.updateVLDInitParamsValue.bind(self, currentVLDInitParamsType)} value={this.state.vld[currentVLDInitParamsType]} />
250 <SelectOption label={'IP PROFILE NAME'} initial={ipProfileNames[0].value} options={ipProfileNames} onChange={this.updateVLDInitParamsValue.bind(self, currentVLDInitParamsType)} />
256 <form className={'createVirtualLink'} onKeyDown={this.evaluateCreateVirtualLink}>
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' />
267 export default SkyquakeComponent(NsVirtualLinkCreate);