OU-1269: Update monitoring-console-plugin for 4.22

AGENTS.md

@@ -320,7 +320,6 @@ npx cypress run --component --spec cypress/component/labels.cy.tsx
 Component test files use the `.cy.tsx` extension and go in `web/cypress/component/`:
 
 ```typescript
-import React from 'react';
 import { MyComponent } from '../../src/components/MyComponent';
 
 describe('MyComponent', () => {

Makefile

@@ -82,7 +82,9 @@ deploy: lint-backend
 
 .PHONY: deploy-acm
 deploy-acm:
-	./scripts/deploy-acm.sh
+	PUSH=1 REPO=monitoring-console-plugin DOCKER_FILE_NAME=Dockerfile.dev-mcp scripts/build-image.sh
+	helm uninstall $(PLUGIN_NAME) -n $(PLUGIN_NAME)-ns || true
+	helm install $(PLUGIN_NAME) charts/openshift-console-plugin -n monitoring-plugin-ns --create-namespace --set plugin.image=$(IMAGE) --set plugin.features.acm.enabled=true
 
 # Download and install golangci-lint if not already installed
 .PHONY: golangci-lint

web/cypress/CYPRESS_TESTING_GUIDE.md

@@ -113,7 +113,6 @@ Component tests mount individual React components in isolation using Cypress, wi
 Component test files use the `.cy.tsx` extension and live in `cypress/component/`:
 
 ```typescript
-import React from 'react';
 import { Labels } from '../../src/components/labels';
 
 describe('Labels', () => {
@@ -313,4 +312,3 @@ Cypress tests run automatically in the CI pipeline:
 - **Test Scenarios Catalog**: `E2E_TEST_SCENARIOS.md`
 - **Setup Instructions**: `README.md`
 - **Main Guide**: `../../AGENTS.md`
-

web/eslint.config.ts

@@ -79,6 +79,21 @@ export default defineConfig([
       'react-hooks/incompatible-library': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       'react-hooks/refs': 'off',
+
+      // Prevent directly importing react as a lint rule
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
+          message:
+            'Do not directly import React. Add specific named imports instead (`import { useState, FC } from "react"`).',
+        },
+        {
+          selector: 'ImportDeclaration[source.value="react"] ImportNamespaceSpecifier',
+          message:
+            'Do not directly namespace import React (`import * as React`). Add specific named imports instead (`import { useState, FC } from "react"`).',
+        },
+      ],
     },
   },
 ]);

web/locales/en/plugin__monitoring-plugin.json

@@ -16,7 +16,6 @@
   "Severity": "Severity",
   "Namespace": "Namespace",
   "Source": "Source",
-  "Cluster": "Cluster",
   "Silence alert": "Silence alert",
   "User": "User",
   "Platform": "Platform",
@@ -62,6 +61,7 @@
   "The alert is now silenced for a defined time period. Silences temporarily mute alerts based on a set of label selectors that you define. Notifications will not be sent for alerts that match all the listed values or regular expressions.": "The alert is now silenced for a defined time period. Silences temporarily mute alerts based on a set of label selectors that you define. Notifications will not be sent for alerts that match all the listed values or regular expressions.",
   "Alert Name": "Alert Name",
   "Total": "Total",
+  "Cluster": "Cluster",
   "Filter by Cluster": "Filter by Cluster",
   "No alerts found": "No alerts found",
   "Error loading silences from Alertmanager. Some of the alerts below may actually be silenced.": "Error loading silences from Alertmanager. Some of the alerts below may actually be silenced.",
@@ -203,15 +203,9 @@
   "Dashboard actions": "Dashboard actions",
   "Import": "Import",
   "To create dashboards, contact your cluster administrator for permission.": "To create dashboards, contact your cluster administrator for permission.",
-  "Project is required": "Project is required",
-  "Dashboard name is required": "Dashboard name is required",
-  "Failed to create dashboard. Please try again.": "Failed to create dashboard. Please try again.",
   "Create Dashboard": "Create Dashboard",
-  "Select project": "Select project",
-  "Select a project": "Select a project",
-  "No project found for \"{{filter}}\"": "No project found for \"{{filter}}\"",
   "my-new-dashboard": "my-new-dashboard",
-  "Creating...": "Creating...",
+  "Select project": "Select project",
   "View and manage dashboards.": "View and manage dashboards.",
   "Unable to detect dashboard format. Please provide a valid Perses or Grafana dashboard.": "Unable to detect dashboard format. Please provide a valid Perses or Grafana dashboard.",
   "Invalid {{format}}: {{error}}": "Invalid {{format}}: {{error}}",
