test: Add e2e incident detection test

- e2e/incidents: 00.incidents.cy.ts test deploys pod that fails to start and creates a KubePodCrashLoop alert and checks that the alert
  later appears in the system.
- views/incident-page: new function to find a specific alert within
  existing incident bars is added
- support/commands.ts: Command for failing pod deployment + adding
  label that enables the incident detection to work properly during
setup
- fixtures/incidents/: yaml files for the failing pod deployment (plus
  custom alert rule)

Author: DavidRajnoha

web/cypress/e2e/incidents/00.coo_incidents_e2e.cy.ts

@@ -0,0 +1,59 @@
+/*
+The test verifies the whole lifecycle of the Incident feature, without any external dependencies.
+*/
+import { commonPages } from '../../views/common';
+import { incidentsPage } from '../../views/incidents-page';
+
+// Set constants for the operators that need to be installed for tests.
+const MCP = {
+  namespace: 'openshift-cluster-observability-operator',
+  packageName: 'cluster-observability-operator',
+  operatorName: 'Cluster Observability Operator',
+  config: {
+    kind: 'UIPlugin',
+    name: 'monitoring',
+  },
+};
+
+const MP = {
+  namespace: 'openshift-monitoring',
+  operatorName: 'Cluster Monitoring Operator',
+};
+
+describe('Incidents', () => {
+  before(() => {
+    cy.afterBlockCOO(MCP, MP); // Following cypher best practices, the cleanup is done before the test block
+    cy.beforeBlockCOO(MCP, MP);
+    cy.createKubePodCrashLoopingAlert();
+  });
+
+  after(() => {
+    cy.afterBlockCOO(MCP, MP); // For compatibility with other tests
+  });
+
+  it('Admin Perspective - Incidents tab renders and responds to interactions', () => {
+    cy.log('1.1 Navigate to Alerting → Incidents');
+    incidentsPage.goTo();
+    commonPages.titleShouldHaveText('Incidents');
+  });
+
+  it('Incident with KubePodCrashLooping alert is present in the alerts table', () => {
+    incidentsPage.goTo();
+    commonPages.titleShouldHaveText('Incidents');
+    incidentsPage.clearAllFilters();
+    
+    const intervalMs = 60_000;
+    const maxMinutes = 20; 
+
+    cy.waitUntil(() => incidentsPage.findIncidentWithAlert('KubePodCrashLooping'), { 
+      interval: intervalMs, 
+      timeout: maxMinutes * intervalMs 
+    });
+
+    incidentsPage
+      .elements
+      .alertsTable()
+      .contains('KubePodCrashLooping')
+      .should('exist');
+  });
+});

web/cypress/e2e/incidents/01.incidents.cy.ts

@@ -1,8 +1,16 @@
+/*
+The test verifies the basic functionality of the Incidents page and serves
+as a verification that the Incidents View is working as expected.
+
+Currently, it depends on an alert being present in the cluster.
+In the future, mocking requests / injecting alerts should be considered.
+Natural creation of the alert is done in the 00.coo_incidents_e2e.cy.ts test, 
+but takes significant time.
+*/
 
 import { commonPages } from '../../views/common';
 import { incidentsPage } from '../../views/incidents-page';
 
