From a4d2f94f950f60a7960e008d26e099f639acfe9a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 15:44:43 +0100
Subject: Fix implementation of NewScenarioModal

---
 .../custom-components/NewScenarioModalComponent.js | 268 +++++++++------------
 1 file changed, 119 insertions(+), 149 deletions(-)

(limited to 'frontend/src/components/modals/custom-components')

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
-- 
cgit v1.2.3


From eae920b9226ffd9c43699c7f555000d5fc1c623f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 21:39:05 +0100
Subject: Reimplement modals for stability

---
 .../NewPortfolioModalComponent.js                  | 145 +++++++++------------
 .../custom-components/NewTopologyModalComponent.js | 121 +++++++----------
 2 files changed, 106 insertions(+), 160 deletions(-)

(limited to 'frontend/src/components/modals/custom-components')

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
-- 
cgit v1.2.3