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`

1 files changed, 18 insertions, 16 deletions

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