fix: all namespace/project issues

Author: PeterYurkovich

web/src/components/dashboards/legacy/custom-time-range-modal.tsx

@@ -21,7 +21,7 @@ import { useDispatch } from 'react-redux';
 import { dashboardsSetEndTime, dashboardsSetTimespan } from '../../../store/actions';
 
 import { QueryParams } from '../../query-params';
-import { useSearchParams } from 'react-router';
+import { StringParam, useQueryParam } from 'use-query-params';
 
 const zeroPad = (number: number) => (number < 10 ? `0${number}` : number);
 
@@ -49,7 +49,8 @@ const CustomTimeRangeModal: FC<CustomTimeRangeModalProps> = ({
   endTime,
 }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
-  const [, setQueryParams] = useSearchParams();
+  const [, setEndTimeParam] = useQueryParam(QueryParams.EndTime, StringParam);
+  const [, setTimeRangeParam] = useQueryParam(QueryParams.TimeRange, StringParam);
 
   const dispatch = useDispatch();
 
@@ -68,10 +69,8 @@ const CustomTimeRangeModal: FC<CustomTimeRangeModalProps> = ({
     if (_.isInteger(from) && _.isInteger(to)) {
       dispatch(dashboardsSetEndTime(to));
       dispatch(dashboardsSetTimespan(to - from));
-      setQueryParams([
-        [QueryParams.EndTime, to.toString()],
-        [QueryParams.TimeRange, (to - from).toString()],
-      ]);
+      setEndTimeParam(to.toString());
+      setTimeRangeParam((to - from).toString());
       setClosed();
     }
   };

web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx

@@ -29,7 +29,7 @@ const HeaderTop: FC = memo(() => {
 
 type MonitoringDashboardsLegacyPageProps = PropsWithChildren<{
   boardItems: CombinedDashboardMetadata[];
-  changeBoard: (dashboardName: string) => void;
+  changeBoard: (params: { newBoard?: string; initialLoad?: boolean; newProject?: string }) => void;
   dashboardName: string;
 }>;
 
@@ -39,7 +39,7 @@ export const DashboardSkeletonLegacy: FC<MonitoringDashboardsLegacyPageProps> =
 
     const onChangeBoard = useCallback(
       (selectedDashboard: string) => {
-        changeBoard(selectedDashboard);
+        changeBoard({ newBoard: selectedDashboard });
       },
       [changeBoard],
     );

web/src/components/dashboards/legacy/legacy-dashboard-page.tsx

@@ -13,29 +13,33 @@ import { MonitoringProvider } from '../../../contexts/MonitoringContext';
 import { useMonitoring } from '../../../hooks/useMonitoring';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { QueryParams } from '../../../components/query-params';
-import { useOpenshiftProject } from './useOpenshiftProject';
 
 type LegacyDashboardsPageProps = {
   urlBoard: string;
 };
 
 const LegacyDashboardsPage_: FC<LegacyDashboardsPageProps> = ({ urlBoard }) => {
-  const { project, setProject } = useOpenshiftProject();
   const {
     legacyDashboardsError,
     legacyRows,
     legacyDashboardsLoading,
     legacyDashboardsMetadata,
     changeLegacyDashboard,
     legacyDashboard,
-  } = useLegacyDashboards(project, urlBoard);
+  } = useLegacyDashboards(urlBoard);
   const { perspective } = usePerspective();
   const { displayNamespaceSelector } = useMonitoring();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
     <>
-      {displayNamespaceSelector && <NamespaceBar onNamespaceChange={(ns) => setProject(ns)} />}
+      {displayNamespaceSelector && (
+        <NamespaceBar
+          onNamespaceChange={(ns) => {
+            changeLegacyDashboard({ newProject: ns });
+          }}
+        />
+      )}
       <DashboardSkeletonLegacy
         boardItems={legacyDashboardsMetadata}
         changeBoard={changeLegacyDashboard}

web/src/components/dashboards/legacy/legacy-dashboard.tsx

@@ -21,7 +21,7 @@ import type { FC } from 'react';
 import { memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Link, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
 
 import { Perspective } from '../../../store/actions';
 import BarChart from '../legacy/bar-chart';
@@ -50,6 +50,7 @@ import { t_global_font_size_heading_h2 } from '@patternfly/react-tokens';
 import { GraphUnits } from '../../../components/metrics/units';
 import { LegacyDashboardPageTestIDs } from '../../../components/data-test';
 import { useMonitoring } from '../../../hooks/useMonitoring';
+import { StringParam, useQueryParam } from 'use-query-params';
 
 const QueryBrowserLink = ({
   queries,
@@ -124,8 +125,9 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
   const [isChartLoading, setIsChartLoading] = useState<boolean>(panel.type === 'graph');
   const customDataSourceName = panel.datasource?.name;
   const [extensions, extensionsResolved] = useResolvedExtensions<DataSource>(isDataSource);
+  const [, setEndTimeParam] = useQueryParam(QueryParams.EndTime, StringParam);
+  const [, setTimeRangeParam] = useQueryParam(QueryParams.TimeRange, StringParam);
   const hasExtensions = !_.isEmpty(extensions);
-  const [, setQueryParams] = useSearchParams();
 
   const formatSeriesTitle = useCallback(
     (labels, i) => {
@@ -249,10 +251,8 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
   }, [extensions, extensionsResolved, customDataSourceName, hasExtensions]);
 
   const handleZoom = (timeRange: number, endTime: number) => {
-    setQueryParams([
-      [QueryParams.EndTime, endTime.toString()],
-      [QueryParams.TimeRange, timeRange.toString()],
-    ]);
+    setEndTimeParam(endTime.toString());
+    setTimeRangeParam(timeRange.toString());
   };
 
   const panelBreakpoints = useMemo(() => {

web/src/components/dashboards/legacy/legacy-variable-dropdowns.tsx

@@ -28,7 +28,7 @@ import { useSafeFetch } from '../../console/utils/safe-fetch-hook';
 
 import { dashboardsPatchVariable, dashboardsVariableOptionsLoaded } from '../../../store/actions';
 import { getTimeRanges, isTimeoutError, QUERY_CHUNK_SIZE } from '../../utils';
-import { getObserveState } from '../../hooks/usePerspective';
+import { getObserveState, usePerspective } from '../../hooks/usePerspective';
 import { MonitoringState } from '../../../store/store';
 import { DEFAULT_GRAPH_SAMPLES, MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY } from './utils';
 import {
@@ -38,7 +38,6 @@ import {
 import { useMonitoring } from '../../../hooks/useMonitoring';
 import { useDeepMemo } from '../../hooks/useDeepMemo';
 import { StringParam, useQueryParam } from 'use-query-params';
-import { QueryParams } from '../../query-params';
 
 const intervalVariableRegExps = ['__interval', '__rate_interval', '__auto_interval_[a-z]+'];
 
@@ -109,6 +108,7 @@ const LegacyDashboardsVariableOption = ({ value, isSelected, ...rest }) =>
 const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { plugin, accessCheckLoading, useMetricsTenancy } = useMonitoring();
+  const { perspective } = usePerspective();
   const [namespace] = useActiveNamespace();
   const [queryParam, setQueryParam] = useQueryParam(name, StringParam);
 
@@ -138,6 +138,9 @@ const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name
   const [extensions, extensionsResolved] = useResolvedExtensions<DataSource>(isDataSource);
   const hasExtensions = !_.isEmpty(extensions);
 
+  // Don't set namespace param while in dev perspective
+  const shouldSetQueryParam = !(perspective === 'dev' && name === 'namespace');
+
   const getURL = useCallback(
     async (prometheusProps) => {
       try {
@@ -254,25 +257,25 @@ const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name
   ]);
 
   useEffect(() => {
-    if (variable?.value !== queryParam && name !== QueryParams.Namespace) {
-      // Default to using the query param to allow for sharable links, expect for namespace
+    if (variable?.value !== queryParam) {
+      // Default to using the query param to allow for sharable links
       if (queryParam) {
         dispatch(dashboardsPatchVariable(name, { value: queryParam }));
         // set the url if it isn't set
-      } else if (variable?.value) {
+      } else if (variable?.value && shouldSetQueryParam) {
         setQueryParam(variable?.value);
       }
     }
-  }, [name, variable?.value, queryParam, setQueryParam, dispatch]);
+  }, [name, variable?.value, queryParam, setQueryParam, dispatch, shouldSetQueryParam]);
 
   const onChange = useCallback(
     (v: string) => {
-      if (v !== variable?.value) {
+      if (v !== variable?.value && shouldSetQueryParam) {
         setQueryParam(v);
         dispatch(dashboardsPatchVariable(name, { value: v }));
       }
     },
-    [dispatch, name, variable?.value, setQueryParam],
+    [dispatch, name, variable?.value, setQueryParam, shouldSetQueryParam],
   );
 
   if (variable?.isHidden || (!isError && _.isEmpty(variable?.options))) {

web/src/components/dashboards/legacy/useLegacyDashboards.ts

@@ -22,10 +22,12 @@ import {
   MONITORING_DASHBOARDS_DEFAULT_TIMESPAN,
   MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY,
 } from './utils';
+import { useOpenshiftProject } from './useOpenshiftProject';
 
-export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
+export const useLegacyDashboards = (urlBoard: string) => {
   const { t } = useTranslation('plugin__monitoring-plugin');
   const { perspective } = usePerspective();
+  const { project } = useOpenshiftProject();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const safeFetch = useCallback(useSafeFetch(), []);
@@ -56,7 +58,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
   // Move namespace filtering out of the fetch response call to avoid race conditions
   const legacyDashboards = useMemo<Board[]>(() => {
     let items = unfilteredLegacyDashboards;
-    if (namespace && namespace !== ALL_NAMESPACES_KEY) {
+    if (project && project !== ALL_NAMESPACES_KEY) {
       items = _.filter(
         items,
         (item) => item.metadata?.labels['console.openshift.io/odc-dashboard'] === 'true',
@@ -78,7 +80,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
       }
     };
     return _.sortBy(_.map(items, getBoardData), (v) => _.toLower(v?.data?.title));
-  }, [namespace, unfilteredLegacyDashboards, setLegacyDashboardsError, t]);
+  }, [project, unfilteredLegacyDashboards, setLegacyDashboardsError, t]);
 
   const legacyRows = useMemo(() => {
     const data = _.find(legacyDashboards, { name: urlBoard })?.data;
@@ -117,25 +119,49 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
   }, [legacyDashboards, legacyDashboardsLoading]);
 
   const changeLegacyDashboard = useCallback(
-    (newBoard: string, forceRefresh = false) => {
-      if (!newBoard) {
-        // If the board is being cleared then don't do anything
-        return;
-      }
+    ({
+      newBoard,
+      newProject,
+      initialLoad = false,
+    }: {
+      newBoard?: string;
+      newProject?: string;
+      initialLoad?: boolean;
+    }) => {
+      const dashboardProject = newProject ? newProject : project;
 
-      const params = new URLSearchParams();
+      const url = getLegacyDashboardsUrl(perspective, newBoard, dashboardProject);
 
-      const url = getLegacyDashboardsUrl(perspective, newBoard, namespace);
+      let params: URLSearchParams;
+      if (initialLoad) {
+        params = new URLSearchParams(queryParams);
+        if (perspective === 'dev') {
+          params.delete(QueryParams.Namespace);
+          params.delete(QueryParams.OpenshiftProject);
+        }
+      } else {
+        params = new URLSearchParams();
+      }
 
-      if (newBoard !== urlBoard || forceRefresh) {
-        if (!params.has(QueryParams.Dashboard) || params.get(QueryParams.Dashboard) !== newBoard) {
+      if (newBoard !== urlBoard || newProject !== project || initialLoad) {
+        if (
+          perspective === 'dev' &&
+          (!params.has(QueryParams.Dashboard) || params.get(QueryParams.Dashboard) !== newBoard)
+        ) {
           params.set(QueryParams.Dashboard, newBoard);
-          navigate(`${url}?${params.toString()}`, { replace: true });
         }
+        if (perspective !== 'dev') {
+          if (params.get(QueryParams.OpenshiftProject) !== ALL_NAMESPACES_KEY) {
+            params.delete(QueryParams.Namespace);
+          }
+          params.set(QueryParams.OpenshiftProject, dashboardProject);
+        }
+        const srt = `${url}?${params.toString()}`;
+        navigate(srt, { replace: true });
 
         dispatch(
           dashboardsPatchAllVariables(
-            getAllVariables(queryParams, legacyDashboards, namespace, newBoard),
+            getAllVariables(params, legacyDashboards, dashboardProject, newBoard),
           ),
         );
 
@@ -157,7 +183,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
       urlBoard,
       dispatch,
       navigate,
-      namespace,
+      project,
       refreshInterval,
       queryParams,
       legacyDashboards,
@@ -171,10 +197,14 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
         initialLoad) &&
       !_.isEmpty(legacyDashboards)
     ) {
-      changeLegacyDashboard(urlBoard || legacyDashboards?.[0]?.name, initialLoad);
+      changeLegacyDashboard({
+        newBoard: urlBoard || legacyDashboards?.[0]?.name,
+        initialLoad: initialLoad,
+        newProject: project,
+      });
       setInitialLoaded();
     }
-  }, [legacyDashboards, changeLegacyDashboard, initialLoad, setInitialLoaded, urlBoard]);
+  }, [legacyDashboards, changeLegacyDashboard, initialLoad, setInitialLoaded, urlBoard, project]);
 
   useEffect(() => {
     if (initialLoad || _.isEmpty(legacyDashboards)) {
@@ -185,11 +215,11 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
     if (currentBoard) {
       dispatch(
         dashboardsPatchAllVariables(
-          getAllVariables(queryParams, legacyDashboards, namespace, currentBoard),
+          getAllVariables(queryParams, legacyDashboards, project, currentBoard),
         ),
       );
     }
-  }, [namespace, legacyDashboards, urlBoard, dispatch, initialLoad, queryParams]);
+  }, [project, legacyDashboards, urlBoard, dispatch, initialLoad, queryParams]);
 
   // Clear variables on unmount
   useEffect(() => {

web/src/components/dashboards/legacy/useOpenshiftProject.ts

@@ -1,5 +1,5 @@
 import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { QueryParams } from '../../query-params';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useDispatch, useSelector } from 'react-redux';
@@ -53,19 +53,7 @@ export const useOpenshiftProject = () => {
     routeNamespace,
   ]);
 
-  const setProject = useCallback(
-    (namespace: string) => {
-      if (perspective === 'dev') {
-        setActiveNamespace(namespace);
-      } else {
-        setOpenshiftProject(namespace);
-      }
-    },
-    [setActiveNamespace, setOpenshiftProject, perspective],
-  );
-
   return {
     project: perspective === 'dev' ? routeNamespace || activeNamespace : openshiftProject,
-    setProject,
   };
 };

web/src/components/hooks/usePerspective.tsx

@@ -277,7 +277,7 @@ export const getMutlipleQueryBrowserUrl = (
 
 export const getLegacyDashboardsUrl = (
   perspective: Perspective,
-  boardName: string,
+  boardName?: string,
   namespace?: string,
 ) => {
   switch (perspective) {
@@ -286,10 +286,10 @@ export const getLegacyDashboardsUrl = (
     case 'dev':
       return `/dev-monitoring/ns/${namespace}`;
     case 'virtualization-perspective':
-      return `/virt-monitoring/dashboards/${boardName}`;
+      return `/virt-monitoring/dashboards` + (boardName ? `/${boardName}` : '');
     case 'admin':
     default:
-      return `/monitoring/dashboards/${boardName}`;
+      return `/monitoring/dashboards` + (boardName ? `/${boardName}` : '');
   }
 };