feature: add namespace dropdown to dashboards page

Author: PeterYurkovich

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

@@ -1,4 +1,4 @@
-import { Overview } from '@openshift-console/dynamic-plugin-sdk';
+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';
@@ -12,45 +12,46 @@ import ErrorAlert from './error';
 import { DashboardSkeletonLegacy } from './dashboard-skeleton-legacy';
 import { useLegacyDashboards } from './useLegacyDashboards';
 import { MonitoringProvider } from '../../../contexts/MonitoringContext';
+import { useOpenshiftProject } from './useOpenshiftProject';
 
 type LegacyDashboardsPageProps = {
   urlBoard: string;
-  namespace?: string;
 };
 
-const LegacyDashboardsPage_: FC<LegacyDashboardsPageProps> = ({
-  urlBoard,
-  namespace, // only used in developer perspective
-}) => {
+const LegacyDashboardsPage_: FC<LegacyDashboardsPageProps> = ({ urlBoard }) => {
+  const { project, setProject } = useOpenshiftProject();
   const {
     legacyDashboardsError,
     legacyRows,
     legacyDashboardsLoading,
     legacyDashboardsMetadata,
     changeLegacyDashboard,
     legacyDashboard,
-  } = useLegacyDashboards(namespace, urlBoard);
+  } = useLegacyDashboards(project, urlBoard);
   const { perspective } = usePerspective();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <DashboardSkeletonLegacy
-      boardItems={legacyDashboardsMetadata}
-      changeBoard={changeLegacyDashboard}
-      dashboardName={legacyDashboard}
-    >
-      <Overview>
-        {legacyDashboardsLoading ? (
-          <LoadingInline />
-        ) : legacyDashboardsError ? (
-          <ErrorAlert
-            error={{ message: legacyDashboardsError, name: t('Error Loading Dashboards') }}
-          />
-        ) : (
-          <LegacyDashboard rows={legacyRows} perspective={perspective} />
-        )}
-      </Overview>
-    </DashboardSkeletonLegacy>
+    <>
+      <NamespaceBar onNamespaceChange={(namespace) => setProject(namespace)} />
+      <DashboardSkeletonLegacy
+        boardItems={legacyDashboardsMetadata}
+        changeBoard={changeLegacyDashboard}
+        dashboardName={legacyDashboard}
+      >
+        <Overview>
+          {legacyDashboardsLoading ? (
+            <LoadingInline />
+          ) : legacyDashboardsError ? (
+            <ErrorAlert
+              error={{ message: legacyDashboardsError, name: t('Error Loading Dashboards') }}
+            />
+          ) : (
+            <LegacyDashboard rows={legacyRows} perspective={perspective} />
+          )}
+        </Overview>
+      </DashboardSkeletonLegacy>
+    </>
   );
 };
 
@@ -62,7 +63,7 @@ export const MpCmoLegacyDashboardsPage: FC = () => {
   return (
     <MonitoringProvider monitoringContext={{ plugin: 'monitoring-plugin', prometheus: 'cmo' }}>
       <QueryParamProvider adapter={ReactRouter5Adapter}>
-        <LegacyDashboardsPageWithFallback urlBoard={params?.dashboardName} namespace={params?.ns} />
+        <LegacyDashboardsPageWithFallback urlBoard={params?.dashboardName} />
       </QueryParamProvider>
     </MonitoringProvider>
   );

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

@@ -39,7 +39,7 @@ import {
 } from '../../hooks/usePerspective';
 import KebabDropdown from '../../kebab-dropdown';
 import { MonitoringState } from '../../../store/store';
-import { evaluateVariableTemplate } from './legacy-variable-dropdowns';
+import { evaluateVariableTemplate, Variable } from './legacy-variable-dropdowns';
 import { Panel, Row } from './types';
 import { QueryParams } from '../../query-params';
 import { CustomDataSource } from '@openshift-console/dynamic-plugin-sdk-internal/lib/extensions/dashboard-data-source';
@@ -104,7 +104,6 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { plugin } = useMonitoring();
 
-  const [namespace] = useActiveNamespace();
   const pollInterval = useSelector(
     (state: MonitoringState) => getObserveState(plugin, state).dashboards.pollInterval,
   );
@@ -115,6 +114,9 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
     (state: MonitoringState) => getObserveState(plugin, state).dashboards.variables,
   );
 
+  // Directly use the namespace variable to prevent desync
+  const namespace = variables?.['namespace'] as Variable;
+
   const ref = useRef();
   const [, wasEverVisible] = useIsVisible(ref);
 
@@ -281,7 +283,9 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
   if (!rawQueries.length) {
     return null;
   }
-  const queries = rawQueries.map((expr) => evaluateVariableTemplate(expr, variables, timespan));
+  const queries = rawQueries.map((expr) =>
+    evaluateVariableTemplate(expr, variables, timespan, namespace?.value ?? ''),
+  );
   const isLoading =
     (_.some(queries, _.isUndefined) && dataSourceInfoLoading) || customDataSource === undefined;
 
