1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import React from 'react';
import FontAwesome from 'react-fontawesome';
import i18n from 'nfvo-utils/i18n/i18n.js';
import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
import ValidationInput from'nfvo-components/input/validation/ValidationInput.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.'
}
];
class SoftwareProductComponentLoadBalancingView extends React.Component {
static propTypes = {
componentId: React.PropTypes.string.isRequired,
softwareProductId: React.PropTypes.string.isRequired,
qdata: React.PropTypes.object,
qschema: React.PropTypes.object,
currentSoftwareProduct: React.PropTypes.object
};
state = {
expanded: {}
};
renderTextAreaItem(item) {
return (
<div className='question'>
<div className={this.state.expanded[item.key] ? 'title' : 'title add-padding'}
onClick={() => this.toggle(item.key)}>
<FontAwesome name={this.state.expanded[item.key] ? 'chevron-up' : 'chevron-down'}/>
{i18n(item.description)}
{item.added && <div className='new-line'>{i18n(item.added)}</div>}
</div>
<div className={this.state.expanded[item.key] ? 'collapse in' : 'collapse'}>
<div className='row'>
<div className='col-md-9'>
<ValidationInput
type='textarea'
pointer={`${prefix}${item.key}`}
maxLength='1000' />
</div>
</div>
</div>
</div>
);
}
render() {
let {qdata, qschema, onQDataChanged, isReadOnlyMode} = this.props;
return (
<div className='vsp-components-load-balancing'>
<div className='halb-data'>
<div className='load-balancing-page-title'>{i18n('High Availability & Load Balancing')}</div>
<ValidationForm
onDataChanged={onQDataChanged}
data={qdata} schema={qschema}
isReadOnlyMode={isReadOnlyMode}
hasButtons={false}>
{pointers.map(pointer => this.renderTextAreaItem(pointer))}
</ValidationForm>
</div>
</div>
);
}
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});
}
}
export default SoftwareProductComponentLoadBalancingView;
|
