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