@@ -353,7 +357,7 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
                       panel={panel}
                       pollInterval={pollInterval}
                       query={queries[0]}
-                      namespace={namespace}
+                      namespace={namespace?.value ?? ''}
                       customDataSource={customDataSource}
                     />
                   )}
@@ -362,7 +366,7 @@ const Card: FC<CardProps> = memo(({ panel, perspective }) => {
                       panel={panel}
                       pollInterval={pollInterval}
                       queries={queries}
-                      namespace={namespace}
+                      namespace={namespace?.value ?? ''}
                       customDataSource={customDataSource}
                     />
                   )}

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

@@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { SingleTypeaheadDropdown } from '../../console/utils/single-typeahead-dropdown';
-import { getPrometheusBasePath, buildPrometheusUrl } from '../../utils';
+import { getPrometheusBasePath, buildPrometheusUrl, ALL_NAMESPACES_KEY } from '../../utils';
 import { getQueryArgument, setQueryArgument } from '../../console/utils/router';
 import { useSafeFetch } from '../../console/utils/safe-fetch-hook';
 
@@ -48,6 +48,7 @@ export const evaluateVariableTemplate = (
   template: string,
   variables: any,
   timespan: number,
+  namespace: string,
 ): string => {
   if (_.isEmpty(template)) {
     return undefined;
@@ -81,8 +82,11 @@ export const evaluateVariableTemplate = (
         result = undefined;
         return false;
       }
-      const replacement =
+      let replacement =
         v.value === MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY ? '.+' : v.value || '';
+      if (v.name === 'namespace' && namespace !== ALL_NAMESPACES_KEY) {
+        replacement = namespace;
+      }
       result = result.replace(re, replacement);
     }
   });
@@ -103,9 +107,10 @@ const LegacyDashboardsVariableOption = ({ value, isSelected, ...rest }) =>
     </SelectOption>
   );
 
