From de8f12d74faef5fa3f9e38d1340948cab2d06ea3 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Wed, 1 Jul 2020 13:33:31 +0200
Subject: Manually generate IDs

---
 .../simulation/ExperimentMetadataComponent.js      |  40 ++++----
 .../app/sidebars/simulation/LoadMetricComponent.js |  61 ++++++------
 .../simulation/SimulationSidebarComponent.js       |  38 ++++----
 .../simulation/SimulationSidebarComponent.sass     |  10 +-
 .../app/sidebars/simulation/TaskComponent.js       | 102 ++++++++++-----------
 .../app/sidebars/simulation/TraceComponent.js      |  34 +++----
 6 files changed, 140 insertions(+), 145 deletions(-)

(limited to 'frontend/src/components/app/sidebars/simulation')

diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
index bc563dab..54a8b5e9 100644
--- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
@@ -1,23 +1,23 @@
-import React from "react";
+import React from 'react'
 
 const ExperimentMetadataComponent = ({
-  experimentName,
-  pathName,
-  traceName,
-  schedulerName
-}) => (
-  <div>
-    <h2>{experimentName}</h2>
-    <p>
-      Path: <strong>{pathName}</strong>
-    </p>
-    <p>
-      Trace: <strong>{traceName}</strong>
-    </p>
-    <p>
-      Scheduler: <strong>{schedulerName}</strong>
-    </p>
-  </div>
-);
+                                         experimentName,
+                                         pathName,
+                                         traceName,
+                                         schedulerName,
+                                     }) => (
+    <div>
+        <h2>{experimentName}</h2>
+        <p>
+            Path: <strong>{pathName}</strong>
+        </p>
+        <p>
+            Trace: <strong>{traceName}</strong>
+        </p>
+        <p>
+            Scheduler: <strong>{schedulerName}</strong>
+        </p>
+    </div>
+)
 
-export default ExperimentMetadataComponent;
+export default ExperimentMetadataComponent
diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
index 3e4cf810..6ee6a3b9 100644
--- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
@@ -1,40 +1,35 @@
-import React from "react";
-import {
-  SIM_HIGH_COLOR,
-  SIM_LOW_COLOR,
-  SIM_MID_HIGH_COLOR,
-  SIM_MID_LOW_COLOR
-} from "../../../../util/colors";
-import { LOAD_NAME_MAP } from "../../../../util/simulation-load";
+import React from 'react'
+import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors'
+import { LOAD_NAME_MAP } from '../../../../util/simulation-load'
 
 const LoadMetricComponent = ({ loadMetric }) => (
-  <div>
     <div>
-      Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
-    </div>
-    <div className="btn-group mb-2" style={{ display: "flex" }}>
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
-        title="0-25%"
-      />
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
-        title="25-50%"
-      />
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
-        title="50-75%"
-      />
+        <div>
+            Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
+        </div>
+        <div className="btn-group mb-2" style={{ display: 'flex' }}>
       <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
-        title="75-100%"
+          className="btn btn-secondary"
+          style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
+          title="0-25%"
       />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
+                title="25-50%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
+                title="50-75%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
+                title="75-100%"
+            />
+        </div>
     </div>
-  </div>
-);
+)
 
-export default LoadMetricComponent;
+export default LoadMetricComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
index 08dbb29a..6e89c40e 100644
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
@@ -1,22 +1,22 @@
-import React from "react";
-import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer";
-import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer";
-import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer";
-import Sidebar from "../Sidebar";
-import "./SimulationSidebarComponent.css";
+import React from 'react'
+import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer'
+import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer'
+import TraceContainer from '../../../../containers/app/sidebars/simulation/TraceContainer'
+import Sidebar from '../Sidebar'
+import './SimulationSidebarComponent.css'
 
 const SimulationSidebarComponent = () => {
-  return (
-    <Sidebar isRight={false}>
-      <div className="simulation-sidebar-container flex-column">
-        <ExperimentMetadataContainer />
-        <LoadMetricContainer />
-        <div className="trace-container">
-          <TraceContainer />
-        </div>
-      </div>
-    </Sidebar>
-  );
-};
+    return (
+        <Sidebar isRight={false}>
+            <div className="simulation-sidebar-container flex-column">
+                <ExperimentMetadataContainer/>
+                <LoadMetricContainer/>
+                <div className="trace-container">
+                    <TraceContainer/>
+                </div>
+            </div>
+        </Sidebar>
+    )
+}
 
-export default SimulationSidebarComponent;
+export default SimulationSidebarComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
index 82af97fa..6490cf8d 100644
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
@@ -1,8 +1,8 @@
 .simulation-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
