From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 16 May 2021 17:07:58 +0200 Subject: ui: Restructure OpenDC frontend This change updates the structure of the OpenDC frontend in order to improve the maintainability of the frontend. --- .../opendc-web-ui/src/redux/reducers/auth.js | 12 ++++ .../src/redux/reducers/construction-mode.js | 52 ++++++++++++++++++ .../src/redux/reducers/current-ids.js | 54 ++++++++++++++++++ .../opendc-web-ui/src/redux/reducers/index.js | 23 ++++++++ .../src/redux/reducers/interaction-level.js | 61 +++++++++++++++++++++ opendc-web/opendc-web-ui/src/redux/reducers/map.js | 35 ++++++++++++ .../opendc-web-ui/src/redux/reducers/objects.js | 64 ++++++++++++++++++++++ .../src/redux/reducers/project-list.js | 18 ++++++ 8 files changed, 319 insertions(+) create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/auth.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/index.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/map.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/objects.js create mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/project-list.js (limited to 'opendc-web/opendc-web-ui/src/redux/reducers') diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/auth.js b/opendc-web/opendc-web-ui/src/redux/reducers/auth.js new file mode 100644 index 00000000..399a4b10 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/auth.js @@ -0,0 +1,12 @@ +import { LOG_IN_SUCCEEDED, LOG_OUT } from '../actions/auth' + +export function auth(state = {}, action) { + switch (action.type) { + case LOG_IN_SUCCEEDED: + return action.payload + case LOG_OUT: + return {} + default: + return state + } +} 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 new file mode 100644 index 00000000..257dddd2 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js @@ -0,0 +1,52 @@ +import { combineReducers } from 'redux' +import { GO_DOWN_ONE_INTERACTION_LEVEL } from '../actions/interaction-level' +import { + CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED, + FINISH_NEW_ROOM_CONSTRUCTION, + FINISH_ROOM_EDIT, + SET_CURRENT_TOPOLOGY, + START_NEW_ROOM_CONSTRUCTION_SUCCEEDED, + 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) { + case START_NEW_ROOM_CONSTRUCTION_SUCCEEDED: + return action.roomId + case START_ROOM_EDIT: + 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: + return '-1' + default: + return state + } +} + +export function inRackConstructionMode(state = false, action) { + switch (action.type) { + 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 + default: + return state + } +} + +export const construction = combineReducers({ + currentRoomInConstruction, + inRackConstructionMode, +}) 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 new file mode 100644 index 00000000..9b46aa60 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js @@ -0,0 +1,54 @@ +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) { + case SET_CURRENT_TOPOLOGY: + return action.topologyId + default: + 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 new file mode 100644 index 00000000..9dff379b --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/index.js @@ -0,0 +1,23 @@ +import { combineReducers } from 'redux' +import { auth } from './auth' +import { construction } from './construction-mode' +import { currentPortfolioId, currentProjectId, currentScenarioId, currentTopologyId } from './current-ids' +import { interactionLevel } from './interaction-level' +import { map } from './map' +import { objects } from './objects' +import { projectList } from './project-list' + +const rootReducer = combineReducers({ + objects, + projectList, + construction, + map, + currentProjectId, + currentTopologyId, + currentPortfolioId, + currentScenarioId, + interactionLevel, + auth, +}) + +export default rootReducer 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 new file mode 100644 index 00000000..eafcb269 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js @@ -0,0 +1,61 @@ +import { OPEN_PORTFOLIO_SUCCEEDED } from '../actions/portfolios' +import { + GO_DOWN_ONE_INTERACTION_LEVEL, + GO_FROM_BUILDING_TO_ROOM, + 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' + +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', + } + case GO_FROM_BUILDING_TO_ROOM: + return { + mode: 'ROOM', + roomId: action.roomId, + } + case GO_FROM_ROOM_TO_RACK: + return { + mode: 'RACK', + roomId: state.roomId, + tileId: action.tileId, + } + case GO_FROM_RACK_TO_MACHINE: + return { + mode: 'MACHINE', + roomId: state.roomId, + tileId: state.tileId, + position: action.position, + } + case GO_DOWN_ONE_INTERACTION_LEVEL: + if (state.mode === 'ROOM') { + return { + mode: 'BUILDING', + } + } else if (state.mode === 'RACK') { + return { + mode: 'ROOM', + roomId: state.roomId, + } + } else if (state.mode === 'MACHINE') { + return { + mode: 'RACK', + roomId: state.roomId, + tileId: state.tileId, + } + } else { + return state + } + default: + return state + } +} diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/map.js b/opendc-web/opendc-web-ui/src/redux/reducers/map.js new file mode 100644 index 00000000..de712c15 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/map.js @@ -0,0 +1,35 @@ +import { combineReducers } from 'redux' +import { SET_MAP_DIMENSIONS, SET_MAP_POSITION, SET_MAP_SCALE } from '../actions/map' + +export function position(state = { x: 0, y: 0 }, action) { + switch (action.type) { + case SET_MAP_POSITION: + return { x: action.x, y: action.y } + default: + return state + } +} + +export function dimensions(state = { width: 600, height: 400 }, action) { + switch (action.type) { + case SET_MAP_DIMENSIONS: + return { width: action.width, height: action.height } + default: + return state + } +} + +export function scale(state = 1, action) { + switch (action.type) { + case SET_MAP_SCALE: + return action.scale + default: + return state + } +} + +export const map = combineReducers({ + position, + dimensions, + scale, +}) diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js new file mode 100644 index 00000000..a2483b43 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js @@ -0,0 +1,64 @@ +import { combineReducers } from 'redux' +import { + ADD_ID_TO_STORE_OBJECT_LIST_PROP, + ADD_PROP_TO_STORE_OBJECT, + ADD_TO_STORE, + REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP, +} from '../actions/objects' +import { CPU_UNITS, GPU_UNITS, MEMORY_UNITS, STORAGE_UNITS } from '../../util/unit-specifications' + +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), + storage: object('storage', STORAGE_UNITS), + machine: object('machine'), + rack: object('rack'), + tile: object('tile'), + room: object('room'), + topology: object('topology'), + trace: object('trace'), + scheduler: object('scheduler'), + portfolio: object('portfolio'), + scenario: object('scenario'), + prefab: object('prefab'), +}) + +function object(type, defaultState = {}) { + return objectWithId(type, (object) => object._id, defaultState) +} + +function objectWithId(type, getId, defaultState = {}) { + return (state = defaultState, action) => { + if (action.objectType !== type) { + return state + } + + if (action.type === ADD_TO_STORE) { + return Object.assign({}, 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), + }) + } else if (action.type === ADD_ID_TO_STORE_OBJECT_LIST_PROP) { + return Object.assign({}, state, { + [action.objectId]: Object.assign({}, state[action.objectId], { + [action.propName]: [...state[action.objectId][action.propName], action.id], + }), + }) + } else if (action.type === REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP) { + return Object.assign({}, state, { + [action.objectId]: Object.assign({}, state[action.objectId], { + [action.propName]: state[action.objectId][action.propName].filter((id) => id !== action.id), + }), + }) + } + + return state + } +} diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/project-list.js b/opendc-web/opendc-web-ui/src/redux/reducers/project-list.js new file mode 100644 index 00000000..ad803db0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/project-list.js @@ -0,0 +1,18 @@ +import { combineReducers } from 'redux' +import { ADD_PROJECT_SUCCEEDED, DELETE_PROJECT_SUCCEEDED } from '../actions/projects' +import { FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED } from '../actions/users' + +export function authorizationsOfCurrentUser(state = [], action) { + switch (action.type) { + case FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED: + return action.authorizationsOfCurrentUser + case ADD_PROJECT_SUCCEEDED: + return [...state, action.authorization] + case DELETE_PROJECT_SUCCEEDED: + return state.filter((authorization) => authorization[1] !== action.id) + default: + return state + } +} + +export const projectList = combineReducers({ authorizationsOfCurrentUser }) -- cgit v1.2.3 From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 16 May 2021 23:18:02 +0200 Subject: ui: Migrate to Auth0 as Identity Provider This change updates the frontend codebase to move away from the Google login and instead use Auth0 as generic Identity Provider. This allows users to login with other accounts as well. Since Auth0 has a free tier, users can experiment themselves with OpenDC locally without having to pay for the login functionality. The code has been written so that we should be able to migrate away from Auth0 once it is not a suitable Identity Provider for OpenDC anymore. --- opendc-web/opendc-web-ui/src/redux/reducers/auth.js | 12 ------------ opendc-web/opendc-web-ui/src/redux/reducers/index.js | 6 ++---- .../opendc-web-ui/src/redux/reducers/project-list.js | 18 ------------------ .../opendc-web-ui/src/redux/reducers/projects.js | 14 ++++++++++++++ 4 files changed, 16 insertions(+), 34 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/auth.js delete mode 100644 opendc-web/opendc-web-ui/src/redux/reducers/project-list.js create 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/auth.js b/opendc-web/opendc-web-ui/src/redux/reducers/auth.js deleted file mode 100644 index 399a4b10..00000000 --- a/opendc-web/opendc-web-ui/src/redux/reducers/auth.js +++ /dev/null @@ -1,12 +0,0 @@ -import { LOG_IN_SUCCEEDED, LOG_OUT } from '../actions/auth' - -export function auth(state = {}, action) { - switch (action.type) { - case LOG_IN_SUCCEEDED: - return action.payload - case LOG_OUT: - return {} - 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 9dff379b..b143d417 100644 --- a/opendc-web/opendc-web-ui/src/redux/reducers/index.js +++ b/opendc-web/opendc-web-ui/src/redux/reducers/index.js @@ -1,15 +1,14 @@ import { combineReducers } from 'redux' -import { auth } from './auth' import { construction } from './construction-mode' import { currentPortfolioId, currentProjectId, currentScenarioId, currentTopologyId } from './current-ids' import { interactionLevel } from './interaction-level' import { map } from './map' import { objects } from './objects' -import { projectList } from './project-list' +import { projects } from './projects' const rootReducer = combineReducers({ objects, - projectList, + projects, construction, map, currentProjectId, @@ -17,7 +16,6 @@ const rootReducer = combineReducers({ currentPortfolioId, currentScenarioId, interactionLevel, - auth, }) export default rootReducer diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/project-list.js b/opendc-web/opendc-web-ui/src/redux/reducers/project-list.js deleted file mode 100644 index ad803db0..00000000 --- a/opendc-web/opendc-web-ui/src/redux/reducers/project-list.js +++ /dev/null @@ -1,18 +0,0 @@ -import { combineReducers } from 'redux' -import { ADD_PROJECT_SUCCEEDED, DELETE_PROJECT_SUCCEEDED } from '../actions/projects' -import { FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED } from '../actions/users' - -export function authorizationsOfCurrentUser(state = [], action) { - switch (action.type) { - case FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED: - return action.authorizationsOfCurrentUser - case ADD_PROJECT_SUCCEEDED: - return [...state, action.authorization] - case DELETE_PROJECT_SUCCEEDED: - return state.filter((authorization) => authorization[1] !== action.id) - default: - return state - } -} - -export const projectList = combineReducers({ authorizationsOfCurrentUser }) diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/projects.js b/opendc-web/opendc-web-ui/src/redux/reducers/projects.js new file mode 100644 index 00000000..a920e47f --- /dev/null +++ b/opendc-web/opendc-web-ui/src/redux/reducers/projects.js @@ -0,0 +1,14 @@ +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