refactor(web/ui): Fix compatibility with new API

This change updates the web interface in React to be compatible with the
new API written in Kotlin. Several changes have been made in the new API
to ensure consistency.

3 files changed, 109 insertions, 82 deletions

diff --git a/opendc-web/opendc-web-ui/src/data/experiments.js b/opendc-web/opendc-web-ui/src/data/experiments.js
index a76ea53f..ca8912a2 100644
--- a/opendc-web/opendc-web-ui/src/data/experiments.js
+++ b/opendc-web/opendc-web-ui/src/data/experiments.js
@@ -35,13 +35,13 @@ export function configureExperimentClient(queryClient, auth) {
 /**
  * Return the available traces to experiment with.
  */
-export function useTraces() {
-    return useQuery('traces')
+export function useTraces(options) {
+    return useQuery('traces', options)
 }
 
 /**
  * Return the available schedulers to experiment with.
  */
-export function useSchedulers() {
-    return useQuery('schedulers')
+export function useSchedulers(options) {
+    return useQuery('schedulers', options)
 }
diff --git a/opendc-web/opendc-web-ui/src/data/project.js b/opendc-web/opendc-web-ui/src/data/project.js
index 9dcd8532..b1db3da5 100644
--- a/opendc-web/opendc-web-ui/src/data/project.js
+++ b/opendc-web/opendc-web-ui/src/data/project.js
@@ -20,9 +20,9 @@
  * SOFTWARE.
  */
 
-import { useQuery } from 'react-query'
+import { useQuery, useMutation } from 'react-query'
 import { addProject, deleteProject, fetchProject, fetchProjects } from '../api/projects'
-import { addPortfolio, deletePortfolio, fetchPortfolio, fetchPortfoliosOfProject } from '../api/portfolios'
+import { addPortfolio, deletePortfolio, fetchPortfolio, fetchPortfolios } from '../api/portfolios'
 import { addScenario, deleteScenario, fetchScenario, fetchScenariosOfPortfolio } from '../api/scenarios'
 
 /**
@@ -37,79 +37,60 @@ export function configureProjectClient(queryClient, auth) {
         mutationFn: (data) => addProject(auth, data),
         onSuccess: async (result) => {
             queryClient.setQueryData('projects', (old = []) => [...old, result])
-            queryClient.setQueryData(['projects', result._id], result)
+            queryClient.setQueryData(['projects', result.id], result)
         },
     })
     queryClient.setMutationDefaults('deleteProject', {
         mutationFn: (id) => deleteProject(auth, id),
         onSuccess: async (result) => {
-            queryClient.setQueryData('projects', (old = []) => old.filter((project) => project._id !== result._id))
-            queryClient.removeQueries(['projects', result._id])
+            queryClient.setQueryData('projects', (old = []) => old.filter((project) => project.id !== result.id))
+            queryClient.removeQueries(['projects', result.id])
         },
     })
 
     queryClient.setQueryDefaults('portfolios', {
-        queryFn: ({ queryKey }) => fetchPortfolio(auth, queryKey[1]),
-    })
-    queryClient.setQueryDefaults('project-portfolios', {
-        queryFn: ({ queryKey }) => fetchPortfoliosOfProject(auth, queryKey[1]),
+        queryFn: ({ queryKey }) =>
+            queryKey.length === 2 ? fetchPortfolios(auth, queryKey[1]) : fetchPortfolio(auth, queryKey[1], queryKey[2]),
     })
     queryClient.setMutationDefaults('addPortfolio', {
-        mutationFn: (data) => addPortfolio(auth, data),
+        mutationFn: ({ projectId, ...data }) => addPortfolio(auth, projectId, data),
         onSuccess: async (result) => {
-            queryClient.setQueryData(['projects', result.projectId], (old) => ({
-                ...old,
-                portfolioIds: [...old.portfolioIds, result._id],
-            }))
-            queryClient.setQueryData(['project-portfolios', result.projectId], (old = []) => [...old, result])
-            queryClient.setQueryData(['portfolios', result._id], result)
+            queryClient.setQueryData(['portfolios', result.project.id], (old = []) => [...old, result])
+            queryClient.setQueryData(['portfolios', result.project.id, result.number], result)
         },
     })
     queryClient.setMutationDefaults('deletePortfolio', {
-        mutationFn: (id) => deletePortfolio(auth, id),
+        mutationFn: ({ projectId, number }) => deletePortfolio(auth, projectId, number),
         onSuccess: async (result) => {
-            queryClient.setQueryData(['projects', result.projectId], (old) => ({
-                ...old,
-                portfolioIds: old.portfolioIds.filter((id) => id !== result._id),
-            }))
-            queryClient.setQueryData(['project-portfolios', result.projectId], (old = []) =>
-                old.filter((portfolio) => portfolio._id !== result._id)
+            queryClient.setQueryData(['portfolios', result.project.id], (old = []) =>
+                old.filter((portfolio) => portfolio.id !== result.id)
             )
-            queryClient.removeQueries(['portfolios', result._id])
+            queryClient.removeQueries(['portfolios', result.project.id, result.number])
         },
     })
 
     queryClient.setQueryDefaults('scenarios', {
-        queryFn: ({ queryKey }) => fetchScenario(auth, queryKey[1]),
-    })
-    queryClient.setQueryDefaults('portfolio-scenarios', {
-        queryFn: ({ queryKey }) => fetchScenariosOfPortfolio(auth, queryKey[1]),
+        queryFn: ({ queryKey }) => fetchScenario(auth, queryKey[1], queryKey[2]),
     })
     queryClient.setMutationDefaults('addScenario', {
-        mutationFn: (data) => addScenario(auth, data),
+        mutationFn: ({ projectId, portfolioNumber, data }) => addScenario(auth, projectId, portfolioNumber, data),
         onSuccess: async (result) => {
             // Register updated scenario in cache
-            queryClient.setQueryData(['scenarios', result._id], result)
-            queryClient.setQueryData(['portfolio-scenarios', result.portfolioId], (old = []) => [...old, result])
-
-            // Add scenario id to portfolio
-            queryClient.setQueryData(['portfolios', result.portfolioId], (old) => ({
+            queryClient.setQueryData(['scenarios', result.project.id, result.id], result)
+            queryClient.setQueryData(['portfolios', result.project.id, result.portfolio.number], (old) => ({
                 ...old,
-                scenarioIds: [...old.scenarioIds, result._id],
+                scenarios: [...old.scenarios, result],
             }))
         },
     })
     queryClient.setMutationDefaults('deleteScenario', {
-        mutationFn: (id) => deleteScenario(auth, id),
+        mutationFn: ({ projectId, number }) => deleteScenario(auth, projectId, number),
         onSuccess: async (result) => {
-            queryClient.setQueryData(['portfolios', result.portfolioId], (old) => ({
+            queryClient.removeQueries(['scenarios', result.project.id, result.id])
+            queryClient.setQueryData(['portfolios', result.project.id, result.portfolio.number], (old) => ({
                 ...old,
-                scenarioIds: old.scenarioIds.filter((id) => id !== result._id),
+                scenarios: old?.scenarios?.filter((scenario) => scenario.id !== result.id),
             }))
-            queryClient.setQueryData(['portfolio-scenarios', result.portfolioId], (old = []) =>
-                old.filter((scenario) => scenario._id !== result._id)
-            )
-            queryClient.removeQueries(['scenarios', result._id])
         },
     })
 }
@@ -129,22 +110,57 @@ export function useProject(projectId, options = {}) {
 }
 
 /**
+ * Create a mutation for a new project.
+ */
+export function useNewProject() {
+    return useMutation('addProject')
+}
+
+/**
+ * Create a mutation for deleting a project.
+ */
+export function useDeleteProject() {
+    return useMutation('deleteProject')
+}
+
+/**
  * Return the portfolio with the specified identifier.
  */
-export function usePortfolio(portfolioId, options = {}) {
-    return useQuery(['portfolios', portfolioId], { enabled: !!portfolioId, ...options })
+export function usePortfolio(projectId, portfolioId, options = {}) {
+    return useQuery(['portfolios', projectId, portfolioId], { enabled: !!(projectId && portfolioId), ...options })
 }
 
 /**
  * Return the portfolios of the specified project.
  */
-export function useProjectPortfolios(projectId, options = {}) {
-    return useQuery(['project-portfolios', projectId], { enabled: !!projectId, ...options })
+export function usePortfolios(projectId, options = {}) {
+    return useQuery(['portfolios', projectId], { enabled: !!projectId, ...options })
+}
+
+/**
+ * Create a mutation for a new portfolio.
+ */
+export function useNewPortfolio() {
+    return useMutation('addPortfolio')
+}
+
+/**
+ * Create a mutation for deleting a portfolio.
+ */
+export function useDeletePortfolio() {
+    return useMutation('deletePortfolio')
+}
+
+/**
+ * Create a mutation for a new scenario.
+ */
+export function useNewScenario() {
+    return useMutation('addScenario')
 }
 
 /**
- * Return the scenarios of the specified portfolio.
+ * Create a mutation for deleting a scenario.
  */
-export function usePortfolioScenarios(portfolioId, options = {}) {
-    return useQuery(['portfolio-scenarios', portfolioId], { enabled: !!portfolioId, ...options })
+export function useDeleteScenario() {
+    return useMutation('deleteScenario')
 }
diff --git a/opendc-web/opendc-web-ui/src/data/topology.js b/opendc-web/opendc-web-ui/src/data/topology.js
index e068ed8e..cf098c56 100644
--- a/opendc-web/opendc-web-ui/src/data/topology.js
+++ b/opendc-web/opendc-web-ui/src/data/topology.js
@@ -20,58 +20,69 @@
  * SOFTWARE.
  */
 
-import { useQuery } from 'react-query'
-import { addTopology, deleteTopology, fetchTopologiesOfProject, fetchTopology, updateTopology } from '../api/topologies'
+import { useQuery, useMutation } from 'react-query'
+import { addTopology, deleteTopology, fetchTopologies, 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.setQueryDefaults('topologies', {
+        queryFn: ({ queryKey }) =>
+            queryKey.length === 2 ? fetchTopologies(auth, queryKey[1]) : fetchTopology(auth, queryKey[1], queryKey[2]),
     })
 
     queryClient.setMutationDefaults('addTopology', {
-        mutationFn: (data) => addTopology(auth, data),
-        onSuccess: async (result) => {
-            queryClient.setQueryData(['projects', result.projectId], (old) => ({
-                ...old,
-                topologyIds: [...old.topologyIds, result._id],
-            }))
-            queryClient.setQueryData(['project-topologies', result.projectId], (old = []) => [...old, result])
-            queryClient.setQueryData(['topologies', result._id], result)
+        mutationFn: ({ projectId, ...data }) => addTopology(auth, projectId, data),
+        onSuccess: (result) => {
+            queryClient.setQueryData(['topologies', result.project.id], (old = []) => [...old, result])
+            queryClient.setQueryData(['topologies', result.project.id, result.number], result)
         },
     })
     queryClient.setMutationDefaults('updateTopology', {
         mutationFn: (data) => updateTopology(auth, data),
-        onSuccess: (result) => queryClient.setQueryData(['topologies', result._id], result),
+        onSuccess: (result) => {
+            queryClient.setQueryData(['topologies', result.project.id], (old = []) =>
+                old.map((topology) => (topology.id === result.id ? result : topology))
+            )
+            queryClient.setQueryData(['topologies', result.project.id, result.number], result)
+        },
     })
     queryClient.setMutationDefaults('deleteTopology', {
-        mutationFn: (id) => deleteTopology(auth, id),
-        onSuccess: async (result) => {
-            queryClient.setQueryData(['projects', result.projectId], (old) => ({
-                ...old,
-                topologyIds: old.topologyIds.filter((id) => id !== result._id),
-            }))
-            queryClient.setQueryData(['project-topologies', result.projectId], (old = []) =>
-                old.filter((topology) => topology._id !== result._id)
+        mutationFn: ({ projectId, id }) => deleteTopology(auth, projectId, id),
+        onSuccess: (result) => {
+            queryClient.setQueryData(['topologies', result.project.id], (old = []) =>
+                old.filter((topology) => topology.id !== result.id)
             )
-            queryClient.removeQueries(['topologies', result._id])
+            queryClient.removeQueries(['topologies', result.project.id, result.number])
         },
     })
 }
 
 /**
- * Return the current active topology.
+ * Fetch the topology with the specified identifier for the specified project.
+ */
+export function useTopology(projectId, topologyId, options = {}) {
+    return useQuery(['topologies', projectId, topologyId], { enabled: !!(projectId && topologyId), ...options })
+}
+
+/**
+ * Fetch all topologies of the specified project.
+ */
+export function useTopologies(projectId, options = {}) {
+    return useQuery(['topologies', projectId], { enabled: !!projectId, ...options })
+}
+
+/**
+ * Create a mutation for a new topology.
  */
-export function useTopology(topologyId, options = {}) {
-    return useQuery(['topologies', topologyId], { enabled: !!topologyId, ...options })
+export function useNewTopology() {
+    return useMutation('addTopology')
 }
 
 /**
- * Return the topologies of the specified project.
+ * Create a mutation for deleting a topology.
  */
-export function useProjectTopologies(projectId, options = {}) {
-    return useQuery(['project-topologies', projectId], { enabled: !!projectId, ...options })
+export function useDeleteTopology() {
+    return useMutation('deleteTopology')
 }