From b81f984e98f12742c645787f28ac483ac85c8843 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Sep 2022 13:48:23 +0200
Subject: build(web/ui): Update dependencies

This change updates the dependencies of the OpenDC web interface were
possible. We remain on React 17 until PatternFly adds support for the
new React version.
---
 .../opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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 6297b8c3..c331761b 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
@@ -48,7 +48,7 @@ import { useTopology } from '../../../../data/topology'
 import { goToRoom } from '../../../../redux/actions/interaction-level'
 import { openTopology } from '../../../../redux/actions/topology'
 
-const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap'))
+const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap'), { ssr: false })
 
 /**
  * Page that displays a datacenter topology.
-- 
cgit v1.2.3


From b8f726cd84ee5b7b0816d04d802f53f0815f6d82 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Sep 2022 14:23:02 +0200
Subject: fix(web/ui): Only display selected metrics

This change fixes an issue with the web interface where all available
metrics were shown to the user, instead of the metrics belonging to the
portfolio.
---
 .../src/pages/projects/[project]/portfolios/[portfolio].js              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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 68345d0b..4b9aa437 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
@@ -45,7 +45,7 @@ import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
 import { usePortfolio } from '../../../../data/project'
 
-const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'))
+const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'), { ssr: false })
 
 /**
  * Page that displays the results in a portfolio.
-- 
cgit v1.2.3


From 9dd75a9a40f7f2aebbc617980c99085f9dc688f8 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Sep 2022 23:02:46 +0200
Subject: refactor(web/ui): Move project selector into masthead

This change moves the project selector into the masthead since it
affects the whole application. This follows the PatternFly guidelines.
---
 opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js | 10 +---------
 .../src/pages/projects/[project]/portfolios/[portfolio].js     |  2 --
 .../src/pages/projects/[project]/topologies/[topology].js      |  2 --
 3 files changed, 1 insertion(+), 13 deletions(-)

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

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 39fcb4f3..e4e2156b 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,9 +21,7 @@
  */
 
 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'
@@ -55,14 +53,8 @@ function Project() {
         </Breadcrumb>
     )
 
-    const contextSelectors = (
-        <ContextSelectionSection>
-            <ProjectSelector activeProject={project} />
-        </ContextSelectionSection>
-    )
-
     return (
-        <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}>
+        <AppPage breadcrumb={breadcrumb}>
             <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 4b9aa437..460785c1 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
