ui: Fetch scenarios and portfolios using React Query

6 files changed, 13 insertions, 234 deletions

diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/index.js b/opendc-web/opendc-web-ui/src/redux/sagas/index.js
index 939be691..74d9efb6 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/index.js
@@ -1,6 +1,5 @@
 import { takeEvery } from 'redux-saga/effects'
-import { ADD_PORTFOLIO, DELETE_PORTFOLIO, OPEN_PORTFOLIO_SUCCEEDED, UPDATE_PORTFOLIO } from '../actions/portfolios'
-import { ADD_PROJECT, DELETE_PROJECT, FETCH_PROJECTS, OPEN_PROJECT_SUCCEEDED } from '../actions/projects'
+import { OPEN_PROJECT_SUCCEEDED } from '../actions/projects'
 import {
     ADD_TILE,
     CANCEL_NEW_ROOM_CONSTRUCTION,
@@ -10,7 +9,6 @@ import {
 import { ADD_UNIT, DELETE_MACHINE, DELETE_UNIT } from '../actions/topology/machine'
 import { ADD_MACHINE, DELETE_RACK, EDIT_RACK_NAME } from '../actions/topology/rack'
 import { ADD_RACK_TO_TILE, DELETE_ROOM, EDIT_ROOM_NAME } from '../actions/topology/room'
-import { onAddPortfolio, onDeletePortfolio, onOpenPortfolioSucceeded, onUpdatePortfolio } from './portfolios'
 import { onOpenProjectSucceeded } from './projects'
 import {
     onAddMachine,
@@ -30,15 +28,11 @@ import {
     onStartNewRoomConstruction,
 } from './topology'
 import { ADD_TOPOLOGY, DELETE_TOPOLOGY } from '../actions/topologies'
-import { ADD_SCENARIO, DELETE_SCENARIO, OPEN_SCENARIO_SUCCEEDED, UPDATE_SCENARIO } from '../actions/scenarios'
-import { onAddScenario, onDeleteScenario, onOpenScenarioSucceeded, onUpdateScenario } from './scenarios'
 import { onAddPrefab } from './prefabs'
 import { ADD_PREFAB } from '../actions/prefabs'
 
 export default function* rootSaga() {
     yield takeEvery(OPEN_PROJECT_SUCCEEDED, onOpenProjectSucceeded)
-    yield takeEvery(OPEN_PORTFOLIO_SUCCEEDED, onOpenPortfolioSucceeded)
-    yield takeEvery(OPEN_SCENARIO_SUCCEEDED, onOpenScenarioSucceeded)
 
     yield takeEvery(ADD_TOPOLOGY, onAddTopology)
     yield takeEvery(DELETE_TOPOLOGY, onDeleteTopology)
@@ -56,13 +50,5 @@ export default function* rootSaga() {
     yield takeEvery(ADD_UNIT, onAddUnit)
     yield takeEvery(DELETE_UNIT, onDeleteUnit)
 
-    yield takeEvery(ADD_PORTFOLIO, onAddPortfolio)
-    yield takeEvery(UPDATE_PORTFOLIO, onUpdatePortfolio)
-    yield takeEvery(DELETE_PORTFOLIO, onDeletePortfolio)
-
-    yield takeEvery(ADD_SCENARIO, onAddScenario)
-    yield takeEvery(UPDATE_SCENARIO, onUpdateScenario)
-    yield takeEvery(DELETE_SCENARIO, onDeleteScenario)
-
     yield takeEvery(ADD_PREFAB, onAddPrefab)
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/objects.js b/opendc-web/opendc-web-ui/src/redux/sagas/objects.js
index fe826014..88f71fe4 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/objects.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/objects.js
@@ -1,7 +1,5 @@
 import { call, put, select, getContext } from 'redux-saga/effects'
 import { addToStore } from '../actions/objects'
-import { fetchSchedulers } from '../../api/schedulers'
-import { fetchTraces } from '../../api/traces'
 import { getTopology, updateTopology } from '../../api/topologies'
 import { uuid } from 'uuidv4'
 
@@ -21,24 +19,9 @@ export const OBJECT_SELECTORS = {
     topology: (state) => state.objects.topology,
 }
 
-function* fetchAndStoreObject(objectType, id, apiCall) {
-    const objectStore = yield select(OBJECT_SELECTORS[objectType])
-    let object = objectStore[id]
-    if (!object) {
-        object = yield apiCall
-        yield put(addToStore(objectType, object))
-    }
-    return object
-}
-
-function* fetchAndStoreObjects(objectType, apiCall) {
-    const objects = yield apiCall
-    for (let object of objects) {
-        yield put(addToStore(objectType, object))
-    }
-    return objects
-}
-
+/**
+ * Fetches and normalizes the topology with the specified identifier.
+ */
 export const fetchAndStoreTopology = function* (id) {
     const topologyStore = yield select(OBJECT_SELECTORS['topology'])
     const roomStore = yield select(OBJECT_SELECTORS['room'])
@@ -135,12 +118,15 @@ const generateIdIfNotPresent = (obj) => {
 }
 
 export const updateTopologyOnServer = function* (id) {
-    const topology = yield getTopologyAsObject(id, true)
+    const topology = yield denormalizeTopology(id, true)
     const auth = yield getContext('auth')
     yield call(updateTopology, auth, topology)
 }
 
-export const getTopologyAsObject = function* (id, keepIds) {
+/**
+ * Denormalizes the topology representation in order to be stored on the server.
+ */
+export const denormalizeTopology = function* (id, keepIds) {
     const topologyStore = yield select(OBJECT_SELECTORS['topology'])
     const rooms = yield getAllRooms(topologyStore[id].roomIds, keepIds)
     return {
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/portfolios.js b/opendc-web/opendc-web-ui/src/redux/sagas/portfolios.js
deleted file mode 100644
index 68956225..00000000
--- a/opendc-web/opendc-web-ui/src/redux/sagas/portfolios.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { call, put, select, delay, getContext } from 'redux-saga/effects'
-import { addToStore } from '../actions/objects'
-import { addPortfolio, deletePortfolio, getPortfolio, updatePortfolio } from '../../api/portfolios'
-import { fetchProject } from '../../api/projects'
-import { getScenario } from '../../api/scenarios'
-
-export function* onOpenPortfolioSucceeded(action) {
-    try {
-        const auth = yield getContext('auth')
-        const queryClient = yield getContext('queryClient')
-        const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
-        )
-        yield fetchAndStoreAllTopologiesOfProject(action.projectId)
-        yield fetchPortfoliosOfProject(project)
-
-        yield watchForPortfolioResults(action.portfolioId)
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* watchForPortfolioResults(portfolioId) {
-    try {
-        let unfinishedScenarios = yield getCurrentUnfinishedScenarios(portfolioId)
-
-        while (unfinishedScenarios.length > 0) {
-            yield delay(3000)
-            yield fetchPortfolioWithScenarios(portfolioId)
-            unfinishedScenarios = yield getCurrentUnfinishedScenarios(portfolioId)
-        }
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* getCurrentUnfinishedScenarios(portfolioId) {
-    try {
-        if (!portfolioId) {
-            return []
-        }
-
-        const scenarioIds = yield select((state) => state.objects.portfolio[portfolioId].scenarioIds)
-        const scenarioObjects = yield select((state) => state.objects.scenario)
-        const scenarios = scenarioIds.map((s) => scenarioObjects[s])
-        return scenarios.filter((s) => !s || s.simulation.state === 'QUEUED' || s.simulation.state === 'RUNNING')
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* fetchPortfoliosOfProject(project) {
-    try {
-        for (const i in project.portfolioIds) {
-            yield fetchPortfolioWithScenarios(project.portfolioIds[i])
-        }
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* fetchPortfolioWithScenarios(portfolioId) {
-    try {
-        const auth = yield getContext('auth')
-        const portfolio = yield call(getPortfolio, auth, portfolioId)
-        yield put(addToStore('portfolio', portfolio))
-
-        for (let i in portfolio.scenarioIds) {
-            const scenario = yield call(getScenario, auth, portfolio.scenarioIds[i])
-            yield put(addToStore('scenario', scenario))
-        }
-        return portfolio
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onAddPortfolio(action) {
-    try {
-        const { projectId } = action
-        const auth = yield getContext('auth')
-        const portfolio = yield call(
-            addPortfolio,
-            auth,
-            projectId,
-            Object.assign({}, action.portfolio, {
-                projectId: projectId,
-                scenarioIds: [],
-            })
-        )
-        yield put(addToStore('portfolio', portfolio))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onUpdatePortfolio(action) {
-    try {
-        const auth = yield getContext('auth')
-        const portfolio = yield call(updatePortfolio, auth, action.portfolio._id, action.portfolio)
-        yield put(addToStore('portfolio', portfolio))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onDeletePortfolio(action) {
-    try {
-        const auth = yield getContext('auth')
-        yield call(deletePortfolio, auth, action.id)
-    } catch (error) {
-        console.error(error)
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
index 6dc3c682..5809d4d2 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
@@ -1,18 +1,8 @@
-import { call, getContext } from 'redux-saga/effects'
 import { fetchAndStoreAllTopologiesOfProject } from './topology'
-import { fetchPortfoliosOfProject } from './portfolios'
-import { fetchProject } from '../../api/projects'
 
 export function* onOpenProjectSucceeded(action) {
     try {
-        const auth = yield getContext('auth')
-        const queryClient = yield getContext('queryClient')
-        const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.id}`, () => fetchProject(auth, action.id))
-        )
-
         yield fetchAndStoreAllTopologiesOfProject(action.id, true)
-        yield fetchPortfoliosOfProject(project)
     } catch (error) {
         console.error(error)
     }
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/scenarios.js b/opendc-web/opendc-web-ui/src/redux/sagas/scenarios.js
deleted file mode 100644
index 10ab3547..00000000
--- a/opendc-web/opendc-web-ui/src/redux/sagas/scenarios.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { call, put, select, getContext } from 'redux-saga/effects'
-import { addPropToStoreObject, addToStore } from '../actions/objects'
-import { fetchProject } from '../../api/projects'
-import { fetchAndStoreAllTopologiesOfProject } from './topology'
-import { addScenario, deleteScenario, updateScenario } from '../../api/scenarios'
-import { fetchPortfolioWithScenarios, watchForPortfolioResults } from './portfolios'
-
-export function* onOpenScenarioSucceeded(action) {
-    try {
-        const auth = yield getContext('auth')
-        const queryClient = yield getContext('queryClient')
-        const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
-        )
-        yield put(addToStore('project', project))
-        yield fetchAndStoreAllTopologiesOfProject(project._id)
-        yield fetchPortfolioWithScenarios(action.portfolioId)
-
-        // TODO Fetch scenario-specific metrics
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onAddScenario(action) {
-    try {
-        const auth = yield getContext('auth')
-        const scenario = yield call(addScenario, auth, action.scenario.portfolioId, action.scenario)
-        yield put(addToStore('scenario', scenario))
-
-        const scenarioIds = yield select((state) => state.objects.portfolio[action.scenario.portfolioId].scenarioIds)
-        yield put(
-            addPropToStoreObject('portfolio', action.scenario.portfolioId, {
-                scenarioIds: scenarioIds.concat([scenario._id]),
-            })
-        )
-        yield watchForPortfolioResults(action.scenario.portfolioId)
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onUpdateScenario(action) {
-    try {
-        const auth = yield getContext('auth')
-        const scenario = yield call(updateScenario, auth, action.scenario._id, action.scenario)
-        yield put(addToStore('scenario', scenario))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onDeleteScenario(action) {
-    try {
-        const auth = yield getContext('auth')
-        const scenario = yield select((state) => state.objects.scenario[action.id])
-        yield call(deleteScenario, auth, action.id)
-
-        const scenarioIds = yield select((state) => state.objects.portfolio[scenario.portfolioId].scenarioIds)
-
-        yield put(
-            addPropToStoreObject('scenario', scenario.portfolioId, {
-                scenarioIds: scenarioIds.filter((id) => id !== action.id),
-            })
-        )
-    } catch (error) {
-        console.error(error)
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
index 3f41e1d4..efa125c6 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -16,7 +16,7 @@ import {
     DEFAULT_RACK_SLOT_CAPACITY,
     MAX_NUM_UNITS_PER_MACHINE,
 } from '../../components/app/map/MapConstants'
-import { fetchAndStoreTopology, getTopologyAsObject, updateTopologyOnServer } from './objects'
+import { fetchAndStoreTopology, denormalizeTopology, updateTopologyOnServer } from './objects'
 import { uuid } from 'uuidv4'
 import { addTopology, deleteTopology } from '../../api/topologies'
 import { fetchProject } from '../../api/projects'
@@ -26,7 +26,7 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa
         const auth = yield getContext('auth')
         const queryClient = yield getContext('queryClient')
         const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${projectId}`, () => fetchProject(auth, projectId))
+            queryClient.fetchQuery(['projects', projectId], () => fetchProject(auth, projectId))
         )
 
         for (let i in project.topologyIds) {
@@ -47,7 +47,7 @@ export function* onAddTopology(action) {
 
         let topologyToBeCreated
         if (duplicateId) {
-            topologyToBeCreated = yield getTopologyAsObject(duplicateId, false)
+            topologyToBeCreated = yield denormalizeTopology(duplicateId, false)
             topologyToBeCreated = { ...topologyToBeCreated, name }
         } else {
             topologyToBeCreated = { name: action.name, rooms: [] }
@@ -67,7 +67,7 @@ export function* onDeleteTopology(action) {
         const auth = yield getContext('auth')
         const queryClient = yield getContext('queryClient')
         const project = yield call(() =>
-            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
+            queryClient.fetchQuery(['projects', action.projectId], () => fetchProject(auth, action.projectId))
         )
         const topologyIds = project?.topologyIds ?? []