diff options
Diffstat (limited to 'src/components')
11 files changed, 106 insertions, 5 deletions
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js index 85d3c7c9..1c42106a 100644 --- a/src/components/map/groups/RoomGroup.js +++ b/src/components/map/groups/RoomGroup.js @@ -19,7 +19,7 @@ const RoomGroup = ({room, interactionLevel, currentRoomInConstruction, onClick}) return ( <Group onClick={onClick}> {(() => { - if (interactionLevel.mode === "OBJECT" && interactionLevel.roomId === room.id) { + if (interactionLevel.mode === "RACK" && interactionLevel.roomId === room.id) { return [ room.tileIds .filter(tileId => tileId !== interactionLevel.tileId) diff --git a/src/components/sidebars/Sidebar.js b/src/components/sidebars/Sidebar.js index be957956..2f4d77a7 100644 --- a/src/components/sidebars/Sidebar.js +++ b/src/components/sidebars/Sidebar.js @@ -3,7 +3,7 @@ import React from "react"; import "./Sidebar.css"; const Sidebar = ({isRight, children}) => ( - <div className={classNames("sidebar p-3", {"sidebar-right": isRight})}> + <div className={classNames("sidebar p-3 h-100", {"sidebar-right": isRight})}> {children} </div> ); diff --git a/src/components/sidebars/Sidebar.sass b/src/components/sidebars/Sidebar.sass index 79ea3c27..16a6d48f 100644 --- a/src/components/sidebars/Sidebar.sass +++ b/src/components/sidebars/Sidebar.sass @@ -5,7 +5,6 @@ top: 0 left: 0 width: 300px - height: 100% z-index: 100 background: white diff --git a/src/components/sidebars/topology/TopologySidebarComponent.js b/src/components/sidebars/topology/TopologySidebarComponent.js index dc4dc231..bc23d320 100644 --- a/src/components/sidebars/topology/TopologySidebarComponent.js +++ b/src/components/sidebars/topology/TopologySidebarComponent.js @@ -2,6 +2,7 @@ import React from "react"; import BuildingSidebarContainer from "../../../containers/sidebars/topology/building/BuildingSidebarContainer"; import RoomSidebarContainer from "../../../containers/sidebars/topology/room/RoomSidebarContainer"; import Sidebar from "../Sidebar"; +import RackSidebarComponent from "./rack/RackSidebarComponent"; const TopologySidebarComponent = ({interactionLevel}) => { let sidebarContent; @@ -13,6 +14,9 @@ const TopologySidebarComponent = ({interactionLevel}) => { case "ROOM": sidebarContent = <RoomSidebarContainer/>; break; + case "RACK": + sidebarContent = <RackSidebarComponent/>; + break; default: sidebarContent = "Missing Content"; } diff --git a/src/components/sidebars/topology/rack/DeleteRackComponent.js b/src/components/sidebars/topology/rack/DeleteRackComponent.js new file mode 100644 index 00000000..555f6d02 --- /dev/null +++ b/src/components/sidebars/topology/rack/DeleteRackComponent.js @@ -0,0 +1,11 @@ +import React from "react"; + +const DeleteRackComponent = ({onClick}) => { + return ( + <div className="btn btn-danger btn-block" onClick={onClick}> + Delete this rack + </div> + ); +}; + +export default DeleteRackComponent; diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js new file mode 100644 index 00000000..5234ee63 --- /dev/null +++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js @@ -0,0 +1,16 @@ +import React from "react"; +import FontAwesome from "react-fontawesome"; + +const EmptySlotComponent = ({position, onAdd}) => ( + <li className="list-group-item justify-content-between"> + <span className="badge badge-default badge-info"> + {position} + </span> + Add machine + <button className="btn btn-secondary" onClick={onAdd}> + <FontAwesome name="plus"/> + </button> + </li> +); + +export default EmptySlotComponent; diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js new file mode 100644 index 00000000..e328951e --- /dev/null +++ b/src/components/sidebars/topology/rack/MachineComponent.js @@ -0,0 +1,28 @@ +import React from "react"; +import Shapes from "../../../../shapes"; + +const MachineComponent = ({position, machine, onClick}) => ( + <li className="list-group-item list-group-item-action justify-content-between" onClick={onClick}> + <span className="badge badge-default badge-info"> + {position} + </span> + <span className="badge badge-primary badge-pill"> + {machine.cpuIds.length} CPUs + </span> + <span className="badge badge-warning badge-pill"> + {machine.gpuIds.length} GPUs + </span> + <span className="badge badge-success badge-pill"> + {machine.memoryIds.length} Memories + </span> + <span className="badge badge-info badge-pill"> + {machine.storageIds.length} Storages + </span> + </li> +); + +MachineComponent.propTypes = { + machine: Shapes.Machine +}; + +export default MachineComponent; diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js new file mode 100644 index 00000000..d8a31ddc --- /dev/null +++ b/src/components/sidebars/topology/rack/MachineListComponent.js @@ -0,0 +1,19 @@ +import React from "react"; +import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer"; +import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer"; + +const MachineListComponent = ({machineIds}) => { + return ( + <ul className="list-group"> + {machineIds.map((machineId, index) => { + if (machineId === null) { + return <EmptySlotContainer key={index} position={index}/>; + } else { + return <MachineContainer key={index} position={index} machineId={machineId}/>; + } + })} + </ul> + ); +}; + +export default MachineListComponent; diff --git a/src/components/sidebars/topology/rack/RackNameComponent.js b/src/components/sidebars/topology/rack/RackNameComponent.js new file mode 100644 index 00000000..ee8d194b --- /dev/null +++ b/src/components/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/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js new file mode 100644 index 00000000..ddb10387 --- /dev/null +++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js @@ -0,0 +1,16 @@ +import React from "react"; +import DeleteRackContainer from "../../../../containers/sidebars/topology/rack/DeleteRackContainer"; +import MachineListContainer from "../../../../containers/sidebars/topology/rack/MachineListContainer"; +import RackNameContainer from "../../../../containers/sidebars/topology/rack/RackNameContainer"; + +const RackSidebarComponent = () => { + return ( + <div> + <RackNameContainer/> + <DeleteRackContainer/> + <MachineListContainer/> + </div> + ); +}; + +export default RackSidebarComponent; diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js index 8298eade..894ffdf7 100644 --- a/src/components/sidebars/topology/room/RackConstructionComponent.js +++ b/src/components/sidebars/topology/room/RackConstructionComponent.js @@ -1,7 +1,7 @@ import React from "react"; -const RackConstructionComponent = ({inObjectConstructionMode, onStart, onStop}) => { - if (inObjectConstructionMode) { +const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => { + if (inRackConstructionMode) { return ( <div className="btn btn-primary btn-block" onClick={onStop}> Stop rack construction |