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, 51 insertions, 47 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>
     )
 }