fix: update namespace from query params to console

PeterYurkovich · PeterYurkovich · commit daab768c1601 · 2025-11-10T10:43:46.000-05:00
diff --git a/web/src/components/MetricsPage.tsx b/web/src/components/MetricsPage.tsx
@@ -114,15 +114,15 @@ import {
   t_global_spacer_sm,
   t_global_font_family_mono,
 } from '@patternfly/react-tokens';
-import { QueryParamProvider, StringParam, useQueryParam } from 'use-query-params';
-import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { StringParam, useQueryParam } from 'use-query-params';
 import { GraphUnits, isGraphUnit } from './metrics/units';
 import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 import { valueFormatter } from './console/console-shared/src/components/query-browser/QueryBrowserTooltip';
 import { ALL_NAMESPACES_KEY } from './utils';
 import { MonitoringProvider } from '../contexts/MonitoringContext';
 import { DataTestIDs } from './data-test';
 import { useMonitoring } from '../hooks/useMonitoring';
+import { useQueryNamespace } from './hooks/useQueryNamespace';
 
 // Stores information about the currently focused query input
 let focusedQuery;
@@ -1278,14 +1278,7 @@ const GraphUnitsDropDown: FC = () => {
 const MetricsPage_: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const [units, setUnits] = useQueryParam(QueryParams.Units, StringParam);
-  const [queryNamespace, setQueryNamespace] = useQueryParam(QueryParams.Namespace, StringParam);
-  const [activeNamespace, setActiveNamespace] = useActiveNamespace();
-
-  useEffect(() => {
-    if (queryNamespace && activeNamespace !== queryNamespace) {
-      setActiveNamespace(queryNamespace);
-    }
-  }, [queryNamespace, activeNamespace, setActiveNamespace]);
+  const { setNamespace } = useQueryNamespace();
 
   const dispatch = useDispatch();
 
@@ -1368,7 +1361,7 @@ const MetricsPage_: FC = () => {
       <NamespaceBar
         onNamespaceChange={(namespace) => {
           dispatch(queryBrowserDeleteAllQueries());
-          setQueryNamespace(namespace);
+          setNamespace(namespace);
         }}
       />
       <ListPageHeader title={t('Metrics')}>
@@ -1427,9 +1420,7 @@ const MetricsPage = withFallback(MetricsPage_);
 export const MpCmoMetricsPage: React.FC = () => {
   return (
     <MonitoringProvider monitoringContext={{ plugin: 'monitoring-plugin', prometheus: 'cmo' }}>
-      <QueryParamProvider adapter={ReactRouter5Adapter}>
-        <MetricsPage />
-      </QueryParamProvider>
+      <MetricsPage />
     </MonitoringProvider>
   );
 };
diff --git a/web/src/components/alerting/AlertRulesDetailsPage.tsx b/web/src/components/alerting/AlertRulesDetailsPage.tsx
@@ -6,7 +6,6 @@ import {
   PrometheusAlert,
   ResourceIcon,
   Timestamp,
-  useActiveNamespace,
   useResolvedExtensions,
 } from '@openshift-console/dynamic-plugin-sdk';
 import {
@@ -69,6 +68,7 @@ import { MonitoringProvider } from '../../contexts/MonitoringContext';
 
 import { DataTestIDs } from '../data-test';
 import { useAlerts } from '../../hooks/useAlerts';
+import { useQueryNamespace } from '../hooks/useQueryNamespace';
 
 // Renders Prometheus template text and highlights any {{ ... }} tags that it contains
 const PrometheusTemplate = ({ text }) => (
@@ -147,7 +147,7 @@ const AlertRulesDetailsPage_: FC = () => {
   const { rules, rulesAlertLoading } = useAlerts();
 
   const { perspective } = usePerspective();
-  const [namespace] = useActiveNamespace();
+  const { namespace } = useQueryNamespace();
 
   const rule = _.find(rules, { id: params.id });
 
diff --git a/web/src/components/alerting/AlertingPage.tsx b/web/src/components/alerting/AlertingPage.tsx
@@ -13,6 +13,7 @@ import { useLocation } from 'react-router-dom';
 import { AlertResource, RuleResource, SilenceResource } from '../utils';
 import { useDispatch } from 'react-redux';
 import { alertingClearSelectorData } from '../../store/actions';
+import { useQueryNamespace } from '../hooks/useQueryNamespace';
 
 const CmoAlertsPage = lazy(() =>
   import(/* webpackChunkName: "CmoAlertsPage" */ './AlertsPage').then((module) => ({
@@ -59,6 +60,7 @@ const AlertingPage: FC = () => {
   const dispatch = useDispatch();
 
   const [perspective] = useActivePerspective();
+  const { setNamespace } = useQueryNamespace();
 
   const { plugin, prometheus } = useMonitoring();
 
@@ -100,9 +102,10 @@ const AlertingPage: FC = () => {
     <>
       {namespacedPages.includes(pathname) && (
         <NamespaceBar
-          onNamespaceChange={(namespace) =>
-            dispatch(alertingClearSelectorData(prometheus, namespace))
-          }
+          onNamespaceChange={(namespace) => {
+            dispatch(alertingClearSelectorData(prometheus, namespace));
+            setNamespace(namespace);
+          }}
         />
       )}
       <ListPageHeader title={t('Alerting')} />
diff --git a/web/src/components/alerting/AlertsDetailsPage.tsx b/web/src/components/alerting/AlertsDetailsPage.tsx
@@ -9,7 +9,6 @@ import {
   ResourceIcon,
   ResourceLink,
   Rule,
-  useActiveNamespace,
   useResolvedExtensions,
 } from '@openshift-console/dynamic-plugin-sdk';
 import * as _ from 'lodash-es';
@@ -90,6 +89,7 @@ import {
 import { DataTestIDs } from '../data-test';
 import { useAlerts } from '../../hooks/useAlerts';
 import { useMonitoring } from '../../hooks/useMonitoring';
+import { useQueryNamespace } from '../hooks/useQueryNamespace';
 
 const AlertsDetailsPage_: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -101,7 +101,7 @@ const AlertsDetailsPage_: FC = () => {
 
   const { alerts, rulesAlertLoading, silences } = useAlerts();
 
-  const [namespace] = useActiveNamespace();
+  const { namespace } = useQueryNamespace();
 
   const hideGraphs = useSelector(
     (state: MonitoringState) => !!getObserveState(plugin, state).hideGraphs,
diff --git a/web/src/components/alerting/SilenceCreatePage.tsx b/web/src/components/alerting/SilenceCreatePage.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { getAllQueryArguments } from '../console/utils/router';
 import { SilenceForm } from './SilenceForm';
 import { MonitoringProvider } from '../../contexts/MonitoringContext';
-import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import { ALL_NAMESPACES_KEY } from '../utils';
+import { useQueryNamespace } from '../hooks/useQueryNamespace';
 
 const CreateSilencePage = ({ isNamespaced }: { isNamespaced: boolean }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -23,11 +23,11 @@ const CreateSilencePage = ({ isNamespaced }: { isNamespaced: boolean }) => {
 };
 
 export const MpCmoCreateSilencePage = () => {
-  const [activeNamespace] = useActiveNamespace();
+  const { namespace } = useQueryNamespace();
 
   return (
     <MonitoringProvider monitoringContext={{ plugin: 'monitoring-plugin', prometheus: 'cmo' }}>
-      <CreateSilencePage isNamespaced={activeNamespace !== ALL_NAMESPACES_KEY} />
+      <CreateSilencePage isNamespaced={namespace !== ALL_NAMESPACES_KEY} />
     </MonitoringProvider>
   );
 };
diff --git a/web/src/components/alerting/SilenceForm.tsx b/web/src/components/alerting/SilenceForm.tsx
@@ -1,9 +1,4 @@
-import {
-  consoleFetchJSON,
-  DocumentTitle,
-  NamespaceBar,
-  useActiveNamespace,
-} from '@openshift-console/dynamic-plugin-sdk';
+import { consoleFetchJSON, NamespaceBar } from '@openshift-console/dynamic-plugin-sdk';
 import {
   ActionGroup,
   Alert,
@@ -54,6 +49,7 @@ import { DataTestIDs } from '../data-test';
 import { ALL_NAMESPACES_KEY, getAlertmanagerSilencesUrl } from '../utils';
 import { useAlerts } from '../../hooks/useAlerts';
 import { useMonitoring } from '../../hooks/useMonitoring';
+import { useQueryNamespace } from '../hooks/useQueryNamespace';
 
 const durationOff = '-';
 
@@ -133,7 +129,7 @@ const NegativeMatcherHelp = () => {
 
 const SilenceForm_: FC<SilenceFormProps> = ({ defaults, Info, title, isNamespaced }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
-  const [namespace] = useActiveNamespace();
+  const { namespace } = useQueryNamespace();
   const { prometheus } = useMonitoring();
   const navigate = useNavigate();
 
diff --git a/web/src/components/dashboards/legacy/legacy-dashboard-page.tsx b/web/src/components/dashboards/legacy/legacy-dashboard-page.tsx
@@ -2,8 +2,6 @@ import { NamespaceBar, Overview } from '@openshift-console/dynamic-plugin-sdk';
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { LoadingInline } from '../../../components/console/console-shared/src/components/loading/LoadingInline';
 import withFallback from '../../console/console-shared/error/fallbacks/withFallback';
 import { usePerspective } from '../../hooks/usePerspective';
@@ -62,9 +60,7 @@ export const MpCmoLegacyDashboardsPage: FC = () => {
 
   return (
     <MonitoringProvider monitoringContext={{ plugin: 'monitoring-plugin', prometheus: 'cmo' }}>
-      <QueryParamProvider adapter={ReactRouter5Adapter}>
-        <LegacyDashboardsPageWithFallback urlBoard={params?.dashboardName} />
-      </QueryParamProvider>
+      <LegacyDashboardsPageWithFallback urlBoard={params?.dashboardName} />
     </MonitoringProvider>
   );
 };
diff --git a/web/src/components/dashboards/perses/dashboard-page.tsx b/web/src/components/dashboards/perses/dashboard-page.tsx
@@ -1,8 +1,6 @@
 import { Overview } from '@openshift-console/dynamic-plugin-sdk';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { FC } from 'react';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { LoadingInline } from '../../console/console-shared/src/components/loading/LoadingInline';
 import { PersesWrapper } from './PersesWrapper';
 import { DashboardSkeleton } from './dashboard-skeleton';
@@ -65,11 +63,9 @@ const MonitoringDashboardsPage_: FC = () => {
 
 const MonitoringDashboardsPageWrapper: FC = () => {
   return (
-    <QueryParamProvider adapter={ReactRouter5Adapter}>
-      <QueryClientProvider client={queryClient}>
-        <MonitoringDashboardsPage_ />
-      </QueryClientProvider>
-    </QueryParamProvider>
+    <QueryClientProvider client={queryClient}>
+      <MonitoringDashboardsPage_ />
+    </QueryClientProvider>
   );
 };
 
diff --git a/web/src/components/hooks/useQueryNamespace.ts b/web/src/components/hooks/useQueryNamespace.ts
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { StringParam, useQueryParam } from 'use-query-params';
+import { QueryParams } from '../query-params';
+import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+
+// Utility hook to syncronize the namespace parameter in the URL with the activeNamespace
+// the console uses
+export const useQueryNamespace = () => {
+  const [queryNamespace, setQueryNamespace] = useQueryParam(QueryParams.Namespace, StringParam);
+  const [activeNamespace, setActiveNamespace] = useActiveNamespace();
+
+  useEffect(() => {
+    if (queryNamespace && activeNamespace !== queryNamespace) {
+      setActiveNamespace(queryNamespace);
+    }
+    if (!queryNamespace) {
+      setQueryNamespace(activeNamespace);
+    }
+  }, [queryNamespace, activeNamespace, setActiveNamespace]);
+
+  return {
+    namespace: queryNamespace,
+    setNamespace: setQueryNamespace,
+  };
+};
diff --git a/web/src/contexts/MonitoringContext.tsx b/web/src/contexts/MonitoringContext.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { MonitoringPlugins, Prometheus } from '../components/utils';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 
 type MonitoringContextType = {
   /** Dictates which plugin this code is being run in */
@@ -16,4 +18,8 @@ export const MonitoringContext = React.createContext<MonitoringContextType>({
 export const MonitoringProvider: React.FC<{ monitoringContext: MonitoringContextType }> = ({
   children,
   monitoringContext,
-}) => <MonitoringContext.Provider value={monitoringContext}>{children}</MonitoringContext.Provider>;
+}) => (
+  <MonitoringContext.Provider value={monitoringContext}>
+    <QueryParamProvider adapter={ReactRouter5Adapter}>{children}</QueryParamProvider>
+  </MonitoringContext.Provider>
+);
diff --git a/web/src/e2e-tests-app.tsx b/web/src/e2e-tests-app.tsx
@@ -3,8 +3,6 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Link, Route, Routes } from 'react-router-dom-v5-compat';
 import { combineReducers, createStore } from 'redux';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { MpCmoAlertingPage } from './components/alerting/AlertingPage';
 import { MpCmoAlertRulesDetailsPage } from './components/alerting/AlertRulesDetailsPage';
 import { MpCmoAlertRulesPage } from './components/alerting/AlertRulesPage';
@@ -37,31 +35,29 @@ const App = () => (
         <Link to="/monitoring/dashboards">Dashboards</Link>
         <Link to="/monitoring/targets">Targets</Link>
       </div>
-      <QueryParamProvider adapter={ReactRouter5Adapter}>
-        <Routes>
-          <Route path="silences/~new" element={<MpCmoCreateSilencePage />} />
+      <Routes>
+        <Route path="silences/~new" element={<MpCmoCreateSilencePage />} />
 
-          <Route path="dashboards" element={<MpCmoLegacyDashboardsPage />} />
-          <Route path="dashboards/:dashboardName" element={<MpCmoLegacyDashboardsPage />} />
+        <Route path="dashboards" element={<MpCmoLegacyDashboardsPage />} />
+        <Route path="dashboards/:dashboardName" element={<MpCmoLegacyDashboardsPage />} />
 
-          <Route path="graph" element={<PrometheusRedirectPage />} />
-          <Route path="query-browser" element={<MpCmoMetricsPage />} />
+        <Route path="graph" element={<PrometheusRedirectPage />} />
+        <Route path="query-browser" element={<MpCmoMetricsPage />} />
 
-          <Route path="targets" element={<MpCmoTargetsPage />} />
-          <Route path="targets/:scrapeUrl" element={<MpCmoTargetsPage />} />
+        <Route path="targets" element={<MpCmoTargetsPage />} />
+        <Route path="targets/:scrapeUrl" element={<MpCmoTargetsPage />} />
 
-          <Route path="alertrules/:id" element={<MpCmoAlertRulesDetailsPage />} />
-          <Route path="alerts/:ruleID" element={<MpCmoAlertsDetailsPage />} />
-          <Route path="silences/:id" element={<MpCmoSilencesDetailsPage />} />
-          <Route path="silences/:id/edit" element={<MpCmoSilenceEditPage />} />
+        <Route path="alertrules/:id" element={<MpCmoAlertRulesDetailsPage />} />
+        <Route path="alerts/:ruleID" element={<MpCmoAlertsDetailsPage />} />
+        <Route path="silences/:id" element={<MpCmoSilencesDetailsPage />} />
+        <Route path="silences/:id/edit" element={<MpCmoSilenceEditPage />} />
 
-          <Route element={<MpCmoAlertingPage />}>
-            <Route path="alerts" element={<MpCmoAlertsPage />} />
-            <Route path="alertrules" element={<MpCmoAlertRulesPage />} />
-            <Route path="silences" element={<MpCmoSilencesPage />} />
-          </Route>
-        </Routes>
-      </QueryParamProvider>
+        <Route element={<MpCmoAlertingPage />}>
+          <Route path="alerts" element={<MpCmoAlertsPage />} />
+          <Route path="alertrules" element={<MpCmoAlertRulesPage />} />
+          <Route path="silences" element={<MpCmoSilencesPage />} />
+        </Route>
+      </Routes>
     </BrowserRouter>
   </Provider>
 );
diff --git a/web/src/hooks/useAlerts.ts b/web/src/hooks/useAlerts.ts
@@ -150,7 +150,12 @@ const useAlertsPoller = ({
   const fetchDispatch = () =>
     dispatch(fetchAlertingData(prometheus, namespace, rulesUrl, alertsSource, silencesUrl));
 
-  usePoll(fetchDispatch, POLLING_INTERVAL_MS);
+  const dependencies = useMemo(
+    () => [namespace, rulesUrl, silencesUrl],
+    [namespace, rulesUrl, silencesUrl],
+  );
+
+  usePoll(fetchDispatch, POLLING_INTERVAL_MS, dependencies);
 
   return { trigger: fetchDispatch };
 };
