From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 .../src/pages/projects/[project]/index.js          | 37 ++++++++++++++++++++++
 .../projects/[project]/portfolios/[portfolio].js   | 37 ++++++++++++++++++++++
 .../opendc-web-ui/src/pages/projects/index.js      | 36 +++++++++++++++++++++
 3 files changed, 110 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/index.js

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
new file mode 100644
index 00000000..72316bc9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useRouter } from 'next/router'
+import App from '../../../containers/app/App'
+
+function Project() {
+    const router = useRouter()
+    const { project } = router.query
+
+    if (project) {
+        return <App projectId={project} />
+    }
+
+    return <div />
+}
+
+export default Project
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
new file mode 100644
index 00000000..76a8d23b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useRouter } from 'next/router'
+import App from '../../../../containers/app/App'
+
+function Project() {
+    const router = useRouter()
+    const { project, portfolio } = router.query
+
+    if (project && portfolio) {
+        return <App projectId={project} portfolioId={portfolio} />
+    }
+
+    return <div />
+}
+
+export default Project
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
new file mode 100644
index 00000000..bea9ad93
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react'
+import Head from 'next/head'
+import { useDispatch } from 'react-redux'
+import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
+import ProjectFilterPanel from '../../components/projects/FilterPanel'
+import NewProjectModal from '../../containers/modals/NewProjectModal'
+import NewProjectButtonContainer from '../../containers/projects/NewProjectButtonContainer'
+import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
+import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
+import { useRequireAuth } from '../../auth/hook'
+
+function Projects() {
+    const dispatch = useDispatch()
+
+    useRequireAuth()
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
+
+    return (
+        <>
+            <Head>
+                <title>My Projects - OpenDC</title>
+            </Head>
+            <div className="full-height">
+                <AppNavbarContainer fullWidth={false} />
+                <div className="container text-page-container full-height">
+                    <ProjectFilterPanel />
+                    <VisibleProjectList />
+                    <NewProjectButtonContainer />
+                </div>
+                <NewProjectModal />
+            </div>
+        </>
+    )
+}
+
+export default Projects
-- 
cgit v1.2.3


From 1891a6f3963d3ddeae0ea093f9a7e3608a97b4d7 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 16:35:01 +0200
Subject: ui: Simplify projects page

This change simplifies the logic and components of the projects page and
reduces its dependency on Redux for simple operations.
---
 .../opendc-web-ui/src/pages/projects/index.js      | 23 +++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index bea9ad93..dd61751f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
 import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
