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.

9 files changed, 54 insertions, 39 deletions

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 <PortfolioResultsComponent {...props} scenarios={scenarios} portfolio={portfolio} />
 }
 
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 })
 }
 
 /**
@@ -144,6 +146,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.
  */
 export function useActiveProjectId() {
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 })
 }