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, 45 insertions, 44 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
index ced5304a..62deace0 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
@@ -20,66 +20,67 @@
  * SOFTWARE.
  */
 
+import { Bullseye } from '@patternfly/react-core'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
-import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { Tr, Th, Thead, Td, ActionsColumn, Tbody, TableComposable } from '@patternfly/react-table'
 import React from 'react'
 import TableEmptyState from '../util/TableEmptyState'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import { useTopologies, useDeleteTopology } from '../../data/topology'
 
-const TopologyTable = ({ projectId }) => {
+function TopologyTable({ projectId }) {
     const { status, data: topologies = [] } = useTopologies(projectId)
     const { mutate: deleteTopology } = useDeleteTopology()
 
-    const columns = ['Name', 'Rooms', 'Last Edited']
-    const rows =
-        topologies.length > 0
-            ? topologies.map((topology) => [
-                  {
-                      title: <Link href={`/projects/${projectId}/topologies/${topology.number}`}>{topology.name}</Link>,
-                  },
-                  topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`,
-                  parseAndFormatDateTime(topology.updatedAt),
-              ])
-            : [
-                  {
-                      heightAuto: true,
-                      cells: [
-                          {
-                              props: { colSpan: 3 },
-                              title: (
-                                  <TableEmptyState
-                                      status={status}
-                                      loadingTitle="Loading topologies"
-                                      emptyTitle="No topologies"
-                                      emptyText="You have not created any topology for this project yet. Click the New Topology button to create one."
-                                  />
-                              ),
-                          },
-                      ],
-                  },
-              ]
-
-    const actionResolver = (_, { rowIndex }) => [
+    const actions = ({ number }) => [
         {
             title: 'Delete Topology',
-            onClick: (_, rowId) => deleteTopology({ projectId, number: topologies[rowId].number }),
-            isDisabled: rowIndex === 0,
+            onClick: () => deleteTopology({ projectId, number }),
+            isDisabled: number === 0,
         },
     ]
 
     return (
-        <Table
-            aria-label="Topology List"
-            variant="compact"
-            cells={columns}
-            rows={rows}
-            actionResolver={topologies.length > 0 ? actionResolver : () => []}
-        >
-            <TableHeader />
-            <TableBody />
-        </Table>
+        <TableComposable aria-label="Topology List" variant="compact">
+            <Thead>
+                <Tr>
+                    <Th>Name</Th>
+                    <Th>Rooms</Th>
+                    <Th>Last Edited</Th>
+                </Tr>
+            </Thead>
+            <Tbody>
+                {topologies.map((topology) => (
+                    <Tr key={topology.id}>
+                        <Td dataLabel="Name">
+                            <Link href={`/projects/${projectId}/topologies/${topology.number}`}>{topology.name}</Link>
+                        </Td>
+                        <Td dataLabel="Rooms">
+                            {topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`}
+                        </Td>
+                        <Td dataLabel="Last Edited">{parseAndFormatDateTime(topology.updatedAt)}</Td>
+                        <Td isActionCell>
+                            <ActionsColumn items={actions(topology)} />
+                        </Td>
+                    </Tr>
+                ))}
+                {topologies.length === 0 && (
+                    <Tr>
+                        <Td colSpan={3}>
+                            <Bullseye>
+                                <TableEmptyState
+                                    status={status}
+                                    loadingTitle="Loading topologies"
+                                    emptyTitle="No topologies"
+                                    emptyText="You have not created any topology for this project yet. Click the New Topology button to create one."
+                                />
+                            </Bullseye>
+                        </Td>
+                    </Tr>
+                )}
+            </Tbody>
+        </TableComposable>
     )
 }