diff options
| author | vincent van beek <vincent@vlogic.nl> | 2026-03-26 14:02:54 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-03-26 13:02:54 +0000 |
| commit | 0ffde21b0337c606e2d0ece5bd5434a930a87dcd (patch) | |
| tree | 4fd071728a8da6dcf3e6fc9fe9dca5a492100d34 /opendc-web/opendc-web-ui/src/pages | |
| parent | 8bb98c773bc982a0dab9cf9fb20d62f60a36a5d7 (diff) | |
Use Quarkus Quinoa for serving web UI (#391)
* refactor(web): Migrate to Quarkus 3
This commit updates the OpenDC web server to use Quarkus 3, which
changes annotations to use the Jakarta namespace for annotations.
* refactor(web): Configure runtime variables for web UI
This commit updates the web UI to propagate runtime variables via the
next-runtime-env package. Before, we would need to replace the variables
in the generated sources by Next.js, next-runtime-env works by loading a
JavaScript file when opening the OpenDC web UI which contains the
configuration of the web app.
* refactor(web): Migrate to Quarkus Quinoa
This commit updates the OpenDC web server to make use of Quarkus Quinoa
for serving the web UI. This allows us to deprecate the complex Quarkus
extension for serving the web UI.
* refactor(web): Move web UI into Quarkus web app
This commit moves the web UI into the Quarkus web server module to
ensure we follow Quarkus Quinoa's conventions.
* refactor(web): Merge Quarkus extension into single module
This commit merges the existing Quarkus extensions into a single module
to prevent build complexity.
* refactor(web): Migrate web proto to Java
This commit migrates the web protocol to Java and removes the dependency
on Jandex Gradle.
* refactor(web): Migrate to Quarkus 3
This commit updates the OpenDC web server to use Quarkus 3, which
changes annotations to use the Jakarta namespace for annotations.
* enable DB schema migration on DEV server
* webui is not needed anymore
* remove MAINTAINERS is depricated
* fix quarkus.quinoa properties
* revert properties change, install npm in docker image to allow building the frontend
* pin postgres version, this is a best practice. Fix some properties the old ones are depricated. Added properties for local testing
* fix build error
* :opendc-web:opendc-web-proto:spotlessApply
* fix database schema
---------
Co-authored-by: Fabian Mastenbroek <mail.fabianm@gmail.com>
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages')
8 files changed, 0 insertions, 715 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/404.js b/opendc-web/opendc-web-ui/src/pages/404.js deleted file mode 100644 index 0939bc56..00000000 --- a/opendc-web/opendc-web-ui/src/pages/404.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' -import Head from 'next/head' -import { AppPage } from '../components/AppPage' -import { - Bullseye, - EmptyState, - EmptyStateBody, - EmptyStateIcon, - PageSection, - PageSectionVariants, - Title, -} from '@patternfly/react-core' -import { UnknownIcon } from '@patternfly/react-icons' - -const NotFound = () => { - return ( - <AppPage> - <Head> - <title>Page Not Found - OpenDC</title> - </Head> - <PageSection variant={PageSectionVariants.light}> - <Bullseye> - <EmptyState> - <EmptyStateIcon variant="container" component={UnknownIcon} /> - <Title size="lg" headingLevel="h4"> - 404: That page does not exist - </Title> - <EmptyStateBody> - The requested page is not found. Try refreshing the page if it was recently added. - </EmptyStateBody> - </EmptyState> - </Bullseye> - </PageSection> - </AppPage> - ) -} - -export default NotFound diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js deleted file mode 100644 index 62ce0539..00000000 --- a/opendc-web/opendc-web-ui/src/pages/_app.js +++ /dev/null @@ -1,108 +0,0 @@ -/* - * 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 PropTypes from 'prop-types' -import Head from 'next/head' -import Script from 'next/script' -import { Provider } from 'react-redux' -import { useNewQueryClient } from '../data/query' -import { useStore } from '../redux' -import { AuthProvider, useRequireAuth } from '../auth' -import * as Sentry from '@sentry/react' -import { Integrations } from '@sentry/tracing' -import { QueryClientProvider } from 'react-query' -import { sentryDsn } from '../config' - -import '@patternfly/react-core/dist/styles/base.css' -import '@patternfly/react-styles/css/utilities/Alignment/alignment.css' -import '@patternfly/react-styles/css/utilities/BackgroundColor/BackgroundColor.css' -import '@patternfly/react-styles/css/utilities/BoxShadow/box-shadow.css' -import '@patternfly/react-styles/css/utilities/Display/display.css' -import '@patternfly/react-styles/css/utilities/Flex/flex.css' -import '@patternfly/react-styles/css/utilities/Float/float.css' -import '@patternfly/react-styles/css/utilities/Sizing/sizing.css' -import '@patternfly/react-styles/css/utilities/Spacing/spacing.css' -import '@patternfly/react-styles/css/utilities/Text/text.css' -import '@patternfly/react-styles/css/components/InlineEdit/inline-edit.css' -import '../style/index.css' - -// This setup is necessary to forward the Auth0 context to the Redux context -function Inner({ Component, pageProps }) { - // Force user to be authorized - useRequireAuth() - - const queryClient = useNewQueryClient() - const store = useStore(pageProps.initialReduxState, { queryClient }) - return ( - <QueryClientProvider client={queryClient}> - <Provider store={store}> - <Component {...pageProps} /> - </Provider> - </QueryClientProvider> - ) -} - -Inner.propTypes = { - Component: PropTypes.func, - pageProps: PropTypes.shape({ - initialReduxState: PropTypes.object, - }).isRequired, -} - -// Initialize Sentry if the user has configured a DSN -if (process.browser && sentryDsn) { - Sentry.init({ - environment: process.env.NODE_ENV, - dsn: sentryDsn, - integrations: [new Integrations.BrowserTracing()], - tracesSampleRate: 0.1, - }) -} - -export default function App(props) { - return ( - <> - <Head> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - <meta name="theme-color" content="#00A6D6" /> - </Head> - <Sentry.ErrorBoundary fallback={'An error has occurred'}> - <AuthProvider> - <Inner {...props} /> - </AuthProvider> - </Sentry.ErrorBoundary> - {/* Google Analytics */} - <Script async src="https://www.googletagmanager.com/gtag/js?id=UA-84285092-3" /> - <Script - id="gtag" - dangerouslySetInnerHTML={{ - __html: ` - window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} - gtag('js', new Date()); - gtag('config', 'UA-84285092-3'); - `, - }} - /> - </> - ) -} diff --git a/opendc-web/opendc-web-ui/src/pages/_document.js b/opendc-web/opendc-web-ui/src/pages/_document.js deleted file mode 100644 index 9f84b2ab..00000000 --- a/opendc-web/opendc-web-ui/src/pages/_document.js +++ /dev/null @@ -1,76 +0,0 @@ -/* - * 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 Document, { Html, Head, Main, NextScript } from 'next/document' - -class OpenDCDocument extends Document { - render() { - return ( - <Html lang="en"> - <Head> - <meta charSet="utf-8" /> - <meta name="theme-color" content="#00A6D6" /> - <meta - name="description" - content="Collaborative Datacenter Simulation and Exploration for Everybody" - /> - <meta name="author" content="@Large Research" /> - <meta - name="keywords" - content="OpenDC, Datacenter, Simulation, Simulator, Collaborative, Distributed, Cluster" - /> - <link rel="manifest" href="/manifest.json" /> - <link rel="shortcut icon" href="/favicon.ico" /> - - {/* Twitter Card data */} - <meta name="twitter:card" content="summary" /> - <meta name="twitter:site" content="@LargeResearch" /> - <meta name="twitter:title" content="OpenDC" /> - <meta - name="twitter:description" - content="Collaborative Datacenter Simulation and Exploration for Everybody" - /> - <meta name="twitter:creator" content="@LargeResearch" /> - <meta name="twitter:image" content="http://opendc.org/img/logo.png" /> - - {/* OpenGraph meta tags */} - <meta property="og:title" content="OpenDC" /> - <meta property="og:site_name" content="OpenDC" /> - <meta property="og:type" content="website" /> - <meta property="og:image" content="http://opendc.org/img/logo.png" /> - <meta property="og:url" content="http://opendc.org/" /> - <meta - property="og:description" - content="OpenDC provides collaborative online datacenter modeling, diverse and effective datacenter simulation, and exploratory datacenter performance feedback." - /> - <meta property="og:locale" content="en_US" /> - </Head> - <body> - <Main /> - <NextScript /> - </body> - </Html> - ) - } -} - -export default OpenDCDocument diff --git a/opendc-web/opendc-web-ui/src/pages/logout.js b/opendc-web/opendc-web-ui/src/pages/logout.js deleted file mode 100644 index 38d5968e..00000000 --- a/opendc-web/opendc-web-ui/src/pages/logout.js +++ /dev/null @@ -1,39 +0,0 @@ -/* - * 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 from 'react' -import Head from 'next/head' -import { AppPage } from '../components/AppPage' -import { PageSection, PageSectionVariants } from '@patternfly/react-core' - -function Logout() { - return ( - <AppPage> - <Head> - <title>Logged Out - OpenDC</title> - </Head> - <PageSection variant={PageSectionVariants.light}>Logged out successfully</PageSection> - </AppPage> - ) -} - -export default Logout 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 deleted file mode 100644 index 52938bcd..00000000 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js +++ /dev/null @@ -1,75 +0,0 @@ -/* - * 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 ProjectOverview from '../../../components/projects/ProjectOverview' -import { useProject } from '../../../data/project' -import { AppPage } from '../../../components/AppPage' -import Head from 'next/head' -import Link from 'next/link' -import { - Breadcrumb, - BreadcrumbItem, - PageSection, - PageSectionVariants, - Skeleton, - Text, - TextContent, -} from '@patternfly/react-core' - -function Project() { - const router = useRouter() - const projectId = +router.query['project'] - - const { data: project } = useProject(+projectId) - - const breadcrumb = ( - <Breadcrumb> - <BreadcrumbItem to="/projects" component={Link}> - Projects - </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}`} component={Link} 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> - <ProjectOverview projectId={projectId} /> - </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 deleted file mode 100644 index 5d1e041b..00000000 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js +++ /dev/null @@ -1,121 +0,0 @@ -/* - * 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 dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import Head from 'next/head' -import Link from 'next/link' -import React, { useRef } from 'react' -import { - Breadcrumb, - BreadcrumbItem, - Divider, - PageSection, - PageSectionVariants, - Tab, - TabContent, - Tabs, - TabTitleText, - Text, - TextContent, -} from '@patternfly/react-core' -import { AppPage } from '../../../../components/AppPage' -import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' -import PortfolioSelector from '../../../../components/context/PortfolioSelector' -import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview' -import { usePortfolio } from '../../../../data/project' - -const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'), { ssr: false }) - -/** - * Page that displays the results in a portfolio. - */ -function Portfolio() { - const router = useRouter() - const projectId = +router.query['project'] - const portfolioNumber = +router.query['portfolio'] - - const overviewRef = useRef(null) - const resultsRef = useRef(null) - - const { data: portfolio } = usePortfolio(projectId, portfolioNumber) - - const breadcrumb = ( - <Breadcrumb> - <BreadcrumbItem to="/projects" component={Link}> - Projects - </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}`} component={Link}> - Project details - </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}/portfolios/${portfolioNumber}`} component={Link} isActive> - Portfolio - </BreadcrumbItem> - </Breadcrumb> - ) - - const contextSelectors = ( - <ContextSelectionSection> - <PortfolioSelector activePortfolio={portfolio} /> - </ContextSelectionSection> - ) - - return ( - <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}> - <Head> - <title>Portfolio - OpenDC</title> - </Head> - <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Portfolio</Text> - </TextContent> - </PageSection> - <PageSection type="tabs" variant={PageSectionVariants.light} stickyOnBreakpoint={{ default: '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"> - <PortfolioOverview projectId={projectId} portfolioId={portfolioNumber} /> - </TabContent> - <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden> - <PortfolioResults projectId={projectId} portfolioId={portfolioNumber} /> - </TabContent> - </PageSection> - </AppPage> - ) -} - -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 deleted file mode 100644 index 48359365..00000000 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ /dev/null @@ -1,142 +0,0 @@ -/* - * 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 dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import Head from 'next/head' -import Link from 'next/link' -import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' -import TopologySelector from '../../../../components/context/TopologySelector' -import TopologyOverview from '../../../../components/topologies/TopologyOverview' -import { useDispatch } from 'react-redux' -import React, { useEffect, useState } from 'react' -import { AppPage } from '../../../../components/AppPage' -import { - Breadcrumb, - BreadcrumbItem, - Divider, - PageSection, - PageSectionVariants, - Tab, - TabContent, - Tabs, - TabTitleText, - Text, - TextContent, -} from '@patternfly/react-core' -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'), { ssr: false }) - -/** - * Page that displays a datacenter topology. - */ -function Topology() { - const router = useRouter() - const projectId = +router.query['project'] - const topologyNumber = +router.query['topology'] - - const { data: topology } = useTopology(projectId, topologyNumber) - - const dispatch = useDispatch() - useEffect(() => { - if (topologyNumber) { - dispatch(openTopology(projectId, topologyNumber)) - } - }, [projectId, topologyNumber, dispatch]) - - const [activeTab, setActiveTab] = useState('overview') - - const breadcrumb = ( - <Breadcrumb> - <BreadcrumbItem to="/projects" component={Link}> - Projects - </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}`} component={Link}> - Project details - </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}/topologies/${topologyNumber}`} component={Link} isActive> - Topology - </BreadcrumbItem> - </Breadcrumb> - ) - - const contextSelectors = ( - <ContextSelectionSection> - <TopologySelector activeTopology={topology} /> - </ContextSelectionSection> - ) - - return ( - <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}> - <Head> - <title>{`${topology?.name ?? 'Topologies'} - OpenDC`}</title> - </Head> - <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" /> - <Tab - eventKey="floor-plan" - title={<TabTitleText>Floor Plan</TabTitleText>} - tabContentId="floor-plan" - /> - </Tabs> - </PageSection> - <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled> - <TabContent id="overview" aria-label="Overview tab" hidden={activeTab !== 'overview'}> - <TopologyOverview - projectId={projectId} - topologyNumber={topologyNumber} - onSelect={(type, obj) => { - if (type === 'room') { - dispatch(goToRoom(obj.id)) - setActiveTab('floor-plan') - } - }} - /> - </TabContent> - <TabContent - id="floor-plan" - aria-label="Floor Plan tab" - className="pf-u-h-100" - hidden={activeTab !== 'floor-plan'} - > - <TopologyMap /> - </TabContent> - </PageSection> - </AppPage> - ) -} - -export default Topology diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js deleted file mode 100644 index 97ff105c..00000000 --- a/opendc-web/opendc-web-ui/src/pages/projects/index.js +++ /dev/null @@ -1,116 +0,0 @@ -/* - * 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 { 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, - 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) { - case 'SHOW_ALL': - return projects - case 'SHOW_OWN': - return projects.filter((project) => project.role === 'OWNER') - case 'SHOW_SHARED': - return projects.filter((project) => project.role !== 'OWNER') - default: - return projects - } -} - -function Projects() { - const { status, data: projects } = useProjects() - const [filter, setFilter] = useState('SHOW_ALL') - 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} isFilled> - <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> - ) -} - -export default Projects |