diff options
| author | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-09-07 17:22:24 +0200 |
|---|---|---|
| committer | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-09-23 10:05:58 +0200 |
| commit | a08deff7909b68a89662f8b93845918bdc613732 (patch) | |
| tree | 4b995d9826891c6e84987b29bf071117f4307706 /src/components/sidebars/topology/rack/MachineComponent.js | |
| parent | e9909159dc5db91eda12437e18c1474cae848af7 (diff) | |
Finish rack mode machine list rendering
Diffstat (limited to 'src/components/sidebars/topology/rack/MachineComponent.js')
| -rw-r--r-- | src/components/sidebars/topology/rack/MachineComponent.js | 54 |
1 files changed, 40 insertions, 14 deletions
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> ); |