From 2c8d675c2cf140eac05988065a9d20fd2773399a Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 8 Jul 2021 13:36:39 +0200 Subject: ui: Combine fetching of project relations This change updates the OpenDC frontend to combine the fetching of project relations. This means that for a single project, we make only one additional request to retrieve all its topologies. --- .../containers/app/results/PortfolioResultsContainer.js | 7 ++----- .../app/sidebars/project/PortfolioListContainer.js | 7 ++----- .../app/sidebars/project/ScenarioListContainer.js | 17 ++++++++--------- .../app/sidebars/project/TopologyListContainer.js | 10 ++++------ 4 files changed, 16 insertions(+), 25 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/containers/app') diff --git a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js index f9a380cb..a75f15ae 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js @@ -1,16 +1,13 @@ import React from 'react' import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent' import { useRouter } from 'next/router' -import { usePortfolio, useScenarios } from '../../../data/project' +import { usePortfolio, usePortfolioScenarios } from '../../../data/project' const PortfolioResultsContainer = (props) => { const router = useRouter() const { portfolio: currentPortfolioId } = router.query const { data: portfolio } = usePortfolio(currentPortfolioId) - const scenarios = useScenarios(portfolio?.scenarioIds ?? []) - .filter((res) => res.data) - .map((res) => res.data) - + const scenarios = usePortfolioScenarios(currentPortfolioId).data ?? [] return } 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 1fb88253..60ac666c 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 @@ -2,16 +2,13 @@ import React, { useState } from 'react' import { useRouter } from 'next/router' import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent' import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent' -import { usePortfolios, useProject } from '../../../../data/project' +import { useProjectPortfolios } from '../../../../data/project' import { useMutation } from 'react-query' const PortfolioListContainer = () => { const router = useRouter() const { project: currentProjectId, portfolio: currentPortfolioId } = router.query - const { data: currentProject } = useProject(currentProjectId) - const portfolios = usePortfolios(currentProject?.portfolioIds ?? []) - .filter((res) => res.data) - .map((res) => res.data) + const portfolios = useProjectPortfolios(currentProjectId).data ?? [] const { mutate: addPortfolio } = useMutation('addPortfolio') const { mutateAsync: deletePortfolio } = useMutation('deletePortfolio') 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 fd55582f..3b68df38 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 @@ -2,20 +2,19 @@ import PropTypes from 'prop-types' import React, { useState } from 'react' import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent' import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent' -import { useTopologies } from '../../../../data/topology' -import { usePortfolio, useProject, useScenarios } from '../../../../data/project' +import { useProjectTopologies } from '../../../../data/topology' +import { usePortfolio, usePortfolioScenarios } from '../../../../data/project' import { useSchedulers, useTraces } from '../../../../data/experiments' import { useMutation } from 'react-query' const ScenarioListContainer = ({ portfolioId }) => { const { data: portfolio } = usePortfolio(portfolioId) - const { data: project } = useProject(portfolio?.projectId) - const scenarios = useScenarios(portfolio?.scenarioIds ?? []) - .filter((res) => res.data) - .map((res) => res.data) - const topologies = useTopologies(project?.topologyIds ?? []) - .filter((res) => res.data) - .map((res) => ({ _id: res.data._id, name: res.data.name })) + const scenarios = usePortfolioScenarios(portfolioId).data ?? [] + const topologies = + useProjectTopologies(portfolio?.projectId).data?.map((topology) => ({ + _id: topology._id, + name: topology.name, + })) ?? [] const traces = useTraces().data ?? [] const schedulers = useSchedulers().data ?? [] 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 55eab23a..a2244a30 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 @@ -5,18 +5,16 @@ import { setCurrentTopology } from '../../../../redux/actions/topology/building' import { useRouter } from 'next/router' import { addTopology } from '../../../../redux/actions/topologies' import NewTopologyModalComponent from '../../../../components/modals/custom-components/NewTopologyModalComponent' -import { useActiveTopology, useTopologies } from '../../../../data/topology' -import { useProject } from '../../../../data/project' +import { useActiveTopology, useProjectTopologies } from '../../../../data/topology' import { useMutation } from 'react-query' const TopologyListContainer = () => { const dispatch = useDispatch() const router = useRouter() const { project: currentProjectId } = router.query - const { data: currentProject } = useProject(currentProjectId) - const topologies = useTopologies(currentProject?.topologyIds ?? []) - .filter((res) => res.data) - .map((res) => ({ _id: res.data._id, name: res.data.name })) + const topologies = + useProjectTopologies(currentProjectId).data?.map((topology) => ({ _id: topology._id, name: topology.name })) ?? + [] const currentTopologyId = useActiveTopology()?._id const [isVisible, setVisible] = useState(false) -- cgit v1.2.3