OCPBUGS-83494:[release-4.21] feat: re enable dev console views

Dockerfile

@@ -8,7 +8,7 @@ ENV HUSKY=0
 
 COPY web/package.json web/package-lock.json web/
 COPY Makefile Makefile
-RUN make install-frontend
+RUN make install-frontend-ci
 
 COPY web/ web/
 RUN make build-frontend

Dockerfile.dev-mcp

@@ -16,7 +16,7 @@ RUN make update-plugin-name
 
 ENV I18N_NAMESPACE="plugin__monitoring-console-plugin"
 
-RUN make install-frontend
+RUN make install-frontend-ci
 RUN make build-frontend
 
 FROM brew.registry.redhat.io/rh-osbs/openshift-golang-builder:rhel_9_golang_1.24 as go-builder

devspace.yaml

@@ -36,7 +36,7 @@ dev:
       # Use the instance selector that CMO & helm add
       app.kubernetes.io/component: monitoring-plugin
     # Replace the container image with this dev-optimized image (allows to skip image building during development)
-    devImage: quay.io/rh-ee-pyurkovi/monitoring-plugin:devspace-2
+    devImage: quay.io/rh-ee-pyurkovi/monitoring-plugin:v4.19-devspace
     # Sync files between the local filesystem and the development container
     sync:
       - path: ./web/dist:/opt/app-root/web/dist

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

@@ -198,7 +198,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';