summaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js145
-rw-r--r--frontend/src/components/modals/custom-components/NewTopologyModalComponent.js121
2 files changed, 106 insertions, 160 deletions
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/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
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 16:54:09 +0000