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, 12 insertions, 7 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