-import NewProjectModal from '../../containers/modals/NewProjectModal'
-import NewProjectButtonContainer from '../../containers/projects/NewProjectButtonContainer'
+import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth/hook'
+import { Container } from 'reactstrap'
 
 function Projects() {
+    useRequireAuth()
+
     const dispatch = useDispatch()
+    const [filter, setFilter] = useState('SHOW_ALL')
 
-    useRequireAuth()
-    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()), [])
 
     return (
         <>
@@ -22,12 +24,11 @@ function Projects() {
             </Head>
             <div className="full-height">
                 <AppNavbarContainer fullWidth={false} />
-                <div className="container text-page-container full-height">
-                    <ProjectFilterPanel />
-                    <VisibleProjectList />
-                    <NewProjectButtonContainer />
-                </div>
-                <NewProjectModal />
+                <Container className="text-page-container">
+                    <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
+                    <VisibleProjectList filter={filter} />
+                    <NewProjectContainer />
+                </Container>
             </div>
         </>
     )
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/pages/projects/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index dd61751f..05e9514f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
-import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
+import { fetchAuthorizationsOfCurrentUser } from '../../redux/actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
-import { useRequireAuth } from '../../auth/hook'
+import { useRequireAuth } from '../../auth'
 import { Container } from 'reactstrap'
 
 function Projects() {
-- 
cgit v1.2.3


From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 23:18:02 +0200
Subject: ui: Migrate to Auth0 as Identity Provider

This change updates the frontend codebase to move away from the Google
login and instead use Auth0 as generic Identity Provider. This allows
users to login with other accounts as well.

Since Auth0 has a free tier, users can experiment themselves with OpenDC
locally without having to pay for the login functionality. The code has
been written so that we should be able to migrate away from Auth0 once
it is not a suitable Identity Provider for OpenDC anymore.
---
 opendc-web/opendc-web-ui/src/pages/projects/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 05e9514f..8603c228 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
-import { fetchAuthorizationsOfCurrentUser } from '../../redux/actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import NewProjectContainer from '../../containers/projects/NewProjectContainer'
-import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
+import ProjectListContainer from '../../containers/projects/ProjectListContainer'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth'
 import { Container } from 'reactstrap'
+import { fetchProjects } from '../../redux/actions/projects'
 
 function Projects() {
     useRequireAuth()
@@ -15,7 +15,7 @@ function Projects() {
     const dispatch = useDispatch()
     const [filter, setFilter] = useState('SHOW_ALL')
 
-    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()), [])
+    useEffect(() => dispatch(fetchProjects()), [])
 
     return (
         <>
@@ -26,7 +26,7 @@ function Projects() {
                 <AppNavbarContainer fullWidth={false} />
                 <Container className="text-page-container">
                     <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
-                    <VisibleProjectList filter={filter} />
+                    <ProjectListContainer filter={filter} />
                     <NewProjectContainer />
                 </Container>
             </div>
-- 
cgit v1.2.3


From 0e52785dfc5e99f48718530976083cfbd1507651 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 5 Jul 2021 15:36:23 +0200
Subject: ui: Fix linting errors

---
 opendc-web/opendc-web-ui/src/pages/projects/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 8603c228..958ca622 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -15,7 +15,7 @@ function Projects() {
     const dispatch = useDispatch()
     const [filter, setFilter] = useState('SHOW_ALL')
 
-    useEffect(() => dispatch(fetchProjects()), [])
+    useEffect(() => dispatch(fetchProjects()), [dispatch])
 
     return (
         <>
-- 
cgit v1.2.3


From 1ce8bf170cda2afab334cd330325cd4fbb97dab4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 11:46:57 +0200
Subject: ui: Split App container into separate components

This change splits the App container into separate pages, as a starting
point for removing much of the unnecessary state from Redux.
---
 .../src/pages/projects/[project]/index.js          | 16 +----
 .../projects/[project]/portfolios/[portfolio].js   | 45 +++++++++---
 .../projects/[project]/topologies/[topology].js    | 81 ++++++++++++++++++++++
 3 files changed, 120 insertions(+), 22 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index 72316bc9..cce887aa 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -20,18 +20,6 @@
  * SOFTWARE.
  */
 
-import { useRouter } from 'next/router'
-import App from '../../../containers/app/App'
+import Topology from './topologies/[topology]'
 
-function Project() {
-    const router = useRouter()
-    const { project } = router.query
-
-    if (project) {
-        return <App projectId={project} />
-    }
-
-    return <div />
-}
-
-export default Project
+export default Topology
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 76a8d23b..b21db44c 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -21,17 +21,46 @@
  */
 
 import { useRouter } from 'next/router'
-import App from '../../../../containers/app/App'
+import Head from 'next/head'
+import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
+import React, { useEffect } from 'react'
+import { useProject } from '../../../../data/project'
+import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
+import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
+import { useDispatch } from 'react-redux'
+import { openPortfolioSucceeded } from '../../../../redux/actions/portfolios'
 
-function Project() {
+/**
+ * Page that displays the results in a portfolio.
+ */
+function Portfolio() {
     const router = useRouter()
-    const { project, portfolio } = router.query
+    const { project: projectId, portfolio: portfolioId } = router.query
+
+    const project = useProject(projectId)
+    const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
-    if (project && portfolio) {
-        return <App projectId={project} portfolioId={portfolio} />
-    }
+    const dispatch = useDispatch()
+    useEffect(() => {
+        if (portfolioId) {
+            dispatch(openPortfolioSucceeded(projectId, portfolioId))
+        }
+    }, [projectId, portfolioId, dispatch])
 
-    return <div />
+    return (
+        <div className="page-container full-height">
+            <Head>
+                <title>{title}</title>
+            </Head>
+            <AppNavbarContainer fullWidth={true} />
+            <div className="full-height app-page-container">
+                <ProjectSidebarContainer />
+                <div className="container-fluid full-height">
+                    <PortfolioResultsContainer />
+                </div>
+            </div>
+        </div>
+    )
 }
 
-export default Project
+export default Portfolio
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
new file mode 100644
index 00000000..28db1531
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useRouter } from 'next/router'
+import { useProject } from '../../../../data/project'
+import { useDispatch, useSelector } from 'react-redux'
+import React, { useEffect } from 'react'
+import { openProjectSucceeded } from '../../../../redux/actions/projects'
+import { HotKeys } from 'react-hotkeys'
+import { KeymapConfiguration } from '../../../../hotkeys'
+import Head from 'next/head'
+import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
+import LoadingScreen from '../../../../components/app/map/LoadingScreen'
+import MapStage from '../../../../containers/app/map/MapStage'
+import ScaleIndicatorContainer from '../../../../containers/app/map/controls/ScaleIndicatorContainer'
+import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent'
+import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
+import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer'
+
+/**
+ * Page that displays a datacenter topology.
+ */
+function Topology() {
+    const router = useRouter()
+    const { project: projectId, topology: topologyId } = router.query
+
+    const project = useProject(projectId)
+    const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
+
+    const dispatch = useDispatch()
+    useEffect(() => {
+        if (projectId) {
+            dispatch(openProjectSucceeded(projectId))
+        }
+    }, [projectId, topologyId, dispatch])
+
+    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
+
+    return (
+        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="page-container full-height">
+            <Head>
+                <title>{title}</title>
+            </Head>
+            <AppNavbarContainer fullWidth={true} />
+            {topologyIsLoading ? (
+                <div className="full-height d-flex align-items-center justify-content-center">
+                    <LoadingScreen />
+                </div>
+            ) : (
+                <div className="full-height">
+                    <MapStage />
+                    <ScaleIndicatorContainer />
+                    <ToolPanelComponent />
+                    <ProjectSidebarContainer />
+                    <TopologySidebarContainer />
+                </div>
+            )}
+        </HotKeys>
+    )
+}
+
+export default Topology
-- 
cgit v1.2.3


From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 16:27:49 +0200
Subject: ui: Migrate project APIs to React Query

This change updates the OpenDC frontend to use React Query for fetching
and mutating project data. Previously, this state was tracked and
synchronized via Redux. Migrating to React Query greatly simplifies the
state synchronization logic necessary in the frontend.
---
 .../src/pages/projects/[project]/topologies/[topology].js          | 4 ++--
 opendc-web/opendc-web-ui/src/pages/projects/index.js               | 7 +------
 2 files changed, 3 insertions(+), 8 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 28db1531..a9dfdb19 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,7 +24,6 @@ import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { useEffect } from 'react'
-import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { HotKeys } from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
@@ -35,6 +34,7 @@ import ScaleIndicatorContainer from '../../../../containers/app/map/controls/Sca
 import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent'
 import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
 import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer'
+import { openProjectSucceeded } from '../../../../redux/actions/projects'
 
 /**
  * Page that displays a datacenter topology.
@@ -43,7 +43,7 @@ function Topology() {
     const router = useRouter()
     const { project: projectId, topology: topologyId } = router.query
 
-    const project = useProject(projectId)
+    const { data: project } = useProject(projectId)
     const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 958ca622..2d8e6de7 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,22 +1,17 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import Head from 'next/head'
-import { useDispatch } from 'react-redux'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import ProjectListContainer from '../../containers/projects/ProjectListContainer'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth'
 import { Container } from 'reactstrap'
-import { fetchProjects } from '../../redux/actions/projects'
 
 function Projects() {
     useRequireAuth()
 
-    const dispatch = useDispatch()
     const [filter, setFilter] = useState('SHOW_ALL')
 
-    useEffect(() => dispatch(fetchProjects()), [dispatch])
-
     return (
         <>
             <Head>
-- 
cgit v1.2.3


From 9c8a987556d0fb0cdf0eb67e0c191a8dcc5593b9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 17:30:15 +0200
Subject: ui: Fetch scenarios and portfolios using React Query

---
 .../src/pages/projects/[project]/portfolios/[portfolio].js        | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index b21db44c..d3d61271 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -23,12 +23,11 @@
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useProject } from '../../../../data/project'
 import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
 import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
 import { useDispatch } from 'react-redux'
-import { openPortfolioSucceeded } from '../../../../redux/actions/portfolios'
 
 /**
  * Page that displays the results in a portfolio.
@@ -41,11 +40,6 @@ function Portfolio() {
     const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
     const dispatch = useDispatch()
-    useEffect(() => {
-        if (portfolioId) {
-            dispatch(openPortfolioSucceeded(projectId, portfolioId))
-        }
-    }, [projectId, portfolioId, dispatch])
 
     return (
         <div className="page-container full-height">
-- 
cgit v1.2.3


From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Jul 2021 22:23:40 +0200
Subject: feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.
---
 .../src/pages/projects/[project]/index.js          | 111 +++++++++++++-
 .../projects/[project]/portfolios/[portfolio].js   | 170 ++++++++++++++++++---
 .../projects/[project]/topologies/[topology].js    |  73 ++++++---
 .../opendc-web-ui/src/pages/projects/index.js      |  90 ++++++++---
 4 files changed, 383 insertions(+), 61 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index cce887aa..c6ded12b 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -20,6 +20,113 @@
  * SOFTWARE.
  */
 
-import Topology from './topologies/[topology]'
+import { useRouter } from 'next/router'
+import { useProject } from '../../../data/project'
+import { AppPage } from '../../../components/AppPage'
+import Head from 'next/head'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    Button,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Grid,
+    GridItem,
+    PageSection,
+    PageSectionVariants,
+    Skeleton,
+    Text,
+    TextContent,
+} from '@patternfly/react-core'
+import BreadcrumbLink from '../../../components/util/BreadcrumbLink'
+import PortfolioTable from '../../../components/projects/PortfolioTable'
+import TopologyTable from '../../../components/projects/TopologyTable'
+import NewTopology from '../../../components/projects/NewTopology'
+import NewPortfolio from '../../../components/projects/NewPortfolio'
 
-export default Topology
+function Project() {
+    const router = useRouter()
+    const { project: projectId } = router.query
+
+    const { data: project } = useProject(projectId)
+
+    const breadcrumb = (
+        <Breadcrumb>
+            <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
+                Projects
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink} isActive>
+                Project details
+            </BreadcrumbItem>
+        </Breadcrumb>
+    )
+
+    return (
+        <AppPage breadcrumb={breadcrumb}>
+            <Head>
+                <title>{project?.name ?? 'Project'} - OpenDC</title>
+            </Head>
+            <PageSection variant={PageSectionVariants.light}>
+                <TextContent>
+                    <Text component="h1">
+                        {project?.name ?? <Skeleton width="15%" screenreaderText="Loading project" />}
+                    </Text>
+                </TextContent>
+            </PageSection>
+            <PageSection isFilled>
+                <Grid hasGutter>
+                    <GridItem md={2}>
+                        <Card>
+                            <CardTitle>Details</CardTitle>
+                            <CardBody>
+                                <DescriptionList>
+                                    <DescriptionListGroup>
+                                        <DescriptionListTerm>Name</DescriptionListTerm>
+                                        <DescriptionListDescription>
+                                            {project?.name ?? <Skeleton screenreaderText="Loading project" />}
+                                        </DescriptionListDescription>
+                                    </DescriptionListGroup>
+                                </DescriptionList>
+                            </CardBody>
+                        </Card>
+                    </GridItem>
+                    <GridItem md={5}>
+                        <Card>
+                            <CardHeader>
+                                <CardActions>
+                                    <NewTopology projectId={projectId} />
+                                </CardActions>
+                                <CardTitle>Topologies</CardTitle>
+                            </CardHeader>
+                            <CardBody>
+                                <TopologyTable projectId={projectId} />
+                            </CardBody>
+                        </Card>
+                    </GridItem>
+                    <GridItem md={5}>
+                        <Card>
+                            <CardHeader>
+                                <CardActions>
+                                    <NewPortfolio projectId={projectId} />
+                                </CardActions>
+                                <CardTitle>Portfolios</CardTitle>
+                            </CardHeader>
+                            <CardBody>
+                                <PortfolioTable projectId={projectId} />
+                            </CardBody>
+                        </Card>
+                    </GridItem>
+                </Grid>
+            </PageSection>
+        </AppPage>
+    )
+}
+
+export default Project
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index d3d61271..55bee445 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -22,12 +22,41 @@
 
 import { useRouter } from 'next/router'
 import Head from 'next/head'
-import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
-import React from 'react'
-import { useProject } from '../../../../data/project'
-import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
-import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
-import { useDispatch } from 'react-redux'
+import React, { useRef } from 'react'
+import { usePortfolio, useProject } from '../../../../data/project'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Chip,
+    ChipGroup,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Divider,
+    Grid,
+    GridItem,
+    PageSection,
+    PageSectionVariants,
+    Skeleton,
+    Tab,
+    TabContent,
+    Tabs,
+    TabTitleText,
+    Text,
+    TextContent,
+} from '@patternfly/react-core'
+import { AppPage } from '../../../../components/AppPage'
+import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
+import ScenarioTable from '../../../../components/projects/ScenarioTable'
+import NewScenario from '../../../../components/projects/NewScenario'
+import { METRIC_NAMES } from '../../../../util/available-metrics'
+import PortfolioResults from '../../../../components/app/results/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
@@ -36,24 +65,127 @@ function Portfolio() {
     const router = useRouter()
     const { project: projectId, portfolio: portfolioId } = router.query
 
-    const project = useProject(projectId)
-    const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
+    const { data: project } = useProject(projectId)
+    const { data: portfolio } = usePortfolio(portfolioId)
 
-    const dispatch = useDispatch()
+    const overviewRef = useRef(null)
+    const resultsRef = useRef(null)
+
+    const breadcrumb = (
+        <Breadcrumb>
+            <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
+                Projects
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
+                Project details
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}/portfolios/${portfolioId}`} component={BreadcrumbLink} isActive>
+                Portfolio
+            </BreadcrumbItem>
+        </Breadcrumb>
+    )
 
     return (
-        <div className="page-container full-height">
+        <AppPage breadcrumb={breadcrumb}>
             <Head>
-                <title>{title}</title>
+                <title>{project?.name ?? 'Portfolios'} - OpenDC</title>
             </Head>
-            <AppNavbarContainer fullWidth={true} />
-            <div className="full-height app-page-container">
-                <ProjectSidebarContainer />
-                <div className="container-fluid full-height">
-                    <PortfolioResultsContainer />
-                </div>
-            </div>
-        </div>
+            <PageSection variant={PageSectionVariants.light}>
+                <TextContent>
+                    <Text component="h1">Portfolio</Text>
+                </TextContent>
+            </PageSection>
+            <PageSection type="none" variant={PageSectionVariants.light} className="pf-c-page__main-tabs" sticky="top">
+                <Divider component="div" />
+                <Tabs defaultActiveKey={0} className="pf-m-page-insets">
+                    <Tab
+                        eventKey={0}
+                        title={<TabTitleText>Overview</TabTitleText>}
+                        tabContentId="overview"
+                        tabContentRef={overviewRef}
+                    />
+                    <Tab
+                        eventKey={1}
+                        title={<TabTitleText>Results</TabTitleText>}
+                        tabContentId="results"
+                        tabContentRef={resultsRef}
+                    />
+                </Tabs>
+            </PageSection>
+            <PageSection isFilled>
+                <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
+                    <Grid hasGutter>
+                        <GridItem md={2}>
+                            <Card>
+                                <CardTitle>Details</CardTitle>
+                                <CardBody>
+                                    <DescriptionList>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Name</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.name ?? <Skeleton screenreaderText="Loading portfolio" />}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Scenarios</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.scenarioIds.length ?? (
+                                                    <Skeleton screenreaderText="Loading portfolio" />
+                                                )}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Metrics</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.targets?.enabledMetrics ? (
+                                                    portfolio.targets.enabledMetrics.length > 0 ? (
+                                                        <ChipGroup>
+                                                            {portfolio.targets.enabledMetrics.map((metric) => (
+                                                                <Chip isReadOnly key={metric}>
+                                                                    {METRIC_NAMES[metric]}
+                                                                </Chip>
+                                                            ))}
+                                                        </ChipGroup>
+                                                    ) : (
+                                                        'No metrics enabled'
+                                                    )
+                                                ) : (
+                                                    <Skeleton screenreaderText="Loading portfolio" />
+                                                )}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Repeats per Scenario</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.targets?.repeatsPerScenario ?? (
+                                                    <Skeleton screenreaderText="Loading portfolio" />
+                                                )}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                    </DescriptionList>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem md={6}>
+                            <Card>
+                                <CardHeader>
+                                    <CardActions>
+                                        <NewScenario portfolioId={portfolioId} />
+                                    </CardActions>
+                                    <CardTitle>Scenarios</CardTitle>
+                                </CardHeader>
+                                <CardBody>
+                                    <ScenarioTable portfolioId={portfolioId} />
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                    </Grid>
+                </TabContent>
+                <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
+                    <PortfolioResults portfolioId={portfolioId} />
+                </TabContent>
+            </PageSection>
+        </AppPage>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index a9dfdb19..5873ed11 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -23,18 +23,29 @@
 import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
-import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
-import LoadingScreen from '../../../../components/app/map/LoadingScreen'
-import MapStage from '../../../../containers/app/map/MapStage'
-import ScaleIndicatorContainer from '../../../../containers/app/map/controls/ScaleIndicatorContainer'
-import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent'
-import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
-import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer'
+import MapStage from '../../../../components/app/map/MapStage'
 import { openProjectSucceeded } from '../../../../redux/actions/projects'
+import { AppPage } from '../../../../components/AppPage'
+import {
+    Bullseye,
+    Drawer,
+    DrawerContent,
+    DrawerContentBody,
+    EmptyState,
+    EmptyStateIcon,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+import { zoomInOnCenter } from '../../../../redux/actions/map'
+import Toolbar from '../../../../components/app/map/controls/Toolbar'
+import { useMapScale } from '../../../../data/map'
+import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator'
+import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar'
+import Collapse from '../../../../components/app/map/controls/Collapse'
 
 /**
  * Page that displays a datacenter topology.
@@ -44,7 +55,6 @@ function Topology() {
     const { project: projectId, topology: topologyId } = router.query
 
     const { data: project } = useProject(projectId)
-    const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
     const dispatch = useDispatch()
     useEffect(() => {
@@ -54,27 +64,44 @@ function Topology() {
     }, [projectId, topologyId, dispatch])
 
     const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
+    const scale = useMapScale()
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+
+    const [isExpanded, setExpanded] = useState(true)
+    const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
 
     return (
-        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="page-container full-height">
+        <AppPage>
             <Head>
-                <title>{title}</title>
+                <title>{project?.name ?? 'Topologies'} - OpenDC</title>
             </Head>
-            <AppNavbarContainer fullWidth={true} />
             {topologyIsLoading ? (
-                <div className="full-height d-flex align-items-center justify-content-center">
-                    <LoadingScreen />
-                </div>
+                <Bullseye>
+                    <EmptyState>
+                        <EmptyStateIcon variant="container" component={Spinner} />
+                        <Title size="lg" headingLevel="h4">
+                            Loading Topology
+                        </Title>
+                    </EmptyState>
+                </Bullseye>
             ) : (
-                <div className="full-height">
-                    <MapStage />
-                    <ScaleIndicatorContainer />
-                    <ToolPanelComponent />
-                    <ProjectSidebarContainer />
-                    <TopologySidebarContainer />
-                </div>
+                <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
+                    <Drawer isExpanded={isExpanded}>
+                        <DrawerContent panelContent={panelContent}>
+                            <DrawerContentBody>
+                                <MapStage />
+                                <ScaleIndicator scale={scale} />
+                                <Toolbar
+                                    onZoom={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))}
+                                    onExport={() => window['exportCanvasToImage']()}
+                                />
+                                <Collapse onClick={() => setExpanded(true)} />
+                            </DrawerContentBody>
+                        </DrawerContent>
+                    </Drawer>
+                </HotKeys>
             )}
-        </HotKeys>
+        </AppPage>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 2d8e6de7..9dcc9aea 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,31 +1,87 @@
-import React, { useState } from 'react'
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useMemo, useState } from 'react'
 import Head from 'next/head'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
-import NewProjectContainer from '../../containers/projects/NewProjectContainer'
-import ProjectListContainer from '../../containers/projects/ProjectListContainer'
-import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
-import { useRequireAuth } from '../../auth'
-import { Container } from 'reactstrap'
+import { useAuth, useRequireAuth } from '../../auth'
+import { AppPage } from '../../components/AppPage'
+import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core'
+import { useProjects } from '../../data/project'
+import ProjectTable from '../../components/projects/ProjectTable'
+import { useMutation } from 'react-query'
+import NewProject from '../../components/projects/NewProject'
+
+const getVisibleProjects = (projects, filter, userId) => {
+    switch (filter) {
+        case 'SHOW_ALL':
+            return projects
+        case 'SHOW_OWN':
+            return projects.filter((project) =>
+                project.authorizations.some((a) => a.userId === userId && a.level === 'OWN')
+            )
+        case 'SHOW_SHARED':
+            return projects.filter((project) =>
+                project.authorizations.some((a) => a.userId === userId && a.level !== 'OWN')
+            )
+        default:
+            return projects
+    }
+}
 
 function Projects() {
     useRequireAuth()
-
+    const { user } = useAuth()
+    const { status, data: projects } = useProjects()
     const [filter, setFilter] = useState('SHOW_ALL')
+    const visibleProjects = useMemo(() => getVisibleProjects(projects ?? [], filter, user?.sub), [
+        projects,
+        filter,
+        user?.sub,
+    ])
+
+    const { mutate: deleteProject } = useMutation('deleteProject')
 
     return (
-        <>
+        <AppPage>
             <Head>
                 <title>My Projects - OpenDC</title>
             </Head>
-            <div className="full-height">
-                <AppNavbarContainer fullWidth={false} />
-                <Container className="text-page-container">
-                    <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
-                    <ProjectListContainer filter={filter} />
-                    <NewProjectContainer />
-                </Container>
-            </div>
-        </>
+            <PageSection variant={PageSectionVariants.light}>
+                <TextContent>
+                    <Text component="h1">My Projects</Text>
+                </TextContent>
+            </PageSection>
+            <PageSection variant={PageSectionVariants.light} isFilled>
+                <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
+                <ProjectTable
+                    status={status}
+                    isFiltering={filter !== 'SHOW_ALL'}
+                    projects={visibleProjects}
+                    onDelete={(project) => deleteProject(project._id)}
+                />
+                <NewProject />
+            </PageSection>
+        </AppPage>
     )
 }
 
-- 
cgit v1.2.3


From e5caf6c6122684e441d1d73e2e0507fdd36c67e0 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Fri, 16 Jul 2021 14:20:34 +0200
Subject: feat(ui): Support panning of the datacenter topology

This change enables support for panning the visualized datacenter
topology by using the mouse or holding shortcuts. Previously, this could
only be done through repeated key presses.
---
 .../src/pages/projects/[project]/topologies/[topology].js          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 5873ed11..786bed07 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,7 +24,7 @@ import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { useEffect, useState } from 'react'
-import { HotKeys } from 'react-hotkeys'
+import {configure, HotKeys} from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
 import MapStage from '../../../../components/app/map/MapStage'
@@ -70,6 +70,11 @@ function Topology() {
     const [isExpanded, setExpanded] = useState(true)
     const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
 
+    // Make sure that holding down a key will generate repeated events
+    configure({
+        ignoreRepeatedEventsWhenKeyHeldDown: false
+    })
+
     return (
         <AppPage>
             <Head>
-- 
cgit v1.2.3


From f2aeecccc096728d3df955b71e711c8d9c429427 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Fri, 16 Jul 2021 17:37:01 +0200
Subject: refactor(ui): Isolate world coordinate space

This change updates the topology view in the OpenDC frontend to isolate
the world coordinate space. This means that zooming and panning should
not affect the coordinates in world space (but only in camera space). In
turn, this allows us to remove the dependency on Redux for the camera
controls.
---
 .../src/pages/projects/[project]/topologies/[topology].js    | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 786bed07..d79e8e7a 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,7 +24,7 @@ import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { useEffect, useState } from 'react'
-import {configure, HotKeys} from 'react-hotkeys'
+import { configure, HotKeys } from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
 import MapStage from '../../../../components/app/map/MapStage'
@@ -40,9 +40,7 @@ import {
     Spinner,
     Title,
 } from '@patternfly/react-core'
-import { zoomInOnCenter } from '../../../../redux/actions/map'
 import Toolbar from '../../../../components/app/map/controls/Toolbar'
-import { useMapScale } from '../../../../data/map'
 import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator'
 import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar'
 import Collapse from '../../../../components/app/map/controls/Collapse'
@@ -64,7 +62,6 @@ function Topology() {
     }, [projectId, topologyId, dispatch])
 
     const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
-    const scale = useMapScale()
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     const [isExpanded, setExpanded] = useState(true)
@@ -72,7 +69,7 @@ function Topology() {
 
     // Make sure that holding down a key will generate repeated events
     configure({
-        ignoreRepeatedEventsWhenKeyHeldDown: false
+        ignoreRepeatedEventsWhenKeyHeldDown: false,
     })
 
     return (
@@ -95,11 +92,6 @@ function Topology() {
                         <DrawerContent panelContent={panelContent}>
                             <DrawerContentBody>
                                 <MapStage />
-                                <ScaleIndicator scale={scale} />
-                                <Toolbar
-                                    onZoom={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))}
-                                    onExport={() => window['exportCanvasToImage']()}
-                                />
                                 <Collapse onClick={() => setExpanded(true)} />
                             </DrawerContentBody>
                         </DrawerContent>
-- 
cgit v1.2.3


From 54d07120191eb81de91a49cdebf619cfecce2666 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 14:45:25 +0200
Subject: refactor(ui): Encode state in topology actions

This change updates the OpenDC frontend to reduce its reliance of global
state during the execution of actions. Actions that modify the topology
now require parameters to be passed via the action constructor instead
of relying on the global interactionLevel state.
---
 .../opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index d79e8e7a..139c2979 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -40,8 +40,6 @@ import {
     Spinner,
     Title,
 } from '@patternfly/react-core'
-import Toolbar from '../../../../components/app/map/controls/Toolbar'
-import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator'
 import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar'
 import Collapse from '../../../../components/app/map/controls/Collapse'
 
-- 
cgit v1.2.3


From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../src/pages/projects/[project]/index.js          |   1 -
 .../projects/[project]/portfolios/[portfolio].js   |   6 +-
 .../projects/[project]/topologies/[topology].js    | 123 ++++++++++++++++-----
 3 files changed, 100 insertions(+), 30 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index c6ded12b..8b0ed8e0 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -27,7 +27,6 @@ import Head from 'next/head'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Button,
     Card,
     CardActions,
     CardBody,
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 55bee445..53cc9c73 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -53,10 +53,10 @@ import {
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import ScenarioTable from '../../../../components/projects/ScenarioTable'
-import NewScenario from '../../../../components/projects/NewScenario'
 import { METRIC_NAMES } from '../../../../util/available-metrics'
-import PortfolioResults from '../../../../components/app/results/PortfolioResults'
+import NewScenario from '../../../../components/portfolios/NewScenario'
+import ScenarioTable from '../../../../components/portfolios/ScenarioTable'
+import PortfolioResults from '../../../../components/portfolios/results/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 139c2979..a1d6ac7e 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -23,25 +23,37 @@
 import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { configure, HotKeys } from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
-import MapStage from '../../../../components/app/map/MapStage'
 import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
+    Breadcrumb,
+    BreadcrumbItem,
     Bullseye,
+    Divider,
     Drawer,
     DrawerContent,
     DrawerContentBody,
     EmptyState,
     EmptyStateIcon,
+    PageSection,
+    PageSectionVariants,
     Spinner,
+    Tab,
+    TabContent,
+    Tabs,
+    TabTitleText,
+    Text,
+    TextContent,
     Title,
 } from '@patternfly/react-core'
-import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar'
-import Collapse from '../../../../components/app/map/controls/Collapse'
+import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
+import MapStage from '../../../../components/topologies/map/MapStage'
+import Collapse from '../../../../components/topologies/map/controls/Collapse'
+import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar'
 
 /**
  * Page that displays a datacenter topology.
@@ -59,10 +71,29 @@ function Topology() {
         }
     }, [projectId, topologyId, dispatch])
 
+    const [activeTab, setActiveTab] = useState('overview')
+    const overviewRef = useRef(null)
+    const floorPlanRef = useRef(null)
+
     const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     const [isExpanded, setExpanded] = useState(true)
+
+    const breadcrumb = (
+        <Breadcrumb>
+            <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
+                Projects
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
+                Project details
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}/topologies/${topologyId}`} component={BreadcrumbLink} isActive>
+                Topology
+            </BreadcrumbItem>
+        </Breadcrumb>
+    )
+
     const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
 
     // Make sure that holding down a key will generate repeated events
@@ -71,31 +102,71 @@ function Topology() {
     })
 
     return (
-        <AppPage>
+        <AppPage breadcrumb={breadcrumb}>
             <Head>
                 <title>{project?.name ?? 'Topologies'} - OpenDC</title>
             </Head>
-            {topologyIsLoading ? (
-                <Bullseye>
-                    <EmptyState>
-                        <EmptyStateIcon variant="container" component={Spinner} />
-                        <Title size="lg" headingLevel="h4">
-                            Loading Topology
-                        </Title>
-                    </EmptyState>
-                </Bullseye>
-            ) : (
-                <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
-                    <Drawer isExpanded={isExpanded}>
-                        <DrawerContent panelContent={panelContent}>
-                            <DrawerContentBody>
-                                <MapStage />
-                                <Collapse onClick={() => setExpanded(true)} />
-                            </DrawerContentBody>
-                        </DrawerContent>
-                    </Drawer>
-                </HotKeys>
-            )}
+            <PageSection variant={PageSectionVariants.light}>
+                <TextContent>
+                    <Text component="h1">Topology</Text>
+                </TextContent>
+            </PageSection>
+            <PageSection type="none" variant={PageSectionVariants.light} className="pf-c-page__main-tabs" sticky="top">
+                <Divider component="div" />
+                <Tabs
+                    activeKey={activeTab}
+                    onSelect={(_, tabIndex) => setActiveTab(tabIndex)}
+                    className="pf-m-page-insets"
+                >
+                    <Tab
+                        eventKey="overview"
+                        title={<TabTitleText>Overview</TabTitleText>}
+                        tabContentId="overview"
+                        tabContentRef={overviewRef}
+                    />
+                    <Tab
+                        eventKey="floor-plan"
+                        title={<TabTitleText>Floor Plan</TabTitleText>}
+                        tabContentId="floor-plan"
+                        tabContentRef={floorPlanRef}
+                    />
+                </Tabs>
+            </PageSection>
+            <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
+                <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
+                    Test
+                </TabContent>
+                <TabContent
+                    eventKey="floor-plan"
+                    id="floor-plan"
+                    ref={floorPlanRef}
+                    aria-label="Floor Plan tab"
+                    className="pf-u-h-100"
+                    hidden
+                >
+                    {topologyIsLoading ? (
+                        <Bullseye>
+                            <EmptyState>
+                                <EmptyStateIcon variant="container" component={Spinner} />
+                                <Title size="lg" headingLevel="h4">
+                                    Loading Topology
+                                </Title>
+                            </EmptyState>
+                        </Bullseye>
+                    ) : (
+                        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
+                            <Drawer isExpanded={isExpanded}>
+                                <DrawerContent panelContent={panelContent}>
+                                    <DrawerContentBody>
+                                        <MapStage />
+                                        <Collapse onClick={() => setExpanded(true)} />
+                                    </DrawerContentBody>
+                                </DrawerContent>
+                            </Drawer>
+                        </HotKeys>
+                    )}
+                </TabContent>
+            </PageSection>
         </AppPage>
     )
 }
