From 6e3ad713111f35fc58bd2b7f1be5aeeb57eb94a8 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 20 Jul 2021 14:09:39 +0200 Subject: refactor(ui): Perform Saga mutations through React Query This change updates the OpenDC frontend to perform mutations of the topology done in Sagas through the React Query cache, so that non-Saga parts of the application also have their topology queries updated. --- opendc-web/opendc-web-ui/src/pages/_app.js | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages') diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js index d5f3b329..900ff405 100644 --- a/opendc-web/opendc-web-ui/src/pages/_app.js +++ b/opendc-web/opendc-web-ui/src/pages/_app.js @@ -23,15 +23,12 @@ import PropTypes from 'prop-types' import Head from 'next/head' import { Provider } from 'react-redux' +import { useNewQueryClient } from '../data/query' import { useStore } from '../redux' -import { AuthProvider, useAuth, useRequireAuth } from '../auth' +import { AuthProvider, useRequireAuth } from '../auth' import * as Sentry from '@sentry/react' import { Integrations } from '@sentry/tracing' -import { QueryClient, QueryClientProvider } from 'react-query' -import { useMemo } from 'react' -import { configureProjectClient } from '../data/project' -import { configureExperimentClient } from '../data/experiments' -import { configureTopologyClient } from '../data/topology' +import { QueryClientProvider } from 'react-query' import '@patternfly/react-core/dist/styles/base.css' import '@patternfly/react-styles/css/utilities/Alignment/alignment.css' @@ -47,18 +44,12 @@ import '@patternfly/react-styles/css/components/InlineEdit/inline-edit.css' import '../style/index.scss' // This setup is necessary to forward the Auth0 context to the Redux context -const Inner = ({ Component, pageProps }) => { +function Inner({ Component, pageProps }) { + // Force user to be authorized useRequireAuth() - const auth = useAuth() - const queryClient = useMemo(() => { - const client = new QueryClient() - configureProjectClient(client, auth) - configureExperimentClient(client, auth) - configureTopologyClient(client, auth) - return client - }, []) // eslint-disable-line react-hooks/exhaustive-deps - const store = useStore(pageProps.initialReduxState, { auth, queryClient }) + const queryClient = useNewQueryClient() + const store = useStore(pageProps.initialReduxState, { queryClient }) return ( -- cgit v1.2.3 From ebab0cc12e293a57cbc58d2dd51b3c9d7cd4ee92 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek 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') 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 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') 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 = ( @@ -95,31 +94,31 @@ function Topology() { onSelect={(_, tabIndex) => setActiveTab(tabIndex)} className="pf-m-page-insets" > - Overview} - tabContentId="overview" - tabContentRef={overviewRef} - /> + Overview} tabContentId="overview" /> Floor Plan} tabContentId="floor-plan" - tabContentRef={floorPlanRef} /> - - + -- cgit v1.2.3