Description

The Incidents page exhibits a race condition during initial load where only some incidents are displayed, with the remaining incidents appearing only after toggling date filters. This creates a poor user experience where the timeline appears incomplete on first visit.

How to Reproduce

Reproducibility: Intermittent - difficult to consistently reproduce in standard browsers on real clusters, but reliably reproducible via automated testing.
Steps:

1. Have a cluster with multiple incidents (some resolved, some firing)
2. Navigate to the Incidents page
3. Observe that only firing incidents are displayed initially

Expected: All incidents (firing and resolved) display immediately
Actual: Only firing incidents appear; resolved incidents load after toggling date filters

Automation: /cypress/e2e/incidents/regression/02.reg_loading.cy.ts on https://github.com/DavidRajnoha/monitoring-plugin/tree/incidents-regression-loading
(The branch contains also the proposed fix of the issue. The branch needs to be run against locally built UI, as it depends on not yet merged features into upstream (mocking and data-test-selectors)

Root Cause Analysis

The issue stems from a useEffect dependency chain race condition in IncidentsPage.tsx.

Technical Flow (with effect numbering from showcase branch):

Initial State Problem:

• Component initializes with daysSpan = undefined (from useState<number>())
• All effects run simultaneously on mount with initial/empty Redux state

Bad Data Cascade:

1. Effect 6 (fetchDataForIncidentsAndAlerts) executes with empty timeRanges → First invalid fetch
2. Effect 4 (setDaysSpan) runs with undefined incidentsActiveFilters.days → sets invalid daysSpan
3. Effect 5 (getIncidentsTimeRanges) triggered by invalid daysSpan → produces invalid time ranges
4. Effect 6 triggered again with invalid ranges → Second invalid fetch
5. Redux state populated with incomplete incident data

Subsequent Correction:

• Effect 4 runs again with correct incidentsActiveFilters.days
• Correct timeRanges computed and valid data fetched
• However, UI does not update.

Proposed Solution

Branch: https://github.com/DavidRajnoha/monitoring-plugin/tree/incidents-regression-loading

Approach:

• Effect Reordering: Arrange useEffects to respect dependency chain order
• Guard Clauses: Add validation to prevent effects running with invalid data
• State Initialization: Ensure proper default values in useState and Redux initial state

Files Modified:

• web/src/components/Incidents/IncidentsPage.tsx
• web/src/reducers/observe.ts (Redux initial state)

Note: Branch contains detailed logging for debugging - to be removed if fix is implemented

Testing

• Automated: Cypress test available in showcase branch
• Dependencies: Requires two unmerged PRs and locally built UI

Business Impact

• Severity: Medium - clear workaround exists (toggle date filter)
• User Experience: Poor first impression, timeline appears broken
• Risk: Underlying race condition may have other undiscovered consequences