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

Commit

Permalink
Configuration uses tabs and clamps number input
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbraad
gbraad committed Jan 27, 2022
1 parent e766d7c commit 2598700
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 109 deletions.
269 changes: 161 additions & 108 deletions src/components/Configuration.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import {
Button,
Form, FormGroup,
TextInput, NumberInput,
ActionGroup, Checkbox
Checkbox,
Tab, Tabs, TabTitleText,
TabContentBody
} from '@patternfly/react-core';

import "./Configuration.scss";
Expand All @@ -14,6 +16,7 @@ export default class Configuration extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTabKey: 0,
preset: "unknown",
cpus: 0,
memory: 0,
Expand All @@ -28,16 +31,33 @@ export default class Configuration extends React.Component {

this.configurationSaveClicked = this.configurationSaveClicked.bind(this);
this.configurationResetClicked = this.configurationResetClicked.bind(this);
this.handleTabClick = this.handleTabClick.bind(this);

this.updateClampedValue = this.updateClampedValue.bind(this);
this.updateValue = this.updateValue.bind(this);
}

// Toggle currently active tab
handleTabClick(event, tabIndex) {
this.setState({
activeTabKey: tabIndex
});
};

updateValues(values) {
const self = this; // make sure 'self' references to this
Object.entries(values).forEach(function(value) {
self.updateValue(value[0], value[1]);
});
}

updateClampedValue(key, min, value) {
if(value < min) {
value = min;
}
this.updateValue(key, value);
}

