OU-949: add namespace dropdown to dashboards page

web/console-extensions.json

@@ -99,17 +99,6 @@
       "insertAfter": "dashboards-virt"
     }
   },
-  {
-    "type": "console.tab",
-    "properties": {
-      "contextId": "dev-console-observe",
-      "name": "%plugin__monitoring-plugin~Dashboards%",
-      "href": "",
-      "component": {
-        "$codeRef": "LegacyDashboardsPage.MpCmoLegacyDashboardsPage"
-      }
-    }
-  },
   {
     "type": "console.redux-reducer",
     "properties": {
@@ -276,5 +265,53 @@
       "path": ["/virt-monitoring/alerts/:ruleID"],
       "component": { "$codeRef": "AlertsDetailsPage.MpCmoAlertsDetailsPage" }
     }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": "/dev-monitoring/ns/:ns/alerts/:ruleID",
+      "component": { "$codeRef": "DevRedirects.AlertRedirect" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": "/dev-monitoring/ns/:ns/rules/:id",
+      "component": { "$codeRef": "DevRedirects.RulesRedirect" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": "/dev-monitoring/ns/:ns/silences/:id",
+      "component": { "$codeRef": "DevRedirects.SilenceRedirect" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": "/dev-monitoring/ns/:ns/silences/:id/edit",
+      "component": { "$codeRef": "DevRedirects.SilenceEditRedirect" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": "/dev-monitoring/ns/:ns/silences/~new",
+      "component": { "$codeRef": "DevRedirects.SilenceNewRedirect" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": "/dev-monitoring/ns/:ns/metrics",
+      "component": { "$codeRef": "DevRedirects.MetricsRedirect" }
+    }
   }
 ]

web/package.json

@@ -192,7 +192,8 @@
       "MonitoringReducer": "./store/reducers",
       "IncidentsPage": "./components/Incidents/IncidentsPage",
       "TargetsPage": "./components/targets-page",
-      "PrometheusRedirectPage": "./components/prometheus-redirect-page",
+      "PrometheusRedirectPage": "./components/redirects/prometheus-redirect-page",
+      "DevRedirects": "./components/redirects/dev-redirects",
       "MonitoringContext": "./contexts/MonitoringContext"
     },
     "dependencies": {

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

@@ -17,7 +17,7 @@ interface IncidentsDetailsRowTableProps {
 }
 
 const IncidentsDetailsRowTable = ({ alerts }: IncidentsDetailsRowTableProps) => {
-  const [namespace, setNamespace] = useActiveNamespace();
+  const [, setNamespace] = useActiveNamespace();
   const { perspective } = usePerspective();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
@@ -34,7 +34,7 @@ const IncidentsDetailsRowTable = ({ alerts }: IncidentsDetailsRowTableProps) =>
               <Td dataLabel="expanded-details-alertname">
                 <ResourceIcon kind={RuleResource.kind} />
                 <Link
-                  to={getRuleUrl(perspective, alertDetails?.rule, namespace)}
+                  to={getRuleUrl(perspective, alertDetails?.rule)}
                   onClick={() => setNamespace(ALL_NAMESPACES_KEY)}
                 >
                   {alertDetails.alertname}
@@ -63,7 +63,7 @@ const IncidentsDetailsRowTable = ({ alerts }: IncidentsDetailsRowTableProps) =>
     }
 
     return null;
-  }, [alerts, perspective, namespace, setNamespace]);
+  }, [alerts, perspective, setNamespace]);
 
   return (
     <Table borders={false} variant="compact" data-test={DataTestIDs.IncidentsDetailsTable.Table}>

web/src/components/MetricsPage.tsx

@@ -113,15 +113,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;
@@ -1277,14 +1277,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();
 
@@ -1369,7 +1362,7 @@ const MetricsPage_: FC = () => {
       <NamespaceBar
         onNamespaceChange={(namespace) => {
           dispatch(queryBrowserDeleteAllQueries());
-          setQueryNamespace(namespace);
+          setNamespace(namespace);
         }}
       />
       <PageSection hasBodyWrapper={false}>
@@ -1432,9 +1425,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>
   );
 };

