openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx

   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 'nfvo-components/icon/SVGIcon.jsx';
  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
  54 const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
  55                 <GridItem colSpan={3} key={item.key} >
  56                         <div className={expanded ? 'title' : 'title add-padding'}
  57                                  data-test-id={`btn-${item.key}`}
  58                                  onClick={() => toggle(item.key)}>
  59                                         <SVGIcon name={expanded ? 'chevron-up' : 'chevron-down'}/>
  60                                         <span className='title-text'>{i18n(item.description)}</span>
  61                                         {item.added && <div className='new-line'>{i18n(item.added)}</div>}
  62                         </div>
  63                         <div className={expanded ? 'collapse in' : 'collapse'}>
  64                                 <div>
  65                                         <div>
  66                                                 <Input
  67                                                         data-test-id={`input-${item.key}`}
  68                                                         type='textarea'
  69                                                         isValid={genericFieldInfo[`${prefix}${item.key}`].isValid}
  70                                                         errorText={genericFieldInfo[`${prefix}${item.key}`].errorText}
  71                                                         value={dataMap[`${prefix}${item.key}`]}
  72                                                         onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} />
  73                                         </div>
  74                                 </div>
  75                         </div>
  76                 </GridItem>
  77 );
  78
  79 class SoftwareProductComponentLoadBalancingView extends React.Component {
  80         static propTypes = {
  81                 componentId: React.PropTypes.string.isRequired,
  82                 softwareProductId: React.PropTypes.string.isRequired,
  83                 qdata: React.PropTypes.object,
  84                 qschema: React.PropTypes.object,
  85                 currentSoftwareProduct: React.PropTypes.object
  86         };
  87
  88         state = {
  89                 expanded: {}
  90         };
  91
  92         render() {
  93                 let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
  94                 return (
  95                         <div className='vsp-components-load-balancing'>
  96                                 <div className='halb-data'>
  97                                         { genericFieldInfo && <Form
  98                                                 formReady={null}
  99                                                 isValid={true}
 100                                                 onSubmit={() => this.save()}
 101                                                 isReadOnlyMode={isReadOnlyMode}
 102                                                 hasButtons={false}>
 103                                                 <GridSection title={i18n('High Availability & Load Balancing')}>
 104                                                         <GridItem colSpan={1}>
 105                                                                 <Input
 106                                                                         data-test-id='input-is-component-mandatory'
 107                                                                         label={i18n('Is Component Mandatory')}
 108                                                                         type='select'
 109                                                                         className='input-options-select'
 110                                                                         groupClassName='bootstrap-input-options'
 111                                                                         isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid}
 112                                                                         errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText}
 113                                                                         value={dataMap[`${prefix}isComponentMandatory`]}
 114                                                                         onChange={(e) => {
 115                                                                                 const selectedIndex = e.target.selectedIndex;
 116                                                                                 const val = e.target.options[selectedIndex].value;
 117                                                                                 onQDataChanged({[`${prefix}isComponentMandatory`] : val});}
 118                                                                         }>
 119                                                                          <option key='placeholder' value=''>{i18n('Select...')}</option>
 120                                                                         { genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) }
 121                                                                 </Input>
 122                                                         </GridItem>
 123                                                         <GridItem colSpan={3}/>
 124                                                         <GridItem colSpan={1}>
 125                                                                 <Input
 126                                                                         data-test-id='input-high-availability-mode'
 127                                                                         label={i18n('High Availability Mode')}
 128                                                                         type='select'
 129                                                                         className='input-options-select'
 130                                                                         groupClassName='bootstrap-input-options'
 131                                                                         isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid}
 132                                                                         errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText}
 133                                                                         value={dataMap[`${prefix}highAvailabilityMode`]}
 134                                                                         onChange={(e) => {
 135                                                                                 const selectedIndex = e.target.selectedIndex;
 136                                                                                 const val = e.target.options[selectedIndex].value;
 137                                                                                 onQDataChanged({[`${prefix}highAvailabilityMode`] : val});}
 138                                                                         }>
 139                                                                         <option key='placeholder' value=''>{i18n('Select...')}</option>
 140                                                                         {genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)}
 141                                                                 </Input>
 142                                                         </GridItem>
 143                                                         <GridItem colSpan={3}/>
 144                                                 </GridSection>
 145                                                 <GridSection>
 146                                                 {pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged}
 147                                                            genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'}
 148                                                            expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)}
 149                                                 </GridSection>
 150                                         </Form> }
 151                                 </div>
 152                         </div>
 153                 );
 154         }
 155
 156         toggle(name) {
 157                 let st = this.state.expanded[name] ? true : false;
 158                 let newState = {...this.state};
 159                 newState.expanded[name] = !st;
 160                 this.setState(newState);
 161         }
 162
 163         save() {
 164                 let {onSubmit, qdata} = this.props;
 165                 return onSubmit({qdata});
 166         }
 167 }
 168
 169 export default SoftwareProductComponentLoadBalancingView;