OCPBUGS-77113: remove dev to admin links as dev monitoring views are enabled

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<PopoverBodyProps>(
   ({ 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<PopoverBodyProps>(
     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<PopoverBodyProps>(
       [consumers],
     );
 
-    const monitoringURL = `/monitoring/query-browser?${monitoringParams.toString()}`;
+    const monitoringURL =
+      canAccessMonitoring && activePerspective === 'admin'
+        ? `/monitoring/query-browser?${monitoringParams.toString()}`
+        : `/dev-monitoring/ns/${namespace}/metrics?${monitoringParams.toString()}`;
 
     let body: ReactNode;
     if (error || consumersLoadError) {
@@ -221,7 +225,16 @@ export const PopoverBody = memo<PopoverBodyProps>(
                 );
               })}
           </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>
         </>
       );
     }

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 (
-    <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/metrics?${params.toString()}`
+      }
+    >
       {t('devconsole~Inspect')}
     </Link>
   );

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx

@@ -74,17 +74,6 @@ const MonitoringOverview: 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
@@ -145,7 +134,11 @@ const MonitoringOverview: FC<MonitoringOverviewProps> = (props) => {
               <>
                 <div className="odc-monitoring-overview__view-monitoring-dashboards">
                   <Link
-                    to={`/monitoring/dashboards/dashboard-k8s-resources-workload?${dashboardLinkParams.toString()}`}
+                    to={`/dev-monitoring/ns/${
+                      resource?.metadata?.namespace
+                    }?dashboard=grafana-dashboard-k8s-resources-workload&workload=${
+                      resource?.metadata?.name
+                    }&type=${resource?.kind?.toLowerCase()}`}
                     data-test="observe-dashboards-link"
                   >
                     {t('devconsole~View dashboards')}

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<MonitoringOverviewAlertsProps> = ({ alerts }) => {
+  const [activePerspective, setActivePerspective] = useActivePerspective();
   const sortedAlerts = sortMonitoringAlerts(alerts);
 
   return (
@@ -22,15 +24,26 @@ const MonitoringOverviewAlerts: FC<MonitoringOverviewAlertsProps> = ({ 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 (
           <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}

frontend/public/components/graphs/__tests__/prometheus-graph.spec.tsx

@@ -62,6 +62,7 @@ describe('PrometheusGraphLink', () => {
       </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', () => {
           </PrometheusGraphLink>,
         );
         act(() => {
+          store.dispatch(setFlag(FLAGS.CAN_GET_NS, true));
           store.dispatch(UIActions.setActiveNamespace('default'));
         });
 

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<PrometheusGraphLinkProps> = ({
+  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<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>
   );
 };
 export const PrometheusGraphLink = connect(mapStateToProps)(PrometheusGraphLink_) as ComponentType<
-  Omit<PrometheusGraphLinkProps, 'namespace'>
+  Omit<PrometheusGraphLinkProps, 'namespace' | 'canAccessMonitoring'>
 >;
 
 export const PrometheusGraph = forwardRef<HTMLDivElement, PrometheusGraphProps>(
@@ -62,6 +73,7 @@ export const PrometheusGraph = forwardRef<HTMLDivElement, PrometheusGraphProps>(
 );
 
 type PrometheusGraphLinkProps = {
+  canAccessMonitoring: boolean;
   query: string | string[];
   namespace?: string;
   ariaChartLinkLabel?: string;