Merge pull request #8 from atlarge-research/feature/portfolios-scenarios-frontend

Portfolios and scenarios on the frontend

1 files changed, 155 insertions, 0 deletions

diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
new file mode 100644
index 00000000..4c2df2f6
--- /dev/null
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -0,0 +1,155 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../shapes'
+import Modal from '../Modal'
+
+class NewScenarioModalComponent extends React.Component {
+    static propTypes = {
+        show: PropTypes.bool.isRequired,
+        currentPortfolioId: PropTypes.string.isRequired,
+        traces: PropTypes.arrayOf(Shapes.Trace),
+        topologies: PropTypes.arrayOf(Shapes.Topology),
+        schedulers: PropTypes.arrayOf(Shapes.Scheduler),
+        callback: PropTypes.func.isRequired,
+    }
+
+    componentDidMount() {
+        this.reset()
+    }
+
+    reset() {
+        this.textInput.value = ''
+        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,
+            {
+                traceId: this.traceSelect.value,
+                loadSamplingFraction: parseFloat(this.traceLoadInput.value),
+            },
+            {
+                topologyId: this.topologySelect.value
+            },
+            {
+                failuresEnabled: this.failuresCheckbox.checked,
+                performanceInterferenceEnabled: this.performanceInterferenceCheckbox.checked,
+                schedulerName: this.schedulerSelect.value,
+            },
+        )
+        this.reset()
+    }
+
+    onCancel() {
+        this.props.callback(undefined)
+        this.reset()
+    }
+
+    render() {
+        return (
+            <Modal
+                title="New Scenario"
+                show={this.props.show}
+                onSubmit={this.onSubmit.bind(this)}
+                onCancel={this.onCancel.bind(this)}
+            >
+                <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>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>
+        )
+    }
+}
+
+export default NewScenarioModalComponent