diff options
Diffstat (limited to 'src/components/sidebars/topology')
10 files changed, 114 insertions, 84 deletions
diff --git a/src/components/sidebars/topology/TopologySidebarComponent.js b/src/components/sidebars/topology/TopologySidebarComponent.js index 36f2ecc1..b61c7e3c 100644 --- a/src/components/sidebars/topology/TopologySidebarComponent.js +++ b/src/components/sidebars/topology/TopologySidebarComponent.js @@ -1,9 +1,9 @@ import React from "react"; import BuildingSidebarContainer from "../../../containers/sidebars/topology/building/BuildingSidebarContainer"; +import MachineSidebarContainer from "../../../containers/sidebars/topology/machine/MachineSidebarContainer"; +import RackSidebarContainer from "../../../containers/sidebars/topology/rack/RackSidebarContainer"; import RoomSidebarContainer from "../../../containers/sidebars/topology/room/RoomSidebarContainer"; import Sidebar from "../Sidebar"; -import MachineSidebarComponent from "./machine/MachineSidebarComponent"; -import RackSidebarComponent from "./rack/RackSidebarComponent"; const TopologySidebarComponent = ({interactionLevel}) => { let sidebarContent; @@ -16,10 +16,10 @@ const TopologySidebarComponent = ({interactionLevel}) => { sidebarContent = <RoomSidebarContainer/>; break; case "RACK": - sidebarContent = <RackSidebarComponent/>; + sidebarContent = <RackSidebarContainer/>; break; case "MACHINE": - sidebarContent = <MachineSidebarComponent/>; + sidebarContent = <MachineSidebarContainer/>; break; default: sidebarContent = "Missing Content"; diff --git a/src/components/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/sidebars/topology/building/BuildingSidebarComponent.js index 002184ae..835943f2 100644 --- a/src/components/sidebars/topology/building/BuildingSidebarComponent.js +++ b/src/components/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,18 +1,13 @@ import React from "react"; -import CancelNewRoomConstructionButton from "../../../../containers/sidebars/topology/building/CancelNewRoomConstructionButton"; -import FinishNewRoomConstructionButton from "../../../../containers/sidebars/topology/building/FinishNewRoomConstructionButton"; -import StartNewRoomConstructionButton from "../../../../containers/sidebars/topology/building/StartNewRoomConstructionButton"; +import NewRoomConstructionContainer from "../../../../containers/sidebars/topology/building/NewRoomConstructionContainer"; -const BuildingSidebarComponent = ({currentRoomInConstruction}) => { +const BuildingSidebarComponent = ({inSimulation}) => { return ( <div> <h2>Building</h2> - {currentRoomInConstruction === -1 ? - <StartNewRoomConstructionButton/> : - <div> - <FinishNewRoomConstructionButton/> - <CancelNewRoomConstructionButton/> - </div> + {inSimulation ? + undefined : + <NewRoomConstructionContainer/> } </div> ); diff --git a/src/components/sidebars/topology/building/CancelNewRoomConstructionComponent.js b/src/components/sidebars/topology/building/CancelNewRoomConstructionComponent.js deleted file mode 100644 index 15f199a6..00000000 --- a/src/components/sidebars/topology/building/CancelNewRoomConstructionComponent.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -const CancelNewRoomConstructionComponent = ({onClick}) => ( - <div className="btn btn-default btn-block" onClick={onClick}> - Cancel construction - </div> -); - -export default CancelNewRoomConstructionComponent; diff --git a/src/components/sidebars/topology/building/FinishNewRoomConstructionComponent.js b/src/components/sidebars/topology/building/FinishNewRoomConstructionComponent.js deleted file mode 100644 index d9edbb61..00000000 --- a/src/components/sidebars/topology/building/FinishNewRoomConstructionComponent.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -const FinishNewRoomConstructionComponent = ({onClick}) => ( - <div className="btn btn-primary btn-block" onClick={onClick}> - Finalize new room - </div> -); - -export default FinishNewRoomConstructionComponent; diff --git a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js new file mode 100644 index 00000000..581330ab --- /dev/null +++ b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js @@ -0,0 +1,24 @@ +import React from "react"; + +const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => { + if (currentRoomInConstruction === -1) { + return ( + <div className="btn btn-primary btn-block" onClick={onStart}> + Construct a new room + </div> + ); + } + return ( + <div> + <div className="btn btn-primary btn-block" onClick={onFinish}> + Finalize new room + </div> + <div className="btn btn-default btn-block" onClick={onCancel}> + Cancel construction + </div> + </div> + ); + +}; + +export default NewRoomConstructionComponent; diff --git a/src/components/sidebars/topology/building/StartNewRoomConstructionComponent.js b/src/components/sidebars/topology/building/StartNewRoomConstructionComponent.js deleted file mode 100644 index 60573532..00000000 --- a/src/components/sidebars/topology/building/StartNewRoomConstructionComponent.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -const StartNewRoomConstructionComponent = ({onClick}) => ( - <div className="btn btn-primary btn-block" onClick={onClick}> - Construct a new room - </div> -); - -export default StartNewRoomConstructionComponent; diff --git a/src/components/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/sidebars/topology/machine/MachineSidebarComponent.js index 218e4f41..0f85f0f9 100644 --- a/src/components/sidebars/topology/machine/MachineSidebarComponent.js +++ b/src/components/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,15 +1,23 @@ import React from "react"; +import LoadBarContainer from "../../../../containers/sidebars/elements/LoadBarContainer"; +import LoadChartContainer from "../../../../containers/sidebars/elements/LoadChartContainer"; import BackToRackContainer from "../../../../containers/sidebars/topology/machine/BackToRackContainer"; import DeleteMachineContainer from "../../../../containers/sidebars/topology/machine/DeleteMachineContainer"; import MachineNameContainer from "../../../../containers/sidebars/topology/machine/MachineNameContainer"; import UnitTabsComponent from "./UnitTabsComponent"; -const MachineSidebarComponent = () => { +const MachineSidebarComponent = ({inSimulation, machineId}) => { return ( <div> <MachineNameContainer/> <BackToRackContainer/> - <DeleteMachineContainer/> + {inSimulation ? + <div> + <LoadBarContainer objectType="machine" objectId={machineId}/> + <LoadChartContainer objectType="machine" objectId={machineId}/> + </div> : + <DeleteMachineContainer/> + } <UnitTabsComponent/> </div> ); diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js index 4854456c..b6e9791d 100644 --- a/src/components/sidebars/topology/rack/MachineComponent.js +++ b/src/components/sidebars/topology/rack/MachineComponent.js @@ -1,5 +1,6 @@ import React from "react"; import Shapes from "../../../../shapes"; +import {convertLoadToSimulationColor} from "../../../../util/simulation-load"; const UnitIcon = ({id, type}) => ( <div> @@ -12,41 +13,50 @@ const UnitIcon = ({id, type}) => ( </div> ); -const MachineComponent = ({position, machine, onClick}) => ( - <li - className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" - onClick={onClick} - > - <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 - } - {machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length - + machine.storageIds.length === 0 ? - <span className="badge badge-default badge-warning"> - Machine with no units - </span> : - undefined - } - </div> - </li> -); +const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => { + let color = "white"; + if (inSimulation) { + 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"> + Machine with no units + </span> : + undefined + } + </div> + </li> + ); +}; MachineComponent.propTypes = { machine: Shapes.Machine diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js index 007add6e..bfcc7e32 100644 --- a/src/components/sidebars/topology/rack/RackSidebarComponent.js +++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js @@ -1,14 +1,24 @@ import React from "react"; +import LoadBarContainer from "../../../../containers/sidebars/elements/LoadBarContainer"; +import LoadChartContainer from "../../../../containers/sidebars/elements/LoadChartContainer"; import DeleteRackContainer from "../../../../containers/sidebars/topology/rack/DeleteRackContainer"; import MachineListContainer from "../../../../containers/sidebars/topology/rack/MachineListContainer"; import RackNameContainer from "../../../../containers/sidebars/topology/rack/RackNameContainer"; import "./RackSidebarComponent.css"; -const RackSidebarComponent = () => { +const RackSidebarComponent = ({inSimulation, rackId}) => { return ( <div className="rack-sidebar-container flex-column"> <RackNameContainer/> - <DeleteRackContainer/> + {inSimulation ? + <div> + <LoadBarContainer objectType="rack" objectId={rackId}/> + <LoadChartContainer objectType="rack" objectId={rackId}/> + </div> : + <div> + <DeleteRackContainer/> + </div> + } <div className="machine-list-container mt-2"> <MachineListContainer/> </div> diff --git a/src/components/sidebars/topology/room/RoomSidebarComponent.js b/src/components/sidebars/topology/room/RoomSidebarComponent.js index a15351f9..59c5fc8f 100644 --- a/src/components/sidebars/topology/room/RoomSidebarComponent.js +++ b/src/components/sidebars/topology/room/RoomSidebarComponent.js @@ -1,12 +1,14 @@ import React from "react"; +import LoadBarContainer from "../../../../containers/sidebars/elements/LoadBarContainer"; +import LoadChartContainer from "../../../../containers/sidebars/elements/LoadChartContainer"; import DeleteRoomContainer from "../../../../containers/sidebars/topology/room/DeleteRoomContainer"; import RackConstructionContainer from "../../../../containers/sidebars/topology/room/RackConstructionContainer"; import RoomNameContainer from "../../../../containers/sidebars/topology/room/RoomNameContainer"; import RoomTypeContainer from "../../../../containers/sidebars/topology/room/RoomTypeContainer"; -const RoomSidebarComponent = ({roomType}) => { +const RoomSidebarComponent = ({roomId, roomType, inSimulation}) => { let allowedObjects; - if (roomType === "SERVER") { + if (!inSimulation && roomType === "SERVER") { allowedObjects = <RackConstructionContainer/>; } @@ -14,8 +16,16 @@ const RoomSidebarComponent = ({roomType}) => { <div> <RoomNameContainer/> <RoomTypeContainer/> - {allowedObjects} - <DeleteRoomContainer/> + {inSimulation ? + <div> + <LoadBarContainer objectType="room" objectId={roomId}/> + <LoadChartContainer objectType="room" objectId={roomId}/> + </div> : + <div> + {allowedObjects} + <DeleteRoomContainer/> + </div> + } </div> ); }; |