From aa788a3ad18badfac8beaabdaffc88b9e52f9306 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 15:07:11 +0200 Subject: ui: Remove current ids state from Redux This change removes the current active identifiers from the Redux state. Instead, we use the router query to track the active project, portfolio and topology. --- .../opendc-web-ui/src/redux/sagas/topology.js | 28 ++++++++-------------- 1 file changed, 10 insertions(+), 18 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/sagas/topology.js') 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 e5fd3d39..4f7bc8db 100644 --- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js +++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js @@ -38,31 +38,23 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa export function* onAddTopology(action) { try { - const currentProjectId = yield select((state) => state.currentProjectId) + const { projectId, duplicateId, name } = action let topologyToBeCreated - if (action.duplicateId) { - topologyToBeCreated = yield getTopologyAsObject(action.duplicateId, false) - topologyToBeCreated = Object.assign({}, topologyToBeCreated, { - name: action.name, - }) + if (duplicateId) { + topologyToBeCreated = yield getTopologyAsObject(duplicateId, false) + topologyToBeCreated = { ...topologyToBeCreated, name } } else { topologyToBeCreated = { name: action.name, rooms: [] } } const auth = yield getContext('auth') - const topology = yield call( - addTopology, - auth, - Object.assign({}, topologyToBeCreated, { - projectId: currentProjectId, - }) - ) + const topology = yield call(addTopology, auth, { ...topologyToBeCreated, projectId }) yield fetchAndStoreTopology(topology._id) - const topologyIds = yield select((state) => state.objects.project[currentProjectId].topologyIds) + const topologyIds = yield select((state) => state.objects.project[projectId].topologyIds) yield put( - addPropToStoreObject('project', currentProjectId, { + addPropToStoreObject('project', projectId, { topologyIds: topologyIds.concat([topology._id]), }) ) @@ -74,8 +66,8 @@ export function* onAddTopology(action) { export function* onDeleteTopology(action) { try { - const currentProjectId = yield select((state) => state.currentProjectId) - const topologyIds = yield select((state) => state.objects.project[currentProjectId].topologyIds) + const topology = yield select((state) => state.objects.topologies[action.id]) + const topologyIds = yield select((state) => state.objects.project[topology.projectId].topologyIds) const currentTopologyId = yield select((state) => state.currentTopologyId) if (currentTopologyId === action.id) { yield put(setCurrentTopology(topologyIds.filter((t) => t !== action.id)[0])) @@ -85,7 +77,7 @@ export function* onDeleteTopology(action) { yield call(deleteTopology, auth, action.id) yield put( - addPropToStoreObject('project', currentProjectId, { + addPropToStoreObject('project', topology.projectId, { topologyIds: topologyIds.filter((id) => id !== action.id), }) ) -- cgit v1.2.3 From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 16:27:49 +0200 Subject: ui: Migrate project APIs to React Query This change updates the OpenDC frontend to use React Query for fetching and mutating project data. Previously, this state was tracked and synchronized via Redux. Migrating to React Query greatly simplifies the state synchronization logic necessary in the frontend. --- .../opendc-web-ui/src/redux/sagas/topology.js | 30 ++++++++++------------ 1 file changed, 13 insertions(+), 17 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/sagas/topology.js') 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 4f7bc8db..3f41e1d4 100644 --- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js +++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js @@ -19,10 +19,15 @@ import { import { fetchAndStoreTopology, getTopologyAsObject, updateTopologyOnServer } from './objects' import { uuid } from 'uuidv4' import { addTopology, deleteTopology } from '../../api/topologies' +import { fetchProject } from '../../api/projects' export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = false) { try { - const project = yield select((state) => state.objects.project[projectId]) + const auth = yield getContext('auth') + const queryClient = yield getContext('queryClient') + const project = yield call(() => + queryClient.fetchQuery(`projects/${projectId}`, () => fetchProject(auth, projectId)) + ) for (let i in project.topologyIds) { yield fetchAndStoreTopology(project.topologyIds[i]) @@ -51,13 +56,6 @@ export function* onAddTopology(action) { const auth = yield getContext('auth') const topology = yield call(addTopology, auth, { ...topologyToBeCreated, projectId }) yield fetchAndStoreTopology(topology._id) - - const topologyIds = yield select((state) => state.objects.project[projectId].topologyIds) - yield put( - addPropToStoreObject('project', projectId, { - topologyIds: topologyIds.concat([topology._id]), - }) - ) yield put(setCurrentTopology(topology._id)) } catch (error) { console.error(error) @@ -66,21 +64,19 @@ export function* onAddTopology(action) { export function* onDeleteTopology(action) { try { - const topology = yield select((state) => state.objects.topologies[action.id]) - const topologyIds = yield select((state) => state.objects.project[topology.projectId].topologyIds) + const auth = yield getContext('auth') + const queryClient = yield getContext('queryClient') + const project = yield call(() => + queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId)) + ) + const topologyIds = project?.topologyIds ?? [] + const currentTopologyId = yield select((state) => state.currentTopologyId) if (currentTopologyId === action.id) { yield put(setCurrentTopology(topologyIds.filter((t) => t !== action.id)[0])) } - const auth = yield getContext('auth') yield call(deleteTopology, auth, action.id) - - yield put( - addPropToStoreObject('project', topology.projectId, { - topologyIds: topologyIds.filter((id) => id !== action.id), - }) - ) } catch (error) { console.error(error) } -- cgit v1.2.3 From 9c8a987556d0fb0cdf0eb67e0c191a8dcc5593b9 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 17:30:15 +0200 Subject: ui: Fetch scenarios and portfolios using React Query --- opendc-web/opendc-web-ui/src/redux/sagas/topology.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/sagas/topology.js') 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 ?? [] -- cgit v1.2.3 From 02a2f0f89cb1f39a5f8856bca1971a4e1b12374f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 20:13:30 +0200 Subject: ui: Use React Query defaults to reduce duplication --- .../opendc-web-ui/src/redux/sagas/topology.js | 28 ++-------------------- 1 file changed, 2 insertions(+), 26 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/sagas/topology.js') 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 efa125c6..0ed40131 100644 --- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js +++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js @@ -18,16 +18,12 @@ import { } from '../../components/app/map/MapConstants' import { fetchAndStoreTopology, denormalizeTopology, updateTopologyOnServer } from './objects' import { uuid } from 'uuidv4' -import { addTopology, deleteTopology } from '../../api/topologies' -import { fetchProject } from '../../api/projects' +import { addTopology } from '../../api/topologies' export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = false) { try { - const auth = yield getContext('auth') const queryClient = yield getContext('queryClient') - const project = yield call(() => - queryClient.fetchQuery(['projects', projectId], () => fetchProject(auth, projectId)) - ) + const project = yield call(() => queryClient.fetchQuery(['projects', projectId])) for (let i in project.topologyIds) { yield fetchAndStoreTopology(project.topologyIds[i]) @@ -62,26 +58,6 @@ export function* onAddTopology(action) { } } -export function* onDeleteTopology(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)) - ) - const topologyIds = project?.topologyIds ?? [] - - const currentTopologyId = yield select((state) => state.currentTopologyId) - if (currentTopologyId === action.id) { - yield put(setCurrentTopology(topologyIds.filter((t) => t !== action.id)[0])) - } - - yield call(deleteTopology, auth, action.id) - } catch (error) { - console.error(error) - } -} - export function* onStartNewRoomConstruction() { try { const topologyId = yield select((state) => state.currentTopologyId) -- cgit v1.2.3 From 29196842447d841d2e21462adcfc8c2ed1d851ad Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 8 Jul 2021 13:15:28 +0200 Subject: ui: Simplify normalization of topology This change updates the OpenDC frontend to use the normalizr library for normalizing the user topology. --- .../opendc-web-ui/src/redux/sagas/topology.js | 74 ++++++++++++---------- 1 file changed, 39 insertions(+), 35 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/sagas/topology.js') 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 0ed40131..5d9154fd 100644 --- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js +++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js @@ -25,8 +25,8 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa const queryClient = yield getContext('queryClient') const project = yield call(() => queryClient.fetchQuery(['projects', projectId])) - for (let i in project.topologyIds) { - yield fetchAndStoreTopology(project.topologyIds[i]) + for (const id of project.topologyIds) { + yield fetchAndStoreTopology(id) } if (setTopology) { @@ -43,8 +43,9 @@ export function* onAddTopology(action) { let topologyToBeCreated if (duplicateId) { - topologyToBeCreated = yield denormalizeTopology(duplicateId, false) + topologyToBeCreated = yield denormalizeTopology(duplicateId) topologyToBeCreated = { ...topologyToBeCreated, name } + delete topologyToBeCreated._id } else { topologyToBeCreated = { name: action.name, rooms: [] } } @@ -65,10 +66,10 @@ export function* onStartNewRoomConstruction() { _id: uuid(), name: 'Room', topologyId, - tileIds: [], + tiles: [], } yield put(addToStore('room', room)) - yield put(addIdToStoreObjectListProp('topology', topologyId, 'roomIds', room._id)) + yield put(addIdToStoreObjectListProp('topology', topologyId, 'rooms', room._id)) yield updateTopologyOnServer(topologyId) yield put(startNewRoomConstructionSucceeded(room._id)) } catch (error) { @@ -80,7 +81,7 @@ export function* onCancelNewRoomConstruction() { try { const topologyId = yield select((state) => state.currentTopologyId) const roomId = yield select((state) => state.construction.currentRoomInConstruction) - yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'roomIds', roomId)) + yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'rooms', roomId)) // TODO remove room from store, too yield updateTopologyOnServer(topologyId) yield put(cancelNewRoomConstructionSucceeded()) @@ -100,7 +101,7 @@ export function* onAddTile(action) { positionY: action.positionY, } yield put(addToStore('tile', tile)) - yield put(addIdToStoreObjectListProp('room', roomId, 'tileIds', tile._id)) + yield put(addIdToStoreObjectListProp('room', roomId, 'tiles', tile._id)) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) @@ -111,7 +112,7 @@ export function* onDeleteTile(action) { try { const topologyId = yield select((state) => state.currentTopologyId) const roomId = yield select((state) => state.construction.currentRoomInConstruction) - yield put(removeIdFromStoreObjectListProp('room', roomId, 'tileIds', action.tileId)) + yield put(removeIdFromStoreObjectListProp('room', roomId, 'tiles', action.tileId)) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) @@ -136,7 +137,7 @@ export function* onDeleteRoom() { const topologyId = yield select((state) => state.currentTopologyId) const roomId = yield select((state) => state.interactionLevel.roomId) yield put(goDownOneInteractionLevel()) - yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'roomIds', roomId)) + yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'rooms', roomId)) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) @@ -146,7 +147,7 @@ export function* onDeleteRoom() { export function* onEditRackName(action) { try { const topologyId = yield select((state) => state.currentTopologyId) - const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rackId) + const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack) const rack = Object.assign({}, yield select((state) => state.objects.rack[rackId])) rack.name = action.name yield put(addPropToStoreObject('rack', rackId, { name: action.name })) @@ -161,7 +162,7 @@ export function* onDeleteRack() { const topologyId = yield select((state) => state.currentTopologyId) const tileId = yield select((state) => state.interactionLevel.tileId) yield put(goDownOneInteractionLevel()) - yield put(addPropToStoreObject('tile', tileId, { rackId: undefined })) + yield put(addPropToStoreObject('tile', tileId, { rack: undefined })) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) @@ -176,10 +177,10 @@ export function* onAddRackToTile(action) { name: 'Rack', capacity: DEFAULT_RACK_SLOT_CAPACITY, powerCapacityW: DEFAULT_RACK_POWER_CAPACITY, + machines: [], } - rack.machineIds = new Array(rack.capacity).fill(null) yield put(addToStore('rack', rack)) - yield put(addPropToStoreObject('tile', action.tileId, { rackId: rack._id })) + yield put(addPropToStoreObject('tile', action.tileId, { rack: rack._id })) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) @@ -189,23 +190,21 @@ export function* onAddRackToTile(action) { export function* onAddMachine(action) { try { const topologyId = yield select((state) => state.currentTopologyId) - const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rackId) + const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack) const rack = yield select((state) => state.objects.rack[rackId]) const machine = { _id: uuid(), - rackId, position: action.position, - cpuIds: [], - gpuIds: [], - memoryIds: [], - storageIds: [], + cpus: [], + gpus: [], + memories: [], + storages: [], } yield put(addToStore('machine', machine)) - const machineIds = [...rack.machineIds] - machineIds[machine.position - 1] = machine._id - yield put(addPropToStoreObject('rack', rackId, { machineIds })) + const machineIds = [...rack.machines, machine._id] + yield put(addPropToStoreObject('rack', rackId, { machines: machineIds })) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) @@ -217,35 +216,41 @@ export function* onDeleteMachine() { const topologyId = yield select((state) => state.currentTopologyId) const tileId = yield select((state) => state.interactionLevel.tileId) const position = yield select((state) => state.interactionLevel.position) - const rack = yield select((state) => state.objects.rack[state.objects.tile[tileId].rackId]) - const machineIds = [...rack.machineIds] - machineIds[position - 1] = null + const rack = yield select((state) => state.objects.rack[state.objects.tile[tileId].rack]) yield put(goDownOneInteractionLevel()) - yield put(addPropToStoreObject('rack', rack._id, { machineIds })) + yield put( + addPropToStoreObject('rack', rack._id, { machines: rack.machines.filter((_, idx) => idx !== position - 1) }) + ) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) } } +const unitMapping = { + cpu: 'cpus', + gpu: 'gpus', + memory: 'memories', + storage: 'storages', +} + export function* onAddUnit(action) { try { const topologyId = yield select((state) => state.currentTopologyId) const tileId = yield select((state) => state.interactionLevel.tileId) const position = yield select((state) => state.interactionLevel.position) const machine = yield select( - (state) => - state.objects.machine[state.objects.rack[state.objects.tile[tileId].rackId].machineIds[position - 1]] + (state) => state.objects.machine[state.objects.rack[state.objects.tile[tileId].rack].machines[position - 1]] ) - if (machine[action.unitType + 'Ids'].length >= MAX_NUM_UNITS_PER_MACHINE) { + if (machine[unitMapping[action.unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) { return } - const units = [...machine[action.unitType + 'Ids'], action.id] + const units = [...machine[unitMapping[action.unitType]], action.id] yield put( addPropToStoreObject('machine', machine._id, { - [action.unitType + 'Ids']: units, + [unitMapping[action.unitType]]: units, }) ) yield updateTopologyOnServer(topologyId) @@ -260,15 +265,14 @@ export function* onDeleteUnit(action) { const tileId = yield select((state) => state.interactionLevel.tileId) const position = yield select((state) => state.interactionLevel.position) const machine = yield select( - (state) => - state.objects.machine[state.objects.rack[state.objects.tile[tileId].rackId].machineIds[position - 1]] + (state) => state.objects.machine[state.objects.rack[state.objects.tile[tileId].rack].machines[position - 1]] ) - const unitIds = machine[action.unitType + 'Ids'].slice() + const unitIds = machine[unitMapping[action.unitType]].slice() unitIds.splice(action.index, 1) yield put( addPropToStoreObject('machine', machine._id, { - [action.unitType + 'Ids']: unitIds, + [unitMapping[action.unitType]]: unitIds, }) ) yield updateTopologyOnServer(topologyId) -- cgit v1.2.3