From f0d99cc76dce4d043d1da12b964edf575a889347 Mon Sep 17 00:00:00 2001 From: Gabriel Bernal Date: Tue, 17 Mar 2026 15:55:22 +0100 Subject: [PATCH] OCPBUGS-77113: remove dev to admin links as dev monitoring views are enabled Signed-off-by: Gabriel Bernal --- .../utilization-card/TopConsumerPopover.tsx | 29 +++++++++++----- .../dashboard/MonitoringDashboardGraph.tsx | 12 +++++-- .../overview/MonitoringOverview.tsx | 34 ++++++++++--------- .../overview/MonitoringOverviewAlerts.tsx | 17 ++++++++-- .../cluster-dashboard/status-card.tsx | 13 +++++-- .../__tests__/prometheus-graph.spec.tsx | 4 ++- .../components/graphs/prometheus-graph.tsx | 16 +++++++-- 7 files changed, 92 insertions(+), 33 deletions(-) diff --git a/frontend/packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx b/frontend/packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx index add01ad7226..b01df5fcccb 100644 --- a/frontend/packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx +++ b/frontend/packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx @@ -5,7 +5,7 @@ import { Button, Popover, PopoverPosition } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router'; import type { Humanize } from '@console/dynamic-plugin-sdk'; -import { LIMIT_STATE } from '@console/dynamic-plugin-sdk'; +import { LIMIT_STATE, useActivePerspective } from '@console/dynamic-plugin-sdk'; import { getPrometheusQueryResponse } from '@console/internal/actions/dashboards'; import type { DataPoint } from '@console/internal/components/graphs'; import { getInstantVectorStats } from '@console/internal/components/graphs/utils'; @@ -14,7 +14,8 @@ import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watc import { resourcePathFromModel } from '@console/internal/components/utils/resource-link'; import type { K8sKind, K8sResourceCommon } from '@console/internal/module/k8s'; import { referenceForModel } from '@console/internal/module/k8s'; -import { getName, getNamespace } from '../../..'; +import { useFlag } from '@console/shared/src/hooks/useFlag'; +import { FLAGS, getName, getNamespace } from '../../..'; import { useDashboardResources } from '../../../hooks/useDashboardResources'; import { RedExclamationCircleIcon, YellowExclamationTriangleIcon } from '../../status'; import Status from '../status-card/StatusPopup'; @@ -119,6 +120,9 @@ export const PopoverBody = memo( ({ humanize, consumers, namespace, isOpen, description, children }) => { const { t } = useTranslation(); const [currentConsumer, setCurrentConsumer] = 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 = useMemo( () => (isOpen ? getResourceToWatch(model, namespace, fieldSelector) : null), @@ -162,11 +166,8 @@ export const PopoverBody = memo( const monitoringParams = useMemo(() => { const params = new URLSearchParams(); params.set('query0', currentConsumer.query); - if (namespace) { - params.set('namespace', namespace); - } return params; - }, [currentConsumer.query, namespace]); + }, [currentConsumer.query]); const dropdownItems = useMemo( () => @@ -184,7 +185,10 @@ export const PopoverBody = memo( [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: ReactNode; if (error || consumersLoadError) { @@ -221,7 +225,16 @@ export const PopoverBody = memo( ); })} - {t('console-shared~View more')} + { + if (monitoringURL.startsWith('/dev-monitoring') && activePerspective !== 'dev') { + setActivePerspective('dev'); + } + }} + > + {t('console-shared~View more')} + ); } diff --git a/frontend/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx b/frontend/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx index d2f011a7e84..8f8158fe78e 100644 --- a/frontend/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx +++ b/frontend/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx @@ -4,6 +4,7 @@ import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core'; import * as _ from 'lodash'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router'; +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 type { Humanize } from '@console/internal/components/utils'; @@ -18,15 +19,22 @@ 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 ( - + {t('devconsole~Inspect')} ); diff --git a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx b/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx index e134034de34..585c071c345 100644 --- a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx +++ b/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import { useState } from 'react'; +import { useState, useMemo } from 'react'; import { Accordion, AccordionItem, @@ -15,6 +15,7 @@ import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circ import { useTranslation } from 'react-i18next'; import { Link } from 'react-router'; import type { Alert } from '@console/dynamic-plugin-sdk'; +import { useActivePerspective } from '@console/dynamic-plugin-sdk'; import { sortEvents } from '@console/internal/components/events'; import { LoadingBox } from '@console/internal/components/utils'; import { DeploymentConfigModel } from '@console/internal/models'; @@ -39,12 +40,27 @@ type MonitoringOverviewProps = { const MonitoringOverview: FC = (props) => { const { t } = useTranslation(); const { resource, pods, resourceEvents, monitoringAlerts } = props; + const [perspective] = useActivePerspective(); const firingAlerts = getFiringAlerts(monitoringAlerts); const [expanded, setExpanded] = useState([ 'metrics', ...(firingAlerts.length > 0 ? ['monitoring-alerts'] : []), ]); + const resourceLink = 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 || @@ -74,17 +90,6 @@ const MonitoringOverview: FC = (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 (
= (props) => { ) : ( <>
- + {t('devconsole~View dashboards')}
diff --git a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx b/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx index b52555d3664..4366c9b9254 100644 --- a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx +++ b/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx @@ -3,6 +3,7 @@ import { Alert } from '@patternfly/react-core'; import * as _ from 'lodash'; import { Link } from 'react-router'; import type { Alert as AlertType } from '@console/dynamic-plugin-sdk'; +import { 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 +15,7 @@ interface MonitoringOverviewAlertsProps { } const MonitoringOverviewAlerts: FC = ({ alerts }) => { + const [activePerspective, setActivePerspective] = useActivePerspective(); const sortedAlerts = sortMonitoringAlerts(alerts); return ( @@ -22,15 +24,26 @@ const MonitoringOverviewAlerts: FC = ({ alerts }) 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 ( {name}} + 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 index 3cfab0a2a2e..c69de952a65 100644 --- a/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/status-card.tsx +++ b/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/status-card.tsx @@ -23,7 +23,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'; @@ -53,6 +53,7 @@ import { useNamespacedNotificationAlerts, useNotificationAlerts, } from '@console/shared/src/hooks/useNotificationAlerts'; +import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace'; const filterSubsystems = ( subsystems: ( @@ -132,6 +133,7 @@ export const StatusCard = connect(mapStateToProps)(({ k8sModels const [subsystemExtensions] = useResolvedExtensions( isDashboardsOverviewHealthSubsystem, ); + const [, setActiveNamespace] = useActiveNamespace(); const subsystems = useMemo(() => { return filterSubsystems([...subsystemExtensions], k8sModels); @@ -190,7 +192,14 @@ export const StatusCard = connect(mapStateToProps)(({ k8sModels actions={{ actions: ( <> - + { + // Set all namespaces selection so alert list is unfiltered + setActiveNamespace(ALL_NAMESPACES_KEY); + }} + > {t('public~View alerts')} diff --git a/frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx b/frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx index 6d31e73fd42..c3094d16891 100644 --- a/frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx +++ b/frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx @@ -62,6 +62,7 @@ describe('PrometheusGraphLink', () => { , ); act(() => { + store.dispatch(setFlag(FLAGS.CAN_GET_NS, false)); store.dispatch(UIActions.setActiveNamespace('default')); }); @@ -78,7 +79,7 @@ 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', }, ]; @@ -93,6 +94,7 @@ describe('PrometheusGraphLink', () => { , ); act(() => { + store.dispatch(setFlag(FLAGS.CAN_GET_NS, true)); store.dispatch(UIActions.setActiveNamespace('default')); }); diff --git a/frontend/public/components/graphs/prometheus-graph.tsx b/frontend/public/components/graphs/prometheus-graph.tsx index de77008bd53..a63c94fd8b9 100644 --- a/frontend/public/components/graphs/prometheus-graph.tsx +++ b/frontend/public/components/graphs/prometheus-graph.tsx @@ -10,6 +10,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'; const mapStateToProps = (state: RootState) => ({ canAccessMonitoring: @@ -18,11 +19,13 @@ const mapStateToProps = (state: RootState) => ({ }); const PrometheusGraphLink_: FC = ({ + canAccessMonitoring, children, query, namespace, ariaChartLinkLabel, }) => { + const [activePerspective, setActivePerspective] = useActivePerspective(); const queries = _.compact(_.castArray(query)); if (!queries.length) { return <>{children}; @@ -32,20 +35,28 @@ const PrometheusGraphLink_: FC = ({ 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 ( { + if (url.startsWith('/dev-monitoring/') && activePerspective !== 'dev') { + setActivePerspective('dev'); + } + }} > {children} ); }; export const PrometheusGraphLink = connect(mapStateToProps)(PrometheusGraphLink_) as ComponentType< - Omit + Omit >; export const PrometheusGraph = forwardRef( @@ -62,6 +73,7 @@ export const PrometheusGraph = forwardRef( ); type PrometheusGraphLinkProps = { + canAccessMonitoring: boolean; query: string | string[]; namespace?: string; ariaChartLinkLabel?: string;