From 41e02cdab85ba5db92be7f7bea07ae1f20bcbdd9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 22 Jul 2021 19:05:58 +0200
Subject: fix(web/ui): Fix creation of topologies

This change fixes an issue with the creation of topologies in the
frontend. Previously, the frontend relied on Redux to update the state.
However, since we removed the reliance on Redux, we also need to create
a new topology using the functions from React Query to actually send a
request to the API server.
---
 .../src/components/projects/NewTopology.js         | 15 ++++++---
 .../projects/[project]/topologies/[topology].js    | 13 +++-----
 .../opendc-web-ui/src/redux/actions/topologies.js  | 27 ---------------
 .../src/redux/actions/topology/index.js            | 39 ++++++++++++++++++++++
 .../src/redux/reducers/topology/machine.js         |  2 +-
 .../src/redux/reducers/topology/rack.js            |  2 +-
 .../src/redux/reducers/topology/room.js            |  2 +-
 .../src/redux/reducers/topology/tile.js            |  2 +-
 .../src/redux/reducers/topology/topology.js        |  2 +-
 .../opendc-web-ui/src/redux/sagas/topology.js      |  2 +-
 10 files changed, 61 insertions(+), 45 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/redux/actions/topologies.js
 create mode 100644 opendc-web/opendc-web-ui/src/redux/actions/topology/index.js

(limited to 'opendc-web')

diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
index bf59e020..77c57d26 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
@@ -21,19 +21,26 @@
  */
 
 import PropTypes from 'prop-types'
+import produce from 'immer'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import { addTopology } from '../../redux/actions/topologies'
+import { useMutation } from "react-query";
+import { useProjectTopologies } from "../../data/topology";
 import NewTopologyModal from './NewTopologyModal'
 
 function NewTopology({ projectId }) {
     const [isVisible, setVisible] = useState(false)
-    const dispatch = useDispatch()
+    const { data: topologies = [] } = useProjectTopologies(projectId)
+    const { mutate: addTopology } = useMutation('addTopology')
 
     const onSubmit = (name, duplicateId) => {
-        dispatch(addTopology(projectId, name, duplicateId))
+        const candidate = topologies.find((topology) => topology._id === duplicateId) || { projectId, rooms: [] }
+        const topology = produce(candidate, (draft) => {
+            delete draft._id
+            draft.name = name
+        })
+        addTopology(topology)
         setVisible(false)
     }
     return (
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 858f9b16..f7188d9f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import ContextSelectionSection from '../../../../components/context/ContextSelectionSection'
 import ProjectSelector from '../../../../components/context/ProjectSelector'
@@ -44,9 +45,10 @@ import {
     TextContent,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import TopologyMap from '../../../../components/topologies/TopologyMap'
 import { goToRoom } from '../../../../redux/actions/interaction-level'
-import { openTopology } from '../../../../redux/actions/topologies'
+import { openTopology } from '../../../../redux/actions/topology'
+
+const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap'))
 
 /**
  * Page that displays a datacenter topology.
@@ -124,12 +126,7 @@ function Topology() {
                         }}
                     />
                 </TabContent>
-                <TabContent
-                    id="floor-plan"
-                    aria-label="Floor Plan tab"
-                    className="pf-u-h-100"
-                    hidden={activeTab !== 'floor-plan'}
-                >
+                <TabContent id="floor-plan" aria-label="Floor Plan tab" className="pf-u-h-100" hidden={activeTab !== 'floor-plan'}>
                     <TopologyMap />
                 </TabContent>
             </PageSection>
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
deleted file mode 100644
index fc697cc2..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export const OPEN_TOPOLOGY = 'OPEN_TOPOLOGY'
-export const ADD_TOPOLOGY = 'ADD_TOPOLOGY'
-export const STORE_TOPOLOGY = 'STORE_TOPOLOGY'
-
-export function openTopology(id) {
-    return {
-        type: OPEN_TOPOLOGY,
-        id,
-    }
-}
-
-export function addTopology(projectId, name, duplicateId) {
-    return {
-        type: ADD_TOPOLOGY,
-        projectId,
-        name,
-        duplicateId,
-    }
-}
-
-export function storeTopology(topology, entities) {
-    return {
-        type: STORE_TOPOLOGY,
-        topology,
-        entities,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/index.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/index.js
new file mode 100644
index 00000000..94a712c4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/index.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export const OPEN_TOPOLOGY = 'OPEN_TOPOLOGY'
+export const STORE_TOPOLOGY = 'STORE_TOPOLOGY'
+
+export function openTopology(id) {
+    return {
+        type: OPEN_TOPOLOGY,
+        id,
+    }
+}
+
+export function storeTopology(topology, entities) {
+    return {
+        type: STORE_TOPOLOGY,
+        topology,
+        entities,
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js
index 41773014..47af53cf 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js
@@ -1,5 +1,5 @@
 import produce from 'immer'
-import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { STORE_TOPOLOGY } from '../../actions/topology'
 import { DELETE_MACHINE, ADD_UNIT, DELETE_UNIT } from '../../actions/topology/machine'
 import { ADD_MACHINE, DELETE_RACK } from '../../actions/topology/rack'
 
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js
index 9cc37124..155837cb 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js
@@ -21,7 +21,7 @@
  */
 
 import produce from 'immer'
-import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { STORE_TOPOLOGY } from '../../actions/topology'
 import { DELETE_MACHINE } from '../../actions/topology/machine'
 import { DELETE_RACK, EDIT_RACK_NAME, ADD_MACHINE } from '../../actions/topology/rack'
 import { ADD_RACK_TO_TILE } from '../../actions/topology/room'
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js
index b61c9d82..d6cc51c1 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js
@@ -21,7 +21,7 @@
  */
 
 import produce from 'immer'
-import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { STORE_TOPOLOGY } from '../../actions/topology'
 import { ADD_TILE, DELETE_TILE } from '../../actions/topology/building'
 import { DELETE_ROOM, EDIT_ROOM_NAME, ADD_ROOM } from '../../actions/topology/room'
 
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js
index e0c5dd33..6dbccb66 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js
@@ -21,7 +21,7 @@
  */
 
 import produce from 'immer'
-import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { STORE_TOPOLOGY } from '../../actions/topology'
 import { ADD_TILE, DELETE_TILE } from '../../actions/topology/building'
 import { DELETE_RACK } from '../../actions/topology/rack'
 import { ADD_RACK_TO_TILE } from '../../actions/topology/room'
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js
index da0e6988..cd9b5efd 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js
@@ -21,7 +21,7 @@
  */
 
 import produce from 'immer'
-import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { STORE_TOPOLOGY } from "../../actions/topology";
 import { ADD_ROOM, DELETE_ROOM } from '../../actions/topology/room'
 
 function topology(state = undefined, action) {
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 f40cff28..4c8ff5da 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -3,7 +3,7 @@ import { normalize, denormalize } from 'normalizr'
 import { select, put, take, race, getContext, call } from 'redux-saga/effects'
 import { eventChannel } from 'redux-saga'
 import { Topology } from '../../util/topology-schema'
-import { storeTopology, OPEN_TOPOLOGY } from '../actions/topologies'
+import { storeTopology, OPEN_TOPOLOGY } from '../actions/topology'
 
 /**
  * Update the topology on the server.
-- 
cgit v1.2.3