openshift · jgbernalp · Mar 17, 2026
diff --git a/.../packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx b/.../packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx
@@ -3,19 +3,19 @@ import * as React from 'react';
 import { Button, Popover, PopoverPosition } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
-import { LIMIT_STATE, Humanize } from '@console/dynamic-plugin-sdk';
+import { Humanize, LIMIT_STATE, useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { getPrometheusQueryResponse } from '@console/internal/actions/dashboards';
 import {
-  withDashboardResources,
   DashboardItemProps,
+  withDashboardResources,
 } from '@console/internal/components/dashboard/with-dashboard-resources';
 import { DataPoint } from '@console/internal/components/graphs';
 import { getInstantVectorStats } from '@console/internal/components/graphs/utils';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
-import { K8sKind, referenceForModel, K8sResourceCommon } from '@console/internal/module/k8s';
-import { getName, getNamespace } from '../../..';
+import { K8sKind, K8sResourceCommon, referenceForModel } from '@console/internal/module/k8s';
+import { FLAGS, getName, getNamespace, useFlag } from '../../..';
 import { RedExclamationCircleIcon, YellowExclamationTriangleIcon } from '../../status';
 import Status from '../status-card/StatusPopup';
 
@@ -130,6 +130,9 @@ export const PopoverBody = withDashboardResources<DashboardItemProps & PopoverBo
     }) => {
       const { t } = useTranslation();
       const [currentConsumer, setCurrentConsumer] = React.useState(consumers[0]);
+      const [activePerspective, setActivePerspective] = useActivePerspective();
+      const canAccessMonitoring =
+        useFlag(FLAGS.CAN_GET_NS) && !!window.SERVER_FLAGS.prometheusBaseURL;
       const { query, model, metric, fieldSelector } = currentConsumer;
       const k8sResource = React.useMemo(
         () => (isOpen ? getResourceToWatch(model, namespace, fieldSelector) : null),
@@ -194,7 +197,10 @@ export const PopoverBody = withDashboardResources<DashboardItemProps & PopoverBo
         [consumers],
       );
 
-      const monitoringURL = `/monitoring/query-browser?${monitoringParams.toString()}`;
+      const monitoringURL =
+        canAccessMonitoring && activePerspective === 'admin'
+          ? `/monitoring/query-browser?${monitoringParams.toString()}`
+          : `/dev-monitoring/ns/${namespace}/query-browser?${monitoringParams.toString()}`;
 
       let body: React.ReactNode;
       if (error || consumersLoadError) {
@@ -231,7 +237,16 @@ export const PopoverBody = withDashboardResources<DashboardItemProps & PopoverBo
                   );
                 })}
             </ul>
-            <Link to={monitoringURL}>{t('console-shared~View more')}</Link>
+            <Link
+              to={monitoringURL}
+              onClick={() => {
+                if (monitoringURL.startsWith('/dev-monitoring') && activePerspective !== 'dev') {
+                  setActivePerspective('dev');
+                }
+              }}
+            >
+              {t('console-shared~View more')}
+            </Link>
           </>
         );
       }

