diff options
Diffstat (limited to 'frontend/src/components/modals/custom-components/NewScenarioModalComponent.js')
| -rw-r--r-- | frontend/src/components/modals/custom-components/NewScenarioModalComponent.js | 268 |
1 files changed, 119 insertions, 149 deletions
diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js index 5ba74b0f..631082a2 100644 --- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js @@ -1,168 +1,138 @@ import PropTypes from 'prop-types' -import React from 'react' +import React, { useRef } from 'react' +import { Form, FormGroup, Input, Label } from 'reactstrap' import Shapes from '../../../shapes' import Modal from '../Modal' -class NewScenarioModalComponent extends React.Component { - static propTypes = { - show: PropTypes.bool.isRequired, - currentPortfolioId: PropTypes.string.isRequired, - currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string), - traces: PropTypes.arrayOf(Shapes.Trace), - topologies: PropTypes.arrayOf(Shapes.Topology), - schedulers: PropTypes.arrayOf(Shapes.Scheduler), - callback: PropTypes.func.isRequired, - } - - componentDidMount() { - this.reset() - } +const NewScenarioModalComponent = ({ + show, + callback, + currentPortfolioId, + currentPortfolioScenarioIds, + traces, + topologies, + schedulers, +}) => { + const textInput = useRef(null) + const traceSelect = useRef(null) + const traceLoadInput = useRef(null) + const topologySelect = useRef(null) + const failuresCheckbox = useRef(null) + const performanceInterferenceCheckbox = useRef(null) + const schedulerSelect = useRef(null) - componentDidUpdate() { - if (this.textInput) { - if (this.props.currentPortfolioScenarioIds.length === 0) { - this.textInput.value = 'Base scenario' - } else if (this.textInput.value === 'Base scenario') { - this.textInput.value = '' - } - } - } - - reset() { - if (this.textInput) { - this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : '' - this.traceSelect.selectedIndex = 0 - this.traceLoadInput.value = 1.0 - this.topologySelect.selectedIndex = 0 - this.failuresCheckbox.checked = false - this.performanceInterferenceCheckbox.checked = false - this.schedulerSelect.selectedIndex = 0 - } - } - - onSubmit() { - this.props.callback( - this.textInput.value, - this.props.currentPortfolioId, + const onSubmit = () => { + callback( + textInput.current.value, + currentPortfolioId, { - traceId: this.traceSelect.value, - loadSamplingFraction: parseFloat(this.traceLoadInput.value), + traceId: traceSelect.current.value, + loadSamplingFraction: parseFloat(traceLoadInput.current.value), }, { - topologyId: this.topologySelect.value, + topologyId: topologySelect.current.value, }, { - failuresEnabled: this.failuresCheckbox.checked, - performanceInterferenceEnabled: this.performanceInterferenceCheckbox.checked, - schedulerName: this.schedulerSelect.value, + failuresEnabled: failuresCheckbox.current.checked, + performanceInterferenceEnabled: performanceInterferenceCheckbox.current.checked, + schedulerName: schedulerSelect.current.value, } ) - this.reset() } - - onCancel() { - this.props.callback(undefined) - this.reset() + const onCancel = () => { + callback(undefined) } - render() { - return ( - <Modal - title="New Scenario" - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} + return ( + <Modal title="New Scenario" show={show} onSubmit={onSubmit} onCancel={onCancel}> + <Form + onSubmit={(e) => { + e.preventDefault() + onSubmit() + }} > - <form - onSubmit={(e) => { - e.preventDefault() - this.onSubmit() - }} - > - <div className="form-group"> - <label className="form-control-label">Name</label> - <input - type="text" - className="form-control" - required - disabled={this.props.currentPortfolioScenarioIds.length === 0} - ref={(textInput) => (this.textInput = textInput)} - /> - </div> - <h4>Trace</h4> - <div className="form-group"> - <label className="form-control-label">Trace</label> - <select className="form-control" ref={(traceSelect) => (this.traceSelect = traceSelect)}> - {this.props.traces.map((trace) => ( - <option value={trace._id} key={trace._id}> - {trace.name} - </option> - ))} - </select> - </div> - <div className="form-group"> - <label className="form-control-label">Load sampling fraction</label> - <input - type="number" - className="form-control" - required - ref={(traceLoadInput) => (this.traceLoadInput = traceLoadInput)} - /> - </div> - <h4>Topology</h4> - <div className="form-group"> - <label className="form-control-label">Topology</label> - <select - className="form-control" - ref={(topologySelect) => (this.topologySelect = topologySelect)} - > - {this.props.topologies.map((topology) => ( - <option value={topology._id} key={topology._id}> - {topology.name} - </option> - ))} - </select> - </div> - <h4>Operational Phenomena</h4> - <div className="form-check"> - <label className="form-check-label"> - <input - type="checkbox" - className="form-check-input" - ref={(failuresCheckbox) => (this.failuresCheckbox = failuresCheckbox)} - /> - <span className="ml-2">Enable failures</span> - </label> - </div> - <div className="form-check"> - <label className="form-check-label"> - <input - type="checkbox" - className="form-check-input" - ref={(performanceInterferenceCheckbox) => - (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox) - } - /> - <span className="ml-2">Enable performance interference</span> - </label> - </div> - <div className="form-group"> - <label className="form-control-label">Scheduler</label> - <select - className="form-control" - ref={(schedulerSelect) => (this.schedulerSelect = schedulerSelect)} - > - {this.props.schedulers.map((scheduler) => ( - <option value={scheduler.name} key={scheduler.name}> - {scheduler.name} - </option> - ))} - </select> - </div> - </form> - </Modal> - ) - } + <FormGroup> + <Label for="name">Name</Label> + <Input + name="name" + type="text" + required + disabled={currentPortfolioScenarioIds.length === 0} + defaultValue={currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''} + innerRef={textInput} + /> + </FormGroup> + <h4>Trace</h4> + <FormGroup> + <Label for="trace">Trace</Label> + <Input name="trace" type="select" innerRef={traceSelect}> + {traces.map((trace) => ( + <option value={trace._id} key={trace._id}> + {trace.name} + </option> + ))} + </Input> + </FormGroup> + <FormGroup> + <Label for="trace-load">Load sampling fraction</Label> + <Input + name="trace-load" + type="number" + innerRef={traceLoadInput} + required + defaultValue="1" + min="0" + max="1" + step="0.1" + /> + </FormGroup> + <h4>Topology</h4> + <div className="form-group"> + <Label for="topology">Topology</Label> + <Input name="topology" type="select" innerRef={topologySelect}> + {topologies.map((topology) => ( + <option value={topology._id} key={topology._id}> + {topology.name} + </option> + ))} + </Input> + </div> + <h4>Operational Phenomena</h4> + <FormGroup check> + <Label check for="failures"> + <Input type="checkbox" name="failures" innerRef={failuresCheckbox} />{' '} + <span className="ml-2">Enable failures</span> + </Label> + </FormGroup> + <FormGroup check> + <Label check for="perf-interference"> + <Input type="checkbox" name="perf-interference" innerRef={performanceInterferenceCheckbox} />{' '} + <span className="ml-2">Enable performance interference</span> + </Label> + </FormGroup> + <FormGroup> + <Label for="scheduler">Scheduler</Label> + <Input name="scheduler" type="select" innerRef={schedulerSelect}> + {schedulers.map((scheduler) => ( + <option value={scheduler.name} key={scheduler.name}> + {scheduler.name} + </option> + ))} + </Input> + </FormGroup> + </Form> + </Modal> + ) +} + +NewScenarioModalComponent.propTypes = { + show: PropTypes.bool.isRequired, + currentPortfolioId: PropTypes.string.isRequired, + currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string), + traces: PropTypes.arrayOf(Shapes.Trace), + topologies: PropTypes.arrayOf(Shapes.Topology), + schedulers: PropTypes.arrayOf(Shapes.Scheduler), + callback: PropTypes.func.isRequired, } export default NewScenarioModalComponent |