diff options
Diffstat (limited to 'src/components')
7 files changed, 132 insertions, 15 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; diff --git a/src/components/timeline/Timeline.js b/src/components/timeline/Timeline.js deleted file mode 100644 index a2a858eb..00000000 --- a/src/components/timeline/Timeline.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer"; -import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer"; -import "./Timeline.css"; - -const Timeline = ({currentTick, lastSimulatedTick}) => ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer/> - <TimelineControlsContainer/> - </div> - </div> -); - -export default Timeline; diff --git a/src/components/timeline/TimelineComponent.js b/src/components/timeline/TimelineComponent.js new file mode 100644 index 00000000..b400a378 --- /dev/null +++ b/src/components/timeline/TimelineComponent.js @@ -0,0 +1,43 @@ +import React from "react"; +import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer"; +import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer"; +import "./Timeline.css"; + +class TimelineComponent extends React.Component { + componentDidMount() { + this.interval = setInterval(() => { + if (!this.props.isPlaying) { + return; + } + + if (this.props.currentTick < this.props.lastSimulatedTick) { + for (let i in this.props.sections.reverse()) { + if (this.props.currentTick + 1 >= this.props.sections[i].startTick) { + if (this.props.currentDatacenterId !== this.props.sections[i].datacenterId) { + this.props.setCurrentDatacenter(this.props.sections[i].datacenterId); + } + break; + } + } + this.props.incrementTick(); + } + }, 1000); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + render() { + return ( + <div className="timeline-bar"> + <div className="timeline-container"> + <TimelineLabelsContainer/> + <TimelineControlsContainer/> + </div> + </div> + ); + } +} + +export default TimelineComponent; |