diff --git a/...end/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx b/...end/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
+import { useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { QueryBrowser } from '@console/dynamic-plugin-sdk/src/lib-core';
 import { dashboardsSetEndTime, dashboardsSetTimespan } from '@console/internal/actions/observe';
 import { Humanize } from '@console/internal/components/utils';
@@ -17,15 +18,23 @@ export enum GraphTypes {
 
 const PrometheusGraphLink = ({ query, namespace, ariaChartLinkLabel }) => {
   const { t } = useTranslation();
+  const [perspective] = useActivePerspective();
   const queries = _.compact(_.castArray(query));
   if (!queries.length) {
     return null;
   }
   const params = new URLSearchParams();
   queries.forEach((q, index) => params.set(`query${index}`, q));
-  params.set('namespace', namespace);
+
   return (
-    <Link aria-label={ariaChartLinkLabel} to={`/monitoring/query-browser?${params.toString()}`}>
+    <Link
+      aria-label={ariaChartLinkLabel}
+      to={
+        perspective === 'dev'
+          ? `/dev-monitoring/ns/${namespace}/metrics?${params.toString()}`
+          : `/monitoring/query-browser?${params.toString()}`
+      }
+    >
       {t('devconsole~Inspect')}
     </Link>
   );

diff --git a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx b/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx
@@ -13,7 +13,7 @@ import {
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
-import { Alert } from '@console/dynamic-plugin-sdk';
+import { Alert, useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { sortEvents } from '@console/internal/components/events';
 import { FirehoseResult, LoadingBox } from '@console/internal/components/utils';
 import { DeploymentConfigModel } from '@console/internal/models';
@@ -34,12 +34,27 @@ type MonitoringOverviewProps = {
 const MonitoringOverview: React.FC<MonitoringOverviewProps> = (props) => {
   const { t } = useTranslation();
   const { resource, pods, resourceEvents, monitoringAlerts } = props;
+  const [perspective] = useActivePerspective();
   const firingAlerts = getFiringAlerts(monitoringAlerts);
   const [expanded, setExpanded] = React.useState([
     'metrics',
     ...(firingAlerts.length > 0 ? ['monitoring-alerts'] : []),
   ]);
 
+  const resourceLink = React.useMemo(() => {
+    const params = new URLSearchParams({
+      namespace: resource?.metadata?.namespace,
+      type: resource?.kind?.toLowerCase(),
+    });
+
+    if (perspective === 'dev') {
+      params.set('dashboard', 'dashboard-k8s-resources-workloads-namespace');
+      return `/dev-monitoring/ns/${resource?.metadata?.namespace}?${params.toString()}`;
+    }
+
+    return `/monitoring/dashboards/dashboard-k8s-resources-workloads-namespace?${params.toString()}`;
+  }, [resource, perspective]);
+
   if (
     !resourceEvents ||
     !resourceEvents.loaded ||
@@ -69,17 +84,6 @@ const MonitoringOverview: React.FC<MonitoringOverviewProps> = (props) => {
     setExpanded(newExpanded);
   };
 
-  // query params:
-  // namespace - used within dashboard logic for variables
-  // project-dropdown-value - used for namespace dropdown for console
-
-  const dashboardLinkParams = new URLSearchParams({
-    workload: resource?.metadata?.name ?? '',
-    type: resource?.kind?.toLowerCase() ?? '',
-    'project-dropdown-value': resource?.metadata?.namespace ?? '',
-    namespace: resource?.metadata?.namespace ?? '',
-  });
-
   return (
     <div className="odc-monitoring-overview">
       <Accordion
@@ -139,10 +143,7 @@ const MonitoringOverview: React.FC<MonitoringOverviewProps> = (props) => {
             ) : (
               <>
                 <div className="odc-monitoring-overview__view-monitoring-dashboards">
-                  <Link
-                    to={`/monitoring/dashboards/dashboard-k8s-resources-workload?${dashboardLinkParams.toString()}`}
-                    data-test="observe-dashboards-link"
-                  >
+                  <Link to={resourceLink} data-test="observe-dashboards-link">
                     {t('devconsole~View dashboards')}
                   </Link>
                 </div>

diff --git a/...tend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx b/...tend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Alert } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { Link } from 'react-router-dom-v5-compat';
-import { Alert as AlertType } from '@console/dynamic-plugin-sdk';
+import { Alert as AlertType, useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { labelsToParams } from '@console/internal/components/monitoring/utils';
 import { fromNow } from '@console/internal/components/utils/datetime';
 import { sortMonitoringAlerts } from '@console/shared';
@@ -14,6 +14,7 @@ interface MonitoringOverviewAlertsProps {
 }
 
 const MonitoringOverviewAlerts: React.FC<MonitoringOverviewAlertsProps> = ({ alerts }) => {
+  const [activePerspective, setActivePerspective] = useActivePerspective();
   const sortedAlerts = sortMonitoringAlerts(alerts);
 
   return (
@@ -22,15 +23,26 @@ const MonitoringOverviewAlerts: React.FC<MonitoringOverviewAlertsProps> = ({ ale
         const {
           activeAt,
           annotations: { message },
-          labels: { severity, alertname },
+          labels: { severity, alertname, namespace },
           rule: { name, id },
         } = alert;
-        const alertDetailsPageLink = `/monitoring/alerts/${id}?${labelsToParams(alert.labels)}`;
+        const alertDetailsPageLink =
+          activePerspective === 'dev'
+            ? `/dev-monitoring/ns/${namespace}/alerts/${id}?${labelsToParams(alert.labels)}`
+            : `/monitoring/alerts/${id}?${labelsToParams(alert.labels)}`;
         return (
           <Alert
             variant={getAlertType(severity)}
             isInline
             title={<Link to={alertDetailsPageLink}>{name}</Link>}
+            onClick={() => {
+              if (
+                alertDetailsPageLink.startsWith('/dev-monitoring') &&
+                activePerspective !== 'dev'
+              ) {
+                setActivePerspective('dev');
+              }
+            }}
             key={`${alertname}-${id}`}
           >
             {message}

diff --git a/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/status-card.tsx b/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/status-card.tsx
@@ -22,7 +22,7 @@ import {
 } from '@console/dynamic-plugin-sdk';
 import { Gallery, GalleryItem, Card, CardHeader, CardTitle } from '@patternfly/react-core';
 import { BlueArrowCircleUpIcon } from '@console/shared/src/components/status/icons';
-import { FLAGS } from '@console/shared/src/constants/common';
+import { ALL_NAMESPACES_KEY, FLAGS } from '@console/shared/src/constants/common';
 import { useCanClusterUpgrade } from '@console/shared/src/hooks/useCanClusterUpgrade';
 
 import AlertsBody from '@console/shared/src/components/dashboard/status-card/AlertsBody';
@@ -52,6 +52,7 @@ import {
   useNamespacedNotificationAlerts,
   useNotificationAlerts,
 } from '@console/shared/src/hooks/useNotificationAlerts';
+import { useActiveNamespace } from '@console/shared/src';
 
 const filterSubsystems = (
   subsystems: (
@@ -133,6 +134,7 @@ export const StatusCard = connect<StatusCardProps>(mapStateToProps)(({ k8sModels
   const [subsystemExtensions] = useResolvedExtensions<DashboardsOverviewHealthSubsystem>(
     isDashboardsOverviewHealthSubsystem,
   );
+  const [, setActiveNamespace] = useActiveNamespace();
 
   const subsystems = React.useMemo(() => {
     return filterSubsystems([...subsystemExtensions], k8sModels);
@@ -191,7 +193,14 @@ export const StatusCard = connect<StatusCardProps>(mapStateToProps)(({ k8sModels
         actions={{
           actions: (
             <>
-              <Link to="/monitoring/alerts" data-test="status-card-view-alerts">
+              <Link
+                to="/monitoring/alerts"
+                data-test="status-card-view-alerts"
+                onClick={() => {
+                  // Set all namespaces selection so alert list is unfiltered
+                  setActiveNamespace(ALL_NAMESPACES_KEY);
+                }}
+              >
                 {t('public~View alerts')}
               </Link>
             </>

diff --git a/frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx b/frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx
@@ -78,13 +78,14 @@ describe('PrometheusGraphLink', () => {
       },
       {
         perspective: 'dev',
-        expectedUrl: '/monitoring/query-browser?query0=test&namespace=default',
+        expectedUrl: '/dev-monitoring/ns/default/metrics?query0=test&namespace=default',
         description: 'dev perspective graph link',
       },
     ];
 
     testScenarios.forEach(({ perspective, expectedUrl, description }) => {
       it(`should generate correct URL for ${description}`, () => {
+        store.dispatch(setFlag(FLAGS.CAN_GET_NS, true));
         useActivePerspectiveMock.mockReturnValue([perspective, () => {}]);
 
         renderWithProviders(

diff --git a/frontend/public/components/graphs/prometheus-graph.tsx b/frontend/public/components/graphs/prometheus-graph.tsx
@@ -9,6 +9,7 @@ import { FLAGS } from '@console/shared/src/constants/common';
 import { featureReducerName } from '../../reducers/features';
 import { getActiveNamespace } from '../../reducers/ui';
 import { RootState } from '../../redux';
+import { useActivePerspective } from '@console/dynamic-plugin-sdk/src';
 
 const mapStateToProps = (state: RootState) => ({
   canAccessMonitoring:
@@ -17,11 +18,13 @@ const mapStateToProps = (state: RootState) => ({
 });
 
 const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
+  canAccessMonitoring,
   children,
   query,
   namespace,
   ariaChartLinkLabel,
 }) => {
+  const [activePerspective, setActivePerspective] = useActivePerspective();
   const queries = _.compact(_.castArray(query));
   if (!queries.length) {
     return <>{children}</>;
@@ -31,13 +34,21 @@ const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
   queries.forEach((q, index) => params.set(`query${index}`, q));
   params.set('namespace', namespace);
 
-  const url = `/monitoring/query-browser?${params.toString()}`;
+  const url =
+    canAccessMonitoring && activePerspective !== 'dev'
+      ? `/monitoring/query-browser?${params.toString()}`
+      : `/dev-monitoring/ns/${namespace}/metrics?${params.toString()}`;
 
   return (
     <Link
       to={url}
       aria-label={ariaChartLinkLabel}
       style={{ color: 'inherit', textDecoration: 'none' }}
+      onClick={() => {
+        if (url.startsWith('/dev-monitoring/') && activePerspective !== 'dev') {
+          setActivePerspective('dev');
+        }
+      }}
     >
       {children}
     </Link>
@@ -59,6 +70,7 @@ export const PrometheusGraph: React.FC<PrometheusGraphProps> = React.forwardRef(
 );
 
 type PrometheusGraphLinkProps = {
+  canAccessMonitoring: boolean;
   query: string | string[];
   namespace?: string;
   ariaChartLinkLabel?: string;