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. --- .../src/redux/reducers/current-ids.js | 44 ---------------------- .../opendc-web-ui/src/redux/reducers/index.js | 5 +-- 2 files changed, 1 insertion(+), 48 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/reducers') diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js b/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js index 9b46aa60..c0baf567 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js @@ -1,7 +1,4 @@ -import { OPEN_PORTFOLIO_SUCCEEDED, SET_CURRENT_PORTFOLIO } from '../actions/portfolios' -import { OPEN_PROJECT_SUCCEEDED } from '../actions/projects' import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building' -import { OPEN_SCENARIO_SUCCEEDED, SET_CURRENT_SCENARIO } from '../actions/scenarios' export function currentTopologyId(state = '-1', action) { switch (action.type) { @@ -11,44 +8,3 @@ export function currentTopologyId(state = '-1', action) { return state } } - -export function currentProjectId(state = '-1', action) { - switch (action.type) { - case OPEN_PROJECT_SUCCEEDED: - return action.id - case OPEN_PORTFOLIO_SUCCEEDED: - case OPEN_SCENARIO_SUCCEEDED: - return action.projectId - default: - return state - } -} - -export function currentPortfolioId(state = '-1', action) { - switch (action.type) { - case OPEN_PORTFOLIO_SUCCEEDED: - case SET_CURRENT_PORTFOLIO: - case SET_CURRENT_SCENARIO: - return action.portfolioId - case OPEN_SCENARIO_SUCCEEDED: - return action.portfolioId - case OPEN_PROJECT_SUCCEEDED: - case SET_CURRENT_TOPOLOGY: - return '-1' - default: - return state - } -} -export function currentScenarioId(state = '-1', action) { - switch (action.type) { - case OPEN_SCENARIO_SUCCEEDED: - case SET_CURRENT_SCENARIO: - return action.scenarioId - case OPEN_PORTFOLIO_SUCCEEDED: - case SET_CURRENT_TOPOLOGY: - case OPEN_PROJECT_SUCCEEDED: - return '-1' - default: - return state - } -} diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/index.js b/opendc-web/opendc-web-ui/src/redux/reducers/index.js index b143d417..9f556d18 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/index.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/index.js @@ -1,6 +1,6 @@ import { combineReducers } from 'redux' import { construction } from './construction-mode' -import { currentPortfolioId, currentProjectId, currentScenarioId, currentTopologyId } from './current-ids' +import { currentTopologyId } from './current-ids' import { interactionLevel } from './interaction-level' import { map } from './map' import { objects } from './objects' @@ -11,10 +11,7 @@ const rootReducer = combineReducers({ projects, construction, map, - currentProjectId, currentTopologyId, - currentPortfolioId, - currentScenarioId, interactionLevel, }) -- 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/opendc-web-ui/src/redux/reducers/index.js | 2 -- .../opendc-web-ui/src/redux/reducers/interaction-level.js | 2 -- opendc-web/opendc-web-ui/src/redux/reducers/projects.js | 14 -------------- 3 files changed, 18 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/projects.js (limited to 'opendc-web/opendc-web-ui/src/redux/reducers') diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/index.js b/opendc-web/opendc-web-ui/src/redux/reducers/index.js index 9f556d18..1b17a206 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/index.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/index.js @@ -4,11 +4,9 @@ import { currentTopologyId } from './current-ids' import { interactionLevel } from './interaction-level' import { map } from './map' import { objects } from './objects' -import { projects } from './projects' const rootReducer = combineReducers({ objects, - projects, construction, map, currentTopologyId, diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js index eafcb269..8bf81b98 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js @@ -5,7 +5,6 @@ import { GO_FROM_RACK_TO_MACHINE, GO_FROM_ROOM_TO_RACK, } from '../actions/interaction-level' -import { OPEN_PROJECT_SUCCEEDED } from '../actions/projects' import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building' import { OPEN_SCENARIO_SUCCEEDED } from '../actions/scenarios' @@ -13,7 +12,6 @@ export function interactionLevel(state = { mode: 'BUILDING' }, action) { switch (action.type) { case OPEN_PORTFOLIO_SUCCEEDED: case OPEN_SCENARIO_SUCCEEDED: - case OPEN_PROJECT_SUCCEEDED: case SET_CURRENT_TOPOLOGY: return { mode: 'BUILDING', diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/projects.js b/opendc-web/opendc-web-ui/src/redux/reducers/projects.js deleted file mode 100644 index a920e47f..00000000 --- a/opendc-web/opendc-web-ui/src/redux/reducers/projects.js +++ /dev/null @@ -1,14 +0,0 @@ -import { ADD_PROJECT_SUCCEEDED, DELETE_PROJECT_SUCCEEDED, FETCH_PROJECTS_SUCCEEDED } from '../actions/projects' - -export function projects(state = [], action) { - switch (action.type) { - case FETCH_PROJECTS_SUCCEEDED: - return action.projects - case ADD_PROJECT_SUCCEEDED: - return [...state, action.project] - case DELETE_PROJECT_SUCCEEDED: - return state.filter((project) => project._id !== action.id) - default: - return state - } -} -- cgit v1.2.3 From d28a2f194a75eb86095485ae4f88be349bcc18b6 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 16:36:54 +0200 Subject: ui: Fetch schedulers and traces using React Query This change updates the OpenDC frontend to fetch schedulers and traces using React Query, removing its dependency on Redux. --- opendc-web/opendc-web-ui/src/redux/reducers/objects.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/reducers') diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js index a2483b43..f8f577ac 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js @@ -20,8 +20,6 @@ export const objects = combineReducers({ tile: object('tile'), room: object('room'), topology: object('topology'), - trace: object('trace'), - scheduler: object('scheduler'), portfolio: object('portfolio'), scenario: object('scenario'), prefab: object('prefab'), -- 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/reducers/construction-mode.js | 6 ------ opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js | 4 ---- 2 files changed, 10 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/reducers') diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js index 257dddd2..5bac7fea 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js @@ -9,8 +9,6 @@ import { START_ROOM_EDIT, } from '../actions/topology/building' import { DELETE_ROOM, START_RACK_CONSTRUCTION, STOP_RACK_CONSTRUCTION } from '../actions/topology/room' -import { OPEN_PORTFOLIO_SUCCEEDED } from '../actions/portfolios' -import { OPEN_SCENARIO_SUCCEEDED } from '../actions/scenarios' export function currentRoomInConstruction(state = '-1', action) { switch (action.type) { @@ -20,8 +18,6 @@ export function currentRoomInConstruction(state = '-1', action) { return action.roomId case CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED: case FINISH_NEW_ROOM_CONSTRUCTION: - case OPEN_PORTFOLIO_SUCCEEDED: - case OPEN_SCENARIO_SUCCEEDED: case FINISH_ROOM_EDIT: case SET_CURRENT_TOPOLOGY: case DELETE_ROOM: @@ -36,8 +32,6 @@ export function inRackConstructionMode(state = false, action) { case START_RACK_CONSTRUCTION: return true case STOP_RACK_CONSTRUCTION: - case OPEN_PORTFOLIO_SUCCEEDED: - case OPEN_SCENARIO_SUCCEEDED: case SET_CURRENT_TOPOLOGY: case GO_DOWN_ONE_INTERACTION_LEVEL: return false diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js index 8bf81b98..9f23949f 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js @@ -1,4 +1,3 @@ -import { OPEN_PORTFOLIO_SUCCEEDED } from '../actions/portfolios' import { GO_DOWN_ONE_INTERACTION_LEVEL, GO_FROM_BUILDING_TO_ROOM, @@ -6,12 +5,9 @@ import { GO_FROM_ROOM_TO_RACK, } from '../actions/interaction-level' import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building' -import { OPEN_SCENARIO_SUCCEEDED } from '../actions/scenarios' export function interactionLevel(state = { mode: 'BUILDING' }, action) { switch (action.type) { - case OPEN_PORTFOLIO_SUCCEEDED: - case OPEN_SCENARIO_SUCCEEDED: case SET_CURRENT_TOPOLOGY: return { mode: 'BUILDING', -- 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/opendc-web-ui/src/redux/reducers/objects.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/redux/reducers') diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js index f8f577ac..11f6d353 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js @@ -6,11 +6,9 @@ import { REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP, } from '../actions/objects' import { CPU_UNITS, GPU_UNITS, MEMORY_UNITS, STORAGE_UNITS } from '../../util/unit-specifications' +import { STORE_TOPOLOGY } from '../actions/topologies' export const objects = combineReducers({ - project: object('project'), - user: object('user'), - authorization: objectWithId('authorization', (object) => [object.userId, object.projectId]), cpu: object('cpu', CPU_UNITS), gpu: object('gpu', GPU_UNITS), memory: object('memory', MEMORY_UNITS), @@ -20,8 +18,6 @@ export const objects = combineReducers({ tile: object('tile'), room: object('room'), topology: object('topology'), - portfolio: object('portfolio'), - scenario: object('scenario'), prefab: object('prefab'), }) @@ -31,18 +27,16 @@ function object(type, defaultState = {}) { function objectWithId(type, getId, defaultState = {}) { return (state = defaultState, action) => { - if (action.objectType !== type) { + if (action.type === STORE_TOPOLOGY) { + return { ...state, ...action.entities[type] } + } else if (action.objectType !== type) { return state } if (action.type === ADD_TO_STORE) { - return Object.assign({}, state, { - [getId(action.object)]: action.object, - }) + return { ...state, [getId(action.object)]: action.object } } else if (action.type === ADD_PROP_TO_STORE_OBJECT) { - return Object.assign({}, state, { - [action.objectId]: Object.assign({}, state[action.objectId], action.propObject), - }) + return { ...state, [action.objectId]: { ...state[action.objectId], ...action.propObject } } } else if (action.type === ADD_ID_TO_STORE_OBJECT_LIST_PROP) { return Object.assign({}, state, { [action.objectId]: Object.assign({}, state[action.objectId], { -- cgit v1.2.3