diff options
Diffstat (limited to 'src/components')
6 files changed, 109 insertions, 1 deletions
diff --git a/src/components/sidebars/Sidebar.sass b/src/components/sidebars/Sidebar.sass index 16a6d48f..c3796d59 100644 --- a/src/components/sidebars/Sidebar.sass +++ b/src/components/sidebars/Sidebar.sass @@ -4,7 +4,7 @@ position: absolute top: 0 left: 0 - width: 300px + width: 350px z-index: 100 background: white diff --git a/src/components/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/sidebars/topology/machine/MachineSidebarComponent.js index 117db784..218e4f41 100644 --- a/src/components/sidebars/topology/machine/MachineSidebarComponent.js +++ b/src/components/sidebars/topology/machine/MachineSidebarComponent.js @@ -2,6 +2,7 @@ import React from "react"; import BackToRackContainer from "../../../../containers/sidebars/topology/machine/BackToRackContainer"; import DeleteMachineContainer from "../../../../containers/sidebars/topology/machine/DeleteMachineContainer"; import MachineNameContainer from "../../../../containers/sidebars/topology/machine/MachineNameContainer"; +import UnitTabsComponent from "./UnitTabsComponent"; const MachineSidebarComponent = () => { return ( @@ -9,6 +10,7 @@ const MachineSidebarComponent = () => { <MachineNameContainer/> <BackToRackContainer/> <DeleteMachineContainer/> + <UnitTabsComponent/> </div> ); }; diff --git a/src/components/sidebars/topology/machine/UnitAddComponent.js b/src/components/sidebars/topology/machine/UnitAddComponent.js new file mode 100644 index 00000000..a1c9eb76 --- /dev/null +++ b/src/components/sidebars/topology/machine/UnitAddComponent.js @@ -0,0 +1,37 @@ +import PropTypes from "prop-types"; +import React from "react"; + +class UnitAddComponent extends React.Component { + 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))} + > + Add + </button> + </div> + </div> + ); + } +} + +export default UnitAddComponent; diff --git a/src/components/sidebars/topology/machine/UnitComponent.js b/src/components/sidebars/topology/machine/UnitComponent.js new file mode 100644 index 00000000..20cdad1e --- /dev/null +++ b/src/components/sidebars/topology/machine/UnitComponent.js @@ -0,0 +1,10 @@ +import React from "react"; + +const UnitComponent = ({unit, onDelete}) => ( + <li className="d-flex list-group-item justify-content-between align-items-center"> + {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation} + <span className="btn btn-outline-danger" onClick={onDelete}>Delete</span> + </li> +); + +export default UnitComponent; diff --git a/src/components/sidebars/topology/machine/UnitListComponent.js b/src/components/sidebars/topology/machine/UnitListComponent.js new file mode 100644 index 00000000..288d1428 --- /dev/null +++ b/src/components/sidebars/topology/machine/UnitListComponent.js @@ -0,0 +1,17 @@ +import React from "react"; +import UnitContainer from "../../../../containers/sidebars/topology/machine/UnitContainer"; + +const UnitListComponent = ({unitType, unitIds}) => ( + <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"> + <strong>No units...</strong> Add some with the menu above! + </div> + } + </ul> +); + +export default UnitListComponent; diff --git a/src/components/sidebars/topology/machine/UnitTabsComponent.js b/src/components/sidebars/topology/machine/UnitTabsComponent.js new file mode 100644 index 00000000..cd068442 --- /dev/null +++ b/src/components/sidebars/topology/machine/UnitTabsComponent.js @@ -0,0 +1,42 @@ +import React from "react"; +import UnitAddContainer from "../../../../containers/sidebars/topology/machine/UnitAddContainer"; +import UnitListContainer from "../../../../containers/sidebars/topology/machine/UnitListContainer"; + +const UnitTabsComponent = () => ( + <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"> + <UnitAddContainer unitType="cpu"/> + <UnitListContainer unitType="cpu"/> + </div> + <div className="tab-pane" id="gpu-units" role="tabpanel"> + <UnitAddContainer unitType="gpu"/> + <UnitListContainer unitType="gpu"/> + </div> + <div className="tab-pane" id="memory-units" role="tabpanel"> + <UnitAddContainer unitType="memory"/> + <UnitListContainer unitType="memory"/> + </div> + <div className="tab-pane" id="storage-units" role="tabpanel"> + <UnitAddContainer unitType="storage"/> + <UnitListContainer unitType="storage"/> + </div> + </div> + </div> +); + +export default UnitTabsComponent; |