From bf7708f658cc6299a3b775afe24459b5a808c54d Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Fri, 22 Sep 2017 21:20:54 +0200 Subject: Restructure component and container directories --- src/components/app/sidebars/Sidebar.js | 38 +++++++++++++ src/components/app/sidebars/Sidebar.sass | 50 +++++++++++++++++ .../app/sidebars/elements/LoadBarComponent.js | 22 ++++++++ .../app/sidebars/elements/LoadChartComponent.js | 40 +++++++++++++ .../simulation/ExperimentMetadataComponent.js | 12 ++++ .../app/sidebars/simulation/LoadMetricComponent.js | 33 +++++++++++ .../simulation/SimulationSidebarComponent.js | 22 ++++++++ .../simulation/SimulationSidebarComponent.sass | 8 +++ .../app/sidebars/simulation/TaskComponent.js | 42 ++++++++++++++ .../app/sidebars/simulation/TraceComponent.js | 20 +++++++ .../app/sidebars/topology/NameComponent.js | 13 +++++ .../sidebars/topology/TopologySidebarComponent.js | 35 ++++++++++++ .../topology/building/BuildingSidebarComponent.js | 19 +++++++ .../building/NewRoomConstructionComponent.js | 27 +++++++++ .../topology/machine/BackToRackComponent.js | 10 ++++ .../topology/machine/DeleteMachineComponent.js | 10 ++++ .../topology/machine/MachineNameComponent.js | 7 +++ .../topology/machine/MachineSidebarComponent.js | 26 +++++++++ .../sidebars/topology/machine/UnitAddComponent.js | 38 +++++++++++++ .../app/sidebars/topology/machine/UnitComponent.js | 16 ++++++ .../sidebars/topology/machine/UnitListComponent.js | 20 +++++++ .../sidebars/topology/machine/UnitTabsComponent.js | 54 ++++++++++++++++++ .../sidebars/topology/rack/BackToRoomComponent.js | 10 ++++ .../sidebars/topology/rack/DeleteRackComponent.js | 10 ++++ .../sidebars/topology/rack/EmptySlotComponent.js | 20 +++++++ .../app/sidebars/topology/rack/MachineComponent.js | 65 ++++++++++++++++++++++ .../sidebars/topology/rack/MachineListComponent.js | 20 +++++++ .../topology/rack/MachineListComponent.sass | 2 + .../sidebars/topology/rack/RackNameComponent.js | 8 +++ .../sidebars/topology/rack/RackSidebarComponent.js | 33 +++++++++++ .../topology/rack/RackSidebarComponent.sass | 11 ++++ .../topology/room/BackToBuildingComponent.js | 10 ++++ .../sidebars/topology/room/DeleteRoomComponent.js | 10 ++++ .../topology/room/RackConstructionComponent.js | 21 +++++++ .../sidebars/topology/room/RoomNameComponent.js | 8 +++ .../sidebars/topology/room/RoomSidebarComponent.js | 35 ++++++++++++ .../sidebars/topology/room/RoomTypeComponent.js | 10 ++++ 37 files changed, 835 insertions(+) create mode 100644 src/components/app/sidebars/Sidebar.js create mode 100644 src/components/app/sidebars/Sidebar.sass create mode 100644 src/components/app/sidebars/elements/LoadBarComponent.js create mode 100644 src/components/app/sidebars/elements/LoadChartComponent.js create mode 100644 src/components/app/sidebars/simulation/ExperimentMetadataComponent.js create mode 100644 src/components/app/sidebars/simulation/LoadMetricComponent.js create mode 100644 src/components/app/sidebars/simulation/SimulationSidebarComponent.js create mode 100644 src/components/app/sidebars/simulation/SimulationSidebarComponent.sass create mode 100644 src/components/app/sidebars/simulation/TaskComponent.js create mode 100644 src/components/app/sidebars/simulation/TraceComponent.js create mode 100644 src/components/app/sidebars/topology/NameComponent.js create mode 100644 src/components/app/sidebars/topology/TopologySidebarComponent.js create mode 100644 src/components/app/sidebars/topology/building/BuildingSidebarComponent.js create mode 100644 src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js create mode 100644 src/components/app/sidebars/topology/machine/BackToRackComponent.js create mode 100644 src/components/app/sidebars/topology/machine/DeleteMachineComponent.js create mode 100644 src/components/app/sidebars/topology/machine/MachineNameComponent.js create mode 100644 src/components/app/sidebars/topology/machine/MachineSidebarComponent.js create mode 100644 src/components/app/sidebars/topology/machine/UnitAddComponent.js create mode 100644 src/components/app/sidebars/topology/machine/UnitComponent.js create mode 100644 src/components/app/sidebars/topology/machine/UnitListComponent.js create mode 100644 src/components/app/sidebars/topology/machine/UnitTabsComponent.js create mode 100644 src/components/app/sidebars/topology/rack/BackToRoomComponent.js create mode 100644 src/components/app/sidebars/topology/rack/DeleteRackComponent.js create mode 100644 src/components/app/sidebars/topology/rack/EmptySlotComponent.js create mode 100644 src/components/app/sidebars/topology/rack/MachineComponent.js create mode 100644 src/components/app/sidebars/topology/rack/MachineListComponent.js create mode 100644 src/components/app/sidebars/topology/rack/MachineListComponent.sass create mode 100644 src/components/app/sidebars/topology/rack/RackNameComponent.js create mode 100644 src/components/app/sidebars/topology/rack/RackSidebarComponent.js create mode 100644 src/components/app/sidebars/topology/rack/RackSidebarComponent.sass create mode 100644 src/components/app/sidebars/topology/room/BackToBuildingComponent.js create mode 100644 src/components/app/sidebars/topology/room/DeleteRoomComponent.js create mode 100644 src/components/app/sidebars/topology/room/RackConstructionComponent.js create mode 100644 src/components/app/sidebars/topology/room/RoomNameComponent.js create mode 100644 src/components/app/sidebars/topology/room/RoomSidebarComponent.js create mode 100644 src/components/app/sidebars/topology/room/RoomTypeComponent.js (limited to 'src/components/app/sidebars') diff --git a/src/components/app/sidebars/Sidebar.js b/src/components/app/sidebars/Sidebar.js new file mode 100644 index 00000000..00e3607a --- /dev/null +++ b/src/components/app/sidebars/Sidebar.js @@ -0,0 +1,38 @@ +import classNames from "classnames"; +import React from "react"; +import "./Sidebar.css"; + +class Sidebar extends React.Component { + state = { + collapsed: false + }; + + render() { + const collapseButton = ( +
this.setState({collapsed: !this.state.collapsed})} + > + {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? + : + + } +
+ ); + + if (this.state.collapsed) { + return collapseButton; + } + return ( +
e.stopPropagation()} + > + {this.props.children} + {collapseButton} +
+ ); + } +} + +export default Sidebar; diff --git a/src/components/app/sidebars/Sidebar.sass b/src/components/app/sidebars/Sidebar.sass new file mode 100644 index 00000000..4d0e5f1e --- /dev/null +++ b/src/components/app/sidebars/Sidebar.sass @@ -0,0 +1,50 @@ +@import ../../../style-globals/_variables.sass +@import ../../../style-globals/_mixins.sass + +.sidebar-collapse-button + position: absolute + left: 5px + top: 5px + padding: 5px 7px + + background: white + border: solid 1px $gray-semi-light + z-index: 99 + + +clickable + +border-radius(5px) + +transition(background, 200ms) + + &.sidebar-collapse-button-right + left: auto + right: 5px + top: 5px + + &:hover + background: #eeeeee + +.sidebar + position: absolute + top: 0 + left: 0 + width: 350px + + z-index: 100 + background: white + + border-right: $gray-semi-dark 1px solid + + .sidebar-collapse-button + left: auto + right: -25px + +.sidebar-right + left: auto + right: 0 + + border-left: $gray-semi-dark 1px solid + border-right: none + + .sidebar-collapse-button-right + left: -25px + right: auto diff --git a/src/components/app/sidebars/elements/LoadBarComponent.js b/src/components/app/sidebars/elements/LoadBarComponent.js new file mode 100644 index 00000000..65f94b3d --- /dev/null +++ b/src/components/app/sidebars/elements/LoadBarComponent.js @@ -0,0 +1,22 @@ +import classNames from "classnames"; +import React from "react"; + +const LoadBarComponent = ({percent, disabled}) => ( +
+ Current load +
+
+ {percent}% +
+
+
+); + +export default LoadBarComponent; diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js new file mode 100644 index 00000000..19d58f77 --- /dev/null +++ b/src/components/app/sidebars/elements/LoadChartComponent.js @@ -0,0 +1,40 @@ +import React from "react"; +import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory"; +import {convertSecondsToFormattedTime} from "../../../../util/date-time"; + +const LoadChartComponent = ({data, currentTick}) => ( +
+ Load over time + + convertSecondsToFormattedTime(tick)} + fixLabelOverlap={true} + label="Simulated Time" + /> + + + + + +
+); + +export default LoadChartComponent; diff --git a/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js new file mode 100644 index 00000000..3649045b --- /dev/null +++ b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js @@ -0,0 +1,12 @@ +import React from "react"; + +const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => ( +
+

{experimentName}

+

Path: {pathName}

+

Trace: {traceName}

+

Scheduler: {schedulerName}

+
+); + +export default ExperimentMetadataComponent; diff --git a/src/components/app/sidebars/simulation/LoadMetricComponent.js b/src/components/app/sidebars/simulation/LoadMetricComponent.js new file mode 100644 index 00000000..e72e6b67 --- /dev/null +++ b/src/components/app/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 "../../../../util/colors"; +import {LOAD_NAME_MAP} from "../../../../util/simulation-load"; + +const LoadMetricComponent = ({loadMetric}) => ( +
+
Colors represent {LOAD_NAME_MAP[loadMetric]}
+
+ + + + +
+
+); + +export default LoadMetricComponent; diff --git a/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js new file mode 100644 index 00000000..92651dfc --- /dev/null +++ b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js @@ -0,0 +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"; + +const SimulationSidebarComponent = () => { + return ( + +
+ + +
+ +
+
+ + ); +}; + +export default SimulationSidebarComponent; diff --git a/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass new file mode 100644 index 00000000..82af97fa --- /dev/null +++ b/src/components/app/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/app/sidebars/simulation/TaskComponent.js b/src/components/app/sidebars/simulation/TaskComponent.js new file mode 100644 index 00000000..f7f65817 --- /dev/null +++ b/src/components/app/sidebars/simulation/TaskComponent.js @@ -0,0 +1,42 @@ +import approx from "approximate-number"; +import React from "react"; +import {convertSecondsToFormattedTime} from "../../../../util/date-time"; + +const TaskComponent = ({task, flopsLeft}) => { + let stateInfo; + + if (flopsLeft === task.totalFlopCount) { + stateInfo = ( +
+ + Waiting +
+ ); + } else if (flopsLeft > 0) { + stateInfo = ( +
+ + Running ({approx(task.totalFlopCount - flopsLeft)} / {approx(task.totalFlopCount)} FLOPS) +
+ ); + } else { + stateInfo = ( +
+ + Completed +
+ ); + } + + return ( +
  • +
    +
    {approx(task.totalFlopCount)} FLOPS
    + Starts at {convertSecondsToFormattedTime(task.startTick)} +
    + {stateInfo} +
    • + ); +}; + +export default TaskComponent; diff --git a/src/components/app/sidebars/simulation/TraceComponent.js b/src/components/app/sidebars/simulation/TraceComponent.js new file mode 100644 index 00000000..b43a8cea --- /dev/null +++ b/src/components/app/sidebars/simulation/TraceComponent.js @@ -0,0 +1,20 @@ +import React from "react"; +import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer"; + +const TraceComponent = ({jobs}) => ( +
    +

    Trace

    + {jobs.map(job => ( +
    +

    Job: {job.name}

    +
      + {job.taskIds.map(taskId => ( + + ))} +
    +
    + ))} +
    +); + +export default TraceComponent; diff --git a/src/components/app/sidebars/topology/NameComponent.js b/src/components/app/sidebars/topology/NameComponent.js new file mode 100644 index 00000000..d663f4ae --- /dev/null +++ b/src/components/app/sidebars/topology/NameComponent.js @@ -0,0 +1,13 @@ +import React from "react"; +import FontAwesome from "react-fontawesome"; + +const NameComponent = ({name, onEdit}) => ( +

    + {name} + +

    +); + +export default NameComponent; diff --git a/src/components/app/sidebars/topology/TopologySidebarComponent.js b/src/components/app/sidebars/topology/TopologySidebarComponent.js new file mode 100644 index 00000000..ff4260a9 --- /dev/null +++ b/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -0,0 +1,35 @@ +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; + + switch (interactionLevel.mode) { + case "BUILDING": + sidebarContent = ; + break; + case "ROOM": + sidebarContent = ; + break; + case "RACK": + sidebarContent = ; + break; + case "MACHINE": + sidebarContent = ; + break; + default: + sidebarContent = "Missing Content"; + } + + return ( + + {sidebarContent} + + ); +}; + +export default TopologySidebarComponent; diff --git a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js new file mode 100644 index 00000000..2bf81a48 --- /dev/null +++ b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -0,0 +1,19 @@ +import React from "react"; +import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer"; + +const BuildingSidebarComponent = ({inSimulation}) => { + return ( +
    +

    Building

    + {inSimulation ? +
    + + Click on individual rooms to see their stats! +
    : + + } +
    + ); +}; + +export default BuildingSidebarComponent; diff --git a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js new file mode 100644 index 00000000..d89b0ac0 --- /dev/null +++ b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -0,0 +1,27 @@ +import React from "react"; + +const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => { + if (currentRoomInConstruction === -1) { + return ( +
    + + Construct a new room +
    + ); + } + return ( +
    +
    + + Finalize new room +
    +
    + + Cancel construction +
    +
    + ); + +}; + +export default NewRoomConstructionComponent; diff --git a/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/src/components/app/sidebars/topology/machine/BackToRackComponent.js new file mode 100644 index 00000000..19e33904 --- /dev/null +++ b/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const BackToRackComponent = ({onClick}) => ( +
    + + Back to rack +
    +); + +export default BackToRackComponent; diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js new file mode 100644 index 00000000..7ba08352 --- /dev/null +++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const DeleteMachineComponent = ({onClick}) => ( +
    + + Delete this machine +
    +); + +export default DeleteMachineComponent; diff --git a/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/src/components/app/sidebars/topology/machine/MachineNameComponent.js new file mode 100644 index 00000000..321e350d --- /dev/null +++ b/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -0,0 +1,7 @@ +import React from "react"; + +const MachineNameComponent = ({position}) => ( +

    Machine at slot {position}

    +); + +export default MachineNameComponent; diff --git a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js new file mode 100644 index 00000000..cf4db80e --- /dev/null +++ b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -0,0 +1,26 @@ +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 ( +
    + + + {inSimulation ? +
    + + +
    : + + } + +
    + ); +}; + +export default MachineSidebarComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js new file mode 100644 index 00000000..f16700df --- /dev/null +++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -0,0 +1,38 @@ +import PropTypes from "prop-types"; +import React from "react"; + +class UnitAddComponent extends React.Component { + static propTypes = { + units: PropTypes.array.isRequired, + onAdd: PropTypes.func.isRequired, + }; + + render() { + return ( +
    +
    + + +
    +
    + ); + } +} + +export default UnitAddComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js new file mode 100644 index 00000000..c734f508 --- /dev/null +++ b/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -0,0 +1,16 @@ +import React from "react"; + +const UnitComponent = ({unit, onDelete, inSimulation}) => ( +
  • + {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation} + {inSimulation ? + undefined : + + + Delete + + } +
    • +); + +export default UnitComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitListComponent.js b/src/components/app/sidebars/topology/machine/UnitListComponent.js new file mode 100644 index 00000000..683f6023 --- /dev/null +++ b/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -0,0 +1,20 @@ +import React from "react"; +import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; + +const UnitListComponent = ({unitType, unitIds, inSimulation}) => ( +
      + {unitIds.length !== 0 ? + unitIds.map((unitId, index) => ( + + )) : +
      + {inSimulation ? + No units of this type in this machine : + No units... Add some with the menu above! + } +
      + } +
    +); + +export default UnitListComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js new file mode 100644 index 00000000..2113d6d8 --- /dev/null +++ b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -0,0 +1,54 @@ +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}) => ( +
    + +
    +
    + {inSimulation ? + undefined : + + } + +
    +
    + {inSimulation ? + undefined : + + } + +
    +
    + {inSimulation ? + undefined : + + } + +
    +
    + {inSimulation ? + undefined : + + } + +
    +
    +
    +); + +export default UnitTabsComponent; diff --git a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js new file mode 100644 index 00000000..267001c6 --- /dev/null +++ b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const BackToRoomComponent = ({onClick}) => ( +
    + + Back to room +
    +); + +export default BackToRoomComponent; diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js new file mode 100644 index 00000000..b268bd72 --- /dev/null +++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const DeleteRackComponent = ({onClick}) => ( +
    + + Delete this rack +
    +); + +export default DeleteRackComponent; diff --git a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js new file mode 100644 index 00000000..08665072 --- /dev/null +++ b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -0,0 +1,20 @@ +import React from "react"; + +const EmptySlotComponent = ({position, onAdd, inSimulation}) => ( +
  • + + {position} + + {inSimulation ? + + Empty Slot + : + + } +
    • +); + +export default EmptySlotComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineComponent.js b/src/components/app/sidebars/topology/rack/MachineComponent.js new file mode 100644 index 00000000..545bb916 --- /dev/null +++ b/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -0,0 +1,65 @@ +import React from "react"; +import Shapes from "../../../../../shapes"; +import {convertLoadToSimulationColor} from "../../../../../util/simulation-load"; + +const UnitIcon = ({id, type}) => ( +
    + {"Machine +
    +); + +const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => { + let color = "white"; + if (inSimulation && machineLoad) { + color = convertLoadToSimulationColor(machineLoad); + } + const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + + machine.storageIds.length === 0; + + return ( +
  • + + {position} + +
    + {machine.cpuIds.length > 0 ? + : + undefined + } + {machine.gpuIds.length > 0 ? + : + undefined + } + {machine.memoryIds.length > 0 ? + : + undefined + } + {machine.storageIds.length > 0 ? + : + undefined + } + {hasNoUnits ? + + Machine with no units + : + undefined + } +
    +
    • + ); +}; + +MachineComponent.propTypes = { + machine: Shapes.Machine +}; + +export default MachineComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.js b/src/components/app/sidebars/topology/rack/MachineListComponent.js new file mode 100644 index 00000000..fcb90d66 --- /dev/null +++ b/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -0,0 +1,20 @@ +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 ( +
      + {machineIds.map((machineId, index) => { + if (machineId === null) { + return ; + } else { + return ; + } + })} +
    + ); +}; + +export default MachineListComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/src/components/app/sidebars/topology/rack/MachineListComponent.sass new file mode 100644 index 00000000..bbcfe696 --- /dev/null +++ b/src/components/app/sidebars/topology/rack/MachineListComponent.sass @@ -0,0 +1,2 @@ +.machine-list li + min-height: 64px diff --git a/src/components/app/sidebars/topology/rack/RackNameComponent.js b/src/components/app/sidebars/topology/rack/RackNameComponent.js new file mode 100644 index 00000000..ee8d194b --- /dev/null +++ b/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -0,0 +1,8 @@ +import React from "react"; +import NameComponent from "../NameComponent"; + +const RackNameComponent = ({rackName, onEdit}) => ( + +); + +export default RackNameComponent; diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js new file mode 100644 index 00000000..f563a52f --- /dev/null +++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -0,0 +1,33 @@ +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 ( +
    +
    + + + {inSimulation ? +
    + + +
    : +
    + +
    + } +
    +
    + +
    +
    + ); +}; + +export default RackSidebarComponent; diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass new file mode 100644 index 00000000..822804bc --- /dev/null +++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass @@ -0,0 +1,11 @@ +.rack-sidebar-container + display: flex + height: 100% + max-height: 100% + +.rack-sidebar-header-container + flex: 0 + +.machine-list-container + flex: 1 + overflow-y: scroll diff --git a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js new file mode 100644 index 00000000..81384ba5 --- /dev/null +++ b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const BackToBuildingComponent = ({onClick}) => ( +
    + + Back to building +
    +); + +export default BackToBuildingComponent; diff --git a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js new file mode 100644 index 00000000..3f41eac0 --- /dev/null +++ b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const DeleteRoomComponent = ({onClick}) => ( +
    + + Delete this room +
    +); + +export default DeleteRoomComponent; diff --git a/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/src/components/app/sidebars/topology/room/RackConstructionComponent.js new file mode 100644 index 00000000..9bfe28ce --- /dev/null +++ b/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -0,0 +1,21 @@ +import React from "react"; + +const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => { + if (inRackConstructionMode) { + return ( +
    + + Stop rack construction +
    + ); + } + + return ( +
    + + Start rack construction +
    + ); +}; + +export default RackConstructionComponent; diff --git a/src/components/app/sidebars/topology/room/RoomNameComponent.js b/src/components/app/sidebars/topology/room/RoomNameComponent.js new file mode 100644 index 00000000..4d3e41cc --- /dev/null +++ b/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -0,0 +1,8 @@ +import React from "react"; +import NameComponent from "../NameComponent"; + +const RoomNameComponent = ({roomName, onEdit}) => ( + +); + +export default RoomNameComponent; diff --git a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js new file mode 100644 index 00000000..53857408 --- /dev/null +++ b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -0,0 +1,35 @@ +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 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 = ; + } + + return ( +
    + + + + {inSimulation ? +
    + + +
    : +
    + {allowedObjects} + +
    + } +
    + ); +}; + +export default RoomSidebarComponent; diff --git a/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/src/components/app/sidebars/topology/room/RoomTypeComponent.js new file mode 100644 index 00000000..d42eefb6 --- /dev/null +++ b/src/components/app/sidebars/topology/room/RoomTypeComponent.js @@ -0,0 +1,10 @@ +import React from "react"; +import {ROOM_TYPE_TO_NAME_MAP} from "../../../../../util/room-types"; + +const RoomTypeComponent = ({roomType}) => ( +

    + {ROOM_TYPE_TO_NAME_MAP[roomType]} +

    +); + +export default RoomTypeComponent; -- cgit v1.2.3