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, 9 insertions, 3 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
index be4256e3..780ec034 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
@@ -57,9 +57,10 @@ const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCan
             setErrors({ name: true })
             return false
         } else {
-            const candidate = topologies.find((topology) => topology.id === originTopology) || { projectId, rooms: [] }
+            const candidate = topologies.find((topology) => topology.id === originTopology) || { rooms: [] }
             const topology = produce(candidate, (draft) => {
-                delete draft.id
+                delete draft.project
+                draft.projectId = projectId
                 draft.name = name
             })
             onSubmitUpstream(topology)
@@ -87,7 +88,12 @@ const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCan
                     <TextInput id="name" name="name" type="text" isRequired ref={nameInput} />
                 </FormGroup>
                 <FormGroup label="Topology to duplicate" fieldId="origin" isRequired>
-                    <FormSelect id="origin" name="origin" value={originTopology} onChange={setOriginTopology}>
+                    <FormSelect
+                        id="origin"
+                        name="origin"
+                        value={originTopology}
+                        onChange={(v) => setOriginTopology(+v)}
+                    >
                         <FormSelectOption value={-1} key={-1} label="None - start from scratch" />
                         {topologies.map((topology) => (
                             <FormSelectOption value={topology.id} key={topology.id} label={topology.name} />