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 01d0afa87c2..3e0a7c7a0ae 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 @@ -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 { 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 - {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 f39c0619df4..db402c78cd6 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 * 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 ( - + {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 9bbed3b9483..6b416e5a0e5 100644 --- 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 = (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 = (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 78d03d923b2..1f40a0764f7 100644 --- a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverviewAlerts.tsx +++ b/frontend/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 = ({ alerts }) => { + const [activePerspective, setActivePerspective] = useActivePerspective(); const sortedAlerts = sortMonitoringAlerts(alerts); return ( @@ -22,15 +23,26 @@ const MonitoringOverviewAlerts: React.FC = ({ 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 ( {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 9e44f2192af..78a988b0f93 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 @@ -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(mapStateToProps)(({ k8sModels const [subsystemExtensions] = useResolvedExtensions( isDashboardsOverviewHealthSubsystem, ); + const [, setActiveNamespace] = useActiveNamespace(); const subsystems = React.useMemo(() => { return filterSubsystems([...subsystemExtensions], k8sModels); @@ -191,7 +193,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 8cf4eced429..0f8a6e7226e 100644 --- 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 index 0c6c98cf809..be34cf066cd 100644 --- 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 = ({ + 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 = ({ 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} @@ -59,6 +70,7 @@ export const PrometheusGraph: React.FC = React.forwardRef( ); type PrometheusGraphLinkProps = { + canAccessMonitoring: boolean; query: string | string[]; namespace?: string; ariaChartLinkLabel?: string;