@@ -222,6 +216,7 @@
   "Failed to import dashboard. Please try again.": "Failed to import dashboard. Please try again.",
   "Error importing dashboard: {{error}}": "Error importing dashboard: {{error}}",
   "Migration failed. Please try again.": "Migration failed. Please try again.",
+  "Error migrating dashboard: {{error}}": "Error migrating dashboard: {{error}}",
   "Import Dashboard": "Import Dashboard",
   "1. Provide a dashboard (JSON or YAML)": "1. Provide a dashboard (JSON or YAML)",
   "Upload a dashboard file or paste the dashboard definition directly in the editor below.": "Upload a dashboard file or paste the dashboard definition directly in the editor below.",

web/src/components/Incidents/IncidentAlertStateIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { BellIcon, CheckIcon, BellSlashIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ const getAlertState = (alertDetails: IncidentsDetailsAlert): 'firing' | 'resolve
   return 'firing';
 };
 
-export const IncidentAlertStateIcon: React.FC<IncidentAlertStateIconProps> = ({
+export const IncidentAlertStateIcon: FC<IncidentAlertStateIconProps> = ({
   alertDetails,
   showTooltip = true,
 }) => {
@@ -75,7 +75,7 @@ const getGroupedAlertState = (groupedAlert: GroupedAlert): 'firing' | 'resolved'
   return 'firing';
 };
 
-export const GroupedAlertStateIcon: React.FC<GroupedAlertStateIconProps> = ({
+export const GroupedAlertStateIcon: FC<GroupedAlertStateIconProps> = ({
   groupedAlert,
   showTooltip = true,
 }) => {

web/src/components/Incidents/IncidentsChart/IncidentsChart.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   Chart,
@@ -282,4 +282,4 @@ const IncidentsChart = ({
   );
 };
 
-export default React.memo(IncidentsChart);
+export default memo(IncidentsChart);

web/src/components/Incidents/IncidentsPage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useMemo, useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useEffect, useCallback, MouseEvent } from 'react';
 import { useSafeFetch } from '../console/utils/safe-fetch-hook';
 import { createAlertsQuery, fetchDataForIncidentsAndAlerts } from './api';
 import { useTranslation } from 'react-i18next';
@@ -110,7 +110,7 @@ const IncidentsPage = () => {
   });
 
   const onFilterToggle = (
-    ev: React.MouseEvent,
+    ev: MouseEvent,
     filterName: keyof IncidentsPageFiltersExpandedState | 'filterType',
     setter,
   ) => {

web/src/components/Incidents/ToolbarItemFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ChangeEvent, FC, MouseEvent, MouseEventHandler } from 'react';
 import {
   ToolbarItem,
   ToolbarFilter,
@@ -32,19 +32,19 @@ interface IncidentFilterToolbarItemProps {
   onDeleteGroupIncidentFilterChip: (activeFilters: any, dispatch: any, category: any) => void;
   incidentFilterIsExpanded: boolean;
   onIncidentFiltersSelect: (
-    event: React.MouseEvent | React.ChangeEvent | undefined,
+    event: MouseEvent | ChangeEvent | undefined,
     selection: any,
     dispatch: any,
     activeFilters: any,
     categoryFilterType: string,
   ) => void;
   setIncidentIsExpanded: (isOpen: boolean) => void;
-  onIncidentFilterToggle: React.MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+  onIncidentFilterToggle: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
   dispatch: any;
   showToolbarItem?: boolean;
 }
 
-const IncidentFilterToolbarItem: React.FC<IncidentFilterToolbarItemProps> = ({
+const IncidentFilterToolbarItem: FC<IncidentFilterToolbarItemProps> = ({
   categoryName,
   toggleLabel,
   options,

web/src/components/Incidents/utils.ts

@@ -17,6 +17,7 @@ import {
   SpanDates,
   Timestamps,
 } from './model';
+import { TFunction } from 'i18next';
 
 /**
  * The Prometheus query step interval in seconds.
@@ -884,7 +885,7 @@ export const parseUrlParams = (search) => {
  * @returns {{value: string}[]} An array of objects, where each object has a
  * `value` key with a unique incident ID.
  */
-export const getIncidentIdOptions = (incidents: Array<Incident>, t: (key: string) => string) => {
+export const getIncidentIdOptions = (incidents: Array<Incident>, t: TFunction) => {
   const incidentMap = new Map<string, Incident>();
   incidents.forEach((incident) => {
     if (incident.group_id) {

web/src/components/MetricsPage.tsx

@@ -61,7 +61,7 @@ import {
   wrappable,
 } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
-import type { FC, Ref } from 'react';
+import type { FC, MouseEvent as ReactMouseEvent, Ref } from 'react';
 import { useMemo, useCallback, useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -1119,7 +1119,7 @@ const QueryBrowserWrapper: FC<{
   }, [dispatch, queryParams, isFirstRender, setFirstRenderFalse]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  // Use React.useMemo() to prevent these two arrays being recreated on every render, which would
+  // Use useMemo() to prevent these two arrays being recreated on every render, which would
   // trigger unnecessary re-renders of QueryBrowser, which can be quite slow
   const queriesMemoKey = JSON.stringify(_.map(queries, 'query'));
   const queryStrings = useMemo(() => _.map(queries, 'query'), [queriesMemoKey]);
@@ -1321,7 +1321,7 @@ const GraphUnitsDropDown: FC = () => {
     return intervalOptions.map((o) => ({ ...o, selected: o.value === selectedUnits }));
   }, [selectedUnits, t]);
 
-  const onSelect = (_ev: React.MouseEvent<Element, MouseEvent>, selection: string) => {
+  const onSelect = (_ev: ReactMouseEvent<Element, MouseEvent>, selection: string) => {
     setUnits(selection);
   };
 
@@ -1492,15 +1492,15 @@ const MetricsPage_: FC = () => {
 
 const MetricsPage = withFallback(MetricsPage_);
 
-export const MpCmoMetricsPage: React.FC = () => {
+export const MpCmoMetricsPage: FC = () => {
   return (
     <MonitoringProvider monitoringContext={{ plugin: 'monitoring-plugin', prometheus: 'cmo' }}>
       <MetricsPage />
     </MonitoringProvider>
   );
 };
 
-export const MpCmoDevMetricsPage: React.FC = () => {
+export const MpCmoDevMetricsPage: FC = () => {
   return (
     <MonitoringProvider
       monitoringContext={{

web/src/components/TypeaheadSelect.tsx

@@ -13,7 +13,7 @@ import {
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 import { DataTestIDs } from './data-test';
-import { FC, useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, FormEvent, KeyboardEvent, Ref, FC } from 'react';
 
 const NO_RESULTS = 'no results';
 
@@ -105,7 +105,7 @@ export const TypeaheadSelect: FC<TypeaheadSelectProps> = ({ options, onSelect, p
     }
   };
 
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+  const onTextInputChange = (_event: FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     setFilterValue(value);
 
@@ -125,7 +125,7 @@ export const TypeaheadSelect: FC<TypeaheadSelectProps> = ({ options, onSelect, p
     closeMenu();
   };
 
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const onInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
@@ -204,7 +204,7 @@ export const TypeaheadSelect: FC<TypeaheadSelectProps> = ({ options, onSelect, p
     setActiveAndFocusedItem(indexToFocus);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       variant="typeahead"

web/src/components/alerting/AlertList/LabelFilter.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, FormEvent } from 'react';
 import {
   SearchInput,
   SearchInputProps,
@@ -15,7 +15,7 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   /** Filter title displayed in the toolbar */
   title: string;
   /** Callback for when the input value changes */
-  onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
+  onChange?: (event: FormEvent<HTMLInputElement> | undefined, value: string) => void;
   /** Controls visibility of the filter in the toolbar */
   showToolbarItem?: ToolbarFilterProps['showToolbarItem'];
   /** Trims input value on change */

web/src/components/alerting/AlertList/filter-alerts.ts

@@ -13,7 +13,7 @@ export const filterAlerts = (
   if (!alerts) {
     return [];
   }
-  const shouldFilterNamespace = namespace !== ALL_NAMESPACES_KEY;
+  const shouldFilterNamespace = namespace !== ALL_NAMESPACES_KEY && perspective !== 'acm';
 
   /**
    * Filters alerts based on tenancy:

web/src/components/alerting/AlertsPage.tsx

@@ -98,11 +98,8 @@ const AlertsPage_: FC = () => {
       { label: t('Total'), key: rowFilter('alert-total') },
       { label: t('State'), key: rowFilter(AlertFilterOptions.STATE) },
     ];
-    if (perspective === 'acm') {
-      keys.push({ label: t('Cluster'), key: rowFilter(AlertFilterOptions.CLUSTER) });
-    }
     return keys;
-  }, [t, perspective]);
+  }, [t]);
 
   const columns = useTableColumns(columnKeys, sortBy, direction, onSort, [0]);
 

web/src/components/console/utils/ref-width-hook.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, Ref } from 'react';
 
 export const useRefWidth = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -28,5 +28,5 @@ export const useRefWidth = () => {
     }
   }, [ref, width]);
 
-  return [setRef, width] as [React.Ref<HTMLDivElement>, number];
+  return [setRef, width] as [Ref<HTMLDivElement>, number];
 };