@@ -40,7 +40,6 @@ import {
 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 { usePortfolio } from '../../../../data/project'
@@ -81,7 +80,6 @@ function Portfolio() {
 
     const contextSelectors = (
         <ContextSelectionSection>
-            <ProjectSelector activeProject={project} />
             <PortfolioSelector activePortfolio={portfolio} />
         </ContextSelectionSection>
     )
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 c331761b..d3892710 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,7 +23,6 @@
 import dynamic from 'next/dynamic'
 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 { useDispatch } from 'react-redux'
@@ -90,7 +89,6 @@ function Topology() {
 
     const contextSelectors = (
         <ContextSelectionSection>
-            <ProjectSelector activeProject={project} />
             <TopologySelector activeTopology={topology} />
         </ContextSelectionSection>
     )
-- 
cgit v1.2.3


From 7199e2c15838d78fedd3c6127beddf1656dbeae2 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 15 Sep 2022 15:38:06 +0200
Subject: feat(web/ui): Redesign projects page

This change updates the design of the projects page to use a gallery
overview.
---
 .../opendc-web-ui/src/pages/projects/index.js      | 74 +++++++++++++++++-----
 1 file changed, 57 insertions(+), 17 deletions(-)

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

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 40792275..97ff105c 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -20,14 +20,25 @@
  * SOFTWARE.
  */
 
+import { PlusIcon } from '@patternfly/react-icons'
 import React, { useMemo, useState } from 'react'
 import Head from 'next/head'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import { AppPage } from '../../components/AppPage'
-import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core'
-import { useProjects, useDeleteProject } from '../../data/project'
-import ProjectTable from '../../components/projects/ProjectTable'
-import NewProject from '../../components/projects/NewProject'
+import {
+    PageSection,
+    PageSectionVariants,
+    Title,
+    Toolbar,
+    ToolbarItem,
+    ToolbarContent,
+    Button,
+    TextContent,
+    Text,
+} from '@patternfly/react-core'
+import ProjectCollection from '../../components/projects/ProjectCollection'
+import TextInputModal from '../../components/util/modals/TextInputModal'
+import { useProjects, useDeleteProject, useNewProject } from '../../data/project'
 
 const getVisibleProjects = (projects, filter) => {
     switch (filter) {
@@ -48,26 +59,55 @@ function Projects() {
     const visibleProjects = useMemo(() => getVisibleProjects(projects ?? [], filter), [projects, filter])
 
     const { mutate: deleteProject } = useDeleteProject()
+    const { mutate: addProject } = useNewProject()
+
+    const [isProjectCreationModalVisible, setProjectCreationModalVisible] = useState(false)
+    const onProjectCreation = (name) => {
+        if (name) {
+            addProject({ name })
+        }
+        setProjectCreationModalVisible(false)
+    }
 
     return (
         <AppPage>
             <Head>
                 <title>My Projects - OpenDC</title>
             </Head>
-            <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 />
+                <div className="pf-u-mx-auto pf-u-max-width" style={{ '--pf-u-max-width--MaxWidth': '100ch' }}>
+                    <Title className="pf-u-mt-xl-on-md" headingLevel="h1" size="4xl">
+                        Welcome
+                    </Title>
+                    <TextContent>
+                        <Text component="p">Find all your personal and shared projects</Text>
+                    </TextContent>
+                    <Toolbar inset={{ default: 'insetNone' }}>
+                        <ToolbarContent>
+                            <ToolbarItem>
+                                <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
+                            </ToolbarItem>
+                            <ToolbarItem alignment={{ default: 'alignRight' }}>
+                                <Button icon={<PlusIcon />} onClick={() => setProjectCreationModalVisible(true)}>
+                                    Create Project
+                                </Button>
+                            </ToolbarItem>
+                        </ToolbarContent>
+                    </Toolbar>
+                    <ProjectCollection
+                        status={status}
+                        isFiltering={filter !== 'SHOW_ALL'}
+                        projects={visibleProjects}
+                        onDelete={(project) => deleteProject(project.id)}
+                        onCreate={() => setProjectCreationModalVisible(true)}
+                    />
+                    <TextInputModal
+                        title="New Project"
+                        label="Project name"
+                        isOpen={isProjectCreationModalVisible}
+                        callback={onProjectCreation}
+                    />
+                </div>
             </PageSection>
         </AppPage>
     )
-- 
cgit v1.2.3


From 98bc4c3e9458aea98890b770493f14327a7bc7c4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 15 Sep 2022 22:52:00 +0200
Subject: refactor(web/ui): Use PatternFly Charts for plots

This change updates the OpenDC web interface to use the PatternFly
Charts package to render the results of a portfolio. Previously, we used
Recharts, but this package does not support SSR, whereas the PatternFly
Charts package matches our design framework.
---
 .../src/pages/projects/[project]/portfolios/[portfolio].js             | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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

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 460785c1..615529e7 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
@@ -58,7 +58,6 @@ function Portfolio() {
     const resultsRef = useRef(null)
 
     const { data: portfolio } = usePortfolio(projectId, portfolioNumber)
-    const project = portfolio?.project
 
     const breadcrumb = (
         <Breadcrumb>
@@ -94,7 +93,7 @@ function Portfolio() {
                     <Text component="h1">Portfolio</Text>
                 </TextContent>
             </PageSection>
-            <PageSection type="none" variant={PageSectionVariants.light} className="pf-c-page__main-tabs" sticky="top">
+            <PageSection type="tabs" variant={PageSectionVariants.light} stickyOnBreakpoint={{ default: 'top' }}>
                 <Divider component="div" />
                 <Tabs defaultActiveKey={0} className="pf-m-page-insets">
                     <Tab
-- 
cgit v1.2.3