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

   1 import React from 'react';
   2 import FontAwesome from 'react-fontawesome';
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4
   5 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   6 import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
   7
   8 const prefix = '/highAvailabilityAndLoadBalancing/';
   9
  10 const pointers = [
  11         {
  12                 key: 'failureLoadDistribution',
  13                 description: 'How is load distributed across live vms in the event of a vm/host failure? please describe'
  14         },
  15         {
  16                 key: 'nkModelImplementation',
  17                 description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
  18         },
  19         {
  20                 key: 'architectureChoice',
  21                 description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
  22                 added: 'Will the arrangement be 1-1 or N-M? Please describe.'
  23         },
  24         {key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'},
  25         {
  26                 key: 'horizontalScaling',
  27                 description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
  28         },
  29         {
  30                 key: 'loadDistributionMechanism',
  31                 description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
  32                 added: 'Please describe.'
  33         }
  34 ];
  35
  36 class SoftwareProductComponentLoadBalancingView extends React.Component {
  37         static propTypes = {
  38                 componentId: React.PropTypes.string.isRequired,
  39                 softwareProductId: React.PropTypes.string.isRequired,
  40                 qdata: React.PropTypes.object,
  41                 qschema: React.PropTypes.object,
  42                 currentSoftwareProduct: React.PropTypes.object
  43         };
  44
  45         state = {
  46                 expanded: {}
  47         };
  48
  49         renderTextAreaItem(item) {
  50                 return (
  51                         <div className='question'>
  52                                 <div className={this.state.expanded[item.key] ? 'title' : 'title add-padding'}
  53                                          onClick={() => this.toggle(item.key)}>
  54                                         <FontAwesome name={this.state.expanded[item.key] ? 'chevron-up' : 'chevron-down'}/>
  55                                         {i18n(item.description)}
  56                                         {item.added && <div className='new-line'>{i18n(item.added)}</div>}
  57                                 </div>
  58                                 <div className={this.state.expanded[item.key] ? 'collapse in' : 'collapse'}>
  59                                         <div className='row'>
  60                                                 <div className='col-md-9'>
  61                                                         <ValidationInput
  62                                                                 type='textarea'
  63                                                                 pointer={`${prefix}${item.key}`}
  64                                                                 maxLength='1000' />
  65                                                 </div>
  66                                         </div>
  67                                 </div>
  68                         </div>
  69                 );
  70         }
  71
  72         render() {
  73                 let {qdata, qschema, onQDataChanged, isReadOnlyMode} = this.props;
  74                 return (
  75                         <div className='vsp-components-load-balancing'>
  76                                 <div className='halb-data'>
  77                                         <div className='load-balancing-page-title'>{i18n('High Availability & Load Balancing')}</div>
  78                                         <ValidationForm
  79                                                 onDataChanged={onQDataChanged}
  80                                                 data={qdata} schema={qschema}
  81                                                 isReadOnlyMode={isReadOnlyMode}
  82                                                 hasButtons={false}>
  83                                                 {pointers.map(pointer => this.renderTextAreaItem(pointer))}
  84                                         </ValidationForm>
  85                                 </div>
  86                         </div>
  87                 );
  88         }
  89
  90         toggle(name) {
  91                 let st = this.state.expanded[name] ? true : false;
  92                 let newState = {...this.state};
  93                 newState.expanded[name] = !st;
  94                 this.setState(newState);
  95         }
  96
  97         save() {
  98                 let {onSubmit, qdata} = this.props;
  99                 return onSubmit({qdata});
 100         }
 101 }
 102
 103 export default SoftwareProductComponentLoadBalancingView;