summaryrefslogtreecommitdiff
path: root/src/components/app/sidebars/simulation
diff options
context:
space:
mode:
authorGeorgios Andreadis <G.Andreadis@student.tudelft.nl>2017-10-04 23:23:09 +0200
committerGitHub <noreply@github.com>2017-10-04 23:23:09 +0200
commitfcaaae65d34003874c76e0c01134dedf94248e09 (patch)
tree2aae1422168651e832a1904623f6f5b100fc17ec /src/components/app/sidebars/simulation
parent0a62dfb55c5700013d42a589b930c7448e5bff71 (diff)
parent606d1de0be09f3597165248f65d54e158a13860c (diff)
Merge pull request #42 from atlarge-research/auto-reformat
Standardize code format
Diffstat (limited to 'src/components/app/sidebars/simulation')
-rw-r--r--src/components/app/sidebars/simulation/ExperimentMetadataComponent.js25
-rw-r--r--src/components/app/sidebars/simulation/LoadMetricComponent.js59
-rw-r--r--src/components/app/sidebars/simulation/SimulationSidebarComponent.js22
-rw-r--r--src/components/app/sidebars/simulation/TaskComponent.js97
-rw-r--r--src/components/app/sidebars/simulation/TraceComponent.js28
5 files changed, 125 insertions, 106 deletions
diff --git a/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
index 3649045b..bc563dab 100644
--- a/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
+++ b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
@@ -1,12 +1,23 @@
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>
+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>
);
export default ExperimentMetadataComponent;
diff --git a/src/components/app/sidebars/simulation/LoadMetricComponent.js b/src/components/app/sidebars/simulation/LoadMetricComponent.js
index e72e6b67..3e4cf810 100644
--- a/src/components/app/sidebars/simulation/LoadMetricComponent.js
+++ b/src/components/app/sidebars/simulation/LoadMetricComponent.js
@@ -1,33 +1,40 @@
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 {
+ 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}) => (
+const LoadMetricComponent = ({ loadMetric }) => (
+ <div>
<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>
+ 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/app/sidebars/simulation/SimulationSidebarComponent.js b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
index 92651dfc..08dbb29a 100644
--- a/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
+++ b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
@@ -6,17 +6,17 @@ 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;
diff --git a/src/components/app/sidebars/simulation/TaskComponent.js b/src/components/app/sidebars/simulation/TaskComponent.js
index baf6f9ce..bd917cc9 100644
--- a/src/components/app/sidebars/simulation/TaskComponent.js
+++ b/src/components/app/sidebars/simulation/TaskComponent.js
@@ -1,57 +1,58 @@
import approx from "approximate-number";
import classNames from "classnames";
import React from "react";
-import {convertSecondsToFormattedTime} from "../../../../util/date-time";
+import { convertSecondsToFormattedTime } from "../../../../util/date-time";
-const TaskComponent = ({task, flopsLeft}) => {
- let icon;
- let progressBarContent;
- let percent;
- let infoTitle;
+const TaskComponent = ({ task, flopsLeft }) => {
+ 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"}}>
- <span
- 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>
- );
+ 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" }}
+ />
+ <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;
diff --git a/src/components/app/sidebars/simulation/TraceComponent.js b/src/components/app/sidebars/simulation/TraceComponent.js
index b43a8cea..2b6559b4 100644
--- a/src/components/app/sidebars/simulation/TraceComponent.js
+++ b/src/components/app/sidebars/simulation/TraceComponent.js
@@ -1,20 +1,20 @@
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>
+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>
);
export default TraceComponent;