diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx | 359 |
1 files changed, 229 insertions, 130 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx index 1cbb9afc5d..4c90fc0be2 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx @@ -19,7 +19,7 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; -import Input from'nfvo-components/input/validation/Input.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; @@ -27,145 +27,244 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const prefix = 'highAvailabilityAndLoadBalancing/'; const pointers = [ - { - key: 'failureLoadDistribution', - description: 'How is load distributed across live vms in the event of a vm/host failure? please describe' - }, - { - key: 'nkModelImplementation', - description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.' - }, - { - key: 'architectureChoice', - description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ', - added: 'Will the arrangement be 1-1 or N-M? Please describe.' - }, - {key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'}, - { - key: 'horizontalScaling', - description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.' - }, - { - key: 'loadDistributionMechanism', - description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?', - added: 'Please describe.' - } + { + key: 'failureLoadDistribution', + description: + 'How is load distributed across live vms in the event of a vm/host failure? please describe' + }, + { + key: 'nkModelImplementation', + description: + 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.' + }, + { + key: 'architectureChoice', + description: + 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ', + added: 'Will the arrangement be 1-1 or N-M? Please describe.' + }, + { + key: 'slaRequirements', + description: 'Specify application SLA requirements on Cloud platform.' + }, + { + key: 'horizontalScaling', + description: + 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.' + }, + { + key: 'loadDistributionMechanism', + description: + 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?', + added: 'Please describe.' + } ]; //TODO check for buttons -const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => ( - <GridItem colSpan={3} key={item.key} > - <div className={expanded ? 'title' : 'title add-padding'} - data-test-id={`btn-${item.key}`} - onClick={() => toggle(item.key)}> - <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'}/> - <span className='title-text'>{i18n(item.description)}</span> - {item.added && <div className='new-line'>{i18n(item.added)}</div>} - </div> - <div className={expanded ? 'collapse in' : 'collapse'}> - <div> - <div> - <Input - data-test-id={`input-${item.key}`} - type='textarea' - isValid={genericFieldInfo[`${prefix}${item.key}`].isValid} - errorText={genericFieldInfo[`${prefix}${item.key}`].errorText} - value={dataMap[`${prefix}${item.key}`]} - onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} /> - </div> - </div> - </div> - </GridItem> +const TextAreaItem = ({ + item, + toggle, + expanded, + genericFieldInfo, + dataMap, + onQDataChanged +}) => ( + <GridItem colSpan={3} key={item.key}> + <div + className={expanded ? 'title' : 'title add-padding'} + data-test-id={`btn-${item.key}`} + onClick={() => toggle(item.key)}> + <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'} /> + <span className="title-text">{i18n(item.description)}</span> + {item.added && <div className="new-line">{i18n(item.added)}</div>} + </div> + <div className={expanded ? 'collapse in' : 'collapse'}> + <div> + <div> + <Input + data-test-id={`input-${item.key}`} + type="textarea" + isValid={ + genericFieldInfo[`${prefix}${item.key}`].isValid + } + errorText={ + genericFieldInfo[`${prefix}${item.key}`].errorText + } + value={dataMap[`${prefix}${item.key}`]} + onChange={val => + onQDataChanged({ [`${prefix}${item.key}`]: val }) + } + /> + </div> + </div> + </div> + </GridItem> ); class SoftwareProductComponentLoadBalancingView extends React.Component { - static propTypes = { - componentId: PropTypes.string.isRequired, - softwareProductId: PropTypes.string.isRequired, - qdata: PropTypes.object, - qschema: PropTypes.object, - currentSoftwareProduct: PropTypes.object - }; + static propTypes = { + componentId: PropTypes.string.isRequired, + softwareProductId: PropTypes.string.isRequired, + qdata: PropTypes.object, + qschema: PropTypes.object, + currentSoftwareProduct: PropTypes.object + }; - state = { - expanded: {} - }; + state = { + expanded: {} + }; - render() { - let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props; - return ( - <div className='vsp-components-load-balancing'> - <div className='halb-data'> - { genericFieldInfo && <Form - formReady={null} - isValid={true} - onSubmit={() => this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - <GridSection title={i18n('High Availability & Load Balancing')}> - <GridItem colSpan={1}> - <Input - data-test-id='input-is-component-mandatory' - label={i18n('Is Component Mandatory')} - type='select' - className='input-options-select' - groupClassName='bootstrap-input-options' - isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid} - errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText} - value={dataMap[`${prefix}isComponentMandatory`]} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({[`${prefix}isComponentMandatory`] : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - { genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) } - </Input> - </GridItem> - <GridItem colSpan={3}/> - <GridItem colSpan={1}> - <Input - data-test-id='input-high-availability-mode' - label={i18n('High Availability Mode')} - type='select' - className='input-options-select' - groupClassName='bootstrap-input-options' - isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid} - errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText} - value={dataMap[`${prefix}highAvailabilityMode`]} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({[`${prefix}highAvailabilityMode`] : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - {genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)} - </Input> - </GridItem> - <GridItem colSpan={3}/> - </GridSection> - <GridSection> - {pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged} - genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'} - expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)} - </GridSection> - </Form> } - </div> - </div> - ); - } + render() { + let { + dataMap, + genericFieldInfo, + onQDataChanged, + isReadOnlyMode + } = this.props; + return ( + <div className="vsp-components-load-balancing"> + <div className="halb-data"> + {genericFieldInfo && ( + <Form + formReady={null} + isValid={true} + onSubmit={() => this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> + <GridSection + title={i18n( + 'High Availability & Load Balancing' + )}> + <GridItem colSpan={1}> + <Input + data-test-id="input-is-component-mandatory" + label={i18n('Is Component Mandatory')} + type="select" + className="input-options-select" + groupClassName="bootstrap-input-options" + isValid={ + genericFieldInfo[ + `${prefix}isComponentMandatory` + ].isValid + } + errorText={ + genericFieldInfo[ + `${prefix}isComponentMandatory` + ].errorText + } + value={ + dataMap[ + `${prefix}isComponentMandatory` + ] + } + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onQDataChanged({ + [`${prefix}isComponentMandatory`]: val + }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {genericFieldInfo[ + `${prefix}isComponentMandatory` + ].enum.map(isMan => ( + <option + value={isMan.enum} + key={isMan.enum}> + {isMan.title} + </option> + ))} + </Input> + </GridItem> + <GridItem colSpan={3} /> + <GridItem colSpan={1}> + <Input + data-test-id="input-high-availability-mode" + label={i18n('High Availability Mode')} + type="select" + className="input-options-select" + groupClassName="bootstrap-input-options" + isValid={ + genericFieldInfo[ + `${prefix}highAvailabilityMode` + ].isValid + } + errorText={ + genericFieldInfo[ + `${prefix}highAvailabilityMode` + ].errorText + } + value={ + dataMap[ + `${prefix}highAvailabilityMode` + ] + } + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onQDataChanged({ + [`${prefix}highAvailabilityMode`]: val + }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {genericFieldInfo[ + `${prefix}highAvailabilityMode` + ].enum.map(hmode => ( + <option + value={hmode.enum} + key={hmode.enum}> + {hmode.title} + </option> + ))} + </Input> + </GridItem> + <GridItem colSpan={3} /> + </GridSection> + <GridSection> + {pointers.map(pointer => ( + <TextAreaItem + onQDataChanged={onQDataChanged} + genericFieldInfo={genericFieldInfo} + dataMap={dataMap} + item={pointer} + key={pointer.key + 'pKey'} + expanded={ + this.state.expanded[pointer.key] + } + toggle={name => { + this.toggle(name); + }} + /> + ))} + </GridSection> + </Form> + )} + </div> + </div> + ); + } - toggle(name) { - let st = this.state.expanded[name] ? true : false; - let newState = {...this.state}; - newState.expanded[name] = !st; - this.setState(newState); - } + toggle(name) { + let st = this.state.expanded[name] ? true : false; + let newState = { ...this.state }; + newState.expanded[name] = !st; + this.setState(newState); + } - save() { - let {onSubmit, qdata} = this.props; - return onSubmit({qdata}); - } + save() { + let { onSubmit, qdata } = this.props; + return onSubmit({ qdata }); + } } export default SoftwareProductComponentLoadBalancingView; |