diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-08-17 11:30:29 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-17 11:30:29 +0200 |
| commit | f84dc9f8b8b4eaa7621f9ee4fc83ef38a85c431b (patch) | |
| tree | 5bd9ed3f9c13cbcac510a59c61d1f574d4c99897 /opendc-web/opendc-web-ui/src/pages/projects | |
| parent | ce2d730159ae24c7cebb22ec42d094fe5fdc888f (diff) | |
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.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages/projects')
3 files changed, 31 insertions, 3 deletions
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> |