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. --- opendc-web/opendc-web-ui/src/api/portfolios.js | 4 ++++ opendc-web/opendc-web-ui/src/api/scenarios.js | 4 ++++ opendc-web/opendc-web-ui/src/api/topologies.js | 4 ++++ .../app/results/PortfolioResultsContainer.js | 7 ++---- .../app/sidebars/project/PortfolioListContainer.js | 7 ++---- .../app/sidebars/project/ScenarioListContainer.js | 17 +++++++------- .../app/sidebars/project/TopologyListContainer.js | 10 ++++---- opendc-web/opendc-web-ui/src/data/project.js | 27 ++++++++++++++-------- opendc-web/opendc-web-ui/src/data/topology.js | 13 +++++++---- 9 files changed, 54 insertions(+), 39 deletions(-) (limited to 'opendc-web/opendc-web-ui/src') diff --git a/opendc-web/opendc-web-ui/src/api/portfolios.js b/opendc-web/opendc-web-ui/src/api/portfolios.js index 36709b36..82ac0ced 100644 --- a/opendc-web/opendc-web-ui/src/api/portfolios.js +++ b/opendc-web/opendc-web-ui/src/api/portfolios.js @@ -26,6 +26,10 @@ export function fetchPortfolio(auth, portfolioId) { return request(auth, `portfolios/${portfolioId}`) } +export function fetchPortfoliosOfProject(auth, projectId) { + return request(auth, `projects/${projectId}/portfolios`) +} + export function addPortfolio(auth, portfolio) { return request(auth, `projects/${portfolio.projectId}/portfolios`, 'POST', { portfolio }) } diff --git a/opendc-web/opendc-web-ui/src/api/scenarios.js b/opendc-web/opendc-web-ui/src/api/scenarios.js index 3a7c7e6f..88516caa 100644 --- a/opendc-web/opendc-web-ui/src/api/scenarios.js +++ b/opendc-web/opendc-web-ui/src/api/scenarios.js @@ -26,6 +26,10 @@ export function fetchScenario(auth, scenarioId) { return request(auth, `scenarios/${scenarioId}`) } +export function fetchScenariosOfPortfolio(auth, portfolioId) { + return request(auth, `portfolios/${portfolioId}/scenarios`) +} + export function addScenario(auth, scenario) { return request(auth, `portfolios/${scenario.portfolioId}/scenarios`, 'POST', { scenario }) } diff --git a/opendc-web/opendc-web-ui/src/api/topologies.js b/opendc-web/opendc-web-ui/src/api/topologies.js index 74fc1977..0b8864e0 100644 --- a/opendc-web/opendc-web-ui/src/api/topologies.js +++ b/opendc-web/opendc-web-ui/src/api/topologies.js @@ -26,6 +26,10 @@ export function fetchTopology(auth, topologyId) { return request(auth, `topologies/${topologyId}`) } +export function fetchTopologiesOfProject(auth, projectId) { + return request(auth, `projects/${projectId}/topologies`) +} + export function addTopology(auth, topology) { return request(auth, `projects/${topology.projectId}/topologies`, 'POST', { topology }) } 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) diff --git a/opendc-web/opendc-web-ui/src/data/project.js b/opendc-web/opendc-web-ui/src/data/project.js index 256203a3..9bdcfb93 100644 --- a/opendc-web/opendc-web-ui/src/data/project.js +++ b/opendc-web/opendc-web-ui/src/data/project.js @@ -23,8 +23,8 @@ import { useQueries, useQuery } from 'react-query' import { addProject, deleteProject, fetchProject, fetchProjects } from '../api/projects' import { useRouter } from 'next/router' -import { addPortfolio, deletePortfolio, fetchPortfolio } from '../api/portfolios' -import { addScenario, deleteScenario, fetchScenario } from '../api/scenarios' +import { addPortfolio, deletePortfolio, fetchPortfolio, fetchPortfoliosOfProject } from '../api/portfolios' +import { addScenario, deleteScenario, fetchScenario, fetchScenariosOfPortfolio } from '../api/scenarios' /** * Configure the query defaults for the project endpoints. @@ -51,6 +51,9 @@ export function configureProjectClient(queryClient, auth) { queryClient.setQueryDefaults('portfolios', { queryFn: ({ queryKey }) => fetchPortfolio(auth, queryKey[1]), }) + queryClient.setQueryDefaults('project-portfolios', { + queryFn: ({ queryKey }) => fetchPortfoliosOfProject(auth, queryKey[1]), + }) queryClient.setMutationDefaults('addPortfolio', { mutationFn: (data) => addPortfolio(auth, data), onSuccess: async (result) => { @@ -75,6 +78,9 @@ export function configureProjectClient(queryClient, auth) { queryClient.setQueryDefaults('scenarios', { queryFn: ({ queryKey }) => fetchScenario(auth, queryKey[1]), }) + queryClient.setQueryDefaults('portfolio-scenarios', { + queryFn: ({ queryKey }) => fetchScenariosOfPortfolio(auth, queryKey[1]), + }) queryClient.setMutationDefaults('addScenario', { mutationFn: (data) => addScenario(auth, data), onSuccess: async (result) => { @@ -122,14 +128,10 @@ export function usePortfolio(portfolioId) { } /** - * Return the portfolios for the specified project id. + * Return the portfolios of the specified project. */ -export function usePortfolios(portfolioIds) { - return useQueries( - portfolioIds.map((portfolioId) => ({ - queryKey: ['portfolios', portfolioId], - })) - ) +export function useProjectPortfolios(projectId) { + return useQuery(['project-portfolios', projectId], { enabled: !!projectId }) } /** @@ -143,6 +145,13 @@ export function useScenarios(scenarioIds) { ) } +/** + * Return the scenarios of the specified portfolio. + */ +export function usePortfolioScenarios(portfolioId) { + return useQuery(['portfolio-scenarios', portfolioId], { enabled: !!portfolioId }) +} + /** * Return the current active project identifier. */ diff --git a/opendc-web/opendc-web-ui/src/data/topology.js b/opendc-web/opendc-web-ui/src/data/topology.js index 92911a70..8db75877 100644 --- a/opendc-web/opendc-web-ui/src/data/topology.js +++ b/opendc-web/opendc-web-ui/src/data/topology.js @@ -21,14 +21,17 @@ */ import { useSelector } from 'react-redux' -import { useQueries } from 'react-query' -import { addTopology, deleteTopology, fetchTopology, updateTopology } from '../api/topologies' +import { useQueries, useQuery } from 'react-query' +import { addTopology, deleteTopology, fetchTopologiesOfProject, fetchTopology, updateTopology } from '../api/topologies' /** * Configure the query defaults for the topology endpoints. */ export function configureTopologyClient(queryClient, auth) { queryClient.setQueryDefaults('topologies', { queryFn: ({ queryKey }) => fetchTopology(auth, queryKey[1]) }) + queryClient.setQueryDefaults('project-topologies', { + queryFn: ({ queryKey }) => fetchTopologiesOfProject(auth, queryKey[1]), + }) queryClient.setMutationDefaults('addTopology', { mutationFn: (data) => addTopology(auth, data), @@ -64,8 +67,8 @@ export function useActiveTopology() { } /** - * Return the scenarios with the specified identifiers. + * Return the topologies of the specified project. */ -export function useTopologies(topologyIds) { - return useQueries(topologyIds.map((topologyId) => ({ queryKey: ['topologies', topologyId] }))) +export function useProjectTopologies(projectId) { + return useQuery(['project-topologies', projectId], { enabled: !!projectId }) } -- cgit v1.2.3