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') ? this.props.flux.stores.NSVirtualLinkCreateStore : this.props.flux.createStore(NSVirtualLinkCreateStore);
35 this.state = this.Store.getState();
36 this.Store.listen(this.handleUpdate);
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) {
44 if (!this.state.vld) {
45 this.Store.saveVld({});
49 this.Store.saveVld(this.props.vld);
52 if (this.props.nsd && this.props.nsd['constituent-vnfd']) {
53 let memberVnfIndexRefs = [];
55 this.props.nsd['constituent-vnfd'].map((cVNFD, cVNFDI) => {
56 memberVnfIndexRefs.push({
57 label: cVNFD['member-vnf-index'],
58 value: cVNFD['member-vnf-index']
61 label: cVNFD['vnfd-id-ref'],
62 value: cVNFD['vnfd-id-ref']
66 let ipProfileNames = [];
67 this.props.nsd['ip-profiles'] && this.props.nsd['ip-profiles'].map((ipProfile, ipProfileIndex) => {
69 label: ipProfile['name'],
70 value: ipProfile['name']
74 this.Store.saveMemberVnfIndexRefs(memberVnfIndexRefs);
75 this.Store.saveVnfdIdRefs(vnfdIdRefs);
76 this.Store.saveIpProfileNames(ipProfileNames);
80 componentWillReceiveProps(nextProps) {
81 if (nextProps != this.props) {
82 if (nextProps.mode != this.props.mode) {
84 this.Store.saveMode(nextProps.mode);
85 switch (nextProps.mode) {
87 // switching from editing to creating
88 this.Store.saveVld({});
91 // switching from creating to editing
92 this.Store.saveVld(nextProps.vld);
96 // no mode change, but props changed
97 switch (nextProps.mode) {
99 // switching from creating to creating
100 // TODO: can't figure out how to empty out without affecting create being erased
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);
113 componentWillUnmount() {
114 this.Store.saveVld({});
115 this.Store.unlisten(this.handleUpdate);
118 handleUpdate = (storeState) => {
119 this.setState(storeState);
122 handleSubmit = (mode, e) => {
124 this.Store.persistVirtualLink(mode);
127 handleCancel = (e) => {
129 this.props.onCancel && this.props.onCancel();
132 transformValue(field, value) {
133 let transformedValue = (field.transform && field.transform(value)) || value;
134 if (typeof transformedValue == 'object') {
135 transformedValue = JSON.stringify(transformedValue);
137 return transformedValue;
140 handleFirstLevelKeyChange = (key, e) => {
141 this.Store.updateFirstLevelKey(key, e);
144 handleSecondLevelKeyChange = (firstLevelKey, secondLevelKey, e) => {
145 this.Store.updateSecondLevelKey(firstLevelKey, secondLevelKey, e);
148 handleFirstLevelListKeyChange = (listName, index, keyName, e) => {
149 this.Store.updateFirstLevelListKeyChange(listName, index, keyName, e);
152 handleAddConnectionPointRef = () => {
153 this.Store.addConnectionPointRef();
156 handleRemoveConnectionPoint = (vCPRI, e) => {
157 this.Store.removeConnectionPointRef(vCPRI);
161 updateVLDInitParamsType = (type) => {
162 this.Store.updateVLDInitParamsType(type);
165 updateVLDInitParamsValue = (currentVLDInitParamsType, e) => {
166 this.Store.updateVLDInitParamsValue(currentVLDInitParamsType, e);
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;
180 let connectionPointsHtml = [];
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'>
187 VNFD CONNECTION POINT REF - {vCPRI}
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>
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')} />
201 let vldHTML = this.state.vld && (
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>
223 <ul className='vnfd-connection-points-list'>
224 {connectionPointsHtml}
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' />
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' />
236 <label className="inputControls-radio">
237 <input type="radio" name={'unknown'} onChange={this.updateVLDInitParamsType.bind(self, 'unknown')} checked={currentVLDInitParamsType == 'unknown'} value='unknown' />
242 (currentVLDInitParamsType == 'unknown') ?
245 (currentVLDInitParamsType == 'vim-network-name') ?
246 <TextInput label='NETWORK NAME' onChange={this.updateVLDInitParamsValue.bind(self, currentVLDInitParamsType)} value={this.state.vld[currentVLDInitParamsType]} />
248 <SelectOption label={'IP PROFILE NAME'} initial={ipProfileNames[0].value} options={ipProfileNames} onChange={this.updateVLDInitParamsValue.bind(self, currentVLDInitParamsType)} />
254 <form className={'createVirtualLink'} onKeyDown={this.evaluateCreateVirtualLink}>
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' />
265 export default SkyquakeComponent(NsVirtualLinkCreate);