--- /dev/null
+
+/*
+ *
+ * Copyright 2016 RIFT.IO Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React from 'react';
+import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
+import RecordViewStore from '../recordViewer/recordViewStore.js';
+import Button from 'widgets/button/rw.button.js';
+import './nsConfigPrimitives.scss';
+import TextInput from 'widgets/form_controls/textInput.jsx';
+import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
+
+class NsrConfigPrimitives extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {};
+ this.state.vnfrMap = null;
+ this.state.nsConfigPrimitives = null;
+ }
+
+ componentWillReceiveProps(props) {
+ let vnfrs = props.data['vnfrs'];
+ let vnfrMap = {};
+ let nsConfigPrimitives = [];
+ let vnfList = [];
+ if (vnfrs && !this.state.nsConfigPrimitives) {
+ vnfrs.map((vnfr) => {
+ let vnfrConfigPrimitive = {};
+ vnfrConfigPrimitive.name = vnfr['short-name'];
+ vnfrConfigPrimitive['vnfr-id-ref'] = vnfr['id'];
+ //input references
+ let configPrimitives = vnfr['vnf-configuration']['service-primitive'];
+ //input references by key
+ let vnfrConfigPrimitives = {}
+
+ if (configPrimitives) {
+ let vnfPrimitiveList = [];
+ configPrimitives.map((configPrimitive) => {
+ vnfrConfigPrimitives[configPrimitive.name] = configPrimitive;
+ vnfPrimitiveList.push({
+ name: configPrimitive.name,
+ parameter: configPrimitive.parameter
+ })
+ });
+ vnfrConfigPrimitive['service-primitives'] = vnfrConfigPrimitives;
+ vnfrMap[vnfr['member-vnf-index-ref']] = vnfrConfigPrimitive;
+ }
+ });
+ //nsr service-primitives
+ props.data['service-primitive'] && props.data['service-primitive'].map((nsConfigPrimitive, nsConfigPrimitiveIndex) => {
+ //Add optional field to group. Necessary for driving state.
+ let optionalizedNsConfigPrimitiveGroup = nsConfigPrimitive['parameter-group'] && nsConfigPrimitive['parameter-group'].map((parameterGroup)=>{
+ if(parameterGroup && parameterGroup.mandatory != "true") {
+ parameterGroup.optionalChecked = true;
+ };
+ return parameterGroup;
+ });
+ let nscp = {
+ name: nsConfigPrimitive.name,
+ 'nsr_id_ref': props.data.id,
+ 'parameter': nsConfigPrimitive.parameter,
+ 'parameter-group': optionalizedNsConfigPrimitiveGroup,
+ 'vnf-primitive-group':[]
+ }
+
+ nsConfigPrimitive['vnf-primitive-group'] && nsConfigPrimitive['vnf-primitive-group'].map((vnfPrimitiveGroup, vnfPrimitiveGroupIndex) => {
+ let vnfMap = vnfrMap[vnfPrimitiveGroup['member-vnf-index-ref']];
+ let vnfGroup = {};
+ vnfGroup.name = vnfMap.name;
+ vnfGroup['member-vnf-index-ref'] = vnfPrimitiveGroup['member-vnf-index-ref'];
+ vnfGroup['vnfr-id-ref'] = vnfMap['vnfr-id-ref'];
+ vnfGroup.inputs = [];
+ vnfPrimitiveGroup.primitive.map((primitive, primitiveIndex) => {
+ console.log(primitive);
+ primitive.index = primitiveIndex;
+ primitive.parameter = [];
+ vnfMap['service-primitives'][primitive.name].parameter.map(function(p) {
+ p.index = primitiveIndex;
+ let paramCopy = p;
+ paramCopy.value = undefined;
+ primitive.parameter.push(paramCopy);
+ });
+ vnfGroup.inputs.push(primitive);
+ });
+ nscp['vnf-primitive-group'].push(vnfGroup);
+ });
+ nsConfigPrimitives.push(nscp);
+ });
+ this.setState({
+ vnfrMap: vnfrMap,
+ data: props.data,
+ nsConfigPrimitives: nsConfigPrimitives
+ });
+ }
+ }
+
+ handleParamChange = (parameterIndex, vnfPrimitiveIndex, vnfListIndex, nsConfigPrimitiveIndex, event) => {
+ let nsConfigPrimitives = this.state.nsConfigPrimitives;
+ nsConfigPrimitives[nsConfigPrimitiveIndex]['vnf-primitive-group'][vnfListIndex]['inputs'][vnfPrimitiveIndex]['parameter'][parameterIndex]['value'] = event.target.value;
+ this.setState({
+ nsConfigPrimitives: nsConfigPrimitives
+ });
+ }
+
+ handleNsParamChange = (parameterIndex, nsConfigPrimitiveIndex, event) => {
+ let nsConfigPrimitives = this.state.nsConfigPrimitives;
+ nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter'][parameterIndex]['value'] = event.target.value;
+ this.setState({
+ nsConfigPrimitives: nsConfigPrimitives
+ });
+ }
+
+ handleNsParamGroupParamChange = (parameterIndex, parameterGroupIndex, nsConfigPrimitiveIndex, event) => {
+ let nsConfigPrimitives = this.state.nsConfigPrimitives;
+ nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter-group'][parameterGroupIndex]['parameter'][parameterIndex]['value'] = event.target.value;
+ this.setState({
+ nsConfigPrimitives: nsConfigPrimitives
+ });
+ }
+
+ handleExecuteClick = (nsConfigPrimitiveIndex, event) => {
+ var isValid = RecordViewStore.validateInputs({
+ nsConfigPrimitives: this.state.nsConfigPrimitives,
+ nsConfigPrimitiveIndex: nsConfigPrimitiveIndex
+ });
+ if(isValid) {
+ RecordViewStore.constructAndTriggerNsConfigPrimitive({
+ nsConfigPrimitives: this.state.nsConfigPrimitives,
+ nsConfigPrimitiveIndex: nsConfigPrimitiveIndex
+ });
+ //Need a better way to reset
+ //Reset disabled per TEF request
+ // this.setState({
+ // nsConfigPrimitives: null
+ // })
+ } else {
+ this.props.actions.showNotification('Could not execute service config. Please review your parameters');
+ }
+ }
+ handleOptionalCheck = (parameterGroupIndex, nsConfigPrimitiveIndex, event) => {
+ let nsConfigPrimitives = this.state.nsConfigPrimitives;
+ let optionalChecked = nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter-group'][parameterGroupIndex].optionalChecked;
+ nsConfigPrimitives[nsConfigPrimitiveIndex]['parameter-group'][parameterGroupIndex].optionalChecked = !optionalChecked;
+ console.log(nsConfigPrimitives)
+ this.setState({
+ nsConfigPrimitives: nsConfigPrimitives
+ });
+ }
+ constructConfigPrimitiveTabs = (tabList, tabPanels) => {
+ let self = this;
+ let defaultFromRpc = '';
+ //coded here for dev purposes
+ let mandatoryFieldValue = 'true';
+ if (self.state.vnfrMap) {
+ this.state.nsConfigPrimitives && this.state.nsConfigPrimitives.map((nsConfigPrimitive, nsConfigPrimitiveIndex) => {
+ tabList.push(
+ <Tab key={nsConfigPrimitiveIndex}>{nsConfigPrimitive.name}</Tab>
+ );
+ tabPanels.push(
+ (
+ <TabPanel key={nsConfigPrimitiveIndex + '-panel'}>
+ <h4>{nsConfigPrimitive.name}</h4>
+ <div className="noticeSubText noticeSubText_right">
+ * required
+ </div>
+ {nsConfigPrimitive['parameter'] && nsConfigPrimitive['parameter'].map((parameter, parameterIndex) => {
+ let optionalField = '';
+ let displayField = '';
+ let defaultValue = parameter['default-value'] || '';
+ let isFieldHidden = (parameter['hidden'] && parameter['hidden'] == 'true') || false;
+ let isFieldReadOnly = (parameter['read-only'] && parameter['read-only'] == 'true') || false;
+ if (parameter.mandatory == mandatoryFieldValue) {
+ optionalField = <span className="required">*</span>
+ }
+ if (isFieldReadOnly) {
+ displayField = (
+ <label data-required={(parameter.mandatory == mandatoryFieldValue)}>
+ {parameter.name}
+ <div className='readonly'>
+ {parameter.value || defaultValue}
+ </div>
+ </label>
+ )
+ } else {
+ displayField = <TextInput label={parameter.name} required={(parameter.mandatory == mandatoryFieldValue)} className="" type="text" defaultValue={defaultValue} value={parameter.value} onChange={this.handleNsParamChange.bind(this, parameterIndex, nsConfigPrimitiveIndex)} />;
+ }
+ return (
+ <div key={parameterIndex} className="nsConfigPrimitiveParameters" style={{display: isFieldHidden ? 'none':'inherit'}}>
+ <ul>
+ {
+ <li key={parameterIndex} className="">
+ {displayField}
+ </li>
+ }
+ </ul>
+ </div>
+ )
+ })}
+ {nsConfigPrimitive['parameter-group'] && nsConfigPrimitive['parameter-group'].map((parameterGroup, parameterGroupIndex) => {
+ let optionalField = '';
+ let overlayGroup = null;
+ let isOptionalGroup = parameterGroup.mandatory != mandatoryFieldValue;
+ let optionalChecked = parameterGroup.optionalChecked;
+ let inputIsDiabled = (!optionalChecked && isOptionalGroup);
+ if (isOptionalGroup) {
+ optionalField = <input type="checkbox" name="" checked={optionalChecked} onChange={self.handleOptionalCheck.bind(null, parameterGroupIndex, nsConfigPrimitiveIndex)} />;
+ // overlayGroup = <div className="configGroupOverlay"></div>
+ }
+ return (
+ <div key={parameterGroupIndex} className="nsConfigPrimitiveParameterGroupParameters">
+ <h2>{parameterGroup.name} {optionalField}</h2>
+ <div className="parameterGroup">
+ {overlayGroup}
+ <ul className="">
+ <li className="">
+
+ {parameterGroup['parameter'] && parameterGroup['parameter'].map((parameter, parameterIndex) => {
+ let optionalField = '';
+ let displayField = '';
+ let defaultValue = parameter['default-value'] || '';
+ let isFieldHidden = (parameter['hidden'] && parameter['hidden'] == 'true') || false;
+ let isFieldReadOnly = (parameter['read-only'] && parameter['read-only'] == 'true') || false;
+ if (parameter.mandatory == mandatoryFieldValue) {
+ optionalField = <span className="required">*</span>
+ }
+ if (isFieldReadOnly) {
+ displayField = <div className='readonly'>{parameter.value || defaultValue}</div>
+ } else {
+ displayField = <input required={(parameter.mandatory == mandatoryFieldValue)} className="" disabled={inputIsDiabled} type="text" defaultValue={defaultValue} value={parameter.value} onChange={this.handleNsParamGroupParamChange.bind(this, parameterIndex, parameterGroupIndex, nsConfigPrimitiveIndex)} />
+ }
+ if (parameter.mandatory == mandatoryFieldValue) {
+ optionalField = <span className="required">*</span>
+ }
+ return (
+ <div key={parameterIndex} className="nsConfigPrimitiveParameters" style={{display: isFieldHidden ? 'none':'inherit'}}>
+ <ul>
+ {
+ <li key={parameterIndex} className="">
+ <label className={inputIsDiabled && 'disabled'} data-required={(parameter.mandatory == mandatoryFieldValue)}>
+ {parameter.name}
+ {displayField}
+ </label>
+
+ </li>
+ }
+ </ul>
+ </div>
+ )
+ })}
+ </li>
+ </ul>
+ </div>
+ </div>
+ );
+ })}
+ {nsConfigPrimitive['vnf-primitive-group'] && nsConfigPrimitive['vnf-primitive-group'].map((vnfGroup, vnfGroupIndex) => {
+ return (
+ <div key={vnfGroupIndex} className="vnfParamGroup">
+ <h2>{vnfGroup.name}</h2>
+
+ {vnfGroup.inputs.map((inputGroup, inputGroupIndex) => {
+ return (
+ <div key={inputGroupIndex}>
+ <h3>{inputGroup.name}</h3>
+ <ul className="parameterGroup">
+ {
+ inputGroup.parameter.map((input, inputIndex) => {
+ let optionalField = '';
+ let displayField = '';
+ let defaultValue = input['default-value'] || '';
+ let isFieldHidden = (input['hidden'] && input['hidden'] == 'true') || false;
+ let isFieldReadOnly = (input['read-only'] && input['read-only'] == 'true') || false;
+ if (input.mandatory == mandatoryFieldValue) {
+ optionalField = <span className="required">*</span>
+ }
+ if (isFieldReadOnly) {
+ displayField = <div className='readonly'>{input.value || defaultValue}</div>
+ } else {
+ 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)}/>
+ }
+ return (
+ <li key={inputIndex} style={{display: isFieldHidden ? 'none':'inherit'}}>
+ {displayField}
+ </li>
+ )
+ })
+ }
+ </ul>
+ </div>
+ )
+ })}
+
+ </div>
+ )
+ })}
+ <Button label="Submit" isLoading={this.state.isSaving} onClick={this.handleExecuteClick.bind(this, nsConfigPrimitiveIndex)} className="dark"/>
+ </TabPanel>
+ )
+ );
+ });
+ }
+ }
+
+ handleSelect = (index, last) => {
+ // console.log('Selected tab is', index, 'last index is', last);
+ }
+ render() {
+
+ let tabList = [];
+ let tabPanels = [];
+ let isConfiguring = (this.props.data['config-status'] && this.props.data['config-status'] != 'configured') || false;
+ let displayConfigStatus = isConfiguring ? '(Disabled - Configuring)': '';
+
+ this.constructConfigPrimitiveTabs(tabList, tabPanels);
+
+ return (
+ <div className="nsConfigPrimitives">
+ <div className="launchpadCard_title">
+ SERVICE-PRIMITIVES {displayConfigStatus}
+ </div>
+ <div className={isConfiguring ? 'configuring': '' + 'nsConfigPrimitiveTabs'}>
+ <Tabs onSelect={this.handleSelect}>
+ <TabList>
+ {tabList}
+ </TabList>
+ {tabPanels}
+ </Tabs>
+ </div>
+ </div>
+
+ );
+ }
+}
+
+
+function deepCopy (toCopy, copyObj) {
+ for (let k in toCopy) {
+ switch (toCopy[k].constructor.name) {
+ case "String":
+ copyObj[k] = toCopy[k];
+ break;
+ case "Array":
+ copyObj[k] = [];
+ toCopy[k].map((v) => {
+ copyObj[k].push(v)
+ });
+ break;
+ case "Object":
+ deepCopy(toCopy[k], copyObj[k]);
+ break;
+ default:
+ copyObj[k] = toCopy[k]
+ }
+ }
+ return copyObj;
+}
+export default SkyquakeComponent(NsrConfigPrimitives);
projects / osm / UI.git / blobdiff