updateValue(key, value) {
if(this.state["" + key] !== undefined) {
const newState = { ["" + key]: value };
Expand All @@ -54,115 +74,141 @@ export default class Configuration extends React.Component {
}

render() {
const {activeTabKey, isBox } = this.state;

const tabStyle = {
height: this.props.height,
}

const proxyInputStyle = {
width: this.props.textInputWidth
}

return (
<div>
<Form isHorizontal>

<FormGroup fieldId='settings-cpu' label="CPU">
<NumberInput id='settings-cpu'
className="cpus"
inputName="cpus"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
unit=""
min="1"
value={this.state.cpus}
widthChars={5}
onPlus={event => this.updateValue('cpus', this.state.cpus + 1)}
onMinus={event => this.updateValue('cpus', this.state.cpus - 1)}
onChange={value => this.state['cpus'] }
/>
</FormGroup>
<FormGroup fieldId='settings-memory' label="Memory">
<NumberInput id='settings-memory'
className="memory"
inputName="memory"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
unit="MiB"
min="8192"
value={this.state.memory}
widthChars={5}
onPlus={event => this.updateValue('memory', this.state.memory + 512)}
onMinus={event => this.updateValue('memory', this.state.memory - 512)}
onChange={value => this.state['memory'] }
/>
</FormGroup>
<FormGroup fieldId='settings-disksize' label="Disk size">
<NumberInput id='settings-disksize'
className="disk-size"
inputName="disk-size"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
unit="GB"
min="20"
value={this.state["disk-size"]}
widthChars={5}
onPlus={event => this.updateValue('disk-size', this.state["disk-size"] + 1)}
onMinus={event => this.updateValue('disk-size', this.state["disk-size"] - 1)}
onChange={value => this.state['disk-size'] }
/>
</FormGroup>



<FormGroup fieldId='settings-preset' label="Preset">
<PresetSelection id="settings-preset" isCompact
className="preset"
inputName="preset"
value={this.state["preset"]}
onChange={value => this.updateValue('preset', value)} />
</FormGroup>



<FormGroup fieldId='config-telemetry' label="Telemetry">
<Checkbox id='config-consentTelemetry'
className="consentTelemetry"
isChecked={this.state["consent-telemetry"] === "yes" ? true : false }
onChange={value => this.updateValue('consent-telemetry', value === true ? "yes" : "no")}
label="Report telemetry to Red Hat"
description="Consent to allow basic information about the system and cluster to be collected for development and debugging purposes" />
</FormGroup>

<Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={true}>

<Tab eventKey={0} title={<TabTitleText>Basic</TabTitleText>}>
<TabContentBody style={tabStyle} hasPadding>
<Form isHorizontal>
<FormGroup fieldId='settings-cpu' label="CPU">
<NumberInput id='settings-cpu'
className="cpus"
inputName="cpus"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
unit=""
min="1"
value={this.state.cpus}
widthChars={5}
onPlus={event => this.updateValue('cpus', this.state.cpus + 1)}
onMinus={event => this.updateClampedValue('cpus', 1, this.state.cpus - 1)}
onChange={value => this.state['cpus'] }
/>
</FormGroup>
<FormGroup fieldId='settings-memory' label="Memory">
<NumberInput id='settings-memory'
className="memory"
inputName="memory"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
unit="MiB"
min="8192"
value={this.state.memory}
widthChars={5}
onPlus={event => this.updateValue('memory', this.state.memory + 512)}
onMinus={event => this.updateClampedValue('memory', 2048, this.state.memory - 512)}
onChange={value => this.state['memory'] }
/>
</FormGroup>
<FormGroup fieldId='settings-disksize' label="Disk size">
<NumberInput id='settings-disksize'
className="disk-size"
inputName="disk-size"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
unit="GB"
min="20"
value={this.state["disk-size"]}
widthChars={5}
onPlus={event => this.updateValue('disk-size', this.state["disk-size"] + 1)}
onMinus={event => this.updateClampedValue('disk-size', 10, this.state["disk-size"] - 1)}
onChange={value => this.state['disk-size'] }
/>
</FormGroup>
<FormGroup fieldId='settings-preset' label="Preset">
<PresetSelection id="settings-preset" isCompact
className="preset"
inputName="preset"
value={this.state["preset"]}
onChange={value => this.updateValue('preset', value)} />
</FormGroup>
</Form>
</TabContentBody>
</Tab>

<Tab eventKey={1} title={<TabTitleText>Other</TabTitleText>}>
<TabContentBody style={tabStyle} hasPadding>
<Form isHorizontal>
<FormGroup fieldId='config-telemetry' label="Telemetry">
<Checkbox id='config-consentTelemetry'
className="consentTelemetry"
isChecked={this.state["consent-telemetry"] === "yes" ? true : false }
onChange={value => this.updateValue('consent-telemetry', value === true ? "yes" : "no")}
label="Report telemetry to Red Hat"
description="Consent to allow basic information about the system and cluster to be collected for development and debugging purposes" />
</FormGroup>
</Form>
</TabContentBody>
</Tab>


<FormGroup fieldId='config-proxy' label="HTTP proxy">
<TextInput id='config-http-proxy'
className="proxy"
value={this.state["http-proxy"]}
onChange={value => this.updateValue('http-proxy', value)} />
</FormGroup>
<FormGroup fieldId='config-proxy' label="HTTPS proxy">
<TextInput id='config-https-proxy'
className="proxy"
value={this.state["https-proxy"]}
onChange={value => this.updateValue('https-proxy', value)} />
</FormGroup>
<FormGroup fieldId='config-proxy' label="No proxy">
<TextInput id='config-no-proxy'
className="proxy"
value={this.state["no-proxy"]}
onChange={value => this.updateValue('no-proxy', value)} />
</FormGroup>
<FormGroup fieldId='config-proxy' label="Proxy CA file">
<TextInput id='config-proxy-ca-file'
className="proxy"
value={this.state["proxy-ca-file"]}
onChange={value => this.updateValue('proxy-ca-file', value)} />
</FormGroup>


<ActionGroup>
<Button variant="primary" onClick={this.configurationSaveClicked}>Save</Button>
<Button variant="link" onClick={this.configurationResetClicked}>Reset</Button>
</ActionGroup>


<FormGroup fieldId='config-pullsecret' label="Pullsecret">
<Button onClick={this.props.onPullsecretChangeClicked} variant="primary">Change</Button>
</FormGroup>
</Form>
<Tab eventKey={2} title={<TabTitleText>Proxy</TabTitleText>}>
<TabContentBody style={tabStyle} hasPadding>
<Form isHorizontal>
<FormGroup fieldId='config-proxy' label="HTTP proxy">
<TextInput style={proxyInputStyle} id='config-http-proxy'
className="proxy"
value={this.state["http-proxy"]}
onChange={value => this.updateValue('http-proxy', value)} />
</FormGroup>
<FormGroup fieldId='config-proxy' label="HTTPS proxy">
<TextInput style={proxyInputStyle} id='config-https-proxy'
className="proxy"
value={this.state["https-proxy"]}
onChange={value => this.updateValue('https-proxy', value)} />
</FormGroup>
<FormGroup fieldId='config-proxy' label="No proxy">
<TextInput style={proxyInputStyle} id='config-no-proxy'
className="proxy"
value={this.state["no-proxy"]}
onChange={value => this.updateValue('no-proxy', value)} />
</FormGroup>
<FormGroup fieldId='config-proxy' label="Proxy CA file">
<TextInput style={proxyInputStyle} id='config-proxy-ca-file'
className="proxy"
value={this.state["proxy-ca-file"]}
onChange={value => this.updateValue('proxy-ca-file', value)} />
</FormGroup>
</Form>
</TabContentBody>
</Tab>

<Tab eventKey={3} title={<TabTitleText>OpenShift</TabTitleText>} isDisabled={ this.state.preset !== "openshift" }>
<TabContentBody style={tabStyle} hasPadding>
<Form isHorizontal>
<FormGroup fieldId='config-pullsecret' label="Pullsecret">
<Button onClick={this.props.onPullsecretChangeClicked} variant="primary">Change</Button>
</FormGroup>
</Form>
</TabContentBody>
</Tab>

</Tabs>

<div style={{textAlign:"right"}}>
<Button variant="primary" onClick={this.configurationSaveClicked}>Save</Button>
<Button variant="link" onClick={this.configurationResetClicked}>Reset</Button>
</div>
</div>
);
}
Expand All @@ -172,5 +218,12 @@ Configuration.propTypes = {
onValueChanged: PropTypes.func,
onSaveClicked: PropTypes.func,
onResetClicked: PropTypes.func,
onPullsecretChangeClicked: PropTypes.func
onPullsecretChangeClicked: PropTypes.func,
height: PropTypes.string,
textInputWidth: PropTypes.string
};

Configuration.defaultProps = {
height: "300px",
textInputWidth: "320px"
};
2 changes: 1 addition & 1 deletion src/components/LogWindow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ LogWindow.propTypes = {
cols: PropTypes.number,
width: PropTypes.string,
height: PropTypes.string
};
};

LogWindow.defaultProps = {
rows: 20,
Expand Down
2 changes: 2 additions & 0 deletions src/components/PresetSelection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export default class PresetSelection extends React.Component {
this.setState({
presetSelected: nextProps.value
})

// handlePresetSelectClick()
}

render() {
Expand Down
1 change: 1 addition & 0 deletions src/stories/Configuration.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ export const Default = Template.bind({});
Default.args = {

};

0 comments on commit 2598700

Please sign in to comment.