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/opendc-web-ui/src/api/topologies.js | 2 +- .../src/components/app/map/MapStageComponent.js | 11 +- opendc-web/opendc-web-ui/src/containers/app/App.js | 111 --------------------- .../app/sidebars/project/PortfolioListContainer.js | 7 +- .../app/sidebars/project/ScenarioListContainer.js | 11 +- .../app/sidebars/project/TopologyListContainer.js | 4 +- opendc-web/opendc-web-ui/src/data/project.js | 7 ++ .../src/pages/projects/[project]/index.js | 16 +-- .../projects/[project]/portfolios/[portfolio].js | 45 +++++++-- .../projects/[project]/topologies/[topology].js | 81 +++++++++++++++ 10 files changed, 149 insertions(+), 146 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/App.js create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/api/topologies.js b/opendc-web/opendc-web-ui/src/api/topologies.js index 802be4bb..40685094 100644 --- a/opendc-web/opendc-web-ui/src/api/topologies.js +++ b/opendc-web/opendc-web-ui/src/api/topologies.js @@ -31,7 +31,7 @@ export function getTopology(auth, topologyId) { } export function updateTopology(auth, topology) { - const { _id, ...data } = topology; + const { _id, ...data } = topology return request(auth, `topologies/${topology._id}`, 'PUT', { topology: data }) } 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() diff --git a/opendc-web/opendc-web-ui/src/containers/app/App.js b/opendc-web/opendc-web-ui/src/containers/app/App.js deleted file mode 100644 index ec9714ce..00000000 --- a/opendc-web/opendc-web-ui/src/containers/app/App.js +++ /dev/null @@ -1,111 +0,0 @@ -/* - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import PropTypes from 'prop-types' -import React, { useEffect } from 'react' -import Head from 'next/head' -import { HotKeys } from 'react-hotkeys' -import { useDispatch, useSelector } from 'react-redux' -import { openPortfolioSucceeded } from '../../redux/actions/portfolios' -import { openProjectSucceeded } from '../../redux/actions/projects' -import ToolPanelComponent from '../../components/app/map/controls/ToolPanelComponent' -import LoadingScreen from '../../components/app/map/LoadingScreen' -import ScaleIndicatorContainer from '../../containers/app/map/controls/ScaleIndicatorContainer' -import MapStage from '../../containers/app/map/MapStage' -import TopologySidebarContainer from '../../containers/app/sidebars/topology/TopologySidebarContainer' -import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer' -import ProjectSidebarContainer from '../../containers/app/sidebars/project/ProjectSidebarContainer' -import { openScenarioSucceeded } from '../../redux/actions/scenarios' -import PortfolioResultsContainer from '../../containers/app/results/PortfolioResultsContainer' -import { KeymapConfiguration } from '../../hotkeys' -import { useRequireAuth } from '../../auth' -import { useActiveProject } from '../../data/project' - -const App = ({ projectId, portfolioId, scenarioId }) => { - useRequireAuth() - - const projectName = useActiveProject()?.name - const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') - - const dispatch = useDispatch() - useEffect(() => { - if (scenarioId) { - dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)) - } else if (portfolioId) { - dispatch(openPortfolioSucceeded(projectId, portfolioId)) - } else { - dispatch(openProjectSucceeded(projectId)) - } - }, [projectId, portfolioId, scenarioId, dispatch]) - - const constructionElements = topologyIsLoading ? ( -
- -
- ) : ( -
- - - - - -
- ) - - const portfolioElements = ( -
- -
- -
-
- ) - - const scenarioElements = ( -
- -
-

Scenario loading

-
-
- ) - - const title = projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC' - - return ( - - - {title} - - - {scenarioId ? scenarioElements : portfolioId ? portfolioElements : constructionElements} - - ) -} - -App.propTypes = { - projectId: PropTypes.string.isRequired, - portfolioId: PropTypes.string, - scenarioId: PropTypes.string, -} - -export default App diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js index a36997ff..28d7f0d1 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js @@ -6,16 +6,15 @@ import { addPortfolio, deletePortfolio, setCurrentPortfolio } from '../../../../ import { getState } from '../../../../util/state-utils' import { setCurrentTopology } from '../../../../redux/actions/topology/building' import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent' -import { useActivePortfolio, useActiveProject, usePortfolios } from '../../../../data/project' +import { usePortfolios } from '../../../../data/project' const PortfolioListContainer = () => { - const currentProjectId = useActiveProject()?._id - const currentPortfolioId = useActivePortfolio()?._id + const router = useRouter() + const { project: currentProjectId, portfolio: currentPortfolioId } = router.query const portfolios = usePortfolios(currentProjectId) const dispatch = useDispatch() const [isVisible, setVisible] = useState(false) - const router = useRouter() const actions = { onNewPortfolio: () => setVisible(true), onChoosePortfolio: (portfolioId) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js index e1be51dc..10743401 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types' import React, { useState } from 'react' import { useDispatch } from 'react-redux' import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent' @@ -5,11 +6,13 @@ import { addScenario, deleteScenario, setCurrentScenario } from '../../../../red import { setCurrentPortfolio } from '../../../../redux/actions/portfolios' import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent' import { useProjectTopologies } from '../../../../data/topology' -import { useActiveScenario, useActiveProject, useScenarios } from '../../../../data/project' +import { useActiveScenario, useScenarios } from '../../../../data/project' import { useSchedulers, useTraces } from '../../../../data/experiments' +import { useRouter } from 'next/router' const ScenarioListContainer = ({ portfolioId }) => { - const currentProjectId = useActiveProject()?._id + const router = useRouter() + const { project: currentProjectId } = router.query const currentScenarioId = useActiveScenario()?._id const scenarios = useScenarios(portfolioId) const topologies = useProjectTopologies() @@ -71,4 +74,8 @@ const ScenarioListContainer = ({ portfolioId }) => { ) } +ScenarioListContainer.propTypes = { + portfolioId: PropTypes.string.isRequired, +} + export default ScenarioListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js index 266ca495..648c4500 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js @@ -18,14 +18,14 @@ const TopologyListContainer = () => { const onChooseTopology = async (id) => { dispatch(setCurrentTopology(id)) const state = await getState(dispatch) - router.push(`/projects/${state.currentProjectId}`) + await router.push(`/projects/${state.currentProjectId}/topologies/${id}`) } const onDeleteTopology = async (id) => { if (id) { const state = await getState(dispatch) dispatch(deleteTopology(id)) dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) - router.push(`/projects/${state.currentProjectId}`) + await router.push(`/projects/${state.currentProjectId}`) } } const onCreateTopology = (name) => { diff --git a/opendc-web/opendc-web-ui/src/data/project.js b/opendc-web/opendc-web-ui/src/data/project.js index de2bc0d3..d4c95370 100644 --- a/opendc-web/opendc-web-ui/src/data/project.js +++ b/opendc-web/opendc-web-ui/src/data/project.js @@ -29,6 +29,13 @@ export function useProjects() { return useSelector((state) => state.projects) } +/** + * Return the project with the specified identifier. + */ +export function useProject(projectId) { + return useSelector((state) => state.projects[projectId]) +} + /** * Return the current active project. */ diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js index 72316bc9..cce887aa 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js @@ -20,18 +20,6 @@ * SOFTWARE. */ -import { useRouter } from 'next/router' -import App from '../../../containers/app/App' +import Topology from './topologies/[topology]' -function Project() { - const router = useRouter() - const { project } = router.query - - if (project) { - return - } - - return
-} - -export default Project +export default Topology diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js index 76a8d23b..b21db44c 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js @@ -21,17 +21,46 @@ */ import { useRouter } from 'next/router' -import App from '../../../../containers/app/App' +import Head from 'next/head' +import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer' +import React, { useEffect } from 'react' +import { useProject } from '../../../../data/project' +import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer' +import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer' +import { useDispatch } from 'react-redux' +import { openPortfolioSucceeded } from '../../../../redux/actions/portfolios' -function Project() { +/** + * Page that displays the results in a portfolio. + */ +function Portfolio() { const router = useRouter() - const { project, portfolio } = router.query + const { project: projectId, portfolio: portfolioId } = router.query + + const project = useProject(projectId) + const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC' - if (project && portfolio) { - return - } + const dispatch = useDispatch() + useEffect(() => { + if (portfolioId) { + dispatch(openPortfolioSucceeded(projectId, portfolioId)) + } + }, [projectId, portfolioId, dispatch]) - return
+ return ( +
+ + {title} + + +
+ +
+ +
+
+
+ ) } -export default Project +export default Portfolio diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js new file mode 100644 index 00000000..28db1531 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { useRouter } from 'next/router' +import { useProject } from '../../../../data/project' +import { useDispatch, useSelector } from 'react-redux' +import React, { useEffect } from 'react' +import { openProjectSucceeded } from '../../../../redux/actions/projects' +import { HotKeys } from 'react-hotkeys' +import { KeymapConfiguration } from '../../../../hotkeys' +import Head from 'next/head' +import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer' +import LoadingScreen from '../../../../components/app/map/LoadingScreen' +import MapStage from '../../../../containers/app/map/MapStage' +import ScaleIndicatorContainer from '../../../../containers/app/map/controls/ScaleIndicatorContainer' +import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent' +import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer' +import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer' + +/** + * Page that displays a datacenter topology. + */ +function Topology() { + const router = useRouter() + const { project: projectId, topology: topologyId } = router.query + + const project = useProject(projectId) + const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC' + + const dispatch = useDispatch() + useEffect(() => { + if (projectId) { + dispatch(openProjectSucceeded(projectId)) + } + }, [projectId, topologyId, dispatch]) + + const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') + + return ( + + + {title} + + + {topologyIsLoading ? ( +
+ +
+ ) : ( +
+ + + + + +
+ )} + + ) +} + +export default Topology -- cgit v1.2.3