merge: Improve web interface (#100)

This pull request addresses several issues with the current web interface.

## Implementation Notes :hammer_and_pick:

* Update dependencies of web UI where possible
* Fix deletion of topology
* Fix duplication of topology
* Only display selected metrics
* Use correct color for login button
* Fix z-index of context selector
* Move project selector into masthead
* Reduce height of application header
* Redesign projects page
* Use PatternFly Charts for plots
* Do not fail on stale Redux state
* Fix overflow of topology sidebar
* Fix deletion of portfolios
* Migrate to composable table

## External Dependencies :four_leaf_clover:

* `classnames` has been replaced by `clsx`
* PatternFly Charts have replaced the use of `recharts`

11 files changed, 111 insertions, 87 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
index 49e5f095..7f7b4171 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -1,63 +1,67 @@
-import { Button } from '@patternfly/react-core'
+import { Button, Bullseye } from '@patternfly/react-core'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTopology } from '../../data/topology'
-import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { Tr, Th, Thead, TableComposable, Td, ActionsColumn, Tbody } from '@patternfly/react-table'
 import { deleteRoom } from '../../redux/actions/topology/room'
 import TableEmptyState from '../util/TableEmptyState'
 
 function RoomTable({ projectId, topologyId, onSelect }) {
     const dispatch = useDispatch()
     const { status, data: topology } = useTopology(projectId, topologyId)
-
     const onDelete = (room) => dispatch(deleteRoom(room.id))
-
-    const columns = ['Name', 'Tiles', 'Racks']
-    const rows =
-        topology?.rooms.length > 0
-            ? topology.rooms.map((room) => {
-                  const tileCount = room.tiles.length
-                  const rackCount = room.tiles.filter((tile) => tile.rack).length
-                  return [
-                      {
-                          title: (
-                              <Button variant="link" isInline onClick={() => onSelect(room)}>
-                                  {room.name}
-                              </Button>
-                          ),
-                      },
-                      tileCount === 1 ? '1 tile' : `${tileCount} tiles`,
-                      rackCount === 1 ? '1 rack' : `${rackCount} racks`,
-                  ]
-              })
-            : [
-                  {
-                      heightAuto: true,
-                      cells: [
-                          {
-                              props: { colSpan: 3 },
-                              title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />,
-                          },
-                      ],
-                  },
-              ]
-
-    const actions =
-        topology?.rooms.length > 0
-            ? [
-                  {
-                      title: 'Delete room',
-                      onClick: (_, rowId) => onDelete(topology.rooms[rowId]),
-                  },
-              ]
-            : []
+    const actions = (room) => [
+        {
+            title: 'Delete room',
+            onClick: () => onDelete(room),
+        },
+    ]
 
     return (
-        <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}>
-            <TableHeader />
-            <TableBody />
-        </Table>
+        <TableComposable aria-label="Room list" variant="compact">
+            <Thead>
+                <Tr>
+                    <Th>Name</Th>
+                    <Th>Tiles</Th>
+                    <Th>Racks</Th>
+                </Tr>
+            </Thead>
+            <Tbody>
+                {topology?.rooms.map((room) => {
+                    const tileCount = room.tiles.length
+                    const rackCount = room.tiles.filter((tile) => tile.rack).length
+                    return (
+                        <Tr key={room.id}>
+                            <Td dataLabel="Name">
+                                <Button variant="link" isInline onClick={() => onSelect(room)}>
+                                    {room.name}
+                                </Button>
+                            </Td>
+                            <Td dataLabel="Tiles">{tileCount === 1 ? '1 tile' : `${tileCount} tiles`}</Td>
+                            <Td dataLabel="Racks">{rackCount === 1 ? '1 rack' : `${rackCount} racks`}</Td>
+                            <Td isActionCell>
+                                <ActionsColumn items={actions(room)} />
+                            </Td>
+                        </Tr>
+                    )
+                })}
+                {topology?.rooms.length === 0 && (
+                    <Tr>
+                        <Td colSpan={4}>
+                            <Bullseye>
+                                <TableEmptyState
+                                    status={status}
+                                    loadingTitle="Loading Rooms"
+                                    emptyTitle="No rooms"
+                                    emptyText="There are currently no rooms in this topology. Open the Floor Plan to create a room"
+                                />
+                            </Bullseye>
+                        </Td>
+                    </Tr>
+                )}
+            </Tbody>
+        </TableComposable>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
index 47235c7e..ff583750 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -55,9 +55,9 @@ function TopologyMap() {
             </EmptyState>
         </Bullseye>
     ) : (
-        <Drawer isExpanded={isExpanded} className="full-height">
+        <Drawer isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>
-                <DrawerContentBody>
+                <DrawerContentBody style={{ position: 'relative' }}>
                     <MapStage hotkeysRef={hotkeysRef} />
                     <Collapse onClick={() => setExpanded(true)} />
                 </DrawerContentBody>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 7b96f548..8bf529b2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -15,7 +15,7 @@ import Toolbar from './controls/Toolbar'
 function MapStage({ hotkeysRef }) {
     const reduxContext = useContext(ReactReduxContext)
     const stageRef = useRef(null)
-    const { width = 100, height = 100 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
+    const { width = 500, height = 500 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
     const [[x, y], setPos] = useState([0, 0])
     const [scale, setScale] = useState(1)
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
index d879b4c8..47c3dde2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
@@ -24,8 +24,6 @@
     background-color: var(--pf-global--Color--light-200);
     position: relative;
     display: flex;
-    justify-content: center;
-    align-items: center;
     width: 100%;
     height: 100%;
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
index be1f3e45..a1ca7426 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
@@ -3,24 +3,26 @@ import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import RackFillBar from './elements/RackFillBar'
 
-function RackSpaceFillContainer({ tileId, ...props }) {
+function RackSpaceFillContainer({ rackId, ...props }) {
     const fillFraction = useSelector((state) => {
+        const rack = state.topology.racks[rackId]
+        if (!rack) {
+            return 0
+        }
+
+        const { machines, cpus, gpus, memories, storages } = state.topology
         let energyConsumptionTotal = 0
-        const rack = state.topology.racks[state.topology.tiles[tileId].rack]
-        const machineIds = rack.machines
-        machineIds.forEach((machineId) => {
-            if (machineId !== null) {
-                const machine = state.topology.machines[machineId]
-                machine.cpus.forEach((id) => (energyConsumptionTotal += state.topology.cpus[id].energyConsumptionW))
-                machine.gpus.forEach((id) => (energyConsumptionTotal += state.topology.gpus[id].energyConsumptionW))
-                machine.memories.forEach(
-                    (id) => (energyConsumptionTotal += state.topology.memories[id].energyConsumptionW)
-                )
-                machine.storages.forEach(
-                    (id) => (energyConsumptionTotal += state.topology.storages[id].energyConsumptionW)
-                )
+
+        for (const machineId of rack.machines) {
+            if (!machineId) {
+                continue
             }
-        })
+            const machine = machines[machineId]
+            machine.cpus.forEach((id) => (energyConsumptionTotal += cpus[id].energyConsumptionW))
+            machine.gpus.forEach((id) => (energyConsumptionTotal += gpus[id].energyConsumptionW))
+            machine.memories.forEach((id) => (energyConsumptionTotal += memories[id].energyConsumptionW))
+            machine.storages.forEach((id) => (energyConsumptionTotal += storages[id].energyConsumptionW))
+        }
 
         return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
     })
@@ -28,7 +30,7 @@ function RackSpaceFillContainer({ tileId, ...props }) {
 }
 
 RackSpaceFillContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
+    rackId: PropTypes.string.isRequired,
 }
 
 export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
index 0c15d54b..2039a9d3 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
@@ -25,13 +25,18 @@ import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import RackFillBar from './elements/RackFillBar'
 
-function RackSpaceFillContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+function RackSpaceFillContainer({ rackId, ...props }) {
+    const rack = useSelector((state) => state.topology.racks[rackId])
+
+    if (!rack) {
+        return null
+    }
+
     return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
 }
 
 RackSpaceFillContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
+    rackId: PropTypes.string.isRequired,
 }
 
 export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 65189891..76785bea 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -27,15 +27,24 @@ import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
 import RoomGroup from './groups/RoomGroup'
 
 function RoomContainer({ roomId, ...props }) {
-    const state = useSelector((state) => {
-        return {
-            interactionLevel: state.interactionLevel,
-            currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.topology.rooms[roomId],
-        }
-    })
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+    const room = useSelector((state) => state.topology.rooms[roomId])
     const dispatch = useDispatch()
-    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
+
+    if (!room) {
+        return null
+    }
+
+    return (
+        <RoomGroup
+            {...props}
+            interactionLevel={interactionLevel}
+            currentRoomInConstruction={currentRoomInConstruction}
+            room={room}
+            onClick={() => dispatch(goFromBuildingToRoom(roomId))}
+        />
+    )
 }
 
 RoomContainer.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
index 21be3c79..0788b894 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -28,9 +28,13 @@ import TileGroup from './groups/TileGroup'
 
 function TileContainer({ tileId, ...props }) {
     const interactionLevel = useSelector((state) => state.interactionLevel)
+    const dispatch = useDispatch()
     const tile = useSelector((state) => state.topology.tiles[tileId])
 
-    const dispatch = useDispatch()
+    if (!tile) {
+        return null
+    }
+
     const onClick = (tile) => {
         if (tile.rack) {
             dispatch(goFromRoomToRack(tile.id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
index 143f70c2..106d8d3d 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
@@ -27,7 +27,7 @@ import WallGroup from './groups/WallGroup'
 
 function WallContainer({ roomId, ...props }) {
     const tiles = useSelector((state) => {
-        return state.topology.rooms[roomId].tiles.map((tileId) => state.topology.tiles[tileId])
+        return state.topology.rooms[roomId]?.tiles.map((tileId) => state.topology.tiles[tileId]) ?? []
     })
     return <WallGroup {...props} tiles={tiles} />
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
index dad2d62d..ed942661 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
@@ -11,8 +11,8 @@ function RackGroup({ tile }) {
         <Group>
             <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
             <Group>
-                <RackSpaceFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY} />
-                <RackEnergyFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackSpaceFillContainer rackId={tile.rack} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer rackId={tile.rack} positionX={tile.positionX} positionY={tile.positionY} />
             </Group>
         </Group>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
index 6f258aec..f4c8829f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
@@ -1,12 +1,14 @@
 .sidebarContainer {
     display: flex;
-    height: 100%;
-    max-height: 100%;
     flex-direction: column;
+
+    height: 100%;
 }
 
 .machineListContainer {
-    flex: 1;
-    overflow-y: scroll;
+    overflow-y: auto;
+
+    flex: 1 0 300px;
+
     margin-top: 10px;
 }