-const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name, namespace }) => {
+const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { plugin } = useMonitoring();
+  const [namespace] = useActiveNamespace();
 
   const timespan = useSelector(
     (state: MonitoringState) => getObserveState(plugin, state).dashboards.timespan,
@@ -115,11 +120,12 @@ const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name,
     (state: MonitoringState) => getObserveState(plugin, state).dashboards.variables,
   );
   const variable = variables?.[name] as Variable;
+
   const options = useDeepMemo(() => {
     return variable?.options;
   }, [variable?.options]);
 
-  const query = evaluateVariableTemplate(variable?.query, variables, timespan);
+  const query = evaluateVariableTemplate(variable?.query, variables, timespan, namespace);
 
   const dispatch = useDispatch();
 
@@ -309,7 +315,6 @@ const LegacyDashboardsVariableDropdown: FC<VariableDropdownProps> = ({ id, name,
 
 // Expects to be inside of a Patternfly Split Component
 export const LegacyDashboardsAllVariableDropdowns: FC = () => {
-  const [namespace] = useActiveNamespace();
   const { plugin } = useMonitoring();
 
   const variables = useSelector(
@@ -323,7 +328,7 @@ export const LegacyDashboardsAllVariableDropdowns: FC = () => {
   return (
     <Split hasGutter isWrappable>
       {Object.keys(variables).map((name: string) => (
-        <LegacyDashboardsVariableDropdown id={name} key={name} name={name} namespace={namespace} />
+        <LegacyDashboardsVariableDropdown id={name} key={name} name={name} />
       ))}
     </Split>
   );
@@ -342,5 +347,4 @@ export type Variable = {
 type VariableDropdownProps = {
   id: string;
   name: string;
-  namespace?: string;
 };

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

@@ -21,7 +21,8 @@ import {
 import { CombinedDashboardMetadata } from '../perses/hooks/useDashboardsData';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { QueryParams } from '../../query-params';
-import { NumberParam, StringParam, useQueryParam } from 'use-query-params';
+import { NumberParam, useQueryParam } from 'use-query-params';
+import { ALL_NAMESPACES_KEY } from '../../utils';
 
 export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
   const { t } = useTranslation('plugin__monitoring-plugin');
@@ -31,26 +32,19 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
   const safeFetch = useCallback(useSafeFetch(), []);
   const [legacyDashboards, setLegacyDashboards] = useState<Board[]>([]);
   const [legacyDashboardsError, setLegacyDashboardsError] = useState<string>();
-  const [dashboardParam] = useQueryParam(QueryParams.Dashboard, StringParam);
   const [refreshInterval] = useQueryParam(QueryParams.RefreshInterval, NumberParam);
   const [legacyDashboardsLoading, , , setLegacyDashboardsLoaded] = useBoolean(true);
-  const [initialLoad, , , setInitialLoaded] = useBoolean(true);
+  const [initialLoad, , setInitialUnloaded, setInitialLoaded] = useBoolean(true);
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const legacyDashboard = useMemo(() => {
-    if (perspective === 'dev') {
-      return dashboardParam;
-    }
-    return urlBoard;
-  }, [perspective, dashboardParam, urlBoard]);
 
   useEffect(() => {
     safeFetch<any>('/api/console/monitoring-dashboard-config')
       .then((response) => {
         setLegacyDashboardsLoaded();
         setLegacyDashboardsError(undefined);
         let items = response.items;
-        if (namespace) {
+        if (namespace !== ALL_NAMESPACES_KEY) {
           items = _.filter(
             items,
             (item) => item.metadata?.labels['console.openshift.io/odc-dashboard'] === 'true',
@@ -83,7 +77,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
   }, [namespace, safeFetch, setLegacyDashboardsLoaded, t]);
 
   const legacyRows = useMemo(() => {
-    const data = _.find(legacyDashboards, { name: legacyDashboard })?.data;
+    const data = _.find(legacyDashboards, { name: urlBoard })?.data;
 
     return data?.rows?.length
       ? data.rows
@@ -101,17 +95,17 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
           }
           return acc;
         }, []) ?? [];
-  }, [legacyDashboard, legacyDashboards]);
+  }, [urlBoard, legacyDashboards]);
 
   useEffect(() => {
     // Dashboard query argument is only set in dev perspective, so skip for admin
     if (perspective !== 'dev') {
       return;
     }
-    const allVariables = getAllVariables(legacyDashboards, legacyDashboard, namespace);
+    const allVariables = getAllVariables(legacyDashboards, urlBoard, namespace);
     dispatch(dashboardsPatchAllVariables(allVariables));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [namespace, legacyDashboard]);
+  }, [namespace, urlBoard]);
 
   // Homogenize data needed for dashboards dropdown between legacy and perses dashboards
   // to enable both to use the same component
@@ -143,7 +137,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
       let url = getLegacyDashboardsUrl(perspective, newBoard, namespace);
       url = `${url}${perspective === 'dev' ? '&' : '?'}${params.toString()}`;
 
-      if (newBoard !== legacyDashboard || initialLoad) {
+      if (newBoard !== urlBoard || initialLoad) {
         if (params.get(QueryParams.Dashboard) !== newBoard) {
           navigate(url, { replace: true });
         }
@@ -165,7 +159,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
     },
     [
       perspective,
-      legacyDashboard,
+      urlBoard,
       dispatch,
       navigate,
       namespace,
@@ -177,15 +171,24 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
 
   useEffect(() => {
     if (
-      (!legacyDashboard ||
-        !legacyDashboards.some((legacyBoard) => legacyBoard.name === legacyDashboard) ||
+      (!urlBoard ||
+        !legacyDashboards.some((legacyBoard) => legacyBoard.name === urlBoard) ||
         initialLoad) &&
       !_.isEmpty(legacyDashboards)
     ) {
-      changeLegacyDashboard(legacyDashboard || legacyDashboards?.[0]?.name);
+      changeLegacyDashboard(urlBoard || legacyDashboards?.[0]?.name);
       setInitialLoaded();
     }
-  }, [legacyDashboards, changeLegacyDashboard, initialLoad, setInitialLoaded, legacyDashboard]);
+  }, [legacyDashboards, changeLegacyDashboard, initialLoad, setInitialLoaded, urlBoard]);
+
+  useEffect(() => {
+    // Basically perform a full reload when changing a namespace to force the variables and the
+    // dashboard to reset. This is needed for when we transition between ALL_NS and a normal
+    // namespace, but is performed quickly and should help insure consistency when transitioning
+    // between any namespaces
+    setInitialUnloaded();
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, [namespace]);
 
   // Clear variables on unmount
   useEffect(() => {
@@ -201,7 +204,7 @@ export const useLegacyDashboards = (namespace: string, urlBoard: string) => {
     legacyRows,
     legacyDashboardsMetadata,
     changeLegacyDashboard,
-    legacyDashboard,
+    legacyDashboard: urlBoard,
   };
 };
 
@@ -227,11 +230,14 @@ const getAllVariables = (boards: Board[], newBoardName: string, namespace: strin
       allVariables[v.name] = {
         datasource: v.datasource,
         includeAll: !!v.includeAll,
-        isHidden: namespace && v.name === 'namespace' ? true : v.hide !== 0,
-        isLoading: namespace ? v.type === 'query' && !namespace : v.type === 'query',
+        isHidden: v.name === 'namespace' && namespace !== ALL_NAMESPACES_KEY ? true : v.hide !== 0,
+        isLoading: v.name === 'namespace' ? false : v.type === 'query',
         options: _.map(v.options, 'value'),
         query: v.type === 'query' ? v.query : undefined,
-        value: namespace && v.name === 'namespace' ? namespace : value || v.options?.[0]?.value,
+        value:
+          v.name === 'namespace' && namespace !== ALL_NAMESPACES_KEY
+            ? namespace
+            : value || v.options?.[0]?.value,
       };
     }
   });