diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages')
4 files changed, 61 insertions, 34 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 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 68345d0b..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 @@ -40,12 +40,11 @@ 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' -const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults')) +const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'), { ssr: false }) /** * Page that displays the results in a portfolio. @@ -59,7 +58,6 @@ function Portfolio() { const resultsRef = useRef(null) const { data: portfolio } = usePortfolio(projectId, portfolioNumber) - const project = portfolio?.project const breadcrumb = ( <Breadcrumb> @@ -81,7 +79,6 @@ function Portfolio() { const contextSelectors = ( <ContextSelectionSection> - <ProjectSelector activeProject={project} /> <PortfolioSelector activePortfolio={portfolio} /> </ContextSelectionSection> ) @@ -96,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 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..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' @@ -48,7 +47,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. @@ -90,7 +89,6 @@ function Topology() { const contextSelectors = ( <ContextSelectionSection> - <ProjectSelector activeProject={project} /> <TopologySelector activeTopology={topology} /> </ContextSelectionSection> ) 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> ) |