diff options
Diffstat (limited to 'src/components/sidebars/topology/rack')
6 files changed, 98 insertions, 0 deletions
diff --git a/src/components/sidebars/topology/rack/DeleteRackComponent.js b/src/components/sidebars/topology/rack/DeleteRackComponent.js new file mode 100644 index 00000000..555f6d02 --- /dev/null +++ b/src/components/sidebars/topology/rack/DeleteRackComponent.js @@ -0,0 +1,11 @@ +import React from "react"; + +const DeleteRackComponent = ({onClick}) => { + return ( + <div className="btn btn-danger btn-block" onClick={onClick}> + Delete this rack + </div> + ); +}; + +export default DeleteRackComponent; diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js new file mode 100644 index 00000000..5234ee63 --- /dev/null +++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js @@ -0,0 +1,16 @@ +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"/> + </button> + </li> +); + +export default EmptySlotComponent; diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js new file mode 100644 index 00000000..e328951e --- /dev/null +++ b/src/components/sidebars/topology/rack/MachineComponent.js @@ -0,0 +1,28 @@ +import React from "react"; +import Shapes from "../../../../shapes"; + +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"> + {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> + </li> +); + +MachineComponent.propTypes = { + machine: Shapes.Machine +}; + +export default MachineComponent; diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js new file mode 100644 index 00000000..d8a31ddc --- /dev/null +++ b/src/components/sidebars/topology/rack/MachineListComponent.js @@ -0,0 +1,19 @@ +import React from "react"; +import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer"; +import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer"; + +const MachineListComponent = ({machineIds}) => { + return ( + <ul className="list-group"> + {machineIds.map((machineId, index) => { + if (machineId === null) { + return <EmptySlotContainer key={index} position={index}/>; + } else { + return <MachineContainer key={index} position={index} machineId={machineId}/>; + } + })} + </ul> + ); +}; + +export default MachineListComponent; diff --git a/src/components/sidebars/topology/rack/RackNameComponent.js b/src/components/sidebars/topology/rack/RackNameComponent.js new file mode 100644 index 00000000..ee8d194b --- /dev/null +++ b/src/components/sidebars/topology/rack/RackNameComponent.js @@ -0,0 +1,8 @@ +import React from "react"; +import NameComponent from "../NameComponent"; + +const RackNameComponent = ({rackName, onEdit}) => ( + <NameComponent name={rackName} onEdit={onEdit}/> +); + +export default RackNameComponent; diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js new file mode 100644 index 00000000..ddb10387 --- /dev/null +++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js @@ -0,0 +1,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"; + +const RackSidebarComponent = () => { + return ( + <div> + <RackNameContainer/> + <DeleteRackContainer/> + <MachineListContainer/> + </div> + ); +}; + +export default RackSidebarComponent; |