OCPBUGS-77113:[release-4.20] feat: re enable dev console views

web/console-extensions.json

@@ -7,11 +7,7 @@
       "href": "/monitoring/alerts",
       "perspective": "admin",
       "section": "observe",
-      "startsWith": [
-        "monitoring/alertrules",
-        "monitoring/silences",
-        "monitoring/incidents"
-      ]
+      "startsWith": ["monitoring/alertrules", "monitoring/silences", "monitoring/incidents"]
     }
   },
   {
@@ -20,10 +16,7 @@
         "data-quickstart-id": "qs-nav-monitoring"
       },
       "id": "observe-virt-perspective",
-      "insertBefore": [
-        "compute-virt-perspective",
-        "usermanagement-virt-perspective"
-      ],
+      "insertBefore": ["compute-virt-perspective", "usermanagement-virt-perspective"],
       "name": "%console-app~Observe%",
       "perspective": "virtualization-perspective"
     },
@@ -163,10 +156,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/monitoring/targets",
-        "/monitoring/targets/:scrapeUrl"
-      ],
+      "path": ["/monitoring/targets", "/monitoring/targets/:scrapeUrl"],
       "component": {
         "$codeRef": "TargetsPage.MpCmoTargetsPage"
       }
@@ -176,9 +166,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/monitoring/query-browser"
-      ],
+      "path": ["/monitoring/query-browser"],
       "component": {
         "$codeRef": "MetricsPage.MpCmoMetricsPage"
       }
@@ -188,9 +176,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/monitoring/graph"
-      ],
+      "path": ["/monitoring/graph"],
       "component": {
         "$codeRef": "PrometheusRedirectPage"
       }
@@ -200,10 +186,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/monitoring/dashboards",
-        "/monitoring/dashboards/:dashboardName"
-      ],
+      "path": ["/monitoring/dashboards", "/monitoring/dashboards/:dashboardName"],
       "component": {
         "$codeRef": "LegacyDashboardsPage.MpCmoLegacyDashboardsPage"
       }
@@ -213,9 +196,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/monitoring/alertrules/:id"
-      ],
+      "path": ["/monitoring/alertrules/:id"],
       "component": {
         "$codeRef": "AlertRulesDetailsPage.MpCmoAlertRulesDetailsPage"
       }
@@ -225,9 +206,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/monitoring/alerts/:ruleID"
-      ],
+      "path": ["/monitoring/alerts/:ruleID"],
       "component": {
         "$codeRef": "AlertsDetailsPage.MpCmoAlertsDetailsPage"
       }
@@ -237,9 +216,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring"
-      ],
+      "path": ["/virt-monitoring"],
       "component": {
         "$codeRef": "AlertingPage.MpCmoAlertingPage"
       }
@@ -279,10 +256,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring/targets",
-        "/virt-monitoring/targets/:scrapeUrl"
-      ],
+      "path": ["/virt-monitoring/targets", "/virt-monitoring/targets/:scrapeUrl"],
       "component": {
         "$codeRef": "TargetsPage.MpCmoTargetsPage"
       }
@@ -292,9 +266,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring/query-browser"
-      ],
+      "path": ["/virt-monitoring/query-browser"],
       "component": {
         "$codeRef": "MetricsPage.MpCmoMetricsPage"
       }
@@ -304,9 +276,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring/graph"
-      ],
+      "path": ["/virt-monitoring/graph"],
       "component": {
         "$codeRef": "PrometheusRedirectPage"
       }
@@ -316,10 +286,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring/dashboards",
-        "/virt-monitoring/dashboards/:dashboardName"
-      ],
+      "path": ["/virt-monitoring/dashboards", "/virt-monitoring/dashboards/:dashboardName"],
       "component": {
         "$codeRef": "LegacyDashboardsPage.MpCmoLegacyDashboardsPage"
       }
@@ -329,9 +296,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring/alertrules/:id"
-      ],
+      "path": ["/virt-monitoring/alertrules/:id"],
       "component": {
         "$codeRef": "AlertRulesDetailsPage.MpCmoAlertRulesDetailsPage"
       }
@@ -341,9 +306,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring/alerts/:ruleID"
-      ],
+      "path": ["/virt-monitoring/alerts/:ruleID"],
       "component": {
         "$codeRef": "AlertsDetailsPage.MpCmoAlertsDetailsPage"
       }
@@ -355,7 +318,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/alerts/:ruleID",
       "component": {
-        "$codeRef": "DevRedirects.AlertRedirect"
+        "$codeRef": "AlertsDetailsPage.MpCmoAlertsDetailsPage"
       }
     }
   },
@@ -365,7 +328,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/rules/:id",
       "component": {
-        "$codeRef": "DevRedirects.RulesRedirect"
+        "$codeRef": "AlertRulesDetailsPage.MpCmoAlertRulesDetailsPage"
       }
     }
   },
@@ -375,7 +338,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/silences/:id",
       "component": {
-        "$codeRef": "DevRedirects.SilenceRedirect"
+        "$codeRef": "SilencesDetailsPage.MpCmoSilencesDetailsPage"
       }
     }
   },
@@ -385,7 +348,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/silences/:id/edit",
       "component": {
-        "$codeRef": "DevRedirects.SilenceEditRedirect"
+        "$codeRef": "SilenceEditPage.MpCmoSilenceEditPage"
       }
     }
   },
