diff options
Diffstat (limited to 'frontend/src/components/modals')
4 files changed, 227 insertions, 311 deletions
diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index 36bb498e..b494d970 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -18,8 +18,8 @@ function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, su } return ( - <RModal isOpen={modal} toggle={toggle}> - <ModalHeader toggle={toggle}>{title}</ModalHeader> + <RModal isOpen={modal} toggle={cancel}> + <ModalHeader toggle={cancel}>{title}</ModalHeader> <ModalBody>{children}</ModalBody> <ModalFooter> <Button color="secondary" onClick={cancel}> diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js index 19049931..978ca11d 100644 --- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js @@ -1,98 +1,69 @@ import PropTypes from 'prop-types' -import React from 'react' +import React, { useRef } from 'react' +import { Form, FormGroup, Input, Label } from 'reactstrap' import Modal from '../Modal' import { AVAILABLE_METRICS } from '../../../util/available-metrics' -class NewPortfolioModalComponent extends React.Component { - static propTypes = { - show: PropTypes.bool.isRequired, - callback: PropTypes.func.isRequired, - } +const NewPortfolioModalComponent = ({ show, callback }) => { + const textInput = useRef(null) + const repeatsInput = useRef(null) + const metricCheckboxes = useRef({}) - constructor(props) { - super(props) - this.metricCheckboxes = {} - } - - componentDidMount() { - this.reset() - } - - reset() { - if (this.textInput) { - this.textInput.value = '' - AVAILABLE_METRICS.forEach((metric) => { - this.metricCheckboxes[metric].checked = true - }) - this.repeatsInput.value = 1 - } - } - - onSubmit() { - this.props.callback(this.textInput.value, { - enabledMetrics: AVAILABLE_METRICS.filter((metric) => this.metricCheckboxes[metric].checked), - repeatsPerScenario: parseInt(this.repeatsInput.value), + const onSubmit = () => + callback(textInput.current.value, { + enabledMetrics: AVAILABLE_METRICS.filter((metric) => metricCheckboxes.current[metric].checked), + repeatsPerScenario: parseInt(repeatsInput.current.value), }) - this.reset() - } + const onCancel = () => callback(undefined) - onCancel() { - this.props.callback(undefined) - this.reset() - } - - render() { - return ( - <Modal - title="New Portfolio" - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} + return ( + <Modal title="New Portfolio" show={show} onSubmit={onSubmit} onCancel={onCancel}> + <Form + onSubmit={(e) => { + e.preventDefault() + this.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 - ref={(textInput) => (this.textInput = textInput)} - /> - </div> - <h4>Targets</h4> - <h5>Metrics</h5> - <div className="form-group"> - {AVAILABLE_METRICS.map((metric) => ( - <div className="form-check" key={metric}> - <label className="form-check-label"> - <input - type="checkbox" - className="form-check-input" - ref={(checkbox) => (this.metricCheckboxes[metric] = checkbox)} - /> - <code>{metric}</code> - </label> - </div> - ))} - </div> - <div className="form-group"> - <label className="form-control-label">Repeats per scenario</label> - <input - type="number" - className="form-control" - required - ref={(repeatsInput) => (this.repeatsInput = repeatsInput)} - /> - </div> - </form> - </Modal> - ) - } + <FormGroup> + <Label for="name">Name</Label> + <Input name="name" type="text" required innerRef={textInput} placeholder="My Portfolio" /> + </FormGroup> + <h4>Targets</h4> + <h5>Metrics</h5> + <FormGroup> + {AVAILABLE_METRICS.map((metric) => ( + <FormGroup check key={metric}> + <Label for={metric} check> + <Input + name={metric} + type="checkbox" + innerRef={(ref) => (metricCheckboxes.current[metric] = ref)} + /> + <code>{metric}</code> + </Label> + </FormGroup> + ))} + </FormGroup> + <FormGroup> + <Label for="repeats">Repeats per scenario</Label> + <Input + name="repeats" + type="number" + required + innerRef={repeatsInput} + defaultValue="1" + min="1" + step="1" + /> + </FormGroup> + </Form> + </Modal> + ) +} + +NewPortfolioModalComponent.propTypes = { + show: PropTypes.bool.isRequired, + callback: PropTypes.func.isRequired, } export default NewPortfolioModalComponent 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 diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js index 8a625b13..b20ec13b 100644 --- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js @@ -1,90 +1,65 @@ import PropTypes from 'prop-types' -import React from 'react' +import { Form, FormGroup, Input, Label } from 'reactstrap' +import React, { useRef } from 'react' import Shapes from '../../../shapes' import Modal from '../Modal' -class NewTopologyModalComponent extends React.Component { - static propTypes = { - show: PropTypes.bool.isRequired, - topologies: PropTypes.arrayOf(Shapes.Topology), - onCreateTopology: PropTypes.func.isRequired, - onDuplicateTopology: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, +const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => { + const textInput = useRef(null) + const originTopology = useRef(null) + + const onCreate = () => { + onCreateTopology(textInput.current.value) } - reset() { - if (this.textInput) { - this.textInput.value = '' - this.originTopology.selectedIndex = 0 - } + const onDuplicate = () => { + onDuplicateTopology(textInput.current.value, originTopology.current.value) } - onSubmit() { - if (this.originTopology.selectedIndex === 0) { - this.onCreate() + const onSubmit = () => { + if (originTopology.current.selectedIndex === 0) { + onCreate() } else { - this.onDuplicate() + onDuplicate() } } - onCreate() { - this.props.onCreateTopology(this.textInput.value) - this.reset() - } - - onDuplicate() { - this.props.onDuplicateTopology(this.textInput.value, this.originTopology.value) - this.reset() - } - - onCancel() { - this.props.onCancel() - this.reset() - } - - render() { - return ( - <Modal - title="New Topology" - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} + return ( + <Modal title="New Topology" 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 - ref={(textInput) => (this.textInput = textInput)} - /> - </div> - <div className="form-group"> - <label className="form-control-label">Topology to duplicate</label> - <select - className="form-control" - ref={(originTopology) => (this.originTopology = originTopology)} - > - <option value={-1} key={-1}> - None - start from scratch + <FormGroup> + <Label for="name">Name</Label> + <Input name="name" type="text" required innerRef={textInput} /> + </FormGroup> + <FormGroup> + <Label for="origin">Topology to duplicate</Label> + <Input name="origin" type="select" innerRef={originTopology}> + <option value={-1} key={-1}> + None - start from scratch + </option> + {topologies.map((topology) => ( + <option value={topology._id} key={topology._id}> + {topology.name} </option> - {this.props.topologies.map((topology) => ( - <option value={topology._id} key={topology._id}> - {topology.name} - </option> - ))} - </select> - </div> - </form> - </Modal> - ) - } + ))} + </Input> + </FormGroup> + </Form> + </Modal> + ) +} + +NewTopologyModalComponent.propTypes = { + show: PropTypes.bool.isRequired, + topologies: PropTypes.arrayOf(Shapes.Topology), + onCreateTopology: PropTypes.func.isRequired, + onDuplicateTopology: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, } export default NewTopologyModalComponent |