diff options
Diffstat (limited to 'frontend/src/components/app/sidebars')
38 files changed, 889 insertions, 899 deletions
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js index 33dbe011..7ba8639a 100644 --- a/frontend/src/components/app/sidebars/Sidebar.js +++ b/frontend/src/components/app/sidebars/Sidebar.js @@ -1,50 +1,50 @@ -import classNames from "classnames"; -import React from "react"; -import "./Sidebar.css"; +import classNames from 'classnames' +import React from 'react' +import './Sidebar.css' class Sidebar extends React.Component { - state = { - collapsed: false - }; + state = { + collapsed: false, + } - render() { - const collapseButton = ( - <div - className={classNames("sidebar-collapse-button", { - "sidebar-collapse-button-right": this.props.isRight - })} - onClick={() => this.setState({ collapsed: !this.state.collapsed })} - > - {(this.state.collapsed && this.props.isRight) || - (!this.state.collapsed && !this.props.isRight) ? ( - <span - className="fa fa-angle-left" - title={this.props.isRight ? "Expand" : "Collapse"} - /> - ) : ( - <span - className="fa fa-angle-right" - title={this.props.isRight ? "Collapse" : "Expand"} - /> - )} - </div> - ); + render() { + const collapseButton = ( + <div + className={classNames('sidebar-collapse-button', { + 'sidebar-collapse-button-right': this.props.isRight, + })} + onClick={() => this.setState({ collapsed: !this.state.collapsed })} + > + {(this.state.collapsed && this.props.isRight) || + (!this.state.collapsed && !this.props.isRight) ? ( + <span + className="fa fa-angle-left" + title={this.props.isRight ? 'Expand' : 'Collapse'} + /> + ) : ( + <span + className="fa fa-angle-right" + title={this.props.isRight ? 'Collapse' : 'Expand'} + /> + )} + </div> + ) - if (this.state.collapsed) { - return collapseButton; + if (this.state.collapsed) { + return collapseButton + } + return ( + <div + className={classNames('sidebar p-3 h-100', { + 'sidebar-right': this.props.isRight, + })} + onWheel={e => e.stopPropagation()} + > + {this.props.children} + {collapseButton} + </div> + ) } - return ( - <div - className={classNames("sidebar p-3 h-100", { - "sidebar-right": this.props.isRight - })} - onWheel={e => e.stopPropagation()} - > - {this.props.children} - {collapseButton} - </div> - ); - } } -export default Sidebar; +export default Sidebar diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass index 4d0e5f1e..02e8940d 100644 --- a/frontend/src/components/app/sidebars/Sidebar.sass +++ b/frontend/src/components/app/sidebars/Sidebar.sass @@ -2,49 +2,49 @@ @import ../../../style-globals/_mixins.sass .sidebar-collapse-button - position: absolute - left: 5px - top: 5px - padding: 5px 7px + position: absolute + left: 5px + top: 5px + padding: 5px 7px - background: white - border: solid 1px $gray-semi-light - z-index: 99 + background: white + border: solid 1px $gray-semi-light + z-index: 99 - +clickable - +border-radius(5px) - +transition(background, 200ms) + +clickable + +border-radius(5px) + +transition(background, 200ms) - &.sidebar-collapse-button-right - left: auto - right: 5px - top: 5px + &.sidebar-collapse-button-right + left: auto + right: 5px + top: 5px - &:hover - background: #eeeeee + &:hover + background: #eeeeee .sidebar - position: absolute - top: 0 - left: 0 - width: 350px + position: absolute + top: 0 + left: 0 + width: 350px - z-index: 100 - background: white + z-index: 100 + background: white - border-right: $gray-semi-dark 1px solid + border-right: $gray-semi-dark 1px solid - .sidebar-collapse-button - left: auto - right: -25px + .sidebar-collapse-button + left: auto + right: -25px .sidebar-right - left: auto - right: 0 + left: auto + right: 0 - border-left: $gray-semi-dark 1px solid - border-right: none + border-left: $gray-semi-dark 1px solid + border-right: none - .sidebar-collapse-button-right - left: -25px - right: auto + .sidebar-collapse-button-right + left: -25px + right: auto diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js index 8c9b164b..01005085 100644 --- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js +++ b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js @@ -1,22 +1,22 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const LoadBarComponent = ({ percent, disabled }) => ( - <div className="mt-1"> - <strong>Current load</strong> - <div className={classNames("progress", { disabled })}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + "%" }} - > - {percent}% - </div> + <div className="mt-1"> + <strong>Current load</strong> + <div className={classNames('progress', { disabled })}> + <div + className="progress-bar" + role="progressbar" + aria-valuenow={percent} + aria-valuemin="0" + aria-valuemax="100" + style={{ width: percent + '%' }} + > + {percent}% + </div> + </div> </div> - </div> -); +) -export default LoadBarComponent; +export default LoadBarComponent diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js index 5f0d40cb..ae52891a 100644 --- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js +++ b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js @@ -1,90 +1,84 @@ -import React from "react"; -import ReactDOM from "react-dom/server"; -import SvgSaver from "svgsaver"; -import { - VictoryAxis, - VictoryChart, - VictoryLabel, - VictoryLine, - VictoryScatter -} from "victory"; -import { convertSecondsToFormattedTime } from "../../../../util/date-time"; +import React from 'react' +import ReactDOM from 'react-dom/server' +import SvgSaver from 'svgsaver' +import { VictoryAxis, VictoryChart, VictoryLabel, VictoryLine, VictoryScatter } from 'victory' +import { convertSecondsToFormattedTime } from '../../../../util/date-time' const LoadChartComponent = ({ data, currentTick }) => { - const onExport = () => { - const div = document.createElement("div"); - div.innerHTML = ReactDOM.renderToString( - <VictoryChartComponent - data={data} - currentTick={currentTick} - showCurrentTick={false} - /> - ); - div.firstChild.style = - "font-family: Roboto, Arial, sans-serif; font-size: 10pt;"; - const svgSaver = new SvgSaver(); - svgSaver.asSvg( - div.firstChild, - "opendc-chart-export-" + Date.now() + ".svg" - ); - }; + const onExport = () => { + const div = document.createElement('div') + div.innerHTML = ReactDOM.renderToString( + <VictoryChartComponent + data={data} + currentTick={currentTick} + showCurrentTick={false} + />, + ) + div.firstChild.style = + 'font-family: Roboto, Arial, sans-serif; font-size: 10pt;' + const svgSaver = new SvgSaver() + svgSaver.asSvg( + div.firstChild, + 'opendc-chart-export-' + Date.now() + '.svg', + ) + } - return ( - <div className="mt-1" style={{ position: "relative" }}> - <strong>Load over time</strong> - <VictoryChartComponent - data={data} - currentTick={currentTick} - showCurrentTick={true} - /> - <ExportChartComponent onExport={onExport} /> - </div> - ); -}; + return ( + <div className="mt-1" style={{ position: 'relative' }}> + <strong>Load over time</strong> + <VictoryChartComponent + data={data} + currentTick={currentTick} + showCurrentTick={true} + /> + <ExportChartComponent onExport={onExport}/> + </div> + ) +} const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => ( - <VictoryChart - height={250} - padding={{ top: 10, bottom: 50, left: 50, right: 50 }} - > - <VictoryAxis - tickFormat={tick => convertSecondsToFormattedTime(tick)} - fixLabelOverlap={true} - label="Simulated Time" - /> - <VictoryAxis dependentAxis label="Load" /> - <VictoryLine data={data} /> - <VictoryScatter data={data} /> - {showCurrentTick ? ( - <VictoryLine - labelComponent={ - <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} /> - } - data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]} - labels={point => - point.y === 1 - ? "Current tick : " + convertSecondsToFormattedTime(currentTick) - : ""} - style={{ - data: { stroke: "#00A6D6", strokeWidth: 4 }, - labels: { fill: "#00A6D6" } - }} - /> - ) : ( - undefined - )} - </VictoryChart> -); + <VictoryChart + height={250} + padding={{ top: 10, bottom: 50, left: 50, right: 50 }} + > + <VictoryAxis + tickFormat={tick => convertSecondsToFormattedTime(tick)} + fixLabelOverlap={true} + label="Simulated Time" + /> + <VictoryAxis dependentAxis label="Load"/> + <VictoryLine data={data}/> + <VictoryScatter data={data}/> + {showCurrentTick ? ( + <VictoryLine + labelComponent={ + <VictoryLabel renderInPortal angle={90} dy={-5} dx={60}/> + } + data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]} + labels={point => + point.y === 1 + ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick) + : ''} + style={{ + data: { stroke: '#00A6D6', strokeWidth: 4 }, + labels: { fill: '#00A6D6' }, + }} + /> + ) : ( + undefined + )} + </VictoryChart> +) const ExportChartComponent = ({ onExport }) => ( - <button - className="btn btn-success btn-circle btn-sm" - title="Export Chart to PNG Image" - onClick={onExport} - style={{ position: "absolute", top: 0, right: 0 }} - > - <span className="fa fa-camera" /> - </button> -); + <button + className="btn btn-success btn-circle btn-sm" + title="Export Chart to PNG Image" + onClick={onExport} + style={{ position: 'absolute', top: 0, right: 0 }} + > + <span className="fa fa-camera"/> + </button> +) -export default LoadChartComponent; +export default LoadChartComponent diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js index bc563dab..54a8b5e9 100644 --- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js @@ -1,23 +1,23 @@ -import React from "react"; +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> -); + 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; +export default ExperimentMetadataComponent diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js index 3e4cf810..6ee6a3b9 100644 --- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js @@ -1,40 +1,35 @@ -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 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' 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%" - /> + <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_HIGH_COLOR, flex: 1 }} - title="75-100%" + 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> - </div> -); +) -export default LoadMetricComponent; +export default LoadMetricComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js index 08dbb29a..6e89c40e 100644 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js @@ -1,22 +1,22 @@ -import React from "react"; -import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer"; -import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer"; -import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer"; -import Sidebar from "../Sidebar"; -import "./SimulationSidebarComponent.css"; +import React from 'react' +import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer' +import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer' +import TraceContainer from '../../../../containers/app/sidebars/simulation/TraceContainer' +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; +export default SimulationSidebarComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass index 82af97fa..6490cf8d 100644 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass @@ -1,8 +1,8 @@ .simulation-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .trace-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js index bd917cc9..94617086 100644 --- a/frontend/src/components/app/sidebars/simulation/TaskComponent.js +++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js @@ -1,58 +1,58 @@ -import approx from "approximate-number"; -import classNames from "classnames"; -import React from "react"; -import { convertSecondsToFormattedTime } from "../../../../util/date-time"; +import approx from 'approximate-number' +import classNames from 'classnames' +import React from 'react' +import { convertSecondsToFormattedTime } from '../../../../util/date-time' const TaskComponent = ({ task, flopsLeft }) => { - let icon; - let progressBarContent; - let percent; - let infoTitle; + 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" }}> + 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" }} + 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> - ); -}; + <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; +export default TaskComponent diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js index 2b6559b4..1292219b 100644 --- a/frontend/src/components/app/sidebars/simulation/TraceComponent.js +++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js @@ -1,20 +1,20 @@ -import React from "react"; -import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer"; +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> -); + <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; +export default TraceComponent diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js index 805538b3..1f3051d5 100644 --- a/frontend/src/components/app/sidebars/topology/NameComponent.js +++ b/frontend/src/components/app/sidebars/topology/NameComponent.js @@ -1,13 +1,13 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; +import React from 'react' +import FontAwesome from 'react-fontawesome' const NameComponent = ({ name, onEdit }) => ( - <h2> - {name} - <button className="btn btn-outline-secondary float-right" onClick={onEdit}> - <FontAwesome name="pencil" /> - </button> - </h2> -); + <h2> + {name} + <button className="btn btn-outline-secondary float-right" onClick={onEdit}> + <FontAwesome name="pencil"/> + </button> + </h2> +) -export default NameComponent; +export default NameComponent diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js index 81e510a1..b1def94b 100644 --- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -1,31 +1,31 @@ -import React from "react"; -import BuildingSidebarContainer from "../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer"; -import MachineSidebarContainer from "../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer"; -import RackSidebarContainer from "../../../../containers/app/sidebars/topology/rack/RackSidebarContainer"; -import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer"; -import Sidebar from "../Sidebar"; +import React from 'react' +import BuildingSidebarContainer from '../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer' +import MachineSidebarContainer from '../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer' +import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer' +import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer' +import Sidebar from '../Sidebar' const TopologySidebarComponent = ({ interactionLevel }) => { - let sidebarContent; + let sidebarContent - switch (interactionLevel.mode) { - case "BUILDING": - sidebarContent = <BuildingSidebarContainer />; - break; - case "ROOM": - sidebarContent = <RoomSidebarContainer />; - break; - case "RACK": - sidebarContent = <RackSidebarContainer />; - break; - case "MACHINE": - sidebarContent = <MachineSidebarContainer />; - break; - default: - sidebarContent = "Missing Content"; - } + switch (interactionLevel.mode) { + case 'BUILDING': + sidebarContent = <BuildingSidebarContainer/> + break + case 'ROOM': + sidebarContent = <RoomSidebarContainer/> + break + case 'RACK': + sidebarContent = <RackSidebarContainer/> + break + case 'MACHINE': + sidebarContent = <MachineSidebarContainer/> + break + default: + sidebarContent = 'Missing Content' + } - return <Sidebar isRight={true}>{sidebarContent}</Sidebar>; -}; + return <Sidebar isRight={true}>{sidebarContent}</Sidebar> +} -export default TopologySidebarComponent; +export default TopologySidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index f16c19f0..00965c18 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,20 +1,21 @@ -import React from "react"; -import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer"; +import React from 'react' +import NewRoomConstructionContainer + from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' const BuildingSidebarComponent = ({ inSimulation }) => { - return ( - <div> - <h2>Building</h2> - {inSimulation ? ( - <div className="alert alert-info"> - <span className="fa fa-info-circle mr-2" /> - <strong>Click on individual rooms</strong> to see their stats! + return ( + <div> + <h2>Building</h2> + {inSimulation ? ( + <div className="alert alert-info"> + <span className="fa fa-info-circle mr-2"/> + <strong>Click on individual rooms</strong> to see their stats! + </div> + ) : ( + <NewRoomConstructionContainer/> + )} </div> - ) : ( - <NewRoomConstructionContainer /> - )} - </div> - ); -}; + ) +} -export default BuildingSidebarComponent; +export default BuildingSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index 7b049642..362483bf 100644 --- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -1,31 +1,31 @@ -import React from "react"; +import React from 'react' const NewRoomConstructionComponent = ({ - onStart, - onFinish, - onCancel, - currentRoomInConstruction -}) => { - if (currentRoomInConstruction === -1) { + onStart, + onFinish, + onCancel, + currentRoomInConstruction, + }) => { + if (currentRoomInConstruction === -1) { + return ( + <div className="btn btn-outline-primary btn-block" onClick={onStart}> + <span className="fa fa-plus mr-2"/> + Construct a new room + </div> + ) + } return ( - <div className="btn btn-outline-primary btn-block" onClick={onStart}> - <span className="fa fa-plus mr-2" /> - Construct a new room - </div> - ); - } - return ( - <div> - <div className="btn btn-primary btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2" /> - Finalize new room - </div> - <div className="btn btn-default btn-block" onClick={onCancel}> - <span className="fa fa-times mr-2" /> - Cancel construction - </div> - </div> - ); -}; + <div> + <div className="btn btn-primary btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2"/> + Finalize new room + </div> + <div className="btn btn-default btn-block" onClick={onCancel}> + <span className="fa fa-times mr-2"/> + Cancel construction + </div> + </div> + ) +} -export default NewRoomConstructionComponent; +export default NewRoomConstructionComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js index 7f56aca0..d7ce24bc 100644 --- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRackComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to rack - </div> -); + <div className="btn btn-secondary btn-block" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to rack + </div> +) -export default BackToRackComponent; +export default BackToRackComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index d8774bf9..b9aa6251 100644 --- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteMachineComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this machine - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this machine + </div> +) -export default DeleteMachineComponent; +export default DeleteMachineComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 0ad8b79c..70be6968 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react' const MachineNameComponent = ({ position }) => ( - <h2>Machine at slot {position}</h2> -); + <h2>Machine at slot {position}</h2> +) -export default MachineNameComponent; +export default MachineNameComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 5ccaf25c..66c8c84f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,27 +1,27 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRackContainer from "../../../../../containers/app/sidebars/topology/machine/BackToRackContainer"; -import DeleteMachineContainer from "../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer"; -import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer"; -import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer' +import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer' +import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer' +import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer' const MachineSidebarComponent = ({ inSimulation, machineId }) => { - return ( - <div> - <MachineNameContainer /> - <BackToRackContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="machine" objectId={machineId} /> - <LoadChartContainer objectType="machine" objectId={machineId} /> + <MachineNameContainer/> + <BackToRackContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="machine" objectId={machineId}/> + <LoadChartContainer objectType="machine" objectId={machineId}/> + </div> + ) : ( + <DeleteMachineContainer/> + )} + <UnitTabsContainer/> </div> - ) : ( - <DeleteMachineContainer /> - )} - <UnitTabsContainer /> - </div> - ); -}; + ) +} -export default MachineSidebarComponent; +export default MachineSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js index 0c903228..57e219fd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -1,46 +1,46 @@ -import PropTypes from "prop-types"; -import React from "react"; +import PropTypes from 'prop-types' +import React from 'react' class UnitAddComponent extends React.Component { - static propTypes = { - units: PropTypes.array.isRequired, - onAdd: PropTypes.func.isRequired - }; + static propTypes = { + units: PropTypes.array.isRequired, + onAdd: PropTypes.func.isRequired, + } - render() { - return ( - <div className="form-inline"> - <div className="form-group w-100"> - <select - className="form-control w-75 mr-1" - ref={unitSelect => (this.unitSelect = unitSelect)} - > - {this.props.units.map(unit => ( - <option value={unit.id} key={unit.id}> - {unit.manufacturer + - " " + - unit.family + - " " + - unit.model + - " " + - unit.generation} - </option> - ))} - </select> - <button - type="submit" - className="btn btn-outline-primary" - onClick={() => - this.props.onAdd(parseInt(this.unitSelect.value, 10)) - } - > - <span className="fa fa-plus mr-2" /> - Add - </button> - </div> - </div> - ); - } + render() { + return ( + <div className="form-inline"> + <div className="form-group w-100"> + <select + className="form-control w-75 mr-1" + ref={unitSelect => (this.unitSelect = unitSelect)} + > + {this.props.units.map(unit => ( + <option value={unit.id} key={unit.id}> + {unit.manufacturer + + ' ' + + unit.family + + ' ' + + unit.model + + ' ' + + unit.generation} + </option> + ))} + </select> + <button + type="submit" + className="btn btn-outline-primary" + onClick={() => + this.props.onAdd(parseInt(this.unitSelect.value, 10)) + } + > + <span className="fa fa-plus mr-2"/> + Add + </button> + </div> + </div> + ) + } } -export default UnitAddComponent; +export default UnitAddComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index 7c27043d..93ac1cdd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import jQuery from "../../../../../util/jquery"; +import React from 'react' +import jQuery from '../../../../../util/jquery' class UnitComponent extends React.Component { - componentDidMount() { - jQuery(".unit-info-popover").popover({ - trigger: "focus" - }); - } - - render() { - let unitInfo; - if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { - unitInfo = - "<strong>Clockrate:</strong> <code>" + - this.props.unit.clockRateMhz + - " MHz</code><br/>" + - "<strong>Num. Cores:</strong> <code>" + - this.props.unit.numberOfCores + - "</code><br/>" + - "<strong>Energy Cons.:</strong> <code>" + - this.props.unit.energyConsumptionW + - " W</code>"; - } else if ( - this.props.unitType === "memory" || - this.props.unitType === "storage" - ) { - unitInfo = - "<strong>Speed:</strong> <code>" + - this.props.unit.speedMbPerS + - " Mb/s</code><br/>" + - "<strong>Size:</strong> <code>" + - this.props.unit.sizeMb + - " MB</code><br/>" + - "<strong>Energy Cons.:</strong> <code> " + - this.props.unit.energyConsumptionW + - " W</code>"; + componentDidMount() { + jQuery('.unit-info-popover').popover({ + trigger: 'focus', + }) } - return ( - <li className="d-flex list-group-item justify-content-between align-items-center"> - <span style={{ maxWidth: "60%" }}> + render() { + let unitInfo + if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') { + unitInfo = + '<strong>Clockrate:</strong> <code>' + + this.props.unit.clockRateMhz + + ' MHz</code><br/>' + + '<strong>Num. Cores:</strong> <code>' + + this.props.unit.numberOfCores + + '</code><br/>' + + '<strong>Energy Cons.:</strong> <code>' + + this.props.unit.energyConsumptionW + + ' W</code>' + } else if ( + this.props.unitType === 'memory' || + this.props.unitType === 'storage' + ) { + unitInfo = + '<strong>Speed:</strong> <code>' + + this.props.unit.speedMbPerS + + ' Mb/s</code><br/>' + + '<strong>Size:</strong> <code>' + + this.props.unit.sizeMb + + ' MB</code><br/>' + + '<strong>Energy Cons.:</strong> <code> ' + + this.props.unit.energyConsumptionW + + ' W</code>' + } + + return ( + <li className="d-flex list-group-item justify-content-between align-items-center"> + <span style={{ maxWidth: '60%' }}> {this.props.unit.manufacturer + - " " + - this.props.unit.family + - " " + - this.props.unit.model + - " " + - this.props.unit.generation} + ' ' + + this.props.unit.family + + ' ' + + this.props.unit.model + + ' ' + + this.props.unit.generation} </span> - <span> + <span> <span - tabIndex="0" - className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" - role="button" - data-toggle="popover" - data-trigger="focus" - title="Unit information" - data-content={unitInfo} - data-html="true" + tabIndex="0" + className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" + role="button" + data-toggle="popover" + data-trigger="focus" + title="Unit information" + data-content={unitInfo} + data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger" - onClick={this.props.onDelete} - > - <span className="fa fa-trash" /> + {this.props.inSimulation ? ( + undefined + ) : ( + <span + className="btn btn-outline-danger" + onClick={this.props.onDelete} + > + <span className="fa fa-trash"/> </span> - )} + )} </span> - </li> - ); - } + </li> + ) + } } -export default UnitComponent; +export default UnitComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index 38df806b..31d4db51 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,29 +1,29 @@ -import React from "react"; -import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; +import React from 'react' +import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( - <ul className="list-group mt-1"> - {unitIds.length !== 0 ? ( - unitIds.map((unitId, index) => ( - <UnitContainer - unitType={unitType} - unitId={unitId} - index={index} - key={index} - /> - )) - ) : ( - <div className="alert alert-info"> - {inSimulation ? ( - <strong>No units of this type in this machine</strong> + <ul className="list-group mt-1"> + {unitIds.length !== 0 ? ( + unitIds.map((unitId, index) => ( + <UnitContainer + unitType={unitType} + unitId={unitId} + index={index} + key={index} + /> + )) ) : ( - <span> + <div className="alert alert-info"> + {inSimulation ? ( + <strong>No units of this type in this machine</strong> + ) : ( + <span> <strong>No units...</strong> Add some with the menu above! </span> + )} + </div> )} - </div> - )} - </ul> -); + </ul> +) -export default UnitListComponent; +export default UnitListComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index 0683c796..df7eeb77 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -1,65 +1,65 @@ -import React from "react"; -import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer"; -import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer"; +import React from 'react' +import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer' +import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer' const UnitTabsComponent = ({ inSimulation }) => ( - <div> - <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> - <li className="nav-item"> - <a - className="nav-link active" - data-toggle="tab" - href="#cpu-units" - role="tab" - > - CPU - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> - GPU - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#memory-units" - role="tab" - > - Memory - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#storage-units" - role="tab" - > - Storage - </a> - </li> - </ul> - <div className="tab-content"> - <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />} - <UnitListContainer unitType="cpu" /> - </div> - <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />} - <UnitListContainer unitType="gpu" /> - </div> - <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory" />} - <UnitListContainer unitType="memory" /> - </div> - <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage" />} - <UnitListContainer unitType="storage" /> - </div> + <div> + <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> + <li className="nav-item"> + <a + className="nav-link active" + data-toggle="tab" + href="#cpu-units" + role="tab" + > + CPU + </a> + </li> + <li className="nav-item"> + <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> + GPU + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#memory-units" + role="tab" + > + Memory + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#storage-units" + role="tab" + > + Storage + </a> + </li> + </ul> + <div className="tab-content"> + <div className="tab-pane active" id="cpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitListContainer unitType="cpu"/> + </div> + <div className="tab-pane" id="gpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitListContainer unitType="gpu"/> + </div> + <div className="tab-pane" id="memory-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitListContainer unitType="memory"/> + </div> + <div className="tab-pane" id="storage-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitListContainer unitType="storage"/> + </div> + </div> </div> - </div> -); +) -export default UnitTabsComponent; +export default UnitTabsComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 6bcf4088..345674d1 100644 --- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRoomComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to room - </div> -); + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to room + </div> +) -export default BackToRoomComponent; +export default BackToRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index d8aa7634..b1672764 100644 --- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRackComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this rack - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this rack + </div> +) -export default DeleteRackComponent; +export default DeleteRackComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index d86f9fee..f182a78c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,19 +1,19 @@ -import React from "react"; +import React from 'react' const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( - <li className="list-group-item d-flex justify-content-between align-items-center"> + <li className="list-group-item d-flex justify-content-between align-items-center"> <span className="badge badge-default badge-info mr-1 disabled"> {position} </span> - {inSimulation ? ( - <span className="badge badge-default badge-success">Empty Slot</span> - ) : ( - <button className="btn btn-outline-primary" onClick={onAdd}> - <span className="fa fa-plus mr-2" /> - Add machine - </button> - )} - </li> -); + {inSimulation ? ( + <span className="badge badge-default badge-success">Empty Slot</span> + ) : ( + <button className="btn btn-outline-primary" onClick={onAdd}> + <span className="fa fa-plus mr-2"/> + Add machine + </button> + )} + </li> +) -export default EmptySlotComponent; +export default EmptySlotComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index 2521f4a2..0a1d1065 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import Shapes from "../../../../../shapes"; -import { convertLoadToSimulationColor } from "../../../../../util/simulation-load"; +import React from 'react' +import Shapes from '../../../../../shapes' +import { convertLoadToSimulationColor } from '../../../../../util/simulation-load' const UnitIcon = ({ id, type }) => ( - <div> - <img - src={"/img/topology/" + id + "-icon.png"} - alt={"Machine contains " + type + " units"} - className="img-fluid ml-1" - style={{ maxHeight: "35px" }} - /> - </div> -); + <div> + <img + src={'/img/topology/' + id + '-icon.png'} + alt={'Machine contains ' + type + ' units'} + className="img-fluid ml-1" + style={{ maxHeight: '35px' }} + /> + </div> +) const MachineComponent = ({ - position, - machine, - inSimulation, - machineLoad, - onClick -}) => { - let color = "white"; - if (inSimulation && machineLoad >= 0) { - color = convertLoadToSimulationColor(machineLoad); - } - const hasNoUnits = - machine.cpuIds.length + - machine.gpuIds.length + - machine.memoryIds.length + - machine.storageIds.length === - 0; + position, + machine, + inSimulation, + machineLoad, + onClick, + }) => { + let color = 'white' + if (inSimulation && machineLoad >= 0) { + color = convertLoadToSimulationColor(machineLoad) + } + const hasNoUnits = + machine.cpuIds.length + + machine.gpuIds.length + + machine.memoryIds.length + + machine.storageIds.length === + 0 - return ( - <li - className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" - onClick={onClick} - style={{ backgroundColor: color }} - > - <span className="badge badge-default badge-info mr-1">{position}</span> - <div className="d-inline-flex"> - {machine.cpuIds.length > 0 ? ( - <UnitIcon id="cpu" type="CPU" /> - ) : ( - undefined - )} - {machine.gpuIds.length > 0 ? ( - <UnitIcon id="gpu" type="GPU" /> - ) : ( - undefined - )} - {machine.memoryIds.length > 0 ? ( - <UnitIcon id="memory" type="memory" /> - ) : ( - undefined - )} - {machine.storageIds.length > 0 ? ( - <UnitIcon id="storage" type="storage" /> - ) : ( - undefined - )} - {hasNoUnits ? ( - <span className="badge badge-default badge-warning"> + return ( + <li + className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" + onClick={onClick} + style={{ backgroundColor: color }} + > + <span className="badge badge-default badge-info mr-1">{position}</span> + <div className="d-inline-flex"> + {machine.cpuIds.length > 0 ? ( + <UnitIcon id="cpu" type="CPU"/> + ) : ( + undefined + )} + {machine.gpuIds.length > 0 ? ( + <UnitIcon id="gpu" type="GPU"/> + ) : ( + undefined + )} + {machine.memoryIds.length > 0 ? ( + <UnitIcon id="memory" type="memory"/> + ) : ( + undefined + )} + {machine.storageIds.length > 0 ? ( + <UnitIcon id="storage" type="storage"/> + ) : ( + undefined + )} + {hasNoUnits ? ( + <span className="badge badge-default badge-warning"> Machine with no units </span> - ) : ( - undefined - )} - </div> - </li> - ); -}; + ) : ( + undefined + )} + </div> + </li> + ) +} MachineComponent.propTypes = { - machine: Shapes.Machine -}; + machine: Shapes.Machine, +} -export default MachineComponent; +export default MachineComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js index d5521557..a381771c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -1,26 +1,26 @@ -import React from "react"; -import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer"; -import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer"; -import "./MachineListComponent.css"; +import React from 'react' +import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer' +import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer' +import './MachineListComponent.css' const MachineListComponent = ({ machineIds }) => { - return ( - <ul className="list-group machine-list"> - {machineIds.map((machineId, index) => { - if (machineId === null) { - return <EmptySlotContainer key={index} position={index + 1} />; - } else { - return ( - <MachineContainer - key={index} - position={index + 1} - machineId={machineId} - /> - ); - } - })} - </ul> - ); -}; + return ( + <ul className="list-group machine-list"> + {machineIds.map((machineId, index) => { + if (machineId === null) { + return <EmptySlotContainer key={index} position={index + 1}/> + } else { + return ( + <MachineContainer + key={index} + position={index + 1} + machineId={machineId} + /> + ) + } + })} + </ul> + ) +} -export default MachineListComponent; +export default MachineListComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass index bbcfe696..11b82c93 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass @@ -1,2 +1,2 @@ .machine-list li - min-height: 64px + min-height: 64px diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js index 5e095823..1888b69d 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RackNameComponent = ({ rackName, onEdit }) => ( - <NameComponent name={rackName} onEdit={onEdit} /> -); + <NameComponent name={rackName} onEdit={onEdit}/> +) -export default RackNameComponent; +export default RackNameComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index f832b9b9..47d99254 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,34 +1,34 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRoomContainer from "../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer"; -import DeleteRackContainer from "../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer"; -import MachineListContainer from "../../../../../containers/app/sidebars/topology/rack/MachineListContainer"; -import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer"; -import "./RackSidebarComponent.css"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer' +import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer' +import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer' +import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer' +import './RackSidebarComponent.css' const RackSidebarComponent = ({ inSimulation, rackId }) => { - return ( - <div className="rack-sidebar-container flex-column"> - <div className="rack-sidebar-header-container"> - <RackNameContainer /> - <BackToRoomContainer /> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="rack" objectId={rackId} /> - <LoadChartContainer objectType="rack" objectId={rackId} /> - </div> - ) : ( - <div> - <DeleteRackContainer /> - </div> - )} - </div> - <div className="machine-list-container mt-2"> - <MachineListContainer /> - </div> - </div> - ); -}; + return ( + <div className="rack-sidebar-container flex-column"> + <div className="rack-sidebar-header-container"> + <RackNameContainer/> + <BackToRoomContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="rack" objectId={rackId}/> + <LoadChartContainer objectType="rack" objectId={rackId}/> + </div> + ) : ( + <div> + <DeleteRackContainer/> + </div> + )} + </div> + <div className="machine-list-container mt-2"> + <MachineListContainer/> + </div> + </div> + ) +} -export default RackSidebarComponent; +export default RackSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass index 822804bc..29fec02a 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass @@ -1,11 +1,11 @@ .rack-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .rack-sidebar-header-container - flex: 0 + flex: 0 .machine-list-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js index 0409dbdd..7bd8c2f8 100644 --- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToBuildingComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to building - </div> -); + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to building + </div> +) -export default BackToBuildingComponent; +export default BackToBuildingComponent diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js index 3e3b3b36..2be752b5 100644 --- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRoomComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this room - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this room + </div> +) -export default DeleteRoomComponent; +export default DeleteRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js index c3b9f0ad..672a191f 100644 --- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js @@ -1,27 +1,27 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const EditRoomComponent = ({ - onEdit, - onFinish, - isEditing, - isInRackConstructionMode -}) => - isEditing ? ( - <div className="btn btn-info btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2" /> - Finish editing room - </div> - ) : ( - <div - className={classNames("btn btn-outline-info btn-block", { - disabled: isInRackConstructionMode - })} - onClick={() => (isInRackConstructionMode ? undefined : onEdit())} - > - <span className="fa fa-pencil mr-2" /> - Edit the tiles of this room - </div> - ); + onEdit, + onFinish, + isEditing, + isInRackConstructionMode, + }) => + isEditing ? ( + <div className="btn btn-info btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2"/> + Finish editing room + </div> + ) : ( + <div + className={classNames('btn btn-outline-info btn-block', { + disabled: isInRackConstructionMode, + })} + onClick={() => (isInRackConstructionMode ? undefined : onEdit())} + > + <span className="fa fa-pencil mr-2"/> + Edit the tiles of this room + </div> + ) -export default EditRoomComponent; +export default EditRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 06b8a2aa..42b7357b 100644 --- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const RackConstructionComponent = ({ - onStart, - onStop, - inRackConstructionMode, - isEditingRoom -}) => { - if (inRackConstructionMode) { - return ( - <div className="btn btn-primary btn-block" onClick={onStop}> - <span className="fa fa-times mr-2" /> - Stop rack construction - </div> - ); - } + onStart, + onStop, + inRackConstructionMode, + isEditingRoom, + }) => { + if (inRackConstructionMode) { + return ( + <div className="btn btn-primary btn-block" onClick={onStop}> + <span className="fa fa-times mr-2"/> + Stop rack construction + </div> + ) + } - return ( - <div - className={classNames("btn btn-outline-primary btn-block", { - disabled: isEditingRoom - })} - onClick={() => (isEditingRoom ? undefined : onStart())} - > - <span className="fa fa-plus mr-2" /> - Start rack construction - </div> - ); -}; + return ( + <div + className={classNames('btn btn-outline-primary btn-block', { + disabled: isEditingRoom, + })} + onClick={() => (isEditingRoom ? undefined : onStart())} + > + <span className="fa fa-plus mr-2"/> + Start rack construction + </div> + ) +} -export default RackConstructionComponent; +export default RackConstructionComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js index 11b88edd..409d2eef 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RoomNameComponent = ({ roomName, onEdit }) => ( - <NameComponent name={roomName} onEdit={onEdit} /> -); + <NameComponent name={roomName} onEdit={onEdit}/> +) -export default RoomNameComponent; +export default RoomNameComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index 275f9624..d9865744 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -1,38 +1,38 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToBuildingContainer from "../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer"; -import DeleteRoomContainer from "../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer"; -import EditRoomContainer from "../../../../../containers/app/sidebars/topology/room/EditRoomContainer"; -import RackConstructionContainer from "../../../../../containers/app/sidebars/topology/room/RackConstructionContainer"; -import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer"; -import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer' +import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer' +import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer' +import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer' +import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer' +import RoomTypeContainer from '../../../../../containers/app/sidebars/topology/room/RoomTypeContainer' const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => { - let allowedObjects; - if (!inSimulation && roomType === "SERVER") { - allowedObjects = <RackConstructionContainer />; - } + let allowedObjects + if (!inSimulation && roomType === 'SERVER') { + allowedObjects = <RackConstructionContainer/> + } - return ( - <div> - <RoomNameContainer /> - <RoomTypeContainer /> - <BackToBuildingContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="room" objectId={roomId} /> - <LoadChartContainer objectType="room" objectId={roomId} /> + <RoomNameContainer/> + <RoomTypeContainer/> + <BackToBuildingContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="room" objectId={roomId}/> + <LoadChartContainer objectType="room" objectId={roomId}/> + </div> + ) : ( + <div> + {allowedObjects} + <EditRoomContainer/> + <DeleteRoomContainer/> + </div> + )} </div> - ) : ( - <div> - {allowedObjects} - <EditRoomContainer /> - <DeleteRoomContainer /> - </div> - )} - </div> - ); -}; + ) +} -export default RoomSidebarComponent; +export default RoomSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js index 46d91c2c..b662307c 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types"; +import React from 'react' +import { ROOM_TYPE_TO_NAME_MAP } from '../../../../../util/room-types' const RoomTypeComponent = ({ roomType }) => ( - <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> -); + <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> +) -export default RoomTypeComponent; +export default RoomTypeComponent |