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, 46 insertions, 14 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
index fd54b3ad..f9ef00aa 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js
@@ -20,25 +20,57 @@
  * SOFTWARE.
  */
 
-import { PageHeader } from '@patternfly/react-core'
+import Image from 'next/image'
+import PropTypes from 'prop-types'
 import React from 'react'
+import {
+    Masthead,
+    MastheadMain,
+    MastheadBrand,
+    MastheadContent,
+    Toolbar,
+    ToolbarContent,
+    ToolbarItem,
+} from '@patternfly/react-core'
+import Link from 'next/link'
 import AppHeaderTools from './AppHeaderTools'
-import { AppNavigation } from './AppNavigation'
-import AppLogo from './AppLogo'
+import AppHeaderUser from './AppHeaderUser'
+import ProjectSelector from './context/ProjectSelector'
 
-export function AppHeader() {
-    // eslint-disable-next-line @next/next/no-img-element
-    const logo = <img src="/img/logo.png" width={30} height={30} alt="OpenDC" />
+import styles from './AppHeader.module.scss'
 
+export default function AppHeader({ nav }) {
     return (
-        <PageHeader
-            logo={logo}
-            logoProps={{ href: '/' }}
-            logoComponent={AppLogo}
-            headerTools={<AppHeaderTools />}
-            topNav={<AppNavigation />}
-        />
+        <Masthead id="app-header" className={styles.header}>
+            <MastheadMain>
+                <MastheadBrand
+                    className={styles.logo}
+                    component={(props) => (
+                        <Link href="/projects">
+                            <a {...props} />
+                        </Link>
+                    )}
+                >
+                    <Image src="/img/logo.svg" alt="OpenDC logo" width={25} height={25} />
+                    <span>OpenDC</span>
+                </MastheadBrand>
+            </MastheadMain>
+            <MastheadContent>
+                <Toolbar id="toolbar" isFullHeight isStatic>
+                    <ToolbarContent>
+                        <ToolbarItem>
+                            <ProjectSelector />
+                        </ToolbarItem>
+                        {nav && <ToolbarItem>{nav}</ToolbarItem>}
+                        <AppHeaderTools />
+                        <AppHeaderUser />
+                    </ToolbarContent>
+                </Toolbar>
+            </MastheadContent>
+        </Masthead>
     )
 }
 
-AppHeader.propTypes = {}
+AppHeader.propTypes = {
+    nav: PropTypes.node,
+}