-// Set constants for the operators that need to be installed for tests.
 const MCP = {
   namespace: 'openshift-cluster-observability-operator',
   packageName: 'cluster-observability-operator',
@@ -25,14 +33,15 @@ const ALERT_DESC = 'This is an alert meant to ensure that the entire alerting pi
 const ALERT_SUMMARY = 'An alert that should always be firing to certify that Alertmanager is working properly.'
 describe('Incidents', () => {
   before(() => {
+    cy.afterBlockCOO(MCP, MP); // Following cypher best practices, the cleanup is done before the test block
     cy.beforeBlockCOO(MCP, MP);
-    // TODO: Inject alerts into the database so the behavior is deterministic
   });
 
   after(() => {
-    cy.afterBlockCOO(MCP, MP);
+    cy.afterBlockCOO(MCP, MP); // For compatibility with other tests
   });
 
+
   beforeEach(() => {
 
     cy.log('Navigate to Observe → Incidents');
@@ -65,19 +74,13 @@ describe('Incidents', () => {
 
   it('selecting an incident via chart shows alerts and adds groupId to URL', () => {
     incidentsPage.clearAllFilters();
-    cy.pause();
     incidentsPage.selectIncidentByBarIndex(0);
-    cy.pause();
     cy.url().should('match', /[?&]groupId=/);
-    cy.pause();
     incidentsPage.elements.alertsChartSvg().find('path').should('exist');
-    cy.pause();
   });
 
   it('shows alerts table and allows expanding a row', () => {
-    cy.pause();
     incidentsPage.elements.alertsTable().should('exist');
     incidentsPage.expandRow(0);
-    cy.pause();
   });
 });

web/cypress/fixtures/incidents/pod_crash_loop.yaml

@@ -0,0 +1,19 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+ name: crash-loop
+ namespace: openshift-monitoring
+spec:
+ replicas: 1
+ selector:
+   matchLabels:
+     app: crash-loop
+ template:
+   metadata:
+     labels:
+       app: crash-loop
+   spec:
+     containers:
+     - name: crash-loop
+       image: busybox
+       command: ["sh", "-c", "exit 1"]  # Exit immediately with a failure

web/cypress/fixtures/incidents/prometheus_rule_pod_crash_loop.yaml

@@ -0,0 +1,24 @@
+apiVersion: monitoring.coreos.com/v1
+kind: PrometheusRule
+metadata:
+ labels:
+   app.kubernetes.io/name: kube-prometheus
+   app.kubernetes.io/part-of: openshift-monitoring
+   prometheus: k8s
+   role: alert-rules
+ name: kubernetes-monitoring-podcrash-rules
+ namespace: openshift-monitoring
+spec:
+ groups:
+ - name: kubernetes-apps
+   rules:
+   - alert: KubePodCrashLooping
+     annotations:
+       description: 'Pod {{ $labels.namespace }}/{{ $labels.pod }} ({{ $labels.container
+         }}) is in waiting state (reason: "CrashLoopBackOff").'
+       summary: Pod is crash looping.
+     expr: |
+       max_over_time(kube_pod_container_status_waiting_reason{reason="CrashLoopBackOff", namespace=~"(openshift-.*|kube-.*|default)",job="kube-state-metrics"}[5m]) >= 1
+     for: 5m
+     labels:
+       severity: warning

web/cypress/support/commands.ts

@@ -6,6 +6,7 @@ import Shadow = Cypress.Shadow;
 import 'cypress-wait-until';
 import { guidedTour } from '../views/tour';
 import { nav } from '../views/nav';
+import './nav';
 import { operatorHubPage } from '../views/operator-hub-page';
 
 
@@ -42,11 +43,6 @@ declare global {
     bySemanticElement(element: string, text?: string): Chainable<JQuery<HTMLElement>>;
     byAriaLabel(label: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<HTMLElement>>;
     byPFRole(role: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<HTMLElement>>;
-  }
-}
-
-declare global {
-  interface Chainable {
     switchPerspective(perspective: string);
     uiLogin(provider: string, username: string, password: string);
     uiLogout();
@@ -546,6 +542,7 @@ Cypress.Commands.add('beforeBlockCOO', (MCP: { namespace: string, operatorName:
     expect(result.code).to.eq(0);
     cy.log(`Monitoring plugin pod is now running in namespace: ${MCP.namespace}`);
   });
+  cy.exec(`oc label namespace openshift-cluster-observability-operator openshift.io/cluster-monitoring="true" --kubeconfig ${Cypress.env('KUBECONFIG_PATH')}`)
   //TODO: https://issues.redhat.com/browse/OCPBUGS-58468 - console reload and logout was happening more often
   // cy.get('.pf-v5-c-alert, .pf-v6-c-alert', { timeout: readyTimeoutMilliseconds })
   //   .contains('Web console update is available')
@@ -612,6 +609,8 @@ Cypress.Commands.add('afterBlockCOO', (MCP: { namespace: string, operatorName: s
       `oc adm policy remove-cluster-role-from-user cluster-admin ${Cypress.env('LOGIN_USERNAME')} --kubeconfig ${Cypress.env('KUBECONFIG_PATH')}`,
     );
 
+    cy.executeAndDelete(`oc label namespace openshift-cluster-observability-operator openshift.io/cluster-monitoring- --kubeconfig ${Cypress.env('KUBECONFIG_PATH')}`)
+
     //TODO: https://issues.redhat.com/browse/OCPBUGS-58468 - console reload and logout was happening more often
     // cy.get('.pf-v5-c-alert, .pf-v6-c-alert', { timeout: 120000 })
     //   .contains('Web console update is available')
@@ -626,4 +625,26 @@ Cypress.Commands.add('afterBlockCOO', (MCP: { namespace: string, operatorName: s
 
   }
   cy.log('After block COO completed');
+});
+
+// Apply incident fixture manifests to the cluster
+Cypress.Commands.add('createKubePodCrashLoopingAlert', () => {
+  const kubeconfigPath = Cypress.env('KUBECONFIG_PATH');
+  cy.exec(
+    `oc apply -f ./cypress/fixtures/incidents/prometheus_rule_pod_crash_loop.yaml --kubeconfig ${kubeconfigPath}`,
+  );
+  cy.exec(
+    `oc apply -f ./cypress/fixtures/incidents/pod_crash_loop.yaml --kubeconfig ${kubeconfigPath}`,
+  );
+});
+
+// Clean up incident fixture manifests from the cluster
+Cypress.Commands.add('cleanupIncidentsFixtures', () => {
+  const kubeconfigPath = Cypress.env('KUBECONFIG_PATH');
+  cy.executeAndDelete(
+    `oc delete -f ./cypress/fixtures/incidents/pod_crash_loop.yaml --ignore-not-found=true --kubeconfig ${kubeconfigPath}`,
+  );
+  cy.executeAndDelete(
+    `oc delete -f ./cypress/fixtures/incidents/prometheus_rule_pod_crash_loop.yaml --ignore-not-found=true --kubeconfig ${kubeconfigPath}`,
+  );
 });

web/cypress/support/index.ts

@@ -1,6 +1,8 @@
 import './nav';
 import './selectors';
 import './commands';
+import './alert-injection';
+import './prometheus-query-mocks';
 
 export const checkErrors = () =>
   cy.window().then((win) => {

web/cypress/tsconfig.json

@@ -4,5 +4,8 @@
     "lib": ["es5", "dom"],
     "types": ["cypress", "node"]
   },
-  "include": ["**/*.ts"]
+
+  "include": [
+    "**/*.ts"
+  ]
 }

web/cypress/views/incidents-page.ts

@@ -33,10 +33,18 @@ export const incidentsPage = {
 
   selectIncidentByBarIndex: (index = 0) => {
     cy.log('incidentsPage.selectIncidentByBarIndex');
-    incidentsPage.elements.incidentsChartCard()
-      .find('path[role="presentation"]')
-      .eq(index)
-      .click({ force: true });
+    // TODO: There are two bars for the same incident, one transparent, one not. 
+    // Right now, we use both which works but doubles the execution time.
+    return cy.waitUntil(() => {
+      return incidentsPage.elements.incidentsChartCard()
+        .find('path[role="presentation"]')
+        .eq(index)
+        .click({ force: true })
+        .then(() => {
+          return Cypress.$('[aria-label="alerts-table"]').length > 0;
+        });
+    }, { interval: 10000, timeout: 120000 })
+    .then(() => incidentsPage.elements.alertsTable().scrollIntoView().should('be.visible'))
   },
 
   expandRow: (rowIndex = 0) => {
@@ -51,6 +59,50 @@ export const incidentsPage = {
       });
   },
 
+
+  findIncidentWithAlert: (alertName: string): Cypress.Chainable<boolean> => {
+    cy.log(`incidentsPage.findIncidentWithAlert: ${alertName}`);
+    return incidentsPage.elements.incidentsChartCard()
+      .find('path[role="presentation"]')
+      .then(($bars) => {
+        const totalBars = $bars.length;
+        if (totalBars <= 3) { // 3 paths are always present in the legend,
+        // their parent is g without presentation label opposed ot the proper bars
+          cy.task('log', 'No bars found in incidents chart');
+          return cy.wrap(false);
+        }
+
+        const tryIndex = (index: number): Cypress.Chainable<boolean> => {
+          if (index >= totalBars - 3) {
+            return cy.wrap(false);
+          }
+
+          return cy
+            .wrap(null)
+            .then(() => {
+              incidentsPage.selectIncidentByBarIndex(index);
+              return null;
+            })
+            .then(() => incidentsPage.elements.alertsTable().invoke('text'))
+            .then((text) => {
+              if (String(text).includes(alertName)) {
+                return cy.wrap(true);
+              }
+              // Expand a row if present to surface nested details
+              incidentsPage.expandRow(0);
+              return incidentsPage.elements.alertsTable().invoke('text').then((text2) => {
+                if (String(text2).includes(alertName)) {
+                  return cy.wrap(true);
+                }
+                return tryIndex(index + 1);
+              });
+            });
+        };
+
+        return tryIndex(0);
+      });
+  },
+
   // Centralized element selectors - all selectors defined in one place
   elements: {
     // Page structure