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`

5 files changed, 26 insertions, 14 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
index a99b60c0..059cfea8 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -23,9 +23,10 @@
 import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
 import { useMemo, useState } from 'react'
-import { contextSelector } from './ContextSelector.module.scss'
 
-function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label }) {
+import styles from './ContextSelector.module.scss'
+
+function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) {
     const [searchValue, setSearchValue] = useState('')
     const filteredItems = useMemo(
         () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items,
@@ -34,11 +35,11 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label
 
     return (
         <PFContextSelector
-            className={contextSelector}
-            toggleText={activeItem ? `${label}: ${activeItem.name}` : label}
+            id={id}
+            className={type === 'page' && styles.pageSelector}
+            toggleText={toggleText}
             onSearchInputChange={(value) => setSearchValue(value)}
             searchInputValue={searchValue}
-            isOpen={isOpen}
             onToggle={(_, isOpen) => onToggle(isOpen)}
             onSelect={(event) => {
                 const targetId = +event.target.value
@@ -47,6 +48,8 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label
                 onSelect(target)
                 onToggle(!isOpen)
             }}
+            isOpen={isOpen}
+            isFullHeight={isFullHeight}
         >
             {filteredItems.map((item) => (
                 <ContextSelectorItem key={item.id} value={item.id}>
@@ -63,12 +66,14 @@ const Item = PropTypes.shape({
 })
 
 ContextSelector.propTypes = {
-    activeItem: Item,
+    id: PropTypes.string,
+    type: PropTypes.oneOf(['app', 'page']),
     items: PropTypes.arrayOf(Item).isRequired,
+    toggleText: PropTypes.string,
     onSelect: PropTypes.func.isRequired,
     onToggle: PropTypes.func.isRequired,
     isOpen: PropTypes.bool,
-    label: PropTypes.string,
+    isFullHeight: PropTypes.bool,
 }
 
 export default ContextSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
index 07b7b1d0..4f86ac64 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
@@ -20,10 +20,11 @@
  * SOFTWARE.
  */
 
-.contextSelector.contextSelector {
+.pageSelector.pageSelector {
     // Ensure this selector has precedence over the default one
     margin-right: 20px;
 
+    --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg);
     --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm);
     --pf-c-context-selector__toggle--PaddingRight: 0;
     --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--sm);
diff --git a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
index c4f2d50e..e401e6fc 100644
--- a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
@@ -34,7 +34,8 @@ function PortfolioSelector({ activePortfolio }) {
 
     return (
         <ContextSelector
-            label="Portfolio"
+            id="portfolio"
+            toggleText={activePortfolio ? `Portfolio: ${activePortfolio.name}` : 'Select portfolio'}
             activeItem={activePortfolio}
             items={portfolios}
             onSelect={(portfolio) => router.push(`/projects/${portfolio.project.id}/portfolios/${portfolio.number}`)}
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
         />
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
index 9cae4cbf..355d9f4b 100644
--- a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
@@ -34,7 +34,8 @@ function TopologySelector({ activeTopology }) {
 
     return (
         <ContextSelector
-            label="Topology"
+            id="topology"
+            toggleText={activeTopology ? `Topology: ${activeTopology.name}` : 'Select topology'}
             activeItem={activeTopology}
             items={topologies}
             onSelect={(topology) => router.push(`/projects/${topology.project.id}/topologies/${topology.number}`)}