gerrit.onap Code Review - sdc.git/blob

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import Input from'nfvo-components/input/validation/Input.jsx';
  22
  23 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  24 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  25
  26 const prefix = 'highAvailabilityAndLoadBalancing/';
  27
  28 const pointers = [
  29         {
  30                 key: 'failureLoadDistribution',
  31                 description: 'How is load distributed across live vms in the event of a vm/host failure? please describe'
  32         },
  33         {
  34                 key: 'nkModelImplementation',
  35                 description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
  36         },
  37         {
  38                 key: 'architectureChoice',
  39                 description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
  40                 added: 'Will the arrangement be 1-1 or N-M? Please describe.'
  41         },
  42         {key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'},
  43         {
  44                 key: 'horizontalScaling',
  45                 description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
  46         },
  47         {
  48                 key: 'loadDistributionMechanism',
  49                 description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
  50                 added: 'Please describe.'
  51         }
  52 ];
  53 //TODO check for buttons
  54
  55 const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
  56                 <GridItem colSpan={3} key={item.key} >
  57                         <div className={expanded ? 'title' : 'title add-padding'}
  58                                  data-test-id={`btn-${item.key}`}
  59                                  onClick={() => toggle(item.key)}>
  60                                         <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'}/>
  61                                         <span className='title-text'>{i18n(item.description)}</span>
  62                                         {item.added && <div className='new-line'>{i18n(item.added)}</div>}
  63                         </div>
  64                         <div className={expanded ? 'collapse in' : 'collapse'}>
  65                                 <div>
  66                                         <div>
  67                                                 <Input
  68                                                         data-test-id={`input-${item.key}`}
  69                                                         type='textarea'
  70                                                         isValid={genericFieldInfo[`${prefix}${item.key}`].isValid}
  71                                                         errorText={genericFieldInfo[`${prefix}${item.key}`].errorText}
  72                                                         value={dataMap[`${prefix}${item.key}`]}
  73                                                         onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} />
  74                                         </div>
  75                                 </div>
  76                         </div>
  77                 </GridItem>
  78 );
  79
  80 class SoftwareProductComponentLoadBalancingView extends React.Component {
  81         static propTypes = {
  82                 componentId: React.PropTypes.string.isRequired,
  83                 softwareProductId: React.PropTypes.string.isRequired,
  84                 qdata: React.PropTypes.object,
  85                 qschema: React.PropTypes.object,
  86                 currentSoftwareProduct: React.PropTypes.object
  87         };
  88
  89         state = {
  90                 expanded: {}
  91         };
  92
  93         render() {
  94                 let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
  95                 return (
  96                         <div className='vsp-components-load-balancing'>
  97                                 <div className='halb-data'>
  98                                         { genericFieldInfo && <Form
  99                                                 formReady={null}
 100                                                 isValid={true}
 101                                                 onSubmit={() => this.save()}
 102                                                 isReadOnlyMode={isReadOnlyMode}
 103                                                 hasButtons={false}>
 104                                                 <GridSection title={i18n('High Availability & Load Balancing')}>
 105                                                         <GridItem colSpan={1}>
 106                                                                 <Input
 107                                                                         data-test-id='input-is-component-mandatory'
 108                                                                         label={i18n('Is Component Mandatory')}
 109                                                                         type='select'
 110                                                                         className='input-options-select'
 111                                                                         groupClassName='bootstrap-input-options'
 112                                                                         isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid}
 113                                                                         errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText}
 114                                                                         value={dataMap[`${prefix}isComponentMandatory`]}
 115                                                                         onChange={(e) => {
 116                                                                                 const selectedIndex = e.target.selectedIndex;
 117                                                                                 const val = e.target.options[selectedIndex].value;
 118                                                                                 onQDataChanged({[`${prefix}isComponentMandatory`] : val});}
 119                                                                         }>
 120                                                                          <option key='placeholder' value=''>{i18n('Select...')}</option>
 121                                                                         { genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) }
 122                                                                 </Input>
 123                                                         </GridItem>
 124                                                         <GridItem colSpan={3}/>
 125                                                         <GridItem colSpan={1}>
 126                                                                 <Input
 127                                                                         data-test-id='input-high-availability-mode'
 128                                                                         label={i18n('High Availability Mode')}
 129                                                                         type='select'
 130                                                                         className='input-options-select'
 131                                                                         groupClassName='bootstrap-input-options'
 132                                                                         isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid}
 133                                                                         errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText}
 134                                                                         value={dataMap[`${prefix}highAvailabilityMode`]}
 135                                                                         onChange={(e) => {
 136                                                                                 const selectedIndex = e.target.selectedIndex;
 137                                                                                 const val = e.target.options[selectedIndex].value;
 138                                                                                 onQDataChanged({[`${prefix}highAvailabilityMode`] : val});}
 139                                                                         }>
 140                                                                         <option key='placeholder' value=''>{i18n('Select...')}</option>
 141                                                                         {genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)}
 142                                                                 </Input>
 143                                                         </GridItem>
 144                                                         <GridItem colSpan={3}/>
 145                                                 </GridSection>
 146                                                 <GridSection>
 147                                                 {pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged}
 148                                                            genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'}
 149                                                            expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)}
 150                                                 </GridSection>
 151                                         </Form> }
 152                                 </div>
 153                         </div>
 154                 );
 155         }
 156
 157         toggle(name) {
 158                 let st = this.state.expanded[name] ? true : false;
 159                 let newState = {...this.state};
 160                 newState.expanded[name] = !st;
 161                 this.setState(newState);
 162         }
 163
 164         save() {
 165                 let {onSubmit, qdata} = this.props;
 166                 return onSubmit({qdata});
 167         }
 168 }
 169
 170 export default SoftwareProductComponentLoadBalancingView;