Add first plotting attempts for portfolios

5 files changed, 37 insertions, 58 deletions

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>