diff options
Diffstat (limited to 'frontend/src/components/app/sidebars/topology/rack')
9 files changed, 161 insertions, 161 deletions
diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 6bcf4088..345674d1 100644 --- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +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> -); + <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; +export default BackToRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index d8aa7634..b1672764 100644 --- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRackComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this rack - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this rack + </div> +) -export default DeleteRackComponent; +export default DeleteRackComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index d86f9fee..f182a78c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,19 +1,19 @@ -import React from "react"; +import React from 'react' const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( - <li className="list-group-item d-flex justify-content-between align-items-center"> + <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> -); + {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; +export default EmptySlotComponent 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 diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js index d5521557..a381771c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -1,26 +1,26 @@ -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"; +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> - ); -}; + 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; +export default MachineListComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass index bbcfe696..11b82c93 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass @@ -1,2 +1,2 @@ .machine-list li - min-height: 64px + min-height: 64px diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js index 5e095823..1888b69d 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RackNameComponent = ({ rackName, onEdit }) => ( - <NameComponent name={rackName} onEdit={onEdit} /> -); + <NameComponent name={rackName} onEdit={onEdit}/> +) -export default RackNameComponent; +export default RackNameComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index f832b9b9..47d99254 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,34 +1,34 @@ -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"; +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> - ); -}; + 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; +export default RackSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass index 822804bc..29fec02a 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass @@ -1,11 +1,11 @@ .rack-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .rack-sidebar-header-container - flex: 0 + flex: 0 .machine-list-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll |