merge: Address technical dept in topology view (#162)

This pull request aims to address some of the technical debt in the topology 
view of the OpenDC frontend.

* Add support for panning of the datacenter topology
* Isolate world coordinate space (world objects do not depend on camera scale or position)
* Split transpiled modules into a separate chunk to reduce deduplication
* Encode state in topology actions to reduce global state
* Restructure components per page
* Enable more ESLint rules through `eslint:recommended` ruleset
* Move page components in separate files.

12 files changed, 54 insertions, 259 deletions

diff --git a/opendc-web/opendc-web-ui/src/redux/actions/map.js b/opendc-web/opendc-web-ui/src/redux/actions/map.js
deleted file mode 100644
index aa14cacd..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/map.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-    MAP_MAX_SCALE,
-    MAP_MIN_SCALE,
-    MAP_SCALE_PER_EVENT,
-    MAP_SIZE_IN_PIXELS,
-} from '../../components/app/map/MapConstants'
-
-export const SET_MAP_POSITION = 'SET_MAP_POSITION'
-export const SET_MAP_DIMENSIONS = 'SET_MAP_DIMENSIONS'
-export const SET_MAP_SCALE = 'SET_MAP_SCALE'
-
-export function setMapPosition(x, y) {
-    return {
-        type: SET_MAP_POSITION,
-        x,
-        y,
-    }
-}
-
-export function setMapDimensions(width, height) {
-    return {
-        type: SET_MAP_DIMENSIONS,
-        width,
-        height,
-    }
-}
-
-export function setMapScale(scale) {
-    return {
-        type: SET_MAP_SCALE,
-        scale,
-    }
-}
-
-export function zoomInOnCenter(zoomIn) {
-    return (dispatch, getState) => {
-        const state = getState()
-
-        dispatch(zoomInOnPosition(zoomIn, state.map.dimensions.width / 2, state.map.dimensions.height / 2))
-    }
-}
-
-export function zoomInOnPosition(zoomIn, x, y) {
-    return (dispatch, getState) => {
-        const state = getState()
-
-        const centerPoint = {
-            x: x / state.map.scale - state.map.position.x / state.map.scale,
-            y: y / state.map.scale - state.map.position.y / state.map.scale,
-        }
-        const newScale = zoomIn ? state.map.scale * MAP_SCALE_PER_EVENT : state.map.scale / MAP_SCALE_PER_EVENT
-        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE)
-
-        const newX = -(centerPoint.x - x / boundedScale) * boundedScale
-        const newY = -(centerPoint.y - y / boundedScale) * boundedScale
-
-        dispatch(setMapPositionWithBoundsCheck(newX, newY))
-        dispatch(setMapScale(boundedScale))
-    }
-}
-
-export function setMapPositionWithBoundsCheck(x, y) {
-    return (dispatch, getState) => {
-        const state = getState()
-
-        const scaledMapSize = MAP_SIZE_IN_PIXELS * state.map.scale
-
-        const updatedX =
-            x > 0
-                ? 0
-                : x < -scaledMapSize + state.map.dimensions.width
-                ? -scaledMapSize + state.map.dimensions.width
-                : x
-        const updatedY =
-            y > 0
-                ? 0
-                : y < -scaledMapSize + state.map.dimensions.height
-                ? -scaledMapSize + state.map.dimensions.height
-                : y
-
-        dispatch(setMapPosition(updatedX, updatedY))
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
index c112feed..0ef7795f 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
@@ -3,10 +3,11 @@ export const DELETE_PREFAB = 'DELETE_PREFAB'
 export const DELETE_PREFAB_SUCCEEDED = 'DELETE_PREFAB_SUCCEEDED'
 export const OPEN_PREFAB_SUCCEEDED = 'OPEN_PREFAB_SUCCEEDED'
 
-export function addPrefab(name) {
+export function addPrefab(name, tileId) {
     return {
         type: ADD_PREFAB,
         name,
+        tileId,
     }
 }
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
index f1a7d569..49425318 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
@@ -55,13 +55,10 @@ export function cancelNewRoomConstructionSucceeded() {
     }
 }
 
-export function startRoomEdit() {
-    return (dispatch, getState) => {
-        const { interactionLevel } = getState()
-        dispatch({
-            type: START_ROOM_EDIT,
-            roomId: interactionLevel.roomId,
-        })
+export function startRoomEdit(roomId) {
+    return {
+        type: START_ROOM_EDIT,
+        roomId: roomId,
     }
 }
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
index 17ccce5d..170b7648 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
@@ -2,23 +2,27 @@ export const DELETE_MACHINE = 'DELETE_MACHINE'
 export const ADD_UNIT = 'ADD_UNIT'
 export const DELETE_UNIT = 'DELETE_UNIT'
 
-export function deleteMachine() {
+export function deleteMachine(rackId, position) {
     return {
         type: DELETE_MACHINE,
+        rackId,
+        position,
     }
 }
 
-export function addUnit(unitType, id) {
+export function addUnit(machineId, unitType, id) {
     return {
         type: ADD_UNIT,
+        machineId,
         unitType,
         id,
     }
 }
 
-export function deleteUnit(unitType, index) {
+export function deleteUnit(machineId, unitType, index) {
     return {
         type: DELETE_UNIT,
+        machineId,
         unitType,
         index,
     }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
index b117402e..228e3ae9 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
@@ -2,22 +2,25 @@ export const EDIT_RACK_NAME = 'EDIT_RACK_NAME'
 export const DELETE_RACK = 'DELETE_RACK'
 export const ADD_MACHINE = 'ADD_MACHINE'
 
-export function editRackName(name) {
+export function editRackName(rackId, name) {
     return {
         type: EDIT_RACK_NAME,
         name,
+        rackId,
     }
 }
 
-export function deleteRack() {
+export function deleteRack(tileId) {
     return {
         type: DELETE_RACK,
+        tileId,
     }
 }
 
-export function addMachine(position) {
+export function addMachine(rackId, position) {
     return {
         type: ADD_MACHINE,
         position,
+        rackId,
     }
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
index 80ef7c5e..e584af89 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
@@ -6,10 +6,11 @@ export const START_RACK_CONSTRUCTION = 'START_RACK_CONSTRUCTION'
 export const STOP_RACK_CONSTRUCTION = 'STOP_RACK_CONSTRUCTION'
 export const ADD_RACK_TO_TILE = 'ADD_RACK_TO_TILE'
 
-export function editRoomName(name) {
+export function editRoomName(roomId, name) {
     return {
         type: EDIT_ROOM_NAME,
         name,
+        roomId,
     }
 }
 
@@ -41,8 +42,9 @@ export function addRackToTile(positionX, positionY) {
     }
 }
 
-export function deleteRoom() {
+export function deleteRoom(roomId) {
     return {
         type: DELETE_ROOM,
+        roomId,
     }
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/index.js b/opendc-web/opendc-web-ui/src/redux/index.js
index 3c7ad55f..fa0c9d23 100644
--- a/opendc-web/opendc-web-ui/src/redux/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/index.js
@@ -5,7 +5,6 @@ import createSagaMiddleware from 'redux-saga'
 import thunk from 'redux-thunk'
 import rootReducer from './reducers'
 import rootSaga from './sagas'
-import { viewportAdjustmentMiddleware } from './middleware/viewport-adjustment'
 import { createReduxEnhancer } from '@sentry/react'
 
 let store
@@ -13,7 +12,7 @@ let store
 function initStore(initialState, ctx) {
     const sagaMiddleware = createSagaMiddleware({ context: ctx })
 
-    const middlewares = [thunk, sagaMiddleware, viewportAdjustmentMiddleware]
+    const middlewares = [thunk, sagaMiddleware]
 
     if (process.env.NODE_ENV !== 'production') {
         middlewares.push(createLogger())
diff --git a/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js b/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js
deleted file mode 100644
index c2fc5004..00000000
--- a/opendc-web/opendc-web-ui/src/redux/middleware/viewport-adjustment.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { SET_MAP_DIMENSIONS, setMapPosition, setMapScale } from '../actions/map'
-import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building'
-import {
-    MAP_MAX_SCALE,
-    MAP_MIN_SCALE,
-    SIDEBAR_WIDTH,
-    TILE_SIZE_IN_PIXELS,
-    VIEWPORT_PADDING,
-} from '../../components/app/map/MapConstants'
-import { calculateRoomListBounds } from '../../util/tile-calculations'
-
-export const viewportAdjustmentMiddleware = (store) => (next) => (action) => {
-    const state = store.getState()
-
-    let topologyId = '-1'
-    let mapDimensions = {}
-    if (action.type === SET_CURRENT_TOPOLOGY && action.topologyId !== '-1') {
-        topologyId = action.topologyId
-        mapDimensions = state.map.dimensions
-    } else if (action.type === SET_MAP_DIMENSIONS && state.currentTopologyId !== '-1') {
-        topologyId = state.currentTopologyId
-        mapDimensions = { width: action.width, height: action.height }
-    }
-
-    if (topologyId && topologyId !== '-1') {
-        const roomIds = state.objects.topology[topologyId].rooms
-        const rooms = roomIds.map((id) => Object.assign({}, state.objects.room[id]))
-        rooms.forEach((room) => (room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])))
-
-        let hasNoTiles = true
-        for (let i in rooms) {
-            if (rooms[i].tiles.length > 0) {
-                hasNoTiles = false
-                break
-            }
-        }
-
-        if (!hasNoTiles) {
-            const viewportParams = calculateParametersToZoomInOnRooms(rooms, mapDimensions.width, mapDimensions.height)
-            store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY))
-            store.dispatch(setMapScale(viewportParams.newScale))
-        }
-    }
-
-    next(action)
-}
-
-function calculateParametersToZoomInOnRooms(rooms, mapWidth, mapHeight) {
-    const bounds = calculateRoomListBounds(rooms)
-    const newScale = calculateNewScale(bounds, mapWidth, mapHeight)
-
-    // Coordinates of the center of the room, relative to the global origin of the map
-    const roomCenterCoordinates = {
-        x: bounds.center.x * TILE_SIZE_IN_PIXELS * newScale,
-        y: bounds.center.y * TILE_SIZE_IN_PIXELS * newScale,
-    }
-
-    const newX = -roomCenterCoordinates.x + mapWidth / 2
-    const newY = -roomCenterCoordinates.y + mapHeight / 2
-
-    return { newScale, newX, newY }
-}
-
-function calculateNewScale(bounds, mapWidth, mapHeight) {
-    const width = bounds.max.x - bounds.min.x
-    const height = bounds.max.y - bounds.min.y
-
-    const scaleX = (mapWidth - 2 * SIDEBAR_WIDTH) / (width * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING)
-    const scaleY = mapHeight / (height * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING)
-    const newScale = Math.min(scaleX, scaleY)
-
-    return Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE)
-}
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 1b17a206..2f1359d6 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/index.js
@@ -2,13 +2,11 @@ import { combineReducers } from 'redux'
 import { construction } from './construction-mode'
 import { currentTopologyId } from './current-ids'
 import { interactionLevel } from './interaction-level'
-import { map } from './map'
 import { objects } from './objects'
 
 const rootReducer = combineReducers({
     objects,
     construction,
-    map,
     currentTopologyId,
     interactionLevel,
 })
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/map.js b/opendc-web/opendc-web-ui/src/redux/reducers/map.js
deleted file mode 100644
index de712c15..00000000
--- a/opendc-web/opendc-web-ui/src/redux/reducers/map.js
+++ /dev/null
@@ -1,35 +0,0 @@
-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/sagas/prefabs.js b/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js
index 91b03bf6..f717d878 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js
@@ -4,14 +4,13 @@ import { addPrefab } from '../../api/prefabs'
 import { Rack } from '../../util/topology-schema'
 import { denormalize } from 'normalizr'
 
-export function* onAddPrefab(action) {
+export function* onAddPrefab({ name, tileId }) {
     try {
-        const interactionLevel = yield select((state) => state.interactionLevel)
         const objects = yield select((state) => state.objects)
-        const rack = objects.rack[objects.tile[interactionLevel.tileId].rack]
+        const rack = objects.rack[objects.tile[tileId].rack]
         const prefabRack = denormalize(rack, Rack, objects)
         const auth = yield getContext('auth')
-        const prefab = yield call(() => addPrefab(auth, { name: action.name, rack: prefabRack }))
+        const prefab = yield call(() => addPrefab(auth, { name, rack: prefabRack }))
         yield put(addToStore('prefab', prefab))
     } 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 333c1485..a5a3be32 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -15,7 +15,7 @@ import {
     DEFAULT_RACK_POWER_CAPACITY,
     DEFAULT_RACK_SLOT_CAPACITY,
     MAX_NUM_UNITS_PER_MACHINE,
-} from '../../components/app/map/MapConstants'
+} from '../../components/topologies/map/MapConstants'
 import { fetchAndStoreTopology, denormalizeTopology, updateTopologyOnServer } from './objects'
 import { uuid } from 'uuidv4'
 import { addTopology } from '../../api/topologies'
@@ -37,17 +37,15 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa
     }
 }
 
-export function* onAddTopology(action) {
+export function* onAddTopology({ projectId, duplicateId, name }) {
     try {
-        const { projectId, duplicateId, name } = action
-
         let topologyToBeCreated
         if (duplicateId) {
             topologyToBeCreated = yield denormalizeTopology(duplicateId)
             topologyToBeCreated = { ...topologyToBeCreated, name }
             delete topologyToBeCreated._id
         } else {
-            topologyToBeCreated = { name: action.name, rooms: [] }
+            topologyToBeCreated = { name, rooms: [] }
         }
 
         const auth = yield getContext('auth')
@@ -119,21 +117,19 @@ export function* onDeleteTile(action) {
     }
 }
 
-export function* onEditRoomName(action) {
+export function* onEditRoomName({ roomId, name }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const roomId = yield select((state) => state.interactionLevel.roomId)
-        yield put(addPropToStoreObject('room', roomId, { name: action.name }))
+        yield put(addPropToStoreObject('room', roomId, { name }))
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
         console.error(error)
     }
 }
 
-export function* onDeleteRoom() {
+export function* onDeleteRoom({ roomId }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const roomId = yield select((state) => state.interactionLevel.roomId)
         yield put(goDownOneInteractionLevel())
         yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'rooms', roomId))
         yield updateTopologyOnServer(topologyId)
@@ -142,21 +138,19 @@ export function* onDeleteRoom() {
     }
 }
 
-export function* onEditRackName(action) {
+export function* onEditRackName({ rackId, name }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-        yield put(addPropToStoreObject('rack', rackId, { name: action.name }))
+        yield put(addPropToStoreObject('rack', rackId, { name }))
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
         console.error(error)
     }
 }
 
-export function* onDeleteRack() {
+export function* onDeleteRack({ tileId }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const tileId = yield select((state) => state.interactionLevel.tileId)
         yield put(goDownOneInteractionLevel())
         yield put(addPropToStoreObject('tile', tileId, { rack: undefined }))
         yield updateTopologyOnServer(topologyId)
@@ -165,35 +159,34 @@ export function* onDeleteRack() {
     }
 }
 
-export function* onAddRackToTile(action) {
+export function* onAddRackToTile({ tileId }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
         const rack = {
             _id: uuid(),
             name: 'Rack',
-            tileId: action.tileId,
+            tileId,
             capacity: DEFAULT_RACK_SLOT_CAPACITY,
             powerCapacityW: DEFAULT_RACK_POWER_CAPACITY,
             machines: [],
         }
         yield put(addToStore('rack', rack))
-        yield put(addPropToStoreObject('tile', action.tileId, { rack: rack._id }))
+        yield put(addPropToStoreObject('tile', tileId, { rack: rack._id }))
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
         console.error(error)
     }
 }
 
-export function* onAddMachine(action) {
+export function* onAddMachine({ rackId, position }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        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,
+            position,
             cpus: [],
             gpus: [],
             memories: [],
@@ -209,15 +202,13 @@ export function* onAddMachine(action) {
     }
 }
 
-export function* onDeleteMachine() {
+export function* onDeleteMachine({ rackId, position }) {
     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 rack = yield select((state) => state.objects.rack[state.objects.tile[tileId].rack])
+        const rack = yield select((state) => state.objects.rack[rackId])
         yield put(goDownOneInteractionLevel())
         yield put(
-            addPropToStoreObject('rack', rack._id, { machines: rack.machines.filter((_, idx) => idx !== position - 1) })
+            addPropToStoreObject('rack', rackId, { machines: rack.machines.filter((_, idx) => idx !== position - 1) })
         )
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
@@ -232,23 +223,19 @@ const unitMapping = {
     storage: 'storages',
 }
 
-export function* onAddUnit(action) {
+export function* onAddUnit({ machineId, unitType, id }) {
     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].rack].machines[position - 1]]
-        )
+        const machine = yield select((state) => state.objects.machine[machineId])
 
-        if (machine[unitMapping[action.unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) {
+        if (machine[unitMapping[unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) {
             return
         }
 
-        const units = [...machine[unitMapping[action.unitType]], action.id]
+        const units = [...machine[unitMapping[unitType]], id]
         yield put(
             addPropToStoreObject('machine', machine._id, {
-                [unitMapping[action.unitType]]: units,
+                [unitMapping[unitType]]: units,
             })
         )
         yield updateTopologyOnServer(topologyId)
@@ -257,20 +244,16 @@ export function* onAddUnit(action) {
     }
 }
 
-export function* onDeleteUnit(action) {
+export function* onDeleteUnit({ machineId, unitType, index }) {
     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].rack].machines[position - 1]]
-        )
-        const unitIds = machine[unitMapping[action.unitType]].slice()
-        unitIds.splice(action.index, 1)
+        const machine = yield select((state) => state.objects.machine[machineId])
+        const unitIds = machine[unitMapping[unitType]].slice()
+        unitIds.splice(index, 1)
 
         yield put(
             addPropToStoreObject('machine', machine._id, {
-                [unitMapping[action.unitType]]: unitIds,
+                [unitMapping[unitType]]: unitIds,
             })
         )
         yield updateTopologyOnServer(topologyId)