diff options
Diffstat (limited to 'src')
5 files changed, 58 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> diff --git a/src/containers/sidebars/simulation/LoadMetricContainer.js b/src/containers/sidebars/simulation/LoadMetricContainer.js new file mode 100644 index 00000000..71a50163 --- /dev/null +++ b/src/containers/sidebars/simulation/LoadMetricContainer.js @@ -0,0 +1,14 @@ +import {connect} from "react-redux"; +import LoadMetricComponent from "../../../components/sidebars/simulation/LoadMetricComponent"; + +const mapStateToProps = state => { + return { + loadMetric: state.loadMetric, + } +}; + +const LoadMetricContainer = connect( + mapStateToProps +)(LoadMetricComponent); + +export default LoadMetricContainer; diff --git a/src/util/simulation-load.js b/src/util/simulation-load.js index 224dc6f4..55c37929 100644 --- a/src/util/simulation-load.js +++ b/src/util/simulation-load.js @@ -1,5 +1,11 @@ import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../colors/index"; +export const LOAD_NAME_MAP = { + LOAD: "computational load", + TEMPERATURE: "temperature", + MEMORY: "memory use", +}; + export function convertLoadToSimulationColor(load) { if (load <= 0.25) { return SIM_LOW_COLOR; |