diff options
Diffstat (limited to 'src/components')
6 files changed, 66 insertions, 26 deletions
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js index 5234ee63..1ca13b67 100644 --- a/src/components/sidebars/topology/rack/EmptySlotComponent.js +++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js @@ -2,13 +2,13 @@ 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"/> + <li className="list-group-item d-flex justify-content-between align-items-center"> + <span className="badge badge-default badge-info mr-1"> + {position} + </span> + <button className="btn btn-outline-primary" onClick={onAdd}> + <FontAwesome name="plus" className="mr-1"/> + Add machine </button> </li> ); diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js index e328951e..56e723bc 100644 --- a/src/components/sidebars/topology/rack/MachineComponent.js +++ b/src/components/sidebars/topology/rack/MachineComponent.js @@ -1,23 +1,49 @@ import React from "react"; import Shapes from "../../../../shapes"; +const UnitIcon = ({id, type}) => ( + <div> + <img + src={"/img/topology/" + id + "-icon.png"} + alt={"Machine contains " + type + " units"} + className="img-fluid" + style={{maxHeight: "35px"}} + /> + </div> +); + 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"> + <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> - <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> + <div> + {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> ); diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js index d8a31ddc..41522e36 100644 --- a/src/components/sidebars/topology/rack/MachineListComponent.js +++ b/src/components/sidebars/topology/rack/MachineListComponent.js @@ -1,15 +1,16 @@ import React from "react"; import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer"; import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer"; +import "./MachineListComponent.css"; const MachineListComponent = ({machineIds}) => { return ( - <ul className="list-group"> + <ul className="list-group machine-list"> {machineIds.map((machineId, index) => { if (machineId === null) { - return <EmptySlotContainer key={index} position={index}/>; + return <EmptySlotContainer key={index} position={index + 1}/>; } else { - return <MachineContainer key={index} position={index} machineId={machineId}/>; + return <MachineContainer key={index} position={index + 1} machineId={machineId}/>; } })} </ul> diff --git a/src/components/sidebars/topology/rack/MachineListComponent.sass b/src/components/sidebars/topology/rack/MachineListComponent.sass new file mode 100644 index 00000000..bbcfe696 --- /dev/null +++ b/src/components/sidebars/topology/rack/MachineListComponent.sass @@ -0,0 +1,2 @@ +.machine-list li + min-height: 64px diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js index ddb10387..007add6e 100644 --- a/src/components/sidebars/topology/rack/RackSidebarComponent.js +++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js @@ -2,13 +2,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"; +import "./RackSidebarComponent.css"; const RackSidebarComponent = () => { return ( - <div> + <div className="rack-sidebar-container flex-column"> <RackNameContainer/> <DeleteRackContainer/> - <MachineListContainer/> + <div className="machine-list-container mt-2"> + <MachineListContainer/> + </div> </div> ); }; diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/sidebars/topology/rack/RackSidebarComponent.sass new file mode 100644 index 00000000..192929cf --- /dev/null +++ b/src/components/sidebars/topology/rack/RackSidebarComponent.sass @@ -0,0 +1,8 @@ +.rack-sidebar-container + display: flex + height: 100% + max-height: 100% + +.machine-list-container + flex: 1 + overflow-y: scroll |