Add load color legend

3 files changed, 38 insertions, 4 deletions

diff --git a/src/components/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
index 26383d6a..3649045b 100644
--- a/src/components/sidebars/simulation/ExperimentMetadataComponent.js
+++ b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
@@ -3,9 +3,9 @@ import React from "react";
 const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => (
     <div>
         <h2>{experimentName}</h2>
-        <p><strong>Path:</strong> {pathName}</p>
-        <p><strong>Trace:</strong> {traceName}</p>
-        <p><strong>Scheduler:</strong> {schedulerName}</p>
+        <p>Path: <strong>{pathName}</strong></p>
+        <p>Trace: <strong>{traceName}</strong></p>
+        <p>Scheduler: <strong>{schedulerName}</strong></p>
     </div>
 );
 
diff --git a/src/components/sidebars/simulation/LoadMetricComponent.js b/src/components/sidebars/simulation/LoadMetricComponent.js
new file mode 100644
index 00000000..19b9927b
--- /dev/null
+++ b/src/components/sidebars/simulation/LoadMetricComponent.js
@@ -0,0 +1,33 @@
+import React from "react";
+import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../../../colors/index";
+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%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{backgroundColor: SIM_HIGH_COLOR, flex: 1}}
+                title="75-100%"
+            />
+        </div>
+    </div>
+);
+
+export default LoadMetricComponent;
diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.js b/src/components/sidebars/simulation/SimulationSidebarComponent.js
index 7da064c4..5cb83c2c 100644
--- a/src/components/sidebars/simulation/SimulationSidebarComponent.js
+++ b/src/components/sidebars/simulation/SimulationSidebarComponent.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ExperimentMetadataContainer from "../../../containers/sidebars/simulation/ExperimentMetadataContainer";
+import LoadMetricContainer from "../../../containers/sidebars/simulation/LoadMetricContainer";
 import TraceContainer from "../../../containers/sidebars/simulation/TraceContainer";
 import Sidebar from "../Sidebar";
 import "./SimulationSidebarComponent.css";
@@ -9,7 +10,7 @@ const SimulationSidebarComponent = () => {
         <Sidebar isRight={false}>
             <div className="simulation-sidebar-container flex-column">
                 <ExperimentMetadataContainer/>
-                <hr/>
+                <LoadMetricContainer/>
                 <div className="trace-container">
                     <TraceContainer/>
                 </div>