Skip to content
This repository was archived by the owner on Feb 22, 2022. It is now read-only.

Commit f293719

Browse files
gbraadgbraad
committed
Configuration uses tabs and clamps number input
1 parent 9b7e98a commit f293719

File tree

4 files changed

+165
-109
lines changed

4 files changed

+165
-109
lines changed

‎src/components/Configuration.jsx

+161-108
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import {
44
Button,
55
Form, FormGroup,
66
TextInput, NumberInput,
7-
ActionGroup, Checkbox
7+
Checkbox,
8+
Tab, Tabs, TabTitleText,
9+
TabContentBody
810
} from '@patternfly/react-core';
911

1012
import "./Configuration.scss";
@@ -14,6 +16,7 @@ export default class Configuration extends React.Component {
1416
constructor(props) {
1517
super(props);
1618
this.state = {
19+
activeTabKey: 0,
1720
preset: "unknown",
1821
cpus: 0,
1922
memory: 0,
@@ -28,16 +31,33 @@ export default class Configuration extends React.Component {
2831

2932
this.configurationSaveClicked = this.configurationSaveClicked.bind(this);
3033
this.configurationResetClicked = this.configurationResetClicked.bind(this);
34+
this.handleTabClick = this.handleTabClick.bind(this);
35+
36+
this.updateClampedValue = this.updateClampedValue.bind(this);
3137
this.updateValue = this.updateValue.bind(this);
3238
}
3339

40+
// Toggle currently active tab
41+
handleTabClick(event, tabIndex) {
42+
this.setState({
43+
activeTabKey: tabIndex
44+
});
45+
};
46+
3447
updateValues(values) {
3548
const self = this; // make sure 'self' references to this
3649
Object.entries(values).forEach(function(value) {
3750
self.updateValue(value[0], value[1]);
3851
});
3952
}
4053

54+
updateClampedValue(key, min, value) {
55+
if(value < min) {
56+
value = min;
57+
}
58+
this.updateValue(key, value);
59+
}
60+
4161
updateValue(key, value) {
4262
if(this.state["" + key] !== undefined) {
4363
const newState = { ["" + key]: value };
@@ -54,115 +74,141 @@ export default class Configuration extends React.Component {
5474
}
5575

5676
render() {
77+
const {activeTabKey, isBox } = this.state;
78+
79+
const tabStyle = {
80+
height: this.props.height,
81+
}
82+
83+
const proxyInputStyle = {
84+
width: this.props.textInputWidth
85+
}
86+
5787
return (
5888
<div>
59-
<Form isHorizontal>
60-
61-
<FormGroup fieldId='settings-cpu' label="CPU">
62-
<NumberInput id='settings-cpu'
63-
className="cpus"
64-
inputName="cpus"
65-
minusBtnAriaLabel="minus"
66-
plusBtnAriaLabel="plus"
67-
unit=""
68-
min="1"
69-
value={this.state.cpus}
70-
widthChars={5}
71-
onPlus={event => this.updateValue('cpus', this.state.cpus + 1)}
72-
onMinus={event => this.updateValue('cpus', this.state.cpus - 1)}
73-
onChange={value => this.state['cpus'] }
74-
/>
75-
</FormGroup>
76-
<FormGroup fieldId='settings-memory' label="Memory">
77-
<NumberInput id='settings-memory'
78-
className="memory"
79-
inputName="memory"
80-
minusBtnAriaLabel="minus"
81-
plusBtnAriaLabel="plus"
82-
unit="MiB"
83-
min="8192"
84-
value={this.state.memory}
85-
widthChars={5}
86-
onPlus={event => this.updateValue('memory', this.state.memory + 512)}
87-
onMinus={event => this.updateValue('memory', this.state.memory - 512)}
88-
onChange={value => this.state['memory'] }
89-
/>
90-
</FormGroup>
91-
<FormGroup fieldId='settings-disksize' label="Disk size">
92-
<NumberInput id='settings-disksize'
93-
className="disk-size"
94-
inputName="disk-size"
95-
minusBtnAriaLabel="minus"
96-
plusBtnAriaLabel="plus"
97-
unit="GB"
98-
min="20"
99-
value={this.state["disk-size"]}
100-
widthChars={5}
101-
onPlus={event => this.updateValue('disk-size', this.state["disk-size"] + 1)}
102-
onMinus={event => this.updateValue('disk-size', this.state["disk-size"] - 1)}
103-
onChange={value => this.state['disk-size'] }
104-
/>
105-
</FormGroup>
106-
107-
108-
109-
<FormGroup fieldId='settings-preset' label="Preset">
110-
<PresetSelection id="settings-preset" isCompact
111-
className="preset"
112-
inputName="preset"
113-
value={this.state["preset"]}
114-
onChange={value => this.updateValue('preset', value)} />
115-
</FormGroup>
116-
117-
118-
119-
<FormGroup fieldId='config-telemetry' label="Telemetry">
120-
<Checkbox id='config-consentTelemetry'
121-
className="consentTelemetry"
122-
isChecked={this.state["consent-telemetry"] === "yes" ? true : false }
123-
onChange={value => this.updateValue('consent-telemetry', value === true ? "yes" : "no")}
124-
label="Report telemetry to Red Hat"
125-
description="Consent to allow basic information about the system and cluster to be collected for development and debugging purposes" />
126-
</FormGroup>
127-
89+
<Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={true}>
90+
91+
<Tab eventKey={0} title={<TabTitleText>Basic</TabTitleText>}>
92+
<TabContentBody style={tabStyle} hasPadding>
93+
<Form isHorizontal>
94+
<FormGroup fieldId='settings-cpu' label="CPU">
95+
<NumberInput id='settings-cpu'
96+
className="cpus"
97+
inputName="cpus"
98+
minusBtnAriaLabel="minus"
99+
plusBtnAriaLabel="plus"
100+
unit=""
101+
min="1"
102+
value={this.state.cpus}
103+
widthChars={5}
104+
onPlus={event => this.updateValue('cpus', this.state.cpus + 1)}
105+
onMinus={event => this.updateClampedValue('cpus', 1, this.state.cpus - 1)}
106+
onChange={value => this.state['cpus'] }
107+
/>
108+
</FormGroup>
109+
<FormGroup fieldId='settings-memory' label="Memory">
110+
<NumberInput id='settings-memory'
111+
className="memory"
112+
inputName="memory"
113+
minusBtnAriaLabel="minus"
114+
plusBtnAriaLabel="plus"
115+
unit="MiB"
116+
min="8192"
117+
value={this.state.memory}
118+
widthChars={5}
119+
onPlus={event => this.updateValue('memory', this.state.memory + 512)}
120+
onMinus={event => this.updateClampedValue('memory', 2048, this.state.memory - 512)}
121+
onChange={value => this.state['memory'] }
122+
/>
123+
</FormGroup>
124+
<FormGroup fieldId='settings-disksize' label="Disk size">
125+
<NumberInput id='settings-disksize'
126+
className="disk-size"
127+
inputName="disk-size"
128+
minusBtnAriaLabel="minus"
129+
plusBtnAriaLabel="plus"
130+
unit="GB"
131+
min="20"
132+
value={this.state["disk-size"]}
133+
widthChars={5}
134+
onPlus={event => this.updateValue('disk-size', this.state["disk-size"] + 1)}
135+
onMinus={event => this.updateClampedValue('disk-size', 10, this.state["disk-size"] - 1)}
136+
onChange={value => this.state['disk-size'] }
137+
/>
138+
</FormGroup>
139+
<FormGroup fieldId='settings-preset' label="Preset">
140+
<PresetSelection id="settings-preset" isCompact
141+
className="preset"
142+
inputName="preset"
143+
value={this.state["preset"]}
144+
onChange={value => this.updateValue('preset', value)} />
145+
</FormGroup>
146+
</Form>
147+
</TabContentBody>
148+
</Tab>
149+
150+
<Tab eventKey={1} title={<TabTitleText>Other</TabTitleText>}>
151+
<TabContentBody style={tabStyle} hasPadding>
152+
<Form isHorizontal>
153+
<FormGroup fieldId='config-telemetry' label="Telemetry">
154+
<Checkbox id='config-consentTelemetry'
155+
className="consentTelemetry"
156+
isChecked={this.state["consent-telemetry"] === "yes" ? true : false }
157+
onChange={value => this.updateValue('consent-telemetry', value === true ? "yes" : "no")}
158+
label="Report telemetry to Red Hat"
159+
description="Consent to allow basic information about the system and cluster to be collected for development and debugging purposes" />
160+
</FormGroup>
161+
</Form>
162+
</TabContentBody>
163+
</Tab>
128164

129-
130-
<FormGroup fieldId='config-proxy' label="HTTP proxy">
131-
<TextInput id='config-http-proxy'
132-
className="proxy"
133-
value={this.state["http-proxy"]}
134-
onChange={value => this.updateValue('http-proxy', value)} />
135-
</FormGroup>
136-
<FormGroup fieldId='config-proxy' label="HTTPS proxy">
137-
<TextInput id='config-https-proxy'
138-
className="proxy"
139-
value={this.state["https-proxy"]}
140-
onChange={value => this.updateValue('https-proxy', value)} />
141-
</FormGroup>
142-
<FormGroup fieldId='config-proxy' label="No proxy">
143-
<TextInput id='config-no-proxy'
144-
className="proxy"
145-
value={this.state["no-proxy"]}
146-
onChange={value => this.updateValue('no-proxy', value)} />
147-
</FormGroup>
148-
<FormGroup fieldId='config-proxy' label="Proxy CA file">
149-
<TextInput id='config-proxy-ca-file'
150-
className="proxy"
151-
value={this.state["proxy-ca-file"]}
152-
onChange={value => this.updateValue('proxy-ca-file', value)} />
153-
</FormGroup>
154-
155-
156-
<ActionGroup>
157-
<Button variant="primary" onClick={this.configurationSaveClicked}>Save</Button>
158-
<Button variant="link" onClick={this.configurationResetClicked}>Reset</Button>
159-
</ActionGroup>
160-
161-
162-
<FormGroup fieldId='config-pullsecret' label="Pullsecret">
163-
<Button onClick={this.props.onPullsecretChangeClicked} variant="primary">Change</Button>
164-
</FormGroup>
165-
</Form>
165+
<Tab eventKey={2} title={<TabTitleText>Proxy</TabTitleText>}>
166+
<TabContentBody style={tabStyle} hasPadding>
167+
<Form isHorizontal>
168+
<FormGroup fieldId='config-proxy' label="HTTP proxy">
169+
<TextInput style={proxyInputStyle} id='config-http-proxy'
170+
className="proxy"
171+
value={this.state["http-proxy"]}
172+
onChange={value => this.updateValue('http-proxy', value)} />
173+
</FormGroup>
174+
<FormGroup fieldId='config-proxy' label="HTTPS proxy">
175+
<TextInput style={proxyInputStyle} id='config-https-proxy'
176+
className="proxy"
177+
value={this.state["https-proxy"]}
178+
onChange={value => this.updateValue('https-proxy', value)} />
179+
</FormGroup>
180+
<FormGroup fieldId='config-proxy' label="No proxy">
181+
<TextInput style={proxyInputStyle} id='config-no-proxy'
182+
className="proxy"
183+
value={this.state["no-proxy"]}
184+
onChange={value => this.updateValue('no-proxy', value)} />
185+
</FormGroup>
186+
<FormGroup fieldId='config-proxy' label="Proxy CA file">
187+
<TextInput style={proxyInputStyle} id='config-proxy-ca-file'
188+
className="proxy"
189+
value={this.state["proxy-ca-file"]}
190+
onChange={value => this.updateValue('proxy-ca-file', value)} />
191+
</FormGroup>
192+
</Form>
193+
</TabContentBody>
194+
</Tab>
195+
196+
<Tab eventKey={3} title={<TabTitleText>OpenShift</TabTitleText>} isDisabled={ this.state.preset !== "openshift" }>
197+
<TabContentBody style={tabStyle} hasPadding>
198+
<Form isHorizontal>
199+
<FormGroup fieldId='config-pullsecret' label="Pullsecret">
200+
<Button onClick={this.props.onPullsecretChangeClicked} variant="primary">Change</Button>
201+
</FormGroup>
202+
</Form>
203+
</TabContentBody>
204+
</Tab>
205+
206+
</Tabs>
207+
208+
<div style={{textAlign:"right"}}>
209+
<Button variant="primary" onClick={this.configurationSaveClicked}>Save</Button>
210+
<Button variant="link" onClick={this.configurationResetClicked}>Reset</Button>
211+
</div>
166212
</div>
167213
);
168214
}
@@ -172,5 +218,12 @@ Configuration.propTypes = {
172218
onValueChanged: PropTypes.func,
173219
onSaveClicked: PropTypes.func,
174220
onResetClicked: PropTypes.func,
175-
onPullsecretChangeClicked: PropTypes.func
221+
onPullsecretChangeClicked: PropTypes.func,
222+
height: PropTypes.string,
223+
textInputWidth: PropTypes.string
176224
};
225+
226+
Configuration.defaultProps = {
227+
height: "300px",
228+
textInputWidth: "320px"
229+
};

‎src/components/LogWindow.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ LogWindow.propTypes = {
6666
cols: PropTypes.number,
6767
width: PropTypes.string,
6868
height: PropTypes.string
69-
};
69+
};
7070

7171
LogWindow.defaultProps = {
7272
rows: 20,

‎src/components/PresetSelection.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export default class PresetSelection extends React.Component {
3434
this.setState({
3535
presetSelected: nextProps.value
3636
})
37+
38+
// handlePresetSelectClick()
3739
}
3840

3941
render() {

‎src/stories/Configuration.stories.js

+1
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ export const Default = Template.bind({});
1414
Default.args = {
1515

1616
};
17+

0 commit comments

Comments
 (0)