summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/containers/app/map
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-05-18 20:34:13 +0200
committerGitHub <noreply@github.com>2021-05-18 20:34:13 +0200
commit56bd2ef6b0583fee1dd2da5dceaf57feb07649c9 (patch)
tree6d4cfbc44c97cd3ec1e30aa977cd08f404b41b0d /opendc-web/opendc-web-ui/src/containers/app/map
parent02776c958a3254735b2be7d9fb1627f75e7f80cd (diff)
parentce95cfdf803043e66e2279d0f76c6bfc64e7864e (diff)
Migrate to Auth0 as Identity Provider
This pull request removes the hard dependency on Google for authenticating users and migrates to Auth0 as Identity Provider for OpenDC. This has as benefit that we can authenticate users without having to manage user data ourselves and do not have a dependency on Google accounts anymore. - Frontend cleanup: - Use CSS modules everywhere to encapsulate the styling of React components. - Perform all communication in the frontend via the REST API (as opposed to WebSockets). The original approach was aimed at collaborative editing, but made normal operations harder to implement and debug. If we want to implement collaborative editing in the future, we can expose only a small WebSocket API specifically for collaborative editing. - Move to FontAwesome 5 (using the official React libraries) - Use Reactstrap where possible. Previously, we mixed raw Bootstrap classes with Reactstrap, which is confusing. - Reduce the scope of the Redux state. Some state in the frontend application can be kept locally and does not need to be managed by Redux. - Migrate from Create React App (CRA) to Next.js since it allows us to pre-render multiple pages as well as opt-in to Server Side Rendering. - Remove the Google login and use Auth0 for authentication now. - Use Node 16 - Backend cleanup: - Remove Socket.IO endpoint from backend, since it is not needed by the frontend anymore. Removing it reduces the attack surface of OpenDC as well as the maintenance efforts. - Use Auth0 JWT token for authorizing API accesses - Refactor API endpoints to use Flask Restful as opposed to our custom in-house routing logic. Previously, this was needed to support the Socket.IO endpoint, but increases maintenance effort. - Expose Swagger UI from API - Use Python 3.9 and uwsgi to host Flask application - Actualize OpenAPI schema and update to version 3.0. **Breaking API Changes** * This pull request removes the users collection from the database table. Instead, we now use the user identifier passed by Auth0 to identify the data that belongs to a user.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers/app/map')
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js9
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js5
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js4
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js7
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js5
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js2
10 files changed, 22 insertions, 18 deletions
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
index 651b3459..bac24c8b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../actions/interaction-level'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
import GrayLayer from '../../../components/app/map/elements/GrayLayer'
const GrayContainer = () => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
index 61d123e8..91ceb35d 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
@@ -1,14 +1,17 @@
import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map'
+import { useDispatch } from 'react-redux'
+import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../redux/actions/map'
import MapStageComponent from '../../../components/app/map/MapStageComponent'
+import { useMapDimensions, useMapPosition } from '../../../data/map'
const MapStage = () => {
- const { position, dimensions } = useSelector((state) => state.map)
+ const position = useMapPosition()
+ const dimensions = useMapDimensions()
const dispatch = useDispatch()
const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y))
const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y))
const setMapDimensionsA = (width, height) => dispatch(setMapDimensions(width, height))
+
return (
<MapStageComponent
mapPosition={position}
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
index 877233fc..52d48317 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { goFromBuildingToRoom } from '../../../actions/interaction-level'
+import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
import RoomGroup from '../../../components/app/map/groups/RoomGroup'
const RoomContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
index ad7301a7..f97e89a1 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { goFromRoomToRack } from '../../../actions/interaction-level'
+import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
import TileGroup from '../../../components/app/map/groups/TileGroup'
const TileContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
index 612ca41c..e7ab3c72 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
@@ -1,11 +1,10 @@
import React from 'react'
import { useSelector } from 'react-redux'
import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
+import { useActiveTopology } from '../../../data/topology'
const TopologyContainer = () => {
- const topology = useSelector(
- (state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId]
- )
+ const topology = useActiveTopology()
const interactionLevel = useSelector((state) => state.interactionLevel)
return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
index e9d58b9f..a10eea22 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { useSelector } from 'react-redux'
import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent'
+import { useMapScale } from '../../../../data/map'
const ScaleIndicatorContainer = (props) => {
- const scale = useSelector((state) => state.map.scale)
+ const scale = useMapScale()
return <ScaleIndicatorComponent {...props} scale={scale} />
}
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
index a18dfd5b..a39c6077 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
@@ -1,11 +1,12 @@
import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { zoomInOnCenter } from '../../../../actions/map'
+import { useDispatch } from 'react-redux'
+import { zoomInOnCenter } from '../../../../redux/actions/map'
import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent'
+import { useMapScale } from '../../../../data/map'
const ZoomControlContainer = () => {
const dispatch = useDispatch()
- const scale = useSelector((state) => state.map.scale)
+ const scale = useMapScale()
return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} />
}
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
index 5f701b4b..633ebcc7 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
@@ -1,9 +1,10 @@
import React from 'react'
-import { useSelector } from 'react-redux'
import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
+import { useMapPosition, useMapScale } from '../../../../data/map'
const MapLayer = (props) => {
- const { position, scale } = useSelector((state) => state.map)
+ const position = useMapPosition()
+ const scale = useMapScale()
return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
}
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
index cefdf35c..8e934a01 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { addRackToTile } from '../../../../actions/topology/room'
+import { addRackToTile } from '../../../../redux/actions/topology/room'
import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
import { findTileWithPosition } from '../../../../util/tile-calculations'
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
index 2717d890..1bfadb6d 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
-import { toggleTileAtLocation } from '../../../../actions/topology/building'
+import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
import {
deriveValidNextTilePositions,