diff options
Diffstat (limited to 'src/components/sidebars/simulation')
5 files changed, 89 insertions, 0 deletions
diff --git a/src/components/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/sidebars/simulation/ExperimentMetadataComponent.js new file mode 100644 index 00000000..26383d6a --- /dev/null +++ b/src/components/sidebars/simulation/ExperimentMetadataComponent.js @@ -0,0 +1,12 @@ +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> + </div> +); + +export default ExperimentMetadataComponent; diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.js b/src/components/sidebars/simulation/SimulationSidebarComponent.js new file mode 100644 index 00000000..7da064c4 --- /dev/null +++ b/src/components/sidebars/simulation/SimulationSidebarComponent.js @@ -0,0 +1,21 @@ +import React from "react"; +import ExperimentMetadataContainer from "../../../containers/sidebars/simulation/ExperimentMetadataContainer"; +import TraceContainer from "../../../containers/sidebars/simulation/TraceContainer"; +import Sidebar from "../Sidebar"; +import "./SimulationSidebarComponent.css"; + +const SimulationSidebarComponent = () => { + return ( + <Sidebar isRight={false}> + <div className="simulation-sidebar-container flex-column"> + <ExperimentMetadataContainer/> + <hr/> + <div className="trace-container"> + <TraceContainer/> + </div> + </div> + </Sidebar> + ); +}; + +export default SimulationSidebarComponent; diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.sass b/src/components/sidebars/simulation/SimulationSidebarComponent.sass new file mode 100644 index 00000000..82af97fa --- /dev/null +++ b/src/components/sidebars/simulation/SimulationSidebarComponent.sass @@ -0,0 +1,8 @@ +.simulation-sidebar-container + display: flex + height: 100% + max-height: 100% + +.trace-container + flex: 1 + overflow-y: scroll diff --git a/src/components/sidebars/simulation/TaskComponent.js b/src/components/sidebars/simulation/TaskComponent.js new file mode 100644 index 00000000..9a26e720 --- /dev/null +++ b/src/components/sidebars/simulation/TaskComponent.js @@ -0,0 +1,31 @@ +import React from "react"; +import {convertSecondsToFormattedTime} from "../../../util/date-time"; + +const TaskComponent = ({task, flopsLeft}) => { + let stateInfo; + + if (flopsLeft === task.totalFlopCount) { + stateInfo = <p><span className="fa fa-hourglass-half"/>Waiting</p>; + } else if (flopsLeft > 0) { + stateInfo = ( + <p> + <span className="fa fa-refresh"/> + Running ({task.totalFlopCount - flopsLeft} / {task.totalFlopCount} FLOPS) + </p> + ); + } else { + stateInfo = <p><span className="fa fa-check"/>Completed</p>; + } + + return ( + <li className="list-group-item flex-column align-items-start"> + <div className="d-flex w-100 justify-content-between"> + <h5 className="mb-1">{task.totalFlopCount} FLOPS</h5> + <small>Starts: {convertSecondsToFormattedTime(task.startTick)}</small> + </div> + {stateInfo} + </li> + ); +}; + +export default TaskComponent; diff --git a/src/components/sidebars/simulation/TraceComponent.js b/src/components/sidebars/simulation/TraceComponent.js new file mode 100644 index 00000000..498fe5bf --- /dev/null +++ b/src/components/sidebars/simulation/TraceComponent.js @@ -0,0 +1,17 @@ +import React from "react"; +import TaskContainer from "../../../containers/sidebars/simulation/TaskContainer"; + +const TraceComponent = ({jobs}) => ( + <div> + <h3>Trace</h3> + {jobs.map(job => ( + <ul className="list-group" key={job.id}> + {job.taskIds.map(taskId => ( + <TaskContainer taskId={taskId} key={taskId}/> + ))} + </ul> + ))} + </div> +); + +export default TraceComponent; |