web/src/components/alerting/AlertDetail/SilencedByTable.tsx

@@ -1,11 +1,6 @@
 import type { FC, MouseEvent } from 'react';
 import { useState, useMemo } from 'react';
-import {
-  ResourceIcon,
-  Silence,
-  SilenceStates,
-  useActiveNamespace,
-} from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceIcon, Silence, SilenceStates } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import {
@@ -30,13 +25,12 @@ import { t_global_spacer_xs } from '@patternfly/react-tokens';
 export const SilencedByList: FC<{ silences: Silence[] }> = ({ silences }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { perspective } = usePerspective();
-  const [namespace] = useActiveNamespace();
   const navigate = useNavigate();
   const [isModalOpen, , setModalOpen, setModalClosed] = useBoolean(false);
   const [silence, setSilence] = useState<Silence | null>(null);
 
   const editSilence = (event: MouseEvent, rowIndex: number) => {
-    navigate(getEditSilenceAlertUrl(perspective, silences.at(rowIndex)?.id, namespace));
+    navigate(getEditSilenceAlertUrl(perspective, silences.at(rowIndex)?.id));
   };
 
   const rowActions = (silence: Silence): IAction[] => {
@@ -79,7 +73,7 @@ export const SilencedByList: FC<{ silences: Silence[] }> = ({ silences }) => {
               <Link
                 data-test-id="silence-resource-link"
                 title={silence.id}
-                to={getSilenceAlertUrl(perspective, silence.id, namespace)}
+                to={getSilenceAlertUrl(perspective, silence.id)}
               >
                 {silence.name}
               </Link>

web/src/components/alerting/AlertList/AggregateAlertTableRow.tsx

@@ -1,9 +1,4 @@
-import {
-  Alert,
-  ResourceIcon,
-  TableColumn,
-  useActiveNamespace,
-} from '@openshift-console/dynamic-plugin-sdk';
+import { Alert, ResourceIcon, TableColumn } from '@openshift-console/dynamic-plugin-sdk';
 import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import type { FC } from 'react';
 import { useState, useMemo } from 'react';
@@ -33,7 +28,6 @@ const AggregateAlertTableRow: AggregateAlertTableRowProps = ({
   const { perspective } = usePerspective();
   const title = aggregatedAlert.name;
   const isACMPerspective = perspective === 'acm';
-  const [namespace] = useActiveNamespace();
 
   const filteredAlerts = useMemo(
     () => filterAlerts(aggregatedAlert.alerts, selectedFilters),
@@ -99,11 +93,7 @@ const AggregateAlertTableRow: AggregateAlertTableRowProps = ({
             </FlexItem>
             <FlexItem>
               <Link
-                to={getRuleUrl(
-                  perspective,
-                  firstAlert?.rule,
-                  firstAlert?.labels?.namespace || namespace,
-                )}
+                to={getRuleUrl(perspective, firstAlert?.rule)}
                 data-test-id="alert-resource-link"
                 data-test={DataTestIDs.AlertingRuleResourceLink}
               >

web/src/components/alerting/AlertList/AlertTableRow.tsx

@@ -21,7 +21,7 @@ import { DropdownItem, Flex, FlexItem } from '@patternfly/react-core';
 import KebabDropdown from '../../../components/kebab-dropdown';
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { AlertResource, alertState } from '../../../components/utils';
 import {
   getAlertUrl,
@@ -35,9 +35,6 @@ const AlertTableRow: FC<{ alert: Alert }> = ({ alert }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { perspective } = usePerspective();
   const navigate = useNavigate();
-  const params = useParams<{ ns: string }>();
-
-  const namespace = params.ns;
 
   const state = alertState(alert);
 
@@ -49,7 +46,7 @@ const AlertTableRow: FC<{ alert: Alert }> = ({ alert }) => {
     dropdownItems.unshift(
       <DropdownItem
         key="silence-alert"
-        onClick={() => navigate(getNewSilenceAlertUrl(perspective, alert, namespace))}
+        onClick={() => navigate(getNewSilenceAlertUrl(perspective, alert))}
         data-test={DataTestIDs.SilenceAlertDropdownItem}
       >
         {t('Silence alert')}
@@ -86,12 +83,7 @@ const AlertTableRow: FC<{ alert: Alert }> = ({ alert }) => {
           </FlexItem>
           <FlexItem>
             <Link
-              to={getAlertUrl(
-                perspective,
-                alert,
-                alert?.rule?.id,
-                alert?.labels?.namespace || namespace,
-              )}
+              to={getAlertUrl(perspective, alert, alert?.rule?.id)}
               data-test-id="alert-resource-link"
               data-test={DataTestIDs.AlertResourceLink}
             >

web/src/components/alerting/AlertRulesDetailsPage.tsx

@@ -5,7 +5,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 }) => (
@@ -83,11 +83,10 @@ const PrometheusTemplate = ({ text }) => (
 
 type ActiveAlertsProps = {
   alerts: PrometheusAlert[];
-  namespace: string;
   ruleID: string;
 };
 
-export const ActiveAlerts: FC<ActiveAlertsProps> = ({ alerts, namespace, ruleID }) => {
+export const ActiveAlerts: FC<ActiveAlertsProps> = ({ alerts, ruleID }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { perspective } = usePerspective();
   const navigate = useNavigate();
@@ -110,7 +109,7 @@ export const ActiveAlerts: FC<ActiveAlertsProps> = ({ alerts, namespace, ruleID
             <Td>
               <Link
                 data-test={DataTestIDs.AlertResourceLink}
-                to={getAlertUrl(perspective, a, ruleID, namespace)}
+                to={getAlertUrl(perspective, a, ruleID)}
               >
                 {alertDescription(a)}
               </Link>
@@ -148,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 });
 
@@ -187,10 +186,7 @@ const AlertRulesDetailsPage_: FC = () => {
           <PageBreadcrumb hasBodyWrapper={false}>
             <Breadcrumb>
               <BreadcrumbItem>
-                <Link
-                  to={getAlertRulesUrl(perspective, namespace)}
-                  data-test={DataTestIDs.Breadcrumb}
-                >
+                <Link to={getAlertRulesUrl(perspective)} data-test={DataTestIDs.Breadcrumb}>
                   {t('Alerting rules')}
                 </Link>
               </BreadcrumbItem>
@@ -316,7 +312,6 @@ const AlertRulesDetailsPage_: FC = () => {
                           to={getQueryBrowserUrl({
                             perspective: perspective,
                             query: rule?.query,
-                            namespace: namespace,
                           })}
                         >
                           <CodeBlock>
@@ -372,7 +367,7 @@ const AlertRulesDetailsPage_: FC = () => {
             {_.isEmpty(rule?.alerts) ? (
               <div>{t('None found')}</div>
             ) : (
-              <ActiveAlerts alerts={rule.alerts} ruleID={rule?.id} namespace={namespace} />
+              <ActiveAlerts alerts={rule.alerts} ruleID={rule?.id} />
             )}
           </PageSection>
         </PageGroup>

web/src/components/alerting/AlertRulesPage.tsx

@@ -97,7 +97,7 @@ const RuleTableRow: FC<RowProps<Rule>> = ({ obj }) => {
           </FlexItem>
           <FlexItem>
             <Link
-              to={getRuleUrl(perspective, obj, obj.labels.namespace)}
+              to={getRuleUrl(perspective, obj)}
               data-test={DataTestIDs.AlertingRuleResourceLink}
             >
               <Truncate content={obj.name} />

web/src/components/alerting/AlertUtils.tsx

@@ -255,7 +255,7 @@ export const Graph: FC<GraphProps> = ({
 
   const GraphLink = () =>
     query && perspective !== 'acm' ? (
-      <Link aria-label={t('Inspect')} to={getQueryBrowserUrl({ perspective, query, namespace })}>
+      <Link aria-label={t('Inspect')} to={getQueryBrowserUrl({ perspective, query })}>
         {t('Inspect')}
       </Link>
     ) : null;

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);
+          }}
         />
       )}
       <PageSection hasBodyWrapper={false}>