From 912e1b96bfa7d6c022d854fa744f719b49ca98d0 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Tue, 21 Jul 2020 15:33:37 +0200
Subject: Add first plotting attempts for portfolios

---
 frontend/src/components/modals/Modal.js            | 20 ++++----------
 frontend/src/components/modals/TextInputModal.js   |  8 ++----
 .../NewPortfolioModalComponent.js                  | 23 +++++++---------
 .../custom-components/NewScenarioModalComponent.js | 31 +++++++++++-----------
 .../custom-components/NewTopologyModalComponent.js | 13 ++++-----
 5 files changed, 37 insertions(+), 58 deletions(-)

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

diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js
index dd8cea8e..40656dc1 100644
--- a/frontend/src/components/modals/Modal.js
+++ b/frontend/src/components/modals/Modal.js
@@ -33,18 +33,15 @@ class Modal extends React.Component {
 
         // Trigger auto-focus
         jQuery('#' + this.id)
-            .on('shown.bs.modal', function() {
-                jQuery(this)
-                    .find('input')
-                    .first()
-                    .focus()
+            .on('shown.bs.modal', function () {
+                jQuery(this).find('input').first().focus()
             })
             .on('hide.bs.modal', () => {
                 if (this.visible) {
                     this.props.onCancel()
                 }
             })
-            .on('keydown', e => {
+            .on('keydown', (e) => {
                 e.stopPropagation()
             })
     }
@@ -106,19 +103,12 @@ class Modal extends React.Component {
                         </div>
                         <div className="modal-body">{this.props.children}</div>
                         <div className="modal-footer">
-                            <button
-                                type="button"
-                                className="btn btn-secondary"
-                                onClick={this.onCancel.bind(this)}
-                            >
+                            <button type="button" className="btn btn-secondary" onClick={this.onCancel.bind(this)}>
                                 Close
                             </button>
                             <button
                                 type="button"
-                                className={classNames(
-                                    'btn',
-                                    'btn-' + this.props.submitButtonType,
-                                )}
+                                className={classNames('btn', 'btn-' + this.props.submitButtonType)}
                                 onClick={this.onSubmit.bind(this)}
                             >
                                 {this.props.submitButtonText}
diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js
index 8d03e81f..d5edb60b 100644
--- a/frontend/src/components/modals/TextInputModal.js
+++ b/frontend/src/components/modals/TextInputModal.js
@@ -36,18 +36,14 @@ class TextInputModal extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
                 >
                     <div className="form-group">
                         <label className="form-control-label">{this.props.label}</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            ref={textInput => (this.textInput = textInput)}
-                        />
+                        <input type="text" className="form-control" ref={(textInput) => (this.textInput = textInput)} />
                     </div>
                 </form>
             </Modal>
diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
index ace2d751..2d001302 100644
--- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
@@ -20,20 +20,17 @@ class NewPortfolioModalComponent extends React.Component {
 
     reset() {
         this.textInput.value = ''
-        AVAILABLE_METRICS.forEach(metric => {
+        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),
-            },
-        )
+        this.props.callback(this.textInput.value, {
+            enabledMetrics: AVAILABLE_METRICS.filter((metric) => this.metricCheckboxes[metric].checked),
+            repeatsPerScenario: parseInt(this.repeatsInput.value),
+        })
         this.reset()
     }
 
@@ -51,7 +48,7 @@ class NewPortfolioModalComponent extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
@@ -62,19 +59,19 @@ class NewPortfolioModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
-                            ref={textInput => (this.textInput = textInput)}
+                            ref={(textInput) => (this.textInput = textInput)}
                         />
                     </div>
                     <h4>Targets</h4>
                     <h5>Metrics</h5>
                     <div className="form-group">
-                        {AVAILABLE_METRICS.map(metric => (
+                        {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)}
+                                        ref={(checkbox) => (this.metricCheckboxes[metric] = checkbox)}
                                     />
                                     <code>{metric}</code>
                                 </label>
@@ -87,7 +84,7 @@ class NewPortfolioModalComponent extends React.Component {
                             type="number"
                             className="form-control"
                             required
-                            ref={repeatsInput => (this.repeatsInput = repeatsInput)}
+                            ref={(repeatsInput) => (this.repeatsInput = repeatsInput)}
                         />
                     </div>
                 </form>
diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index 4c2df2f6..0bb4aeab 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -36,13 +36,13 @@ class NewScenarioModalComponent extends React.Component {
                 loadSamplingFraction: parseFloat(this.traceLoadInput.value),
             },
             {
-                topologyId: this.topologySelect.value
+                topologyId: this.topologySelect.value,
             },
             {
                 failuresEnabled: this.failuresCheckbox.checked,
                 performanceInterferenceEnabled: this.performanceInterferenceCheckbox.checked,
                 schedulerName: this.schedulerSelect.value,
-            },
+            }
         )
         this.reset()
     }
@@ -61,7 +61,7 @@ class NewScenarioModalComponent extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
@@ -72,17 +72,14 @@ class NewScenarioModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
-                            ref={textInput => (this.textInput = textInput)}
+                            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 => (
+                        <select className="form-control" ref={(traceSelect) => (this.traceSelect = traceSelect)}>
+                            {this.props.traces.map((trace) => (
                                 <option value={trace._id} key={trace._id}>
                                     {trace.name}
                                 </option>
@@ -95,7 +92,7 @@ class NewScenarioModalComponent extends React.Component {
                             type="number"
                             className="form-control"
                             required
-                            ref={traceLoadInput => (this.traceLoadInput = traceLoadInput)}
+                            ref={(traceLoadInput) => (this.traceLoadInput = traceLoadInput)}
                         />
                     </div>
                     <h4>Topology</h4>
@@ -103,9 +100,9 @@ class NewScenarioModalComponent extends React.Component {
                         <label className="form-control-label">Topology</label>
                         <select
                             className="form-control"
-                            ref={topologySelect => (this.topologySelect = topologySelect)}
+                            ref={(topologySelect) => (this.topologySelect = topologySelect)}
                         >
-                            {this.props.topologies.map(topology => (
+                            {this.props.topologies.map((topology) => (
                                 <option value={topology._id} key={topology._id}>
                                     {topology.name}
                                 </option>
@@ -118,7 +115,7 @@ class NewScenarioModalComponent extends React.Component {
                             <input
                                 type="checkbox"
                                 className="form-check-input"
-                                ref={failuresCheckbox => (this.failuresCheckbox = failuresCheckbox)}
+                                ref={(failuresCheckbox) => (this.failuresCheckbox = failuresCheckbox)}
                             />
                             <span className="ml-2">Enable failures</span>
                         </label>
@@ -128,7 +125,9 @@ class NewScenarioModalComponent extends React.Component {
                             <input
                                 type="checkbox"
                                 className="form-check-input"
-                                ref={performanceInterferenceCheckbox => (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox)}
+                                ref={(performanceInterferenceCheckbox) =>
+                                    (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox)
+                                }
                             />
                             <span className="ml-2">Enable performance interference</span>
                         </label>
@@ -137,9 +136,9 @@ class NewScenarioModalComponent extends React.Component {
                         <label className="form-control-label">Scheduler</label>
                         <select
                             className="form-control"
-                            ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)}
+                            ref={(schedulerSelect) => (this.schedulerSelect = schedulerSelect)}
                         >
-                            {this.props.schedulers.map(scheduler => (
+                            {this.props.schedulers.map((scheduler) => (
                                 <option value={scheduler.name} key={scheduler.name}>
                                     {scheduler.name}
                                 </option>
diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index a0d736a1..bbec9ebb 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -31,10 +31,7 @@ class NewTopologyModalComponent extends React.Component {
     }
 
     onDuplicate() {
-        this.props.onCreateTopology(
-            this.textInput.value,
-            this.originTopology.value,
-        )
+        this.props.onCreateTopology(this.textInput.value, this.originTopology.value)
         this.reset()
     }
 
@@ -52,7 +49,7 @@ class NewTopologyModalComponent extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
@@ -63,7 +60,7 @@ class NewTopologyModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
-                            ref={textInput => (this.textInput = textInput)}
+                            ref={(textInput) => (this.textInput = textInput)}
                         />
                     </div>
                     <div className="form-group">
@@ -71,12 +68,12 @@ class NewTopologyModalComponent extends React.Component {
                         <select
                             className="form-control"
                             disabled
-                            ref={originTopology => (this.originTopology = originTopology)}
+                            ref={(originTopology) => (this.originTopology = originTopology)}
                         >
                             <option value={-1} key={-1}>
                                 None - start from scratch
                             </option>
-                            {this.props.topologies.map(topology => (
+                            {this.props.topologies.map((topology) => (
                                 <option value={topology._id} key={topology._id}>
                                     {topology.name}
                                 </option>
-- 
cgit v1.2.3


From d8eb2d7fd4cf15706bced6c6ceca320cfaecb2f7 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Wed, 22 Jul 2020 14:31:03 +0200
Subject: Implement topology duplication

---
 .../components/modals/custom-components/NewTopologyModalComponent.js   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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

diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index bbec9ebb..a244b730 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -31,7 +31,7 @@ class NewTopologyModalComponent extends React.Component {
     }
 
     onDuplicate() {
-        this.props.onCreateTopology(this.textInput.value, this.originTopology.value)
+        this.props.onDuplicateTopology(this.textInput.value, this.originTopology.value)
         this.reset()
     }
 
@@ -67,7 +67,6 @@ class NewTopologyModalComponent extends React.Component {
                         <label className="form-control-label">Topology to duplicate (not supported yet)</label>
                         <select
                             className="form-control"
-                            disabled
                             ref={(originTopology) => (this.originTopology = originTopology)}
                         >
                             <option value={-1} key={-1}>
-- 
cgit v1.2.3


From 94cc7acc9eeb88177b7d75ff1d1c3245d09bce53 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Wed, 22 Jul 2020 15:19:32 +0200
Subject: Set first scenario name to be "Base scenario"

---
 .../modals/custom-components/NewScenarioModalComponent.js         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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

diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index 0bb4aeab..51116f59 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -7,6 +7,7 @@ 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),
@@ -17,8 +18,12 @@ class NewScenarioModalComponent extends React.Component {
         this.reset()
     }
 
+    componentDidUpdate() {
+        this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''
+    }
+
     reset() {
-        this.textInput.value = ''
+        this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''
         this.traceSelect.selectedIndex = 0
         this.traceLoadInput.value = 1.0
         this.topologySelect.selectedIndex = 0
@@ -72,6 +77,7 @@ class NewScenarioModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
+                            disabled={this.props.currentPortfolioScenarioIds.length === 0}
                             ref={(textInput) => (this.textInput = textInput)}
                         />
                     </div>
-- 
cgit v1.2.3


From 9e7cb3bd367607b32e102c3a87b68b33c53dec46 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Wed, 22 Jul 2020 15:39:11 +0200
Subject: Fix scenario name handling and increase margin

---
 .../modals/custom-components/NewScenarioModalComponent.js           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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

diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index 51116f59..d7d99982 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -19,7 +19,11 @@ class NewScenarioModalComponent extends React.Component {
     }
 
     componentDidUpdate() {
-        this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''
+        if (this.props.currentPortfolioScenarioIds.length === 0) {
+            this.textInput.value = 'Base scenario'
+        } else if (this.textInput.value === 'Base scenario') {
+            this.textInput.value = ''
+        }
     }
 
     reset() {
-- 
cgit v1.2.3