diff options
Diffstat (limited to 'src/components/app/sidebars/topology/rack')
9 files changed, 179 insertions, 0 deletions
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}) => ( + <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; 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}) => ( + <div className="btn btn-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this rack + </div> +); + +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}) => ( + <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> +); + +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}) => ( + <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) { + 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 +}; + +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 ( + <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; 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}) => ( + <NameComponent name={rackName} onEdit={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 ( + <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; 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 |