From 1ce8bf170cda2afab334cd330325cd4fbb97dab4 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 11:46:57 +0200 Subject: ui: Split App container into separate components This change splits the App container into separate pages, as a starting point for removing much of the unnecessary state from Redux. --- .../opendc-web-ui/src/components/app/map/MapStageComponent.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components') diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js index 07b2d8f0..a8e156ec 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import PropTypes from 'prop-types' import React, { useEffect, useRef, useState } from 'react' import { HotKeys } from 'react-hotkeys' @@ -37,10 +38,12 @@ function MapStageComponent({ setPos([mousePos.x, mousePos.y]) } - useEffect(() => { - const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT) - const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y) + const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT) + const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y) + // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands + // eslint-disable-next-line react-hooks/exhaustive-deps + useEffect(() => { updateDimensions() window.addEventListener('resize', updateDimensions) @@ -57,7 +60,7 @@ function MapStageComponent({ window.removeEventListener('resize', updateDimensions) window.removeEventListener('wheel', updateScale) } - }, [x, y, setMapDimensions, zoomInOnPosition]) + }, []) const store = useStore() -- cgit v1.2.3 From aa788a3ad18badfac8beaabdaffc88b9e52f9306 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 15:07:11 +0200 Subject: ui: Remove current ids state from Redux This change removes the current active identifiers from the Redux state. Instead, we use the router query to track the active project, portfolio and topology. --- .../app/sidebars/project/PortfolioListComponent.js | 2 +- .../app/sidebars/project/ScenarioListComponent.js | 38 ++-------------------- 2 files changed, 4 insertions(+), 36 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components') diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js index ce271819..b948b747 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js @@ -61,7 +61,7 @@ function PortfolioListComponent({ PortfolioListComponent.propTypes = { portfolios: PropTypes.arrayOf(Portfolio), - currentProjectId: PropTypes.string.isRequired, + currentProjectId: PropTypes.string, currentPortfolioId: PropTypes.string, onNewPortfolio: PropTypes.func.isRequired, onChoosePortfolio: PropTypes.func.isRequired, diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js index f990dfcb..e81d2b78 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js @@ -1,48 +1,19 @@ import PropTypes from 'prop-types' import React from 'react' import { Scenario } from '../../../../shapes' -import Link from 'next/link' import { Button, Col, Row } from 'reactstrap' -import classNames from 'classnames' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons' +import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons' -function ScenarioListComponent({ - scenarios, - portfolioId, - currentProjectId, - currentScenarioId, - onNewScenario, - onChooseScenario, - onDeleteScenario, -}) { +function ScenarioListComponent({ scenarios, portfolioId, onNewScenario, onDeleteScenario }) { return ( <> {scenarios.map((scenario, idx) => ( - + {scenario.name} - - - - {portfolios.map((portfolio, idx) => ( + {portfolios.map((portfolio) => (
Date: Wed, 7 Jul 2021 20:13:30 +0200 Subject: ui: Use React Query defaults to reduce duplication --- opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components') diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js index a8e156ec..c3177fe1 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/exhaustive-deps */ import PropTypes from 'prop-types' import React, { useEffect, useRef, useState } from 'react' import { HotKeys } from 'react-hotkeys' @@ -42,7 +41,6 @@ function MapStageComponent({ const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y) // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands - // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => { updateDimensions() @@ -60,7 +58,7 @@ function MapStageComponent({ window.removeEventListener('resize', updateDimensions) window.removeEventListener('wheel', updateScale) } - }, []) + }, []) // eslint-disable-line react-hooks/exhaustive-deps const store = useStore() -- cgit v1.2.3 From 29196842447d841d2e21462adcfc8c2ed1d851ad Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 8 Jul 2021 13:15:28 +0200 Subject: ui: Simplify normalization of topology This change updates the OpenDC frontend to use the normalizr library for normalizing the user topology. --- .../src/components/app/map/groups/RoomGroup.js | 8 ++++---- .../src/components/app/map/groups/TileGroup.js | 2 +- .../src/components/app/map/groups/TopologyGroup.js | 6 +++--- .../app/sidebars/topology/machine/UnitComponent.js | 2 +- .../sidebars/topology/machine/UnitListComponent.js | 22 +++++++++++++++------- .../app/sidebars/topology/rack/MachineComponent.js | 10 +++++----- .../sidebars/topology/rack/MachineListComponent.js | 19 +++++++++++-------- 7 files changed, 40 insertions(+), 29 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components') diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js index e67d54fc..42d20ff1 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js @@ -10,7 +10,7 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick if (currentRoomInConstruction === room._id) { return ( - {room.tileIds.map((tileId) => ( + {room.tiles.map((tileId) => ( ))} @@ -25,16 +25,16 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick interactionLevel.roomId === room._id ) { return [ - room.tileIds + room.tiles .filter((tileId) => tileId !== interactionLevel.tileId) .map((tileId) => ), , - room.tileIds + room.tiles .filter((tileId) => tileId === interactionLevel.tileId) .map((tileId) => ), ] } else { - return room.tileIds.map((tileId) => ) + return room.tiles.map((tileId) => ) } })()} diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js index 2a108b93..ce5e4a6b 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js @@ -8,7 +8,7 @@ import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, onClick }) => { let tileObject - if (tile.rackId) { + if (tile.rack) { tileObject = } else { tileObject = null diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js index 57107768..d4c6db7d 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js @@ -12,7 +12,7 @@ const TopologyGroup = ({ topology, interactionLevel }) => { if (interactionLevel.mode === 'BUILDING') { return ( - {topology.roomIds.map((roomId) => ( + {topology.rooms.map((roomId) => ( ))} @@ -21,13 +21,13 @@ const TopologyGroup = ({ topology, interactionLevel }) => { return ( - {topology.roomIds + {topology.rooms .filter((roomId) => roomId !== interactionLevel.roomId) .map((roomId) => ( ))} {interactionLevel.mode === 'ROOM' ? : null} - {topology.roomIds + {topology.rooms .filter((roomId) => roomId === interactionLevel.roomId) .map((roomId) => ( diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js index 03b92459..46c639bd 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -60,7 +60,7 @@ function UnitComponent({ index, unitType, unit, onDelete }) { UnitComponent.propTypes = { index: PropTypes.number, unitType: PropTypes.string, - unit: PropTypes.oneOf([ProcessingUnit, StorageUnit]), + unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]), onDelete: PropTypes.func, } diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js index b7da74a1..54c1a6cc 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,12 +1,19 @@ import PropTypes from 'prop-types' import React from 'react' -import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' +import { ProcessingUnit, StorageUnit } from '../../../../../shapes' +import UnitComponent from './UnitComponent' -const UnitListComponent = ({ unitType, unitIds }) => ( +const UnitListComponent = ({ unitType, units, onDelete }) => (
    - {unitIds.length !== 0 ? ( - unitIds.map((unitId, index) => ( - + {units.length !== 0 ? ( + units.map((unit, index) => ( + onDelete(unit, unitType)} + index={index} + key={index} + /> )) ) : (
    @@ -19,8 +26,9 @@ const UnitListComponent = ({ unitType, unitIds }) => ( ) UnitListComponent.propTypes = { - unitType: PropTypes.string, - unitIds: PropTypes.array, + unitType: PropTypes.string.isRequired, + units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired, + onDelete: PropTypes.func, } export default UnitListComponent diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js index f91202ba..b71918da 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -23,7 +23,7 @@ UnitIcon.propTypes = { const MachineComponent = ({ position, machine, onClick }) => { const hasNoUnits = - machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0 + machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0 return ( { {position}
    - {machine.cpuIds.length > 0 ? : undefined} - {machine.gpuIds.length > 0 ? : undefined} - {machine.memoryIds.length > 0 ? : undefined} - {machine.storageIds.length > 0 ? : undefined} + {machine.cpus.length > 0 ? : undefined} + {machine.gpus.length > 0 ? : undefined} + {machine.memories.length > 0 ? : undefined} + {machine.storages.length > 0 ? : undefined} {hasNoUnits ? Machine with no units : undefined}
    diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js index d0958c28..e024a417 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -1,17 +1,18 @@ import PropTypes from 'prop-types' import React from 'react' -import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer' -import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer' import { machineList } from './MachineListComponent.module.scss' +import MachineComponent from './MachineComponent' +import { Machine } from '../../../../../shapes' +import EmptySlotComponent from './EmptySlotComponent' -const MachineListComponent = ({ machineIds }) => { +const MachineListComponent = ({ machines = [], onSelect, onAdd }) => { return (
      - {machineIds.map((machineId, index) => { - if (machineId === null) { - return + {machines.map((machine, index) => { + if (machine === null) { + return onAdd(index + 1)} /> } else { - return + return onSelect(index + 1)} machine={machine} /> } })}
    @@ -19,7 +20,9 @@ const MachineListComponent = ({ machineIds }) => { } MachineListComponent.propTypes = { - machineIds: PropTypes.array, + machines: PropTypes.arrayOf(Machine), + onSelect: PropTypes.func.isRequired, + onAdd: PropTypes.func.isRequired, } export default MachineListComponent -- cgit v1.2.3