skyquake/plugins/launchpad/src/launchpad_card/vnfrConfigPrimitives.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   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
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  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.
  17  *
  18  */
  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 './vnfrConfigPrimitives.scss';
  24  import TextInput from 'widgets/form_controls/textInput.jsx';
  25  import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
  26
  27  class VnfrConfigPrimitives extends React.Component {
  28     constructor(props) {
  29         super(props);
  30         this.state = {
  31             vnfrs: []
  32         };
  33         this.state.execPrimitive = {};
  34     }
  35
  36     handleExecuteClick = (configPrimitiveIndex, vnfrIndex, e) => {
  37         let execute = RecordViewStore.constructAndTriggerVnfConfigPrimitive({
  38                 vnfrs: this.state.vnfrs,
  39                 configPrimitiveIndex: configPrimitiveIndex,
  40                 vnfrIndex: vnfrIndex
  41         });
  42         if (!execute) {
  43             this.props.actions.showNotification('Could not execute service config. Please review your parameters');
  44         }
  45     }
  46
  47     handleParamChange = (paramIndex, configPrimitiveIndex, vnfrIndex, e) => {
  48         let vnfrs = this.state.vnfrs;
  49         vnfrs[vnfrIndex]["vnf-configuration"]["config-primitive"][configPrimitiveIndex]["parameter"][paramIndex].value = e.target.value
  50         this.setState({
  51             vnfrs: vnfrs
  52         })
  53     }
  54
  55     componentWillReceiveProps(props) {
  56         if (this.state.vnfrs.length == 0) {
  57             this.setState({
  58                 vnfrs: props.data
  59             })
  60         }
  61     }
  62
  63     constructConfigPrimitiveTabs = (tabList, tabPanels) => {
  64         let mandatoryFieldValue = 'true';
  65         this.state.vnfrs && this.state.vnfrs.map((vnfr, vnfrIndex) => {
  66             if (vnfr['vnf-configuration'] && vnfr['vnf-configuration']['config-primitive'] && vnfr['vnf-configuration']['config-primitive'].length > 0) {
  67                 vnfr['vnf-configuration']['config-primitive'].map((configPrimitive, configPrimitiveIndex) => {
  68                     let params = [];
  69                     if (configPrimitive['parameter'] && configPrimitive['parameter'].length > 0) {
  70                         configPrimitive['parameter'].map((param, paramIndex) => {
  71                             let optionalField = '';
  72                             let displayField = '';
  73                             let defaultValue = param['default-value'] || '';
  74                             let isFieldHidden = (param['hidden'] && param['hidden'] == 'true') || false;
  75                             let isFieldReadOnly = (param['read-only'] && param['read-only'] == 'true') || false;
  76                             if (param.mandatory == mandatoryFieldValue) {
  77                                 optionalField = <span className="required">*</span>
  78                             }
  79                             if (isFieldReadOnly) {
  80                                 displayField = <div className='readonly'>{param.value || defaultValue}</div>
  81                             } else {
  82                                 displayField = <TextInput type="text" label={param.name} required={(param.mandatory == mandatoryFieldValue)} className="" type="text" defaultValue={defaultValue} value={param.value} onChange={this.handleParamChange.bind(this, paramIndex, configPrimitiveIndex, vnfrIndex)} />
  83                             }
  84                             params.push(
  85                                 <li key={paramIndex}>
  86                                     {displayField}
  87                                 </li>
  88                             );
  89                         });
  90                     }
  91                     tabList.push(
  92                         <Tab key={configPrimitiveIndex}>{configPrimitive.name}</Tab>
  93                     );
  94
  95                     tabPanels.push(
  96                         <TabPanel key={configPrimitiveIndex + '-panel'}>
  97                             <h4>{configPrimitive.name}</h4>
  98                             <div className="noticeSubText noticeSubText_right">
  99                                 * required
 100                             </div>
 101                             <div>
 102                                 <ul className="parameterGroup">
 103                                     {params}
 104                                 </ul>
 105                             </div>
 106                             <button className="dark" role="button" onClick={this.handleExecuteClick.bind(this, configPrimitiveIndex, vnfrIndex)}>{configPrimitive.name}</button>
 107                         </TabPanel>
 108                     )
 109                 });
 110             }
 111         });
 112     }
 113
 114     render() {
 115
 116         let tabList = [];
 117         let tabPanels = [];
 118         let isConfiguring = (this.props.data['config-status'] && this.props.data['config-status'] != 'configured') || false;
 119         let displayConfigStatus = isConfiguring ? '(Disabled - Configuring)': '';
 120
 121         this.constructConfigPrimitiveTabs(tabList, tabPanels);
 122
 123         return (
 124             <div className="nsConfigPrimitives vnfrConfigPrimitives">
 125                 <div className="launchpadCard_title">
 126                   CONFIG-PRIMITIVES {displayConfigStatus}
 127                 </div>
 128                 <div className={isConfiguring ? 'configuring': 'nsConfigPrimitiveTabs'}>
 129                     <Tabs onSelect={this.handleSelect}>
 130                         <TabList>
 131                             {tabList}
 132                         </TabList>
 133                         {tabPanels}
 134                     </Tabs>
 135                 </div>
 136             </div>
 137
 138         );
 139     }
 140 }
 141 export default SkyquakeComponent(VnfrConfigPrimitives);