diff options
| author | jc0b <j@jc0b.computer> | 2020-07-07 16:55:22 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2020-08-24 19:47:51 +0200 |
| commit | 223e916997eb641a1662110b6de630a4cdfdf479 (patch) | |
| tree | 90ca4364461f676db45f25e03d8f22fc32f9fdd8 /frontend/src/components/app/sidebars | |
| parent | 9ff1e3c6bae253372a468dbdc9b8369ab8dd2c6f (diff) | |
| parent | b810c4413079bf5aeb5374f1cd20e151a83530d0 (diff) | |
Merge branch 'feature/mongodb-migration' of github.com:atlarge-research/opendc-dev into feature/mongodb-migration
Diffstat (limited to 'frontend/src/components/app/sidebars')
16 files changed, 104 insertions, 192 deletions
diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js deleted file mode 100644 index 01005085..00000000 --- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js +++ /dev/null @@ -1,22 +0,0 @@ -import classNames from 'classnames' -import React from 'react' - -const LoadBarComponent = ({ percent, disabled }) => ( - <div className="mt-1"> - <strong>Current load</strong> - <div className={classNames('progress', { disabled })}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + '%' }} - > - {percent}% - </div> - </div> - </div> -) - -export default LoadBarComponent diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js new file mode 100644 index 00000000..d6e39ff6 --- /dev/null +++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js @@ -0,0 +1,12 @@ +import React from 'react' +import Sidebar from '../Sidebar' +import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer' + +const ProjectSidebarComponent = () => ( + <Sidebar isRight={false}> + <TopologyListContainer/> + <h2>Portfolios</h2> + </Sidebar> + ) + +export default ProjectSidebarComponent diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js new file mode 100644 index 00000000..98615711 --- /dev/null +++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js @@ -0,0 +1,63 @@ +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../../../shapes' +import FontAwesome from 'react-fontawesome' + +class TopologyListComponent extends React.Component { + static propTypes = { + show: PropTypes.bool.isRequired, + topologies: PropTypes.arrayOf(Shapes.Topology), + currentTopologyId: PropTypes.string, + onChooseTopology: PropTypes.func.isRequired, + onNewTopology: PropTypes.func.isRequired, + onDeleteTopology: PropTypes.func.isRequired, + } + + onChoose(id) { + this.props.onChooseTopology(id) + } + + onDuplicate() { + this.props.onNewTopology( + this.textInput.value, + this.originTopology.value, + ) + } + + onDelete(id) { + this.props.onDeleteTopology(id) + } + + render() { + return ( + <div className="pb-3"> + <h2> + Topologies + <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}> + <FontAwesome name="plus"/> + </button> + </h2> + + {this.props.topologies.map((topology, idx) => ( + <div key={topology._id} className="row mb-1"> + <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}> + {topology.name} + </div> + <div className="col-4 text-right"> + <span + className="btn btn-outline-primary mr-1 fa fa-play" + onClick={() => this.onChoose(topology._id)} + /> + <span + className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} + onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined} + /> + </div> + </div> + ))} + </div> + ) + } +} + +export default TopologyListComponent diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js deleted file mode 100644 index 30990a13..00000000 --- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' - -const ExperimentMetadataComponent = ({ - experimentName, - topologyName, - traceName, - schedulerName, - }) => ( - <div> - <h2>{experimentName}</h2> - <p> - Topology: <strong>{topologyName}</strong> - </p> - <p> - Trace: <strong>{traceName}</strong> - </p> - <p> - Scheduler: <strong>{schedulerName}</strong> - </p> - </div> -) - -export default ExperimentMetadataComponent diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js deleted file mode 100644 index 6ee6a3b9..00000000 --- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors' -import { LOAD_NAME_MAP } from '../../../../util/simulation-load' - -const LoadMetricComponent = ({ loadMetric }) => ( - <div> - <div> - Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong> - </div> - <div className="btn-group mb-2" style={{ display: 'flex' }}> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }} - title="0-25%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }} - title="25-50%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }} - title="50-75%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} - title="75-100%" - /> - </div> - </div> -) - -export default LoadMetricComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js deleted file mode 100644 index dba75eb2..00000000 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer' -import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer' -import Sidebar from '../Sidebar' -import './SimulationSidebarComponent.css' - -const SimulationSidebarComponent = () => { - return ( - <Sidebar isRight={false}> - <div className="simulation-sidebar-container flex-column"> - <ExperimentMetadataContainer/> - <LoadMetricContainer/> - </div> - </Sidebar> - ) -} - -export default SimulationSidebarComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass deleted file mode 100644 index 6490cf8d..00000000 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass +++ /dev/null @@ -1,8 +0,0 @@ -.simulation-sidebar-container - display: flex - height: 100% - max-height: 100% - -.trace-container - flex: 1 - overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index 00965c18..4cc87798 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -2,18 +2,11 @@ import React from 'react' import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' -const BuildingSidebarComponent = ({ inSimulation }) => { +const BuildingSidebarComponent = () => { 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/> - )} + <NewRoomConstructionContainer/> </div> ) } diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 66c8c84f..d78c20eb 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,24 +1,15 @@ import React from 'react' -import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' -import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer' import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer' import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer' import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer' -const MachineSidebarComponent = ({ inSimulation, machineId }) => { +const MachineSidebarComponent = ({ machineId }) => { return ( <div> <MachineNameContainer/> <BackToRackContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="machine" objectId={machineId}/> - <LoadChartContainer objectType="machine" objectId={machineId}/> - </div> - ) : ( - <DeleteMachineContainer/> - )} + <DeleteMachineContainer/> <UnitTabsContainer/> </div> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index bde6d444..3953347a 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -53,14 +53,10 @@ class UnitComponent extends React.Component { data-content={unitInfo} data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger fa fa-trash" - onClick={this.props.onDelete} - /> - )} + <span + className="btn btn-outline-danger fa fa-trash" + onClick={this.props.onDelete} + /> </span> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index da65da23..fcd3e03b 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,7 +1,7 @@ import React from 'react' import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' -const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( +const UnitListComponent = ({ unitType, unitIds }) => ( <ul className="list-group mt-1"> {unitIds.length !== 0 ? ( unitIds.map((unitId, index) => ( @@ -14,13 +14,9 @@ const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( )) ) : ( <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> - )} + <span> + <strong>No units...</strong> Add some with the menu above! + </span> </div> )} </ul> diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index df7eeb77..c774036f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -2,7 +2,7 @@ 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 }) => ( +const UnitTabsComponent = () => ( <div> <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> <li className="nav-item"> @@ -43,19 +43,19 @@ const UnitTabsComponent = ({ inSimulation }) => ( </ul> <div className="tab-content"> <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitAddContainer unitType="cpu"/> <UnitListContainer unitType="cpu"/> </div> <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitAddContainer unitType="gpu"/> <UnitListContainer unitType="gpu"/> </div> <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitAddContainer unitType="memory"/> <UnitListContainer unitType="memory"/> </div> <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitAddContainer unitType="storage"/> <UnitListContainer unitType="storage"/> </div> </div> diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index f182a78c..03b44aa6 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,18 +1,14 @@ import React from 'react' -const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( +const EmptySlotComponent = ({ position, onAdd }) => ( <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> - )} + <button className="btn btn-outline-primary" onClick={onAdd}> + <span className="fa fa-plus mr-2"/> + Add machine + </button> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index b4204136..cec3c912 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,6 +1,5 @@ import React from 'react' import Shapes from '../../../../../shapes' -import { convertLoadToSimulationColor } from '../../../../../util/simulation-load' const UnitIcon = ({ id, type }) => ( <div> @@ -16,14 +15,8 @@ const UnitIcon = ({ id, type }) => ( 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 + @@ -35,7 +28,7 @@ const MachineComponent = ({ <li className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" onClick={onClick} - style={{ backgroundColor: color }} + style={{ backgroundColor: 'white' }} > <span className="badge badge-default badge-info mr-1">{position}</span> <div className="d-inline-flex"> diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index 47d99254..23e8e743 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,28 +1,17 @@ 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 }) => { +const RackSidebarComponent = () => { 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> - )} + <DeleteRackContainer/> </div> <div className="machine-list-container mt-2"> <MachineListContainer/> diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index d8a805cb..a23ac381 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -1,29 +1,18 @@ import React from 'react' -import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' -import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer' import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer' import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer' import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer' import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer' -const RoomSidebarComponent = ({ roomId, inSimulation }) => { +const RoomSidebarComponent = () => { return ( <div> <RoomNameContainer/> <BackToBuildingContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="room" objectId={roomId}/> - <LoadChartContainer objectType="room" objectId={roomId}/> - </div> - ) : ( - <div> - <RackConstructionContainer/> - <EditRoomContainer/> - <DeleteRoomContainer/> - </div> - )} + <RackConstructionContainer/> + <EditRoomContainer/> + <DeleteRoomContainer/> </div> ) } |