@@ -395,18 +358,63 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/silences/~new",
       "component": {
-        "$codeRef": "DevRedirects.SilenceNewRedirect"
+        "$codeRef": "SilenceCreatePage.MpCmoCreateSilencePage"
       }
     }
   },
   {
-    "type": "console.page/route",
+    "type": "console.tab",
     "properties": {
-      "exact": false,
-      "path": "/dev-monitoring/ns/:ns/metrics",
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Silences%",
+      "href": "silences",
+      "component": {
+        "$codeRef": "SilencesPage.MpCmoSilencesPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Metrics%",
+      "href": "metrics",
+      "component": {
+        "$codeRef": "MetricsPage.MpCmoDevMetricsPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Alerts%",
+      "href": "alerts",
+      "component": {
+        "$codeRef": "AlertsPage.MpCmoAlertsPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Alerting rules%",
+      "href": "alertrules",
+      "component": {
+        "$codeRef": "AlertRulesPage.MpCmoAlertRulesPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Dashboards%",
+      "href": "",
       "component": {
-        "$codeRef": "DevRedirects.MetricsRedirect"
+        "$codeRef": "LegacyDashboardsPage.MpCmoLegacyDevDashboardsPage"
       }
     }
   }
-]
+]

web/package.json

@@ -199,7 +199,6 @@
       "IncidentsPage": "./components/Incidents/IncidentsPage",
       "TargetsPage": "./components/targets-page",
       "PrometheusRedirectPage": "./components/redirects/prometheus-redirect-page",
-      "DevRedirects": "./components/redirects/dev-redirects",
       "MonitoringContext": "./contexts/MonitoringContext"
     },
     "dependencies": {

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

@@ -1,7 +1,7 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { ResourceIcon, Timestamp, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import { Bullseye, Spinner } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { ALL_NAMESPACES_KEY, RuleResource } from '../utils';
 import { useTranslation } from 'react-i18next';
 import { getRuleUrl, usePerspective } from '../hooks/usePerspective';

web/src/components/Incidents/IncidentsPage.tsx

@@ -50,7 +50,7 @@ import {
   setIncidentsActiveFilters,
   setIncidentsLastRefreshTime,
 } from '../../store/actions';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { changeDaysFilter } from './utils';
 import { parsePrometheusDuration } from '../console/console-shared/src/datetime/prometheus';
 import withFallback from '../console/console-shared/error/fallbacks/withFallback';

web/src/components/Incidents/api.ts

@@ -1,8 +1,14 @@
 /* eslint-disable max-len */
 
-import { PrometheusEndpoint, PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  consoleFetchJSON,
+  PrometheusEndpoint,
+  PrometheusResponse,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { getPrometheusBasePath, buildPrometheusUrl } from '../utils';
 import { PROMETHEUS_QUERY_INTERVAL_SECONDS } from './utils';
+
+const NO_TIMEOUT = -1;
 /**
  * Creates a Prometheus alerts query string from grouped alert values.
  * The function dynamically includes any properties in the input objects that have the "src_" prefix,
@@ -96,5 +102,5 @@ export const fetchDataForIncidentsAndAlerts = (
     });
   }
 
-  return fetch(url);
+  return consoleFetchJSON(url, 'GET', {}, NO_TIMEOUT);
 };

web/src/components/MetricsPage.tsx

@@ -122,7 +122,7 @@ 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';
+import { useMonitoringNamespace } from './hooks/useMonitoringNamespace';
 
 // Stores information about the currently focused query input
 let focusedQuery;
@@ -1288,7 +1288,8 @@ const GraphUnitsDropDown: FC = () => {
 const MetricsPage_: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const [units, setUnits] = useQueryParam(QueryParams.Units, StringParam);
-  const { setNamespace } = useQueryNamespace();
+  const { setNamespace } = useMonitoringNamespace();
+  const { displayNamespaceSelector } = useMonitoring();
 
   const dispatch = useDispatch();
 
@@ -1367,14 +1368,18 @@ const MetricsPage_: FC = () => {
 
   return (
     <>
-      <DocumentTitle>{t('Metrics')}</DocumentTitle>
-      <NamespaceBar
-        onNamespaceChange={(namespace) => {
-          dispatch(queryBrowserDeleteAllQueries());
-          setNamespace(namespace);
-        }}
-      />
-      <ListPageHeader title={t('Metrics')}>
+      {displayNamespaceSelector && (
+        <>
+          <DocumentTitle>{t('Metrics')}</DocumentTitle>
+          <NamespaceBar
+            onNamespaceChange={(namespace) => {
+              dispatch(queryBrowserDeleteAllQueries());
+              setNamespace(namespace);
+            }}
+          />
+        </>
+      )}
+      <ListPageHeader title={displayNamespaceSelector ? t('Metrics') : ' '}>
         <Split hasGutter>
           <SplitItem data-test={DataTestIDs.MetricGraphUnitsDropDown}>
             <Tooltip content={<>{t('This dropdown only formats results.')}</>}>
@@ -1435,6 +1440,20 @@ export const MpCmoMetricsPage: React.FC = () => {
   );
 };
 
+export const MpCmoDevMetricsPage: React.FC = () => {
+  return (
+    <MonitoringProvider
+      monitoringContext={{
+        plugin: 'monitoring-plugin',
+        prometheus: 'cmo',
+        displayNamespaceSelector: false,
+      }}
+    >
+      <MetricsPage />
+    </MonitoringProvider>
+  );
+};
+
 type QueryTableProps = {
   index: number;
   namespace?: string;