+    display: flex
+    height: 100%
+    max-height: 100%
 
 .trace-container
-  flex: 1
-  overflow-y: scroll
+    flex: 1
+    overflow-y: scroll
diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
index bd917cc9..94617086 100644
--- a/frontend/src/components/app/sidebars/simulation/TaskComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
@@ -1,58 +1,58 @@
-import approx from "approximate-number";
-import classNames from "classnames";
-import React from "react";
-import { convertSecondsToFormattedTime } from "../../../../util/date-time";
+import approx from 'approximate-number'
+import classNames from 'classnames'
+import React from 'react'
+import { convertSecondsToFormattedTime } from '../../../../util/date-time'
 
 const TaskComponent = ({ task, flopsLeft }) => {
-  let icon;
-  let progressBarContent;
-  let percent;
-  let infoTitle;
+    let icon
+    let progressBarContent
+    let percent
+    let infoTitle
 
-  if (flopsLeft === task.totalFlopCount) {
-    icon = "hourglass-half";
-    progressBarContent = "";
-    percent = 0;
-    infoTitle = "Not submitted yet";
-  } else if (flopsLeft > 0) {
-    icon = "refresh";
-    progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP";
-    percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount;
-    infoTitle =
-      progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)";
-  } else {
-    icon = "check";
-    progressBarContent = "Completed";
-    percent = 100;
-    infoTitle = "Completed";
-  }
+    if (flopsLeft === task.totalFlopCount) {
+        icon = 'hourglass-half'
+        progressBarContent = ''
+        percent = 0
+        infoTitle = 'Not submitted yet'
+    } else if (flopsLeft > 0) {
+        icon = 'refresh'
+        progressBarContent = approx(task.totalFlopCount - flopsLeft) + ' FLOP'
+        percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount
+        infoTitle =
+            progressBarContent + ' (' + Math.round(percent * 10) / 10 + '%)'
+    } else {
+        icon = 'check'
+        progressBarContent = 'Completed'
+        percent = 100
+        infoTitle = 'Completed'
+    }
 
-  return (
-    <li className="list-group-item flex-column align-items-start">
-      <div className="d-flex w-100 justify-content-between">
-        <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
-        <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
-      </div>
-      <div title={infoTitle} style={{ display: "flex" }}>
+    return (
+        <li className="list-group-item flex-column align-items-start">
+            <div className="d-flex w-100 justify-content-between">
+                <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
+                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
+            </div>
+            <div title={infoTitle} style={{ display: 'flex' }}>
         <span
-          className={classNames("fa", "fa-" + icon)}
-          style={{ width: "20px" }}
+            className={classNames('fa', 'fa-' + icon)}
+            style={{ width: '20px' }}
         />
-        <div className="progress" style={{ flexGrow: 1 }}>
-          <div
-            className="progress-bar"
-            role="progressbar"
-            aria-valuenow={percent}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            style={{ width: percent + "%" }}
-          >
-            {progressBarContent}
-          </div>
-        </div>
-      </div>
-    </li>
-  );
-};
+                <div className="progress" style={{ flexGrow: 1 }}>
+                    <div
+                        className="progress-bar"
+                        role="progressbar"
+                        aria-valuenow={percent}
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                        style={{ width: percent + '%' }}
+                    >
+                        {progressBarContent}
+                    </div>
+                </div>
+            </div>
+        </li>
+    )
+}
 
-export default TaskComponent;
+export default TaskComponent
diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
index 2b6559b4..1292219b 100644
--- a/frontend/src/components/app/sidebars/simulation/TraceComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
@@ -1,20 +1,20 @@
-import React from "react";
-import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer";
+import React from 'react'
+import TaskContainer from '../../../../containers/app/sidebars/simulation/TaskContainer'
 
 const TraceComponent = ({ jobs }) => (
-  <div>
-    <h3>Trace</h3>
-    {jobs.map(job => (
-      <div key={job.id}>
-        <h4>Job: {job.name}</h4>
-        <ul className="list-group">
-          {job.taskIds.map(taskId => (
-            <TaskContainer taskId={taskId} key={taskId} />
-          ))}
-        </ul>
-      </div>
-    ))}
-  </div>
-);
+    <div>
+        <h3>Trace</h3>
+        {jobs.map(job => (
+            <div key={job.id}>
+                <h4>Job: {job.name}</h4>
+                <ul className="list-group">
+                    {job.taskIds.map(taskId => (
+                        <TaskContainer taskId={taskId} key={taskId}/>
+                    ))}
+                </ul>
+            </div>
+        ))}
+    </div>
+)
 
-export default TraceComponent;
+export default TraceComponent
-- 
cgit v1.2.3