4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
19 import React from 'react';
20 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
21 import RecordViewStore from '../recordViewer/recordViewStore.js';
22 import Button from 'widgets/button/rw.button.js';
23 import './nsConfigPrimitives.scss';
24 import TextInput from 'widgets/form_controls/textInput.jsx';
25 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
27 class NsrConfigPrimitives extends React.Component {
31 this.state.vnfrMap = null;
32 this.state.nsConfigPrimitives = null;
35 componentWillReceiveProps(props) {
36 let vnfrs = props.data['vnfrs'];
38 let nsConfigPrimitives = [];
40 if (vnfrs && !this.state.nsConfigPrimitives) {
42 let vnfrConfigPrimitive = {};
43 vnfrConfigPrimitive.name = vnfr['short-name'];
44 vnfrConfigPrimitive['vnfr-id-ref'] = vnfr['id'];
46 let configPrimitives = vnfr['vnf-configuration'] && vnfr['vnf-configuration']['service-primitive'];
47 //input references by key
48 let vnfrConfigPrimitives = {}
50 if (configPrimitives) {
51 let vnfPrimitiveList = [];
52 configPrimitives.map((configPrimitive) => {
53 vnfrConfigPrimitives[configPrimitive.name] = configPrimitive;
54 vnfPrimitiveList.push({
55 name: configPrimitive.name,
56 parameter: configPrimitive.parameter
59 vnfrConfigPrimitive['service-primitives'] = vnfrConfigPrimitives;
60 vnfrMap[vnfr['member-vnf-index-ref']] = vnfrConfigPrimitive;
63 //nsr service-primitives
64 props.data['service-primitive'] && props.data['service-primitive'].map((nsConfigPrimitive, nsConfigPrimitiveIndex) => {
65 //Add optional field to group. Necessary for driving state.
66 let optionalizedNsConfigPrimitiveGroup = nsConfigPrimitive['parameter-group'] && nsConfigPrimitive['parameter-group'].map((parameterGroup)=>{
67 if(parameterGroup && parameterGroup.mandatory != "true") {
68 parameterGroup.optionalChecked = true;
70 return parameterGroup;
73 name: nsConfigPrimitive.name,
74 'nsr_id_ref': props.data.id,
75 'parameter': nsConfigPrimitive.parameter,
76 'parameter-group': optionalizedNsConfigPrimitiveGroup,
77 'vnf-primitive-group':[]
80 nsConfigPrimitive['vnf-primitive-group'] && nsConfigPrimitive['vnf-primitive-group'].map((vnfPrimitiveGroup, vnfPrimitiveGroupIndex) => {
81 let vnfMap = vnfrMap[vnfPrimitiveGroup['member-vnf-index-ref']];
83 vnfGroup.name = vnfMap.name;
84 vnfGroup['member-vnf-index-ref'] = vnfPrimitiveGroup['member-vnf-index-ref'];
85 vnfGroup['vnfr-id-ref'] = vnfMap['vnfr-id-ref'];
87 vnfPrimitiveGroup.primitive.map((primitive, primitiveIndex) => {
88 console.log(primitive);
89 primitive.index = primitiveIndex;
90 primitive.parameter = [];
91 vnfMap['service-primitives'][primitive.name].parameter.map(function(p) {
92 p.index = primitiveIndex;
94 paramCopy.value = undefined;
95 primitive.parameter.push(paramCopy);
97 vnfGroup.inputs.push(primitive);
99 nscp['vnf-primitive-group'].push(vnfGroup);
101 nsConfigPrimitives.push(nscp);
106 nsConfigPrimitives: nsConfigPrimitives
111 handleParamChange = (parameterIndex, vnfPrimitiveIndex, vnfListIndex, nsConfigPrimitiveIndex, event) => {
112 let nsConfigPrimitives = this.state.nsConfigPrimitives;
113 nsConfigPrimitives[nsConfigPrimitiveIndex]['vnf-primitive-group'][vnfListIndex]['inputs'][vnfPrimitiveIndex]['parameter'][parameterIndex]['value'] = event.target.value;
115 nsConfigPrimitives: nsConfigPrimitives
119 handleNsParamChange = (parameterIndex, nsConfigPrimitiveIndex, event) => {
120 let nsConfigPrimitives = this.state.nsConfigPrimitives;
121 nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter'][parameterIndex]['value'] = event.target.value;
123 nsConfigPrimitives: nsConfigPrimitives
127 handleNsParamGroupParamChange = (parameterIndex, parameterGroupIndex, nsConfigPrimitiveIndex, event) => {
128 let nsConfigPrimitives = this.state.nsConfigPrimitives;
129 nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter-group'][parameterGroupIndex]['parameter'][parameterIndex]['value'] = event.target.value;
131 nsConfigPrimitives: nsConfigPrimitives
135 handleExecuteClick = (nsConfigPrimitiveIndex, event) => {
136 var isValid = RecordViewStore.validateInputs({
137 nsConfigPrimitives: this.state.nsConfigPrimitives,
138 nsConfigPrimitiveIndex: nsConfigPrimitiveIndex
141 RecordViewStore.constructAndTriggerNsConfigPrimitive({
142 nsConfigPrimitives: this.state.nsConfigPrimitives,
143 nsConfigPrimitiveIndex: nsConfigPrimitiveIndex
145 //Need a better way to reset
146 //Reset disabled per TEF request
148 // nsConfigPrimitives: null
151 this.props.actions.showNotification('Could not execute service config. Please review your parameters');
154 handleOptionalCheck = (parameterGroupIndex, nsConfigPrimitiveIndex, event) => {
155 let nsConfigPrimitives = this.state.nsConfigPrimitives;
156 let optionalChecked = nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter-group'][parameterGroupIndex].optionalChecked;
157 nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter-group'][parameterGroupIndex].optionalChecked = !optionalChecked;
158 console.log(nsConfigPrimitives)
160 nsConfigPrimitives: nsConfigPrimitives
163 constructConfigPrimitiveTabs = (tabList, tabPanels) => {
165 const hasAccess = self.props.hasAccess;
166 let defaultFromRpc = '';
167 //coded here for dev purposes
168 let mandatoryFieldValue = 'true';
169 if (self.state.vnfrMap) {
170 this.state.nsConfigPrimitives && this.state.nsConfigPrimitives.map((nsConfigPrimitive, nsConfigPrimitiveIndex) => {
172 <Tab key={nsConfigPrimitiveIndex}>{nsConfigPrimitive.name}</Tab>
176 <TabPanel key={nsConfigPrimitiveIndex + '-panel'}>
177 <h4>{nsConfigPrimitive.name}</h4>
178 <div className="noticeSubText noticeSubText_right">
181 {nsConfigPrimitive['parameter'] && nsConfigPrimitive['parameter'].map((parameter, parameterIndex) => {
182 let optionalField = '';
183 let displayField = '';
184 let defaultValue = parameter['default-value'] || '';
185 let isFieldHidden = (parameter['hidden'] && parameter['hidden'] == 'true') || false;
186 let isFieldReadOnly = (parameter['read-only'] && parameter['read-only'] == 'true') || false;
187 if (parameter.mandatory == mandatoryFieldValue) {
188 optionalField = <span className="required">*</span>
190 if (isFieldReadOnly) {
192 <label data-required={(parameter.mandatory == mandatoryFieldValue)}>
194 <div className='readonly'>
195 {parameter.value || defaultValue}
200 displayField = <TextInput label={parameter.name} required={(parameter.mandatory == mandatoryFieldValue)} className="" type="text" defaultValue={defaultValue} value={parameter.value} onChange={this.handleNsParamChange.bind(this, parameterIndex, nsConfigPrimitiveIndex)} />;
203 <div key={parameterIndex} className="nsConfigPrimitiveParameters" style={{display: isFieldHidden ? 'none':'inherit'}}>
206 <li key={parameterIndex} className="">
214 {nsConfigPrimitive['parameter-group'] && nsConfigPrimitive['parameter-group'].map((parameterGroup, parameterGroupIndex) => {
215 let optionalField = '';
216 let overlayGroup = null;
217 let isOptionalGroup = parameterGroup.mandatory != mandatoryFieldValue;
218 let optionalChecked = parameterGroup.optionalChecked;
219 let inputIsDiabled = (!optionalChecked && isOptionalGroup);
220 if (isOptionalGroup) {
221 optionalField = <input type="checkbox" name="" checked={optionalChecked} onChange={self.handleOptionalCheck.bind(null, parameterGroupIndex, nsConfigPrimitiveIndex)} />;
222 // overlayGroup = <div className="configGroupOverlay"></div>
225 <div key={parameterGroupIndex} className="nsConfigPrimitiveParameterGroupParameters">
226 <h2>{parameterGroup.name} {optionalField}</h2>
227 <div className="parameterGroup">
232 {parameterGroup['parameter'] && parameterGroup['parameter'].map((parameter, parameterIndex) => {
233 let optionalField = '';
234 let displayField = '';
235 let defaultValue = parameter['default-value'] || '';
236 let isFieldHidden = (parameter['hidden'] && parameter['hidden'] == 'true') || false;
237 let isFieldReadOnly = (parameter['read-only'] && parameter['read-only'] == 'true') || false;
238 if (parameter.mandatory == mandatoryFieldValue) {
239 optionalField = <span className="required">*</span>
241 if (isFieldReadOnly) {
242 displayField = <div className='readonly'>{parameter.value || defaultValue}</div>
244 displayField = <input required={(parameter.mandatory == mandatoryFieldValue)} className="" disabled={inputIsDiabled} type="text" defaultValue={defaultValue} value={parameter.value} onChange={this.handleNsParamGroupParamChange.bind(this, parameterIndex, parameterGroupIndex, nsConfigPrimitiveIndex)} />
246 if (parameter.mandatory == mandatoryFieldValue) {
247 optionalField = <span className="required">*</span>
250 <div key={parameterIndex} className="nsConfigPrimitiveParameters" style={{display: isFieldHidden ? 'none':'inherit'}}>
253 <li key={parameterIndex} className="">
254 <label className={inputIsDiabled && 'disabled'} data-required={(parameter.mandatory == mandatoryFieldValue)}>
271 {nsConfigPrimitive['vnf-primitive-group'] && nsConfigPrimitive['vnf-primitive-group'].map((vnfGroup, vnfGroupIndex) => {
273 <div key={vnfGroupIndex} className="vnfParamGroup">
274 <h2>{vnfGroup.name}</h2>
276 {vnfGroup.inputs.map((inputGroup, inputGroupIndex) => {
278 <div key={inputGroupIndex}>
279 <h3>{inputGroup.name}</h3>
280 <ul className="parameterGroup">
282 inputGroup.parameter.map((input, inputIndex) => {
283 let optionalField = '';
284 let displayField = '';
285 let defaultValue = input['default-value'] || '';
286 let isFieldHidden = (input['hidden'] && input['hidden'] == 'true') || false;
287 let isFieldReadOnly = (input['read-only'] && input['read-only'] == 'true') || false;
288 if (input.mandatory == mandatoryFieldValue) {
289 optionalField = <span className="required">*</span>
291 if (isFieldReadOnly) {
292 displayField = <div className='readonly'>{input.value || defaultValue}</div>
294 displayField = <TextInput label={input.name} type="text" required={(input.mandatory == mandatoryFieldValue)} className="" type="text" defaultValue={defaultValue} value={input.value} onChange={this.handleParamChange.bind(this, inputIndex, inputGroupIndex, vnfGroupIndex, nsConfigPrimitiveIndex)}/>
297 <li key={inputIndex} style={{display: isFieldHidden ? 'none':'inherit'}}>
313 <Button label="Submit" isLoading={this.state.isSaving} onClick={this.handleExecuteClick.bind(this, nsConfigPrimitiveIndex)} className="dark"/>
323 handleSelect = (index, last) => {
324 // console.log('Selected tab is', index, 'last index is', last);
330 let isConfiguring = (this.props.data['config-status'] && this.props.data['config-status'] != 'configured') || false;
331 let displayConfigStatus = isConfiguring ? '(Disabled - Configuring)': '';
333 this.constructConfigPrimitiveTabs(tabList, tabPanels);
336 <div className="nsConfigPrimitives">
337 <div className="launchpadCard_title">
338 SERVICE-PRIMITIVES {displayConfigStatus}
340 <div className={isConfiguring ? 'configuring': '' + 'nsConfigPrimitiveTabs'}>
341 <Tabs onSelect={this.handleSelect}>
355 function deepCopy (toCopy, copyObj) {
356 for (let k in toCopy) {
357 switch (toCopy[k].constructor.name) {
359 copyObj[k] = toCopy[k];
363 toCopy[k].map((v) => {
368 deepCopy(toCopy[k], copyObj[k]);
371 copyObj[k] = toCopy[k]
376 export default SkyquakeComponent(NsrConfigPrimitives);