diff options
Diffstat (limited to 'frontend/src/components/app/sidebars/topology/rack/MachineComponent.js')
| -rw-r--r-- | frontend/src/components/app/sidebars/topology/rack/MachineComponent.js | 136 |
1 files changed, 68 insertions, 68 deletions
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index 2521f4a2..0a1d1065 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import Shapes from "../../../../../shapes"; -import { convertLoadToSimulationColor } from "../../../../../util/simulation-load"; +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> -); + <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 >= 0) { - color = convertLoadToSimulationColor(machineLoad); - } - const hasNoUnits = - machine.cpuIds.length + - machine.gpuIds.length + - machine.memoryIds.length + - machine.storageIds.length === - 0; + position, + machine, + inSimulation, + machineLoad, + onClick, + }) => { + let color = 'white' + if (inSimulation && machineLoad >= 0) { + 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"> + 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> - ); -}; + ) : ( + undefined + )} + </div> + </li> + ) +} MachineComponent.propTypes = { - machine: Shapes.Machine -}; + machine: Shapes.Machine, +} -export default MachineComponent; +export default MachineComponent |
