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, 8 insertions, 4 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
index 7721e04c..f2791b38 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
@@ -22,24 +22,28 @@
 
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { useProjects } from '../../data/project'
+import { useProjects, useProject } from '../../data/project'
 import { Project } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function ProjectSelector({ activeProject }) {
+function ProjectSelector() {
     const router = useRouter()
+    const projectId = +router.query['project']
 
     const [isOpen, setOpen] = useState(false)
+    const { data: activeProject } = useProject(+projectId)
     const { data: projects = [] } = useProjects({ enabled: isOpen })
 
     return (
         <ContextSelector
-            label="Project"
-            activeItem={activeProject}
+            id="project"
+            type="app"
+            toggleText={activeProject ? activeProject.name : 'Select project'}
             items={projects}
             onSelect={(project) => router.push(`/projects/${project.id}`)}
             onToggle={setOpen}
             isOpen={isOpen}
+            isFullHeight
         />
     )
 }