-- 
cgit v1.2.3


From 28d6d13844db28745bc2813e87a367131f862070 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 20:59:11 +0200
Subject: refactor(ui): Move page components in separate files

---
 .../src/pages/projects/[project]/index.js          | 60 +-------------
 .../projects/[project]/portfolios/[portfolio].js   | 93 +---------------------
 .../projects/[project]/topologies/[topology].js    | 53 ++----------
 .../opendc-web-ui/src/pages/projects/index.js      |  3 +-
 4 files changed, 12 insertions(+), 197 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index 8b0ed8e0..5c17303f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -21,23 +21,13 @@
  */
 
 import { useRouter } from 'next/router'
+import ProjectOverview from '../../../components/projects/ProjectOverview'
 import { useProject } from '../../../data/project'
 import { AppPage } from '../../../components/AppPage'
 import Head from 'next/head'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
-    Grid,
-    GridItem,
     PageSection,
     PageSectionVariants,
     Skeleton,
@@ -45,10 +35,6 @@ import {
     TextContent,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../components/util/BreadcrumbLink'
-import PortfolioTable from '../../../components/projects/PortfolioTable'
-import TopologyTable from '../../../components/projects/TopologyTable'
-import NewTopology from '../../../components/projects/NewTopology'
-import NewPortfolio from '../../../components/projects/NewPortfolio'
 
 function Project() {
     const router = useRouter()
@@ -80,49 +66,7 @@ function Project() {
                 </TextContent>
             </PageSection>
             <PageSection isFilled>
-                <Grid hasGutter>
-                    <GridItem md={2}>
-                        <Card>
-                            <CardTitle>Details</CardTitle>
-                            <CardBody>
-                                <DescriptionList>
-                                    <DescriptionListGroup>
-                                        <DescriptionListTerm>Name</DescriptionListTerm>
-                                        <DescriptionListDescription>
-                                            {project?.name ?? <Skeleton screenreaderText="Loading project" />}
-                                        </DescriptionListDescription>
-                                    </DescriptionListGroup>
-                                </DescriptionList>
-                            </CardBody>
-                        </Card>
-                    </GridItem>
-                    <GridItem md={5}>
-                        <Card>
-                            <CardHeader>
-                                <CardActions>
-                                    <NewTopology projectId={projectId} />
-                                </CardActions>
-                                <CardTitle>Topologies</CardTitle>
-                            </CardHeader>
-                            <CardBody>
-                                <TopologyTable projectId={projectId} />
-                            </CardBody>
-                        </Card>
-                    </GridItem>
-                    <GridItem md={5}>
-                        <Card>
-                            <CardHeader>
-                                <CardActions>
-                                    <NewPortfolio projectId={projectId} />
-                                </CardActions>
-                                <CardTitle>Portfolios</CardTitle>
-                            </CardHeader>
-                            <CardBody>
-                                <PortfolioTable projectId={projectId} />
-                            </CardBody>
-                        </Card>
-                    </GridItem>
-                </Grid>
+                <ProjectOverview projectId={projectId} />
             </PageSection>
         </AppPage>
     )
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 53cc9c73..28b03c37 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -23,27 +23,12 @@
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import React, { useRef } from 'react'
-import { usePortfolio, useProject } from '../../../../data/project'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    Chip,
-    ChipGroup,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
     Divider,
-    Grid,
-    GridItem,
     PageSection,
     PageSectionVariants,
-    Skeleton,
     Tab,
     TabContent,
     Tabs,
@@ -53,10 +38,8 @@ import {
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import { METRIC_NAMES } from '../../../../util/available-metrics'
-import NewScenario from '../../../../components/portfolios/NewScenario'
-import ScenarioTable from '../../../../components/portfolios/ScenarioTable'
-import PortfolioResults from '../../../../components/portfolios/results/PortfolioResults'
+import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
+import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
@@ -65,9 +48,6 @@ function Portfolio() {
     const router = useRouter()
     const { project: projectId, portfolio: portfolioId } = router.query
 
-    const { data: project } = useProject(projectId)
-    const { data: portfolio } = usePortfolio(portfolioId)
-
     const overviewRef = useRef(null)
     const resultsRef = useRef(null)
 
@@ -88,7 +68,7 @@ function Portfolio() {
     return (
         <AppPage breadcrumb={breadcrumb}>
             <Head>
-                <title>{project?.name ?? 'Portfolios'} - OpenDC</title>
+                <title>Portfolio - OpenDC</title>
             </Head>
             <PageSection variant={PageSectionVariants.light}>
                 <TextContent>
@@ -114,72 +94,7 @@ function Portfolio() {
             </PageSection>
             <PageSection isFilled>
                 <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <Grid hasGutter>
-                        <GridItem md={2}>
-                            <Card>
-                                <CardTitle>Details</CardTitle>
-                                <CardBody>
-                                    <DescriptionList>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Name</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.name ?? <Skeleton screenreaderText="Loading portfolio" />}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Scenarios</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.scenarioIds.length ?? (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Metrics</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.targets?.enabledMetrics ? (
-                                                    portfolio.targets.enabledMetrics.length > 0 ? (
-                                                        <ChipGroup>
-                                                            {portfolio.targets.enabledMetrics.map((metric) => (
-                                                                <Chip isReadOnly key={metric}>
-                                                                    {METRIC_NAMES[metric]}
-                                                                </Chip>
-                                                            ))}
-                                                        </ChipGroup>
-                                                    ) : (
-                                                        'No metrics enabled'
-                                                    )
-                                                ) : (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Repeats per Scenario</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.targets?.repeatsPerScenario ?? (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                    </DescriptionList>
-                                </CardBody>
-                            </Card>
-                        </GridItem>
-                        <GridItem md={6}>
-                            <Card>
-                                <CardHeader>
-                                    <CardActions>
-                                        <NewScenario portfolioId={portfolioId} />
-                                    </CardActions>
-                                    <CardTitle>Scenarios</CardTitle>
-                                </CardHeader>
-                                <CardBody>
-                                    <ScenarioTable portfolioId={portfolioId} />
-                                </CardBody>
-                            </Card>
-                        </GridItem>
-                    </Grid>
+                    <PortfolioOverview portfolioId={portfolioId} />
                 </TabContent>
                 <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
                     <PortfolioResults portfolioId={portfolioId} />
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index a1d6ac7e..f95b18ed 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -21,39 +21,28 @@
  */
 
 import { useRouter } from 'next/router'
+import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import React, { useEffect, useRef, useState } from 'react'
-import { configure, HotKeys } from 'react-hotkeys'
-import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
 import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Bullseye,
     Divider,
-    Drawer,
-    DrawerContent,
-    DrawerContentBody,
-    EmptyState,
-    EmptyStateIcon,
     PageSection,
     PageSectionVariants,
-    Spinner,
     Tab,
     TabContent,
     Tabs,
     TabTitleText,
     Text,
     TextContent,
-    Title,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import MapStage from '../../../../components/topologies/map/MapStage'
-import Collapse from '../../../../components/topologies/map/controls/Collapse'
-import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar'
+import TopologyMap from '../../../../components/topologies/TopologyMap'
 
 /**
  * Page that displays a datacenter topology.
@@ -75,11 +64,6 @@ function Topology() {
     const overviewRef = useRef(null)
     const floorPlanRef = useRef(null)
 
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-
-    const [isExpanded, setExpanded] = useState(true)
-
     const breadcrumb = (
         <Breadcrumb>
             <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
@@ -94,13 +78,6 @@ function Topology() {
         </Breadcrumb>
     )
 
-    const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
-
-    // Make sure that holding down a key will generate repeated events
-    configure({
-        ignoreRepeatedEventsWhenKeyHeldDown: false,
-    })
-
     return (
         <AppPage breadcrumb={breadcrumb}>
             <Head>
@@ -134,7 +111,7 @@ function Topology() {
             </PageSection>
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
                 <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
-                    Test
+                    <TopologyOverview topologyId={topologyId} />
                 </TabContent>
                 <TabContent
                     eventKey="floor-plan"
@@ -144,27 +121,7 @@ function Topology() {
                     className="pf-u-h-100"
                     hidden
                 >
-                    {topologyIsLoading ? (
-                        <Bullseye>
-                            <EmptyState>
-                                <EmptyStateIcon variant="container" component={Spinner} />
-                                <Title size="lg" headingLevel="h4">
-                                    Loading Topology
-                                </Title>
-                            </EmptyState>
-                        </Bullseye>
-                    ) : (
-                        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
-                            <Drawer isExpanded={isExpanded}>
-                                <DrawerContent panelContent={panelContent}>
-                                    <DrawerContentBody>
-                                        <MapStage />
-                                        <Collapse onClick={() => setExpanded(true)} />
-                                    </DrawerContentBody>
-                                </DrawerContent>
-                            </Drawer>
-                        </HotKeys>
-                    )}
+                    <TopologyMap />
                 </TabContent>
             </PageSection>
         </AppPage>
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 9dcc9aea..eb77701e 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -23,7 +23,7 @@
 import React, { useMemo, useState } from 'react'
 import Head from 'next/head'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
-import { useAuth, useRequireAuth } from '../../auth'
+import { useAuth } from '../../auth'
 import { AppPage } from '../../components/AppPage'
 import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core'
 import { useProjects } from '../../data/project'
@@ -49,7 +49,6 @@ const getVisibleProjects = (projects, filter, userId) => {
 }
 
 function Projects() {
-    useRequireAuth()
     const { user } = useAuth()
     const { status, data: projects } = useProjects()
     const [filter, setFilter] = useState('SHOW_ALL')
-- 
cgit v1.2.3


From ebab0cc12e293a57cbc58d2dd51b3c9d7cd4ee92 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Jul 2021 14:55:39 +0200
Subject: fix(ui): Load correct topology view

This change fixes an issue where the only the default topology view
would be shown to the user.
---
 .../src/pages/projects/[project]/topologies/[topology].js         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index f95b18ed..c2753144 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -26,7 +26,6 @@ import { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
 import React, { useEffect, useRef, useState } from 'react'
 import Head from 'next/head'
-import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
     Breadcrumb,
@@ -43,6 +42,7 @@ import {
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import TopologyMap from '../../../../components/topologies/TopologyMap'
+import { openTopology } from '../../../../redux/actions/topologies'
 
 /**
  * Page that displays a datacenter topology.
@@ -55,10 +55,10 @@ function Topology() {
 
     const dispatch = useDispatch()
     useEffect(() => {
-        if (projectId) {
-            dispatch(openProjectSucceeded(projectId))
+        if (topologyId) {
+            dispatch(openTopology(topologyId))
         }
-    }, [projectId, topologyId, dispatch])
+    }, [topologyId, dispatch])
 
     const [activeTab, setActiveTab] = useState('overview')
     const overviewRef = useRef(null)
-- 
cgit v1.2.3


From 7f083b47c2e2333819823fd7835332a0f486b626 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 21 Jul 2021 17:31:45 +0200
Subject: feat(ui): Toggle to Floor Plan on room select

---
 .../projects/[project]/topologies/[topology].js    | 29 +++++++++++-----------
 1 file changed, 14 insertions(+), 15 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index c2753144..ae26ae83 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,7 +24,7 @@ import { useRouter } from 'next/router'
 import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { AppPage } from '../../../../components/AppPage'
 import {
@@ -42,6 +42,7 @@ import {
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import TopologyMap from '../../../../components/topologies/TopologyMap'
+import { goToRoom } from '../../../../redux/actions/interaction-level'
 import { openTopology } from '../../../../redux/actions/topologies'
 
 /**
@@ -61,8 +62,6 @@ function Topology() {
     }, [topologyId, dispatch])
 
     const [activeTab, setActiveTab] = useState('overview')
-    const overviewRef = useRef(null)
-    const floorPlanRef = useRef(null)
 
     const breadcrumb = (
         <Breadcrumb>
@@ -95,31 +94,31 @@ function Topology() {
                     onSelect={(_, tabIndex) => setActiveTab(tabIndex)}
                     className="pf-m-page-insets"
                 >
-                    <Tab
-                        eventKey="overview"
-                        title={<TabTitleText>Overview</TabTitleText>}
-                        tabContentId="overview"
-                        tabContentRef={overviewRef}
-                    />
+                    <Tab eventKey="overview" title={<TabTitleText>Overview</TabTitleText>} tabContentId="overview" />
                     <Tab
                         eventKey="floor-plan"
                         title={<TabTitleText>Floor Plan</TabTitleText>}
                         tabContentId="floor-plan"
-                        tabContentRef={floorPlanRef}
                     />
                 </Tabs>
             </PageSection>
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
-                <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <TopologyOverview topologyId={topologyId} />
+                <TabContent id="overview" aria-label="Overview tab" hidden={activeTab !== 'overview'}>
+                    <TopologyOverview
+                        topologyId={topologyId}
+                        onSelect={(type, obj) => {
+                            if (type === 'room') {
+                                dispatch(goToRoom(obj._id))
+                                setActiveTab('floor-plan')
+                            }
+                        }}
+                    />
                 </TabContent>
                 <TabContent
-                    eventKey="floor-plan"
                     id="floor-plan"
-                    ref={floorPlanRef}
                     aria-label="Floor Plan tab"
                     className="pf-u-h-100"
-                    hidden
+                    hidden={activeTab !== 'floor-plan'}
                 >
                     <TopologyMap />
                 </TabContent>
-- 
cgit v1.2.3


From f84dc9f8b8b4eaa7621f9ee4fc83ef38a85c431b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 17 Aug 2021 11:30:29 +0200
Subject: feat(ui): Add context selectors

This change adds context selectors for the OpenDC frontend where the
user can select different projects, portfolios or topologies from the
context selection bar.
---
 .../opendc-web-ui/src/pages/projects/[project]/index.js      | 10 +++++++++-
 .../src/pages/projects/[project]/portfolios/[portfolio].js   | 12 +++++++++++-
 .../src/pages/projects/[project]/topologies/[topology].js    | 12 +++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index 5c17303f..c07a2c31 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -21,7 +21,9 @@
  */
 
 import { useRouter } from 'next/router'
+import ContextSelectionSection from '../../../components/context/ContextSelectionSection'
 import ProjectOverview from '../../../components/projects/ProjectOverview'
+import ProjectSelector from '../../../components/context/ProjectSelector'
 import { useProject } from '../../../data/project'
 import { AppPage } from '../../../components/AppPage'
 import Head from 'next/head'
@@ -53,8 +55,14 @@ function Project() {
         </Breadcrumb>
     )
 
+    const contextSelectors = (
+        <ContextSelectionSection>
+            <ProjectSelector projectId={projectId} />
+        </ContextSelectionSection>
+    )
+
     return (
-        <AppPage breadcrumb={breadcrumb}>
+        <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}>
             <Head>
                 <title>{project?.name ?? 'Project'} - OpenDC</title>
             </Head>
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 28b03c37..d1533d98 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -37,6 +37,9 @@ import {
     TextContent,
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
+import ContextSelectionSection from '../../../../components/context/ContextSelectionSection'
+import PortfolioSelector from '../../../../components/context/PortfolioSelector'
+import ProjectSelector from '../../../../components/context/ProjectSelector'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
 import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
@@ -65,8 +68,15 @@ function Portfolio() {
         </Breadcrumb>
     )
 
+    const contextSelectors = (
+        <ContextSelectionSection>
+            <ProjectSelector projectId={projectId} />
+            <PortfolioSelector projectId={projectId} portfolioId={portfolioId} />
+        </ContextSelectionSection>
+    )
+
     return (
-        <AppPage breadcrumb={breadcrumb}>
+        <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}>
             <Head>
                 <title>Portfolio - OpenDC</title>
             </Head>
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index ae26ae83..858f9b16 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -21,6 +21,9 @@
  */
 
 import { useRouter } from 'next/router'
+import ContextSelectionSection from '../../../../components/context/ContextSelectionSection'
+import ProjectSelector from '../../../../components/context/ProjectSelector'
+import TopologySelector from '../../../../components/context/TopologySelector'
 import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
@@ -77,8 +80,15 @@ function Topology() {
         </Breadcrumb>
     )
 
+    const contextSelectors = (
+        <ContextSelectionSection>
+            <ProjectSelector projectId={projectId} />
+            <TopologySelector projectId={projectId} topologyId={topologyId} />
+        </ContextSelectionSection>
+    )
+
     return (
-        <AppPage breadcrumb={breadcrumb}>
+        <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}>
             <Head>
                 <title>{project?.name ?? 'Topologies'} - OpenDC</title>
             </Head>
-- 
cgit v1.2.3