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']['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 let defaultFromRpc = '';
166 //coded here for dev purposes
167 let mandatoryFieldValue = 'true';
168 if (self.state.vnfrMap) {
169 this.state.nsConfigPrimitives && this.state.nsConfigPrimitives.map((nsConfigPrimitive, nsConfigPrimitiveIndex) => {
171 <Tab key={nsConfigPrimitiveIndex}>{nsConfigPrimitive.name}</Tab>
175 <TabPanel key={nsConfigPrimitiveIndex + '-panel'}>
176 <h4>{nsConfigPrimitive.name}</h4>
177 <div className="noticeSubText noticeSubText_right">
180 {nsConfigPrimitive['parameter'] && nsConfigPrimitive['parameter'].map((parameter, parameterIndex) => {
181 let optionalField = '';
182 let displayField = '';
183 let defaultValue = parameter['default-value'] || '';
184 let isFieldHidden = (parameter['hidden'] && parameter['hidden'] == 'true') || false;
185 let isFieldReadOnly = (parameter['read-only'] && parameter['read-only'] == 'true') || false;
186 if (parameter.mandatory == mandatoryFieldValue) {
187 optionalField = <span className="required">*</span>
189 if (isFieldReadOnly) {
191 <label data-required={(parameter.mandatory == mandatoryFieldValue)}>
193 <div className='readonly'>
194 {parameter.value || defaultValue}
199 displayField = <TextInput label={parameter.name} required={(parameter.mandatory == mandatoryFieldValue)} className="" type="text" defaultValue={defaultValue} value={parameter.value} onChange={this.handleNsParamChange.bind(this, parameterIndex, nsConfigPrimitiveIndex)} />;
202 <div key={parameterIndex} className="nsConfigPrimitiveParameters" style={{display: isFieldHidden ? 'none':'inherit'}}>
205 <li key={parameterIndex} className="">
213 {nsConfigPrimitive['parameter-group'] && nsConfigPrimitive['parameter-group'].map((parameterGroup, parameterGroupIndex) => {
214 let optionalField = '';
215 let overlayGroup = null;
216 let isOptionalGroup = parameterGroup.mandatory != mandatoryFieldValue;
217 let optionalChecked = parameterGroup.optionalChecked;
218 let inputIsDiabled = (!optionalChecked && isOptionalGroup);
219 if (isOptionalGroup) {
220 optionalField = <input type="checkbox" name="" checked={optionalChecked} onChange={self.handleOptionalCheck.bind(null, parameterGroupIndex, nsConfigPrimitiveIndex)} />;
221 // overlayGroup = <div className="configGroupOverlay"></div>
224 <div key={parameterGroupIndex} className="nsConfigPrimitiveParameterGroupParameters">
225 <h2>{parameterGroup.name} {optionalField}</h2>
226 <div className="parameterGroup">
231 {parameterGroup['parameter'] && parameterGroup['parameter'].map((parameter, parameterIndex) => {
232 let optionalField = '';
233 let displayField = '';
234 let defaultValue = parameter['default-value'] || '';
235 let isFieldHidden = (parameter['hidden'] && parameter['hidden'] == 'true') || false;
236 let isFieldReadOnly = (parameter['read-only'] && parameter['read-only'] == 'true') || false;
237 if (parameter.mandatory == mandatoryFieldValue) {
238 optionalField = <span className="required">*</span>
240 if (isFieldReadOnly) {
241 displayField = <div className='readonly'>{parameter.value || defaultValue}</div>
243 displayField = <input required={(parameter.mandatory == mandatoryFieldValue)} className="" disabled={inputIsDiabled} type="text" defaultValue={defaultValue} value={parameter.value} onChange={this.handleNsParamGroupParamChange.bind(this, parameterIndex, parameterGroupIndex, nsConfigPrimitiveIndex)} />
245 if (parameter.mandatory == mandatoryFieldValue) {
246 optionalField = <span className="required">*</span>
249 <div key={parameterIndex} className="nsConfigPrimitiveParameters" style={{display: isFieldHidden ? 'none':'inherit'}}>
252 <li key={parameterIndex} className="">
253 <label className={inputIsDiabled && 'disabled'} data-required={(parameter.mandatory == mandatoryFieldValue)}>
270 {nsConfigPrimitive['vnf-primitive-group'] && nsConfigPrimitive['vnf-primitive-group'].map((vnfGroup, vnfGroupIndex) => {
272 <div key={vnfGroupIndex} className="vnfParamGroup">
273 <h2>{vnfGroup.name}</h2>
275 {vnfGroup.inputs.map((inputGroup, inputGroupIndex) => {
277 <div key={inputGroupIndex}>
278 <h3>{inputGroup.name}</h3>
279 <ul className="parameterGroup">
281 inputGroup.parameter.map((input, inputIndex) => {
282 let optionalField = '';
283 let displayField = '';
284 let defaultValue = input['default-value'] || '';
285 let isFieldHidden = (input['hidden'] && input['hidden'] == 'true') || false;
286 let isFieldReadOnly = (input['read-only'] && input['read-only'] == 'true') || false;
287 if (input.mandatory == mandatoryFieldValue) {
288 optionalField = <span className="required">*</span>
290 if (isFieldReadOnly) {
291 displayField = <div className='readonly'>{input.value || defaultValue}</div>
293 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)}/>
296 <li key={inputIndex} style={{display: isFieldHidden ? 'none':'inherit'}}>
310 <Button label="Submit" isLoading={this.state.isSaving} onClick={this.handleExecuteClick.bind(this, nsConfigPrimitiveIndex)} className="dark"/>
318 handleSelect = (index, last) => {
319 // console.log('Selected tab is', index, 'last index is', last);
325 let isConfiguring = (this.props.data['config-status'] && this.props.data['config-status'] != 'configured') || false;
326 let displayConfigStatus = isConfiguring ? '(Disabled - Configuring)': '';
328 this.constructConfigPrimitiveTabs(tabList, tabPanels);
331 <div className="nsConfigPrimitives">
332 <div className="launchpadCard_title">
333 SERVICE-PRIMITIVES {displayConfigStatus}
335 <div className={isConfiguring ? 'configuring': '' + 'nsConfigPrimitiveTabs'}>
336 <Tabs onSelect={this.handleSelect}>
350 function deepCopy (toCopy, copyObj) {
351 for (let k in toCopy) {
352 switch (toCopy[k].constructor.name) {
354 copyObj[k] = toCopy[k];
358 toCopy[k].map((v) => {
363 deepCopy(toCopy[k], copyObj[k]);
366 copyObj[k] = toCopy[k]
371 export default SkyquakeComponent(NsrConfigPrimitives);