From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:41:53 +0100
Subject: ui: Do not clutter component tree with Redux connects

This change refactors the frontend to use hooks for obtaining state
within the Redux store as opposed to using Higher-Order Components
(HOCs). This eliminates a lot of clutter in the components.
---
 .../sidebars/topology/rack/AddPrefabContainer.js    | 12 +++++-------
 .../sidebars/topology/rack/BackToRoomContainer.js   | 12 +++++-------
 .../sidebars/topology/rack/DeleteRackContainer.js   | 12 +++++-------
 .../sidebars/topology/rack/EmptySlotContainer.js    | 13 ++++++-------
 .../app/sidebars/topology/rack/MachineContainer.js  | 21 ++++++++-------------
 .../sidebars/topology/rack/MachineListContainer.js  | 14 +++++++-------
 .../app/sidebars/topology/rack/RackNameContainer.js | 21 ++++++++-------------
 .../sidebars/topology/rack/RackSidebarContainer.js  | 12 +++++-------
 8 files changed, 49 insertions(+), 68 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
index c941e745..3708e33e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { addPrefab } from '../../../../../actions/prefabs'
 import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(addPrefab('name')),
-    }
+const AddPrefabContainer = (props) => {
+    const dispatch = useDispatch()
+    return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} />
 }
 
-const AddPrefabContainer = connect(undefined, mapDispatchToProps)(AddPrefabComponent)
-
 export default AddPrefabContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
index 58c3b082..93bb749f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level'
 import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    }
+const BackToRoomContainer = (props) => {
+    const dispatch = useDispatch()
+    return <BackToRoomComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} />
 }
 
-const BackToRoomContainer = connect(undefined, mapDispatchToProps)(BackToRoomComponent)
-
 export default BackToRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
index 8229a359..de46e491 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { openDeleteRackModal } from '../../../../../actions/modals/topology'
 import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(openDeleteRackModal()),
-    }
+const DeleteRackContainer = (props) => {
+    const dispatch = useDispatch()
+    return <DeleteRackComponent {...props} onClick={() => dispatch(openDeleteRackModal())} />
 }
 
-const DeleteRackContainer = connect(undefined, mapDispatchToProps)(DeleteRackComponent)
-
 export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
index cf341da9..5bb2c784 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
@@ -1,13 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { addMachine } from '../../../../../actions/topology/rack'
 import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent'
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onAdd: () => dispatch(addMachine(ownProps.position)),
-    }
+const EmptySlotContainer = (props) => {
+    const dispatch = useDispatch()
+    const onAdd = () => dispatch(addMachine(props.position))
+    return <EmptySlotComponent {...props} onAdd={onAdd} />
 }
 
-const EmptySlotContainer = connect(undefined, mapDispatchToProps)(EmptySlotComponent)
-
 export default EmptySlotContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
index fe12827d..149b4d18 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
@@ -1,19 +1,14 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { goFromRackToMachine } from '../../../../../actions/interaction-level'
 import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent'
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        machine: state.objects.machine[ownProps.machineId],
-    }
+const MachineContainer = (props) => {
+    const machine = useSelector((state) => state.objects.machine[props.machineId])
+    const dispatch = useDispatch()
+    return (
+        <MachineComponent {...props} onClick={() => dispatch(goFromRackToMachine(props.position))} machine={machine} />
+    )
 }
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onClick: () => dispatch(goFromRackToMachine(ownProps.position)),
-    }
-}
-
-const MachineContainer = connect(mapStateToProps, mapDispatchToProps)(MachineComponent)
-
 export default MachineContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
index bc5a285a..b45300fc 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
@@ -1,12 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        machineIds: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds,
-    }
+const MachineListContainer = (props) => {
+    const machineIds = useSelector(
+        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds
+    )
+    return <MachineListComponent {...props} machineIds={machineIds} />
 }
 
-const MachineListContainer = connect(mapStateToProps)(MachineListComponent)
-
 export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index 504dbc61..7dfdb473 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -1,19 +1,14 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { openEditRackNameModal } from '../../../../../actions/modals/topology'
 import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        rackName: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name,
-    }
+const RackNameContainer = (props) => {
+    const rackName = useSelector(
+        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
+    )
+    const dispatch = useDispatch()
+    return <RackNameComponent {...props} rackName={rackName} onEdit={() => dispatch(openEditRackNameModal())} />
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onEdit: () => dispatch(openEditRackNameModal()),
-    }
-}
-
-const RackNameContainer = connect(mapStateToProps, mapDispatchToProps)(RackNameComponent)
-
 export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
index 453d7e41..b8fc3bfb 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
@@ -1,12 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        rackId: state.objects.tile[state.interactionLevel.tileId].rackId,
-    }
+const RackSidebarContainer = (props) => {
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rackId)
+    return <RackSidebarComponent {...props} rackId={rackId} />
 }
 
-const RackSidebarContainer = connect(mapStateToProps)(RackSidebarComponent)
-
 export default RackSidebarContainer
-- 
cgit v1.2.3


From 1edbae1a0224e30bafb98638f419e1f967a9286f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 17:42:53 +0200
Subject: ui: Move modal state outside of Redux

This change updates the frontend so that the modal state is not stored
inside Redux but instead is stored using the useState hook. This
simplifies the design of the modal components.
---
 .../sidebars/topology/rack/DeleteRackContainer.js  | 31 ++++++++++++++++++----
 .../sidebars/topology/rack/RackNameContainer.js    | 29 ++++++++++++++++----
 2 files changed, 50 insertions(+), 10 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
index de46e491..4c7fd8bf 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -1,11 +1,32 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { openDeleteRackModal } from '../../../../../actions/modals/topology'
-import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteRack } from '../../../../../actions/topology/rack'
+import { Button } from 'reactstrap'
 
-const DeleteRackContainer = (props) => {
+const DeleteRackContainer = () => {
     const dispatch = useDispatch()
-    return <DeleteRackComponent {...props} onClick={() => dispatch(openDeleteRackModal())} />
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button color="danger" outline block onClick={() => setVisible(true)}>
+                <span className="fa fa-trash mr-2" />
+                Delete this rack
+            </Button>
+            <ConfirmationModal
+                title="Delete this rack"
+                message="Are you sure you want to delete this rack?"
+                show={isVisible}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index 7dfdb473..dd9b05fc 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -1,14 +1,33 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { openEditRackNameModal } from '../../../../../actions/modals/topology'
-import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent'
+import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
+import TextInputModal from '../../../../../components/modals/TextInputModal'
+import { editRackName } from '../../../../../actions/topology/rack'
 
-const RackNameContainer = (props) => {
+const RackNameContainer = () => {
+    const [isVisible, setVisible] = useState(false)
     const rackName = useSelector(
         (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
     )
     const dispatch = useDispatch()
-    return <RackNameComponent {...props} rackName={rackName} onEdit={() => dispatch(openEditRackNameModal())} />
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(name))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <NameComponent name={rackName} onEdit={() => setVisible(true)} />
+            <TextInputModal
+                title="Edit rack name"
+                label="Rack name"
+                show={isVisible}
+                initialValue={rackName}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default RackNameContainer
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
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.
---
 .../src/containers/app/sidebars/topology/rack/AddPrefabContainer.js     | 2 +-
 .../src/containers/app/sidebars/topology/rack/BackToRoomContainer.js    | 2 +-
 .../src/containers/app/sidebars/topology/rack/DeleteRackContainer.js    | 2 +-
 .../src/containers/app/sidebars/topology/rack/EmptySlotContainer.js     | 2 +-
 .../src/containers/app/sidebars/topology/rack/MachineContainer.js       | 2 +-
 .../src/containers/app/sidebars/topology/rack/RackNameContainer.js      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
index 3708e33e..c2a0fc48 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../actions/prefabs'
+import { addPrefab } from '../../../../../redux/actions/prefabs'
 import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent'
 
 const AddPrefabContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
index 93bb749f..a98728a6 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.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 BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent'
 
 const BackToRoomContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
index 4c7fd8bf..290803c2 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRack } from '../../../../../actions/topology/rack'
+import { deleteRack } from '../../../../../redux/actions/topology/rack'
 import { Button } from 'reactstrap'
 
 const DeleteRackContainer = () => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
index 5bb2c784..2134e411 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { addMachine } from '../../../../../actions/topology/rack'
+import { addMachine } from '../../../../../redux/actions/topology/rack'
 import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent'
 
 const EmptySlotContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
index 149b4d18..7d8e32c1 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { goFromRackToMachine } from '../../../../../actions/interaction-level'
+import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
 import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent'
 
 const MachineContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index dd9b05fc..eaa1e78e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
 import TextInputModal from '../../../../../components/modals/TextInputModal'
-import { editRackName } from '../../../../../actions/topology/rack'
+import { editRackName } from '../../../../../redux/actions/topology/rack'
 
 const RackNameContainer = () => {
     const [isVisible, setVisible] = useState(false)
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 .../src/containers/app/sidebars/topology/rack/DeleteRackContainer.js  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
index 290803c2..4463530e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
 import { deleteRack } from '../../../../../redux/actions/topology/rack'
 import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const DeleteRackContainer = () => {
     const dispatch = useDispatch()
@@ -16,7 +18,7 @@ const DeleteRackContainer = () => {
     return (
         <>
             <Button color="danger" outline block onClick={() => setVisible(true)}>
-                <span className="fa fa-trash mr-2" />
+                <FontAwesomeIcon icon={faTrash} className="mr-2" />
                 Delete this rack
             </Button>
             <ConfirmationModal
-- 
cgit v1.2.3


From 29196842447d841d2e21462adcfc8c2ed1d851ad Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
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.
---
 .../sidebars/topology/rack/EmptySlotContainer.js   | 12 ----------
 .../app/sidebars/topology/rack/MachineContainer.js | 14 -----------
 .../sidebars/topology/rack/MachineListContainer.js | 27 ++++++++++++++++++----
 .../sidebars/topology/rack/RackNameContainer.js    |  2 +-
 .../sidebars/topology/rack/RackSidebarContainer.js |  2 +-
 5 files changed, 24 insertions(+), 33 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
deleted file mode 100644
index 2134e411..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { addMachine } from '../../../../../redux/actions/topology/rack'
-import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent'
-
-const EmptySlotContainer = (props) => {
-    const dispatch = useDispatch()
-    const onAdd = () => dispatch(addMachine(props.position))
-    return <EmptySlotComponent {...props} onAdd={onAdd} />
-}
-
-export default EmptySlotContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
deleted file mode 100644
index 7d8e32c1..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
-import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent'
-
-const MachineContainer = (props) => {
-    const machine = useSelector((state) => state.objects.machine[props.machineId])
-    const dispatch = useDispatch()
-    return (
-        <MachineComponent {...props} onClick={() => dispatch(goFromRackToMachine(props.position))} machine={machine} />
-    )
-}
-
-export default MachineContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
index b45300fc..2118d915 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
@@ -1,12 +1,29 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent'
+import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
+import { addMachine } from '../../../../../redux/actions/topology/rack'
 
 const MachineListContainer = (props) => {
-    const machineIds = useSelector(
-        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const machinesNull = useMemo(() => {
+        const res = Array(rack.capacity).fill(null)
+        for (const machine of machines) {
+            res[machine.position - 1] = machine
+        }
+        return res
+    }, [rack, machines])
+    const dispatch = useDispatch()
+
+    return (
+        <MachineListComponent
+            {...props}
+            machines={machinesNull}
+            onAdd={(index) => dispatch(addMachine(index))}
+            onSelect={(index) => dispatch(goFromRackToMachine(index))}
+        />
     )
-    return <MachineListComponent {...props} machineIds={machineIds} />
 }
 
 export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index eaa1e78e..2c39cf9f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -7,7 +7,7 @@ import { editRackName } from '../../../../../redux/actions/topology/rack'
 const RackNameContainer = () => {
     const [isVisible, setVisible] = useState(false)
     const rackName = useSelector(
-        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
+        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].name
     )
     const dispatch = useDispatch()
     const callback = (name) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
index b8fc3bfb..34777125 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'
 import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent'
 
 const RackSidebarContainer = (props) => {
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rackId)
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
     return <RackSidebarComponent {...props} rackId={rackId} />
 }
 
-- 
cgit v1.2.3


From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Jul 2021 22:23:40 +0200
Subject: feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.
---
 .../sidebars/topology/rack/AddPrefabContainer.js   | 11 -------
 .../sidebars/topology/rack/BackToRoomContainer.js  | 11 -------
 .../sidebars/topology/rack/DeleteRackContainer.js  | 34 ----------------------
 .../sidebars/topology/rack/MachineListContainer.js | 29 ------------------
 .../sidebars/topology/rack/RackNameContainer.js    | 33 ---------------------
 .../sidebars/topology/rack/RackSidebarContainer.js | 10 -------
 6 files changed, 128 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
deleted file mode 100644
index c2a0fc48..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../redux/actions/prefabs'
-import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent'
-
-const AddPrefabContainer = (props) => {
-    const dispatch = useDispatch()
-    return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} />
-}
-
-export default AddPrefabContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
deleted file mode 100644
index a98728a6..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
-import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent'
-
-const BackToRoomContainer = (props) => {
-    const dispatch = useDispatch()
-    return <BackToRoomComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} />
-}
-
-export default BackToRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
deleted file mode 100644
index 4463530e..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRack } from '../../../../../redux/actions/topology/rack'
-import { Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-
-const DeleteRackContainer = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRack())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button color="danger" outline block onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faTrash} className="mr-2" />
-                Delete this rack
-            </Button>
-            <ConfirmationModal
-                title="Delete this rack"
-                message="Are you sure you want to delete this rack?"
-                show={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
deleted file mode 100644
index 2118d915..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent'
-import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
-import { addMachine } from '../../../../../redux/actions/topology/rack'
-
-const MachineListContainer = (props) => {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
-    const machinesNull = useMemo(() => {
-        const res = Array(rack.capacity).fill(null)
-        for (const machine of machines) {
-            res[machine.position - 1] = machine
-        }
-        return res
-    }, [rack, machines])
-    const dispatch = useDispatch()
-
-    return (
-        <MachineListComponent
-            {...props}
-            machines={machinesNull}
-            onAdd={(index) => dispatch(addMachine(index))}
-            onSelect={(index) => dispatch(goFromRackToMachine(index))}
-        />
-    )
-}
-
-export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
deleted file mode 100644
index 2c39cf9f..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
-import TextInputModal from '../../../../../components/modals/TextInputModal'
-import { editRackName } from '../../../../../redux/actions/topology/rack'
-
-const RackNameContainer = () => {
-    const [isVisible, setVisible] = useState(false)
-    const rackName = useSelector(
-        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].name
-    )
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRackName(name))
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <NameComponent name={rackName} onEdit={() => setVisible(true)} />
-            <TextInputModal
-                title="Edit rack name"
-                label="Rack name"
-                show={isVisible}
-                initialValue={rackName}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
deleted file mode 100644
index 34777125..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent'
-
-const RackSidebarContainer = (props) => {
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-    return <RackSidebarComponent {...props} rackId={rackId} />
-}
-
-export default RackSidebarContainer
-- 
cgit v1.2.3