diff options
Diffstat (limited to 'src/components/app/sidebars/topology')
25 files changed, 463 insertions, 394 deletions
diff --git a/src/components/app/sidebars/topology/NameComponent.js b/src/components/app/sidebars/topology/NameComponent.js index d663f4ae..805538b3 100644 --- a/src/components/app/sidebars/topology/NameComponent.js +++ b/src/components/app/sidebars/topology/NameComponent.js @@ -1,13 +1,13 @@ import React from "react"; import FontAwesome from "react-fontawesome"; -const NameComponent = ({name, onEdit}) => ( - <h2> - {name} - <button className="btn btn-outline-secondary float-right" onClick={onEdit}> - <FontAwesome name="pencil"/> - </button> - </h2> +const NameComponent = ({ name, onEdit }) => ( + <h2> + {name} + <button className="btn btn-outline-secondary float-right" onClick={onEdit}> + <FontAwesome name="pencil" /> + </button> + </h2> ); export default NameComponent; diff --git a/src/components/app/sidebars/topology/TopologySidebarComponent.js b/src/components/app/sidebars/topology/TopologySidebarComponent.js index ff4260a9..81e510a1 100644 --- a/src/components/app/sidebars/topology/TopologySidebarComponent.js +++ b/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -5,31 +5,27 @@ import RackSidebarContainer from "../../../../containers/app/sidebars/topology/r import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer"; import Sidebar from "../Sidebar"; -const TopologySidebarComponent = ({interactionLevel}) => { - let sidebarContent; +const TopologySidebarComponent = ({ interactionLevel }) => { + let sidebarContent; - switch (interactionLevel.mode) { - case "BUILDING": - sidebarContent = <BuildingSidebarContainer/>; - break; - case "ROOM": - sidebarContent = <RoomSidebarContainer/>; - break; - case "RACK": - sidebarContent = <RackSidebarContainer/>; - break; - case "MACHINE": - sidebarContent = <MachineSidebarContainer/>; - break; - default: - sidebarContent = "Missing Content"; - } + switch (interactionLevel.mode) { + case "BUILDING": + sidebarContent = <BuildingSidebarContainer />; + break; + case "ROOM": + sidebarContent = <RoomSidebarContainer />; + break; + case "RACK": + sidebarContent = <RackSidebarContainer />; + break; + case "MACHINE": + sidebarContent = <MachineSidebarContainer />; + break; + default: + sidebarContent = "Missing Content"; + } - return ( - <Sidebar isRight={true}> - {sidebarContent} - </Sidebar> - ); + return <Sidebar isRight={true}>{sidebarContent}</Sidebar>; }; export default TopologySidebarComponent; diff --git a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index 2bf81a48..f16c19f0 100644 --- a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,19 +1,20 @@ import React from "react"; import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer"; -const BuildingSidebarComponent = ({inSimulation}) => { - return ( - <div> - <h2>Building</h2> - {inSimulation ? - <div className="alert alert-info"> - <span className="fa fa-info-circle mr-2"/> - <strong>Click on individual rooms</strong> to see their stats! - </div> : - <NewRoomConstructionContainer/> - } +const BuildingSidebarComponent = ({ inSimulation }) => { + return ( + <div> + <h2>Building</h2> + {inSimulation ? ( + <div className="alert alert-info"> + <span className="fa fa-info-circle mr-2" /> + <strong>Click on individual rooms</strong> to see their stats! </div> - ); + ) : ( + <NewRoomConstructionContainer /> + )} + </div> + ); }; export default BuildingSidebarComponent; diff --git a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index d89b0ac0..a559c8dd 100644 --- a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -1,27 +1,31 @@ import React from "react"; -const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => { - if (currentRoomInConstruction === -1) { - return ( - <div className="btn btn-primary btn-block" onClick={onStart}> - <span className="fa fa-plus mr-2"/> - Construct a new room - </div> - ); - } +const NewRoomConstructionComponent = ({ + onStart, + onFinish, + onCancel, + currentRoomInConstruction +}) => { + if (currentRoomInConstruction === -1) { return ( - <div> - <div className="btn btn-primary btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2"/> - Finalize new room - </div> - <div className="btn btn-default btn-block" onClick={onCancel}> - <span className="fa fa-times mr-2"/> - Cancel construction - </div> - </div> + <div className="btn btn-primary btn-block" onClick={onStart}> + <span className="fa fa-plus mr-2" /> + Construct a new room + </div> ); - + } + return ( + <div> + <div className="btn btn-primary btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2" /> + Finalize new room + </div> + <div className="btn btn-default btn-block" onClick={onCancel}> + <span className="fa fa-times mr-2" /> + Cancel construction + </div> + </div> + ); }; export default NewRoomConstructionComponent; diff --git a/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/src/components/app/sidebars/topology/machine/BackToRackComponent.js index 19e33904..7f56aca0 100644 --- a/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const BackToRackComponent = ({onClick}) => ( - <div className="btn btn-secondary btn-block" onClick={onClick}> - <span className="fa fa-angle-left mr-2"/> - Back to rack - </div> +const BackToRackComponent = ({ onClick }) => ( + <div className="btn btn-secondary btn-block" onClick={onClick}> + <span className="fa fa-angle-left mr-2" /> + Back to rack + </div> ); export default BackToRackComponent; diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index 7ba08352..8da39b30 100644 --- a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const DeleteMachineComponent = ({onClick}) => ( - <div className="btn btn-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2"/> - Delete this machine - </div> +const DeleteMachineComponent = ({ onClick }) => ( + <div className="btn btn-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2" /> + Delete this machine + </div> ); export default DeleteMachineComponent; diff --git a/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 321e350d..0ad8b79c 100644 --- a/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,7 @@ import React from "react"; -const MachineNameComponent = ({position}) => ( - <h2>Machine at slot {position}</h2> +const MachineNameComponent = ({ position }) => ( + <h2>Machine at slot {position}</h2> ); export default MachineNameComponent; diff --git a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index cf4db80e..5ccaf25c 100644 --- a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -6,21 +6,22 @@ import DeleteMachineContainer from "../../../../../containers/app/sidebars/topol import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer"; import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer"; -const MachineSidebarComponent = ({inSimulation, machineId}) => { - return ( +const MachineSidebarComponent = ({ inSimulation, machineId }) => { + return ( + <div> + <MachineNameContainer /> + <BackToRackContainer /> + {inSimulation ? ( <div> - <MachineNameContainer/> - <BackToRackContainer/> - {inSimulation ? - <div> - <LoadBarContainer objectType="machine" objectId={machineId}/> - <LoadChartContainer objectType="machine" objectId={machineId}/> - </div> : - <DeleteMachineContainer/> - } - <UnitTabsContainer/> + <LoadBarContainer objectType="machine" objectId={machineId} /> + <LoadChartContainer objectType="machine" objectId={machineId} /> </div> - ); + ) : ( + <DeleteMachineContainer /> + )} + <UnitTabsContainer /> + </div> + ); }; export default MachineSidebarComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js index f16700df..d0082a72 100644 --- a/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -2,37 +2,44 @@ import PropTypes from "prop-types"; import React from "react"; class UnitAddComponent extends React.Component { - static propTypes = { - units: PropTypes.array.isRequired, - onAdd: PropTypes.func.isRequired, - }; + static propTypes = { + units: PropTypes.array.isRequired, + onAdd: PropTypes.func.isRequired + }; - render() { - return ( - <div className="form-inline"> - <div className="form-group w-100"> - <select - className="form-control w-75 mr-1" - ref={unitSelect => this.unitSelect = unitSelect} - > - {this.props.units.map(unit => ( - <option value={unit.id} key={unit.id}> - {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation} - </option> - ))} - </select> - <button - type="submit" - className="btn btn-primary" - onClick={() => this.props.onAdd(parseInt(this.unitSelect.value, 10))} - > - <span className="fa fa-plus mr-2"/> - Add - </button> - </div> - </div> - ); - } + render() { + return ( + <div className="form-inline"> + <div className="form-group w-100"> + <select + className="form-control w-75 mr-1" + ref={unitSelect => (this.unitSelect = unitSelect)} + > + {this.props.units.map(unit => ( + <option value={unit.id} key={unit.id}> + {unit.manufacturer + + " " + + unit.family + + " " + + unit.model + + " " + + unit.generation} + </option> + ))} + </select> + <button + type="submit" + className="btn btn-primary" + onClick={() => + this.props.onAdd(parseInt(this.unitSelect.value, 10))} + > + <span className="fa fa-plus mr-2" /> + Add + </button> + </div> + </div> + ); + } } export default UnitAddComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js index a0435eab..10a310e8 100644 --- a/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -2,61 +2,79 @@ import React from "react"; import jQuery from "../../../../../util/jquery"; class UnitComponent extends React.Component { - componentDidMount() { - jQuery(".unit-info-popover").popover({ - trigger: "focus" - }); - } - - render() { - let unitInfo; - if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { - unitInfo = ( - "<strong>Clockrate:</strong> <code>" + this.props.unit.clockRateMhz + " MHz</code><br/>" + - "<strong>Num. Cores:</strong> <code>" + this.props.unit.numberOfCores + "</code><br/>" + - "<strong>Energy Cons.:</strong> <code>" + this.props.unit.energyConsumptionW + " W</code>" - ); - } else if (this.props.unitType === "memory" || this.props.unitType === "storage") { - unitInfo = ( - "<strong>Speed:</strong> <code>" + this.props.unit.speedMbPerS + " Mb/s</code><br/>" + - "<strong>Size:</strong> <code>" + this.props.unit.sizeMb + " MB</code><br/>" + - "<strong>Energy Cons.:</strong> <code> " + this.props.unit.energyConsumptionW + " W</code>" - ); - } + componentDidMount() { + jQuery(".unit-info-popover").popover({ + trigger: "focus" + }); + } - return ( - <li className="d-flex list-group-item justify-content-between align-items-center"> - <span style={{maxWidth: "60%"}}> - { - this.props.unit.manufacturer - + " " + this.props.unit.family - + " " + this.props.unit.model - + " " + this.props.unit.generation - } - </span> - <span> - <a - tabIndex="0" - className="unit-info-popover btn btn-outline-info mr-1" - role="button" - data-toggle="popover" - data-trigger="focus" - title="Unit information" - data-content={unitInfo} - data-html="true" - > - <span className="fa fa-info-circle"/> - </a> - {this.props.inSimulation ? - undefined : - <span className="btn btn-outline-danger" onClick={this.props.onDelete}> - <span className="fa fa-trash"/> - </span> - } - </span> - </li> - ); + render() { + let unitInfo; + if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { + unitInfo = + "<strong>Clockrate:</strong> <code>" + + this.props.unit.clockRateMhz + + " MHz</code><br/>" + + "<strong>Num. Cores:</strong> <code>" + + this.props.unit.numberOfCores + + "</code><br/>" + + "<strong>Energy Cons.:</strong> <code>" + + this.props.unit.energyConsumptionW + + " W</code>"; + } else if ( + this.props.unitType === "memory" || + this.props.unitType === "storage" + ) { + unitInfo = + "<strong>Speed:</strong> <code>" + + this.props.unit.speedMbPerS + + " Mb/s</code><br/>" + + "<strong>Size:</strong> <code>" + + this.props.unit.sizeMb + + " MB</code><br/>" + + "<strong>Energy Cons.:</strong> <code> " + + this.props.unit.energyConsumptionW + + " W</code>"; } + + return ( + <li className="d-flex list-group-item justify-content-between align-items-center"> + <span style={{ maxWidth: "60%" }}> + {this.props.unit.manufacturer + + " " + + this.props.unit.family + + " " + + this.props.unit.model + + " " + + this.props.unit.generation} + </span> + <span> + <a + tabIndex="0" + className="unit-info-popover btn btn-outline-info mr-1" + role="button" + data-toggle="popover" + data-trigger="focus" + title="Unit information" + data-content={unitInfo} + data-html="true" + > + <span className="fa fa-info-circle" /> + </a> + {this.props.inSimulation ? ( + undefined + ) : ( + <span + className="btn btn-outline-danger" + onClick={this.props.onDelete} + > + <span className="fa fa-trash" /> + </span> + )} + </span> + </li> + ); + } } export default UnitComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitListComponent.js b/src/components/app/sidebars/topology/machine/UnitListComponent.js index 683f6023..38df806b 100644 --- a/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,20 +1,29 @@ import React from "react"; import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; -const UnitListComponent = ({unitType, unitIds, inSimulation}) => ( - <ul className="list-group mt-1"> - {unitIds.length !== 0 ? - unitIds.map((unitId, index) => ( - <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index}/> - )) : - <div className="alert alert-info"> - {inSimulation ? - <strong>No units of this type in this machine</strong> : - <span><strong>No units...</strong> Add some with the menu above!</span> - } - </div> - } - </ul> +const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( + <ul className="list-group mt-1"> + {unitIds.length !== 0 ? ( + unitIds.map((unitId, index) => ( + <UnitContainer + unitType={unitType} + unitId={unitId} + index={index} + key={index} + /> + )) + ) : ( + <div className="alert alert-info"> + {inSimulation ? ( + <strong>No units of this type in this machine</strong> + ) : ( + <span> + <strong>No units...</strong> Add some with the menu above! + </span> + )} + </div> + )} + </ul> ); export default UnitListComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index 2113d6d8..0683c796 100644 --- a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -2,53 +2,64 @@ import React from "react"; import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer"; import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer"; -const UnitTabsComponent = ({inSimulation}) => ( - <div> - <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> - <li className="nav-item"> - <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab">CPU</a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">GPU</a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab">Memory</a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab">Storage</a> - </li> - </ul> - <div className="tab-content"> - <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? - undefined : - <UnitAddContainer unitType="cpu"/> - } - <UnitListContainer unitType="cpu"/> - </div> - <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? - undefined : - <UnitAddContainer unitType="gpu"/> - } - <UnitListContainer unitType="gpu"/> - </div> - <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? - undefined : - <UnitAddContainer unitType="memory"/> - } - <UnitListContainer unitType="memory"/> - </div> - <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? - undefined : - <UnitAddContainer unitType="storage"/> - } - <UnitListContainer unitType="storage"/> - </div> - </div> +const UnitTabsComponent = ({ inSimulation }) => ( + <div> + <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> + <li className="nav-item"> + <a + className="nav-link active" + data-toggle="tab" + href="#cpu-units" + role="tab" + > + CPU + </a> + </li> + <li className="nav-item"> + <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> + GPU + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#memory-units" + role="tab" + > + Memory + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#storage-units" + role="tab" + > + Storage + </a> + </li> + </ul> + <div className="tab-content"> + <div className="tab-pane active" id="cpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />} + <UnitListContainer unitType="cpu" /> + </div> + <div className="tab-pane" id="gpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />} + <UnitListContainer unitType="gpu" /> + </div> + <div className="tab-pane" id="memory-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="memory" />} + <UnitListContainer unitType="memory" /> + </div> + <div className="tab-pane" id="storage-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="storage" />} + <UnitListContainer unitType="storage" /> + </div> </div> + </div> ); export default UnitTabsComponent; diff --git a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 267001c6..6bcf4088 100644 --- a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -1,10 +1,10 @@ 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> +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> ); export default BackToRoomComponent; diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index b268bd72..f0bad0ed 100644 --- a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const DeleteRackComponent = ({onClick}) => ( - <div className="btn btn-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2"/> - Delete this rack - </div> +const DeleteRackComponent = ({ onClick }) => ( + <div className="btn btn-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2" /> + Delete this rack + </div> ); export default DeleteRackComponent; diff --git a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index 08665072..d86f9fee 100644 --- a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,20 +1,19 @@ import React from "react"; -const EmptySlotComponent = ({position, onAdd, inSimulation}) => ( - <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> +const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( + <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> ); export default EmptySlotComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineComponent.js b/src/components/app/sidebars/topology/rack/MachineComponent.js index 0ba4503d..2521f4a2 100644 --- a/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,65 +1,78 @@ import React from "react"; import Shapes from "../../../../../shapes"; -import {convertLoadToSimulationColor} from "../../../../../util/simulation-load"; +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> +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> ); -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; +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; - 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> - ); + 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> + ); }; MachineComponent.propTypes = { - machine: Shapes.Machine + machine: Shapes.Machine }; export default MachineComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.js b/src/components/app/sidebars/topology/rack/MachineListComponent.js index fcb90d66..d5521557 100644 --- a/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -3,18 +3,24 @@ import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/ 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> - ); +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> + ); }; export default MachineListComponent; diff --git a/src/components/app/sidebars/topology/rack/RackNameComponent.js b/src/components/app/sidebars/topology/rack/RackNameComponent.js index ee8d194b..5e095823 100644 --- a/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,8 @@ import React from "react"; import NameComponent from "../NameComponent"; -const RackNameComponent = ({rackName, onEdit}) => ( - <NameComponent name={rackName} onEdit={onEdit}/> +const RackNameComponent = ({ rackName, onEdit }) => ( + <NameComponent name={rackName} onEdit={onEdit} /> ); export default RackNameComponent; diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index f563a52f..f832b9b9 100644 --- a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -7,27 +7,28 @@ import MachineListContainer from "../../../../../containers/app/sidebars/topolog 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> - ); +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> + ); }; export default RackSidebarComponent; diff --git a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js index 81384ba5..0409dbdd 100644 --- a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js +++ b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const BackToBuildingComponent = ({onClick}) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2"/> - Back to building - </div> +const BackToBuildingComponent = ({ onClick }) => ( + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2" /> + Back to building + </div> ); export default BackToBuildingComponent; diff --git a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js index 3f41eac0..5df484b5 100644 --- a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js +++ b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const DeleteRoomComponent = ({onClick}) => ( - <div className="btn btn-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2"/> - Delete this room - </div> +const DeleteRoomComponent = ({ onClick }) => ( + <div className="btn btn-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2" /> + Delete this room + </div> ); export default DeleteRoomComponent; diff --git a/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 9bfe28ce..0982e403 100644 --- a/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -1,21 +1,25 @@ import React from "react"; -const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => { - if (inRackConstructionMode) { - return ( - <div className="btn btn-primary btn-block" onClick={onStop}> - <span className="fa fa-times mr-2"/> - Stop rack construction - </div> - ); - } - +const RackConstructionComponent = ({ + inRackConstructionMode, + onStart, + onStop +}) => { + if (inRackConstructionMode) { return ( - <div className="btn btn-primary btn-block" onClick={onStart}> - <span className="fa fa-plus mr-2"/> - Start rack construction - </div> + <div className="btn btn-primary btn-block" onClick={onStop}> + <span className="fa fa-times mr-2" /> + Stop rack construction + </div> ); + } + + return ( + <div className="btn btn-primary btn-block" onClick={onStart}> + <span className="fa fa-plus mr-2" /> + Start rack construction + </div> + ); }; export default RackConstructionComponent; diff --git a/src/components/app/sidebars/topology/room/RoomNameComponent.js b/src/components/app/sidebars/topology/room/RoomNameComponent.js index 4d3e41cc..11b88edd 100644 --- a/src/components/app/sidebars/topology/room/RoomNameComponent.js +++ b/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -1,8 +1,8 @@ import React from "react"; import NameComponent from "../NameComponent"; -const RoomNameComponent = ({roomName, onEdit}) => ( - <NameComponent name={roomName} onEdit={onEdit}/> +const RoomNameComponent = ({ roomName, onEdit }) => ( + <NameComponent name={roomName} onEdit={onEdit} /> ); export default RoomNameComponent; diff --git a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index 53857408..727c3f43 100644 --- a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -7,29 +7,30 @@ import RackConstructionContainer from "../../../../../containers/app/sidebars/to import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer"; import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer"; -const RoomSidebarComponent = ({roomId, roomType, inSimulation}) => { - let allowedObjects; - if (!inSimulation && roomType === "SERVER") { - allowedObjects = <RackConstructionContainer/>; - } +const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => { + let allowedObjects; + if (!inSimulation && roomType === "SERVER") { + allowedObjects = <RackConstructionContainer />; + } - return ( + return ( + <div> + <RoomNameContainer /> + <RoomTypeContainer /> + <BackToBuildingContainer /> + {inSimulation ? ( <div> - <RoomNameContainer/> - <RoomTypeContainer/> - <BackToBuildingContainer/> - {inSimulation ? - <div> - <LoadBarContainer objectType="room" objectId={roomId}/> - <LoadChartContainer objectType="room" objectId={roomId}/> - </div> : - <div> - {allowedObjects} - <DeleteRoomContainer/> - </div> - } + <LoadBarContainer objectType="room" objectId={roomId} /> + <LoadChartContainer objectType="room" objectId={roomId} /> </div> - ); + ) : ( + <div> + {allowedObjects} + <DeleteRoomContainer /> + </div> + )} + </div> + ); }; export default RoomSidebarComponent; diff --git a/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/src/components/app/sidebars/topology/room/RoomTypeComponent.js index d42eefb6..46d91c2c 100644 --- a/src/components/app/sidebars/topology/room/RoomTypeComponent.js +++ b/src/components/app/sidebars/topology/room/RoomTypeComponent.js @@ -1,10 +1,8 @@ import React from "react"; -import {ROOM_TYPE_TO_NAME_MAP} from "../../../../../util/room-types"; +import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types"; -const RoomTypeComponent = ({roomType}) => ( - <p className="lead"> - {ROOM_TYPE_TO_NAME_MAP[roomType]} - </p> +const RoomTypeComponent = ({ roomType }) => ( + <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> ); export default RoomTypeComponent; |