feat: refactor intervals logic

Author: rioloc

web/src/components/Incidents/AlertsChart/AlertsChart.tsx

@@ -73,7 +73,18 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
 
   const chartData: AlertsChartBar[][] = useMemo(() => {
     if (!Array.isArray(alertsData) || alertsData.length === 0) return [];
-    return alertsData.map((alert) => createAlertsChartBars(alert));
+
+    // Group alerts by identity so intervals of the same alert share the same row
+    const groupedByIdentity = new Map<string, typeof alertsData>();
+    for (const alert of alertsData) {
+      const key = [alert.alertname, alert.namespace, alert.severity].join('|');
+      if (!groupedByIdentity.has(key)) {
+        groupedByIdentity.set(key, []);
+      }
+      groupedByIdentity.get(key)!.push(alert);
+    }
+
+    return Array.from(groupedByIdentity.values()).map((alerts) => createAlertsChartBars(alerts));
   }, [alertsData]);
 
   useEffect(() => {

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

@@ -28,12 +28,12 @@ import {
 } from '@patternfly/react-tokens';
 import '../incidents-styles.css';
 import { IncidentsTooltip } from '../IncidentsTooltip';
-import { Incident, IncidentsTimestamps } from '../model';
+import { Incident } from '../model';
 import {
   calculateIncidentsChartDomain,
   createIncidentsChartBars,
   generateDateArray,
-  matchTimestampMetricForIncident,
+  removeTrailingPaddingFromSeveritySegments,
   roundDateToInterval,
 } from '../utils';
 import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
@@ -58,7 +58,6 @@ const formatComponentList = (componentList: string[] | undefined): string => {
 
 const IncidentsChart = ({
   incidentsData,
-  incidentsTimestamps,
   chartDays,
   theme,
   selectedGroupId,
@@ -67,7 +66,6 @@ const IncidentsChart = ({
   lastRefreshTime,
 }: {
   incidentsData: Array<Incident>;
-  incidentsTimestamps: IncidentsTimestamps;
   chartDays: number;
   theme: 'light' | 'dark';
   selectedGroupId: string;
@@ -83,43 +81,45 @@ const IncidentsChart = ({
     [chartDays, currentTime],
   );
 
-  const enrichedIncidentsData = useMemo(() => {
-    return incidentsData.map((incident) => {
-      // find the matched timestamp for the incident
-      const matchedMinTimestamp = matchTimestampMetricForIncident(
-        incident,
-        incidentsTimestamps.minOverTime,
-      );
-
-      return {
-        ...incident,
-        firstTimestamp: parseInt(matchedMinTimestamp?.value?.[1] ?? '0'),
-      };
-    });
-  }, [incidentsData, incidentsTimestamps]);
-
   const { t, i18n } = useTranslation(process.env.I18N_NAMESPACE);
 
   const chartData = useMemo(() => {
-    if (!Array.isArray(enrichedIncidentsData) || enrichedIncidentsData.length === 0) return [];
+    if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
 
     const filteredIncidents = selectedGroupId
-      ? enrichedIncidentsData.filter((incident) => incident.group_id === selectedGroupId)
-      : enrichedIncidentsData;
+      ? incidentsData.filter((incident) => incident.group_id === selectedGroupId)
+      : incidentsData;
 
-    // Create chart bars and sort by original x values to maintain proper order
-    const chartBars = filteredIncidents.map((incident) =>
-      createIncidentsChartBars(incident, dateValues),
+    // Group incidents by group_id so split severity segments share the same row
+    const incidentsByGroupId = new Map<string, typeof filteredIncidents>();
+    for (const incident of filteredIncidents) {
+      const existing = incidentsByGroupId.get(incident.group_id);
+      if (existing) {
+        existing.push(incident);
+      } else {
+        incidentsByGroupId.set(incident.group_id, [incident]);
+      }
+    }
+
+    // When an incident changes severity, its segments share the same row.
+    // Non-last segments have trailing padding (+300s) that overlaps with the
+    // next segment's leading padding (-300s). Remove the trailing padding
+    // value from non-last segments to prevent visual overlap.
+    const adjustedGroups = Array.from(incidentsByGroupId.values()).map((group) =>
+      removeTrailingPaddingFromSeveritySegments(group),
     );
+
+    // Create chart bars per group and sort by original x values
+    const chartBars = adjustedGroups.map((group) => createIncidentsChartBars(group, dateValues));
     chartBars.sort((a, b) => a[0].x - b[0].x);
 
     // Reassign consecutive x values to eliminate gaps between bars
     return chartBars.map((bars, index) => bars.map((bar) => ({ ...bar, x: index + 1 })));
-  }, [enrichedIncidentsData, dateValues, selectedGroupId]);
+  }, [incidentsData, dateValues, selectedGroupId]);
 
   useEffect(() => {
     setIsLoading(false);
-  }, [enrichedIncidentsData]);
+  }, [incidentsData]);
   useEffect(() => {
     setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
     setChartHeight(chartData?.length < 5 ? 250 : chartData?.length * 55);

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

@@ -25,10 +25,8 @@ const IncidentsDetailsRowTable = ({ alerts }: IncidentsDetailsRowTableProps) =>
     if (alerts && alerts.length > 0) {
       return [...alerts]
         .sort((a: IncidentsDetailsAlert, b: IncidentsDetailsAlert) => {
-          const aFirstTimestamp = a.firstTimestamps[0][1];
-          const bFirstTimestamp = b.firstTimestamps[0][1];
-          const aStart = aFirstTimestamp > 0 ? aFirstTimestamp : a.alertsStartFiring;
-          const bStart = bFirstTimestamp > 0 ? bFirstTimestamp : b.alertsStartFiring;
+          const aStart = a.firstTimestamp > 0 ? a.firstTimestamp : a.alertsStartFiring;
+          const bStart = b.firstTimestamp > 0 ? b.firstTimestamp : b.alertsStartFiring;
           return aStart - bStart;
         })
         .map((alertDetails: IncidentsDetailsAlert, rowIndex) => {
@@ -50,8 +48,8 @@ const IncidentsDetailsRowTable = ({ alerts }: IncidentsDetailsRowTableProps) =>
               <Td dataLabel="expanded-details-firingstart">
                 <Timestamp
                   timestamp={
-                    (alertDetails.firstTimestamps[0][1] > 0
-                      ? alertDetails.firstTimestamps[0][1]
+                    (alertDetails.firstTimestamp > 0
+                      ? alertDetails.firstTimestamp
                       : alertDetails.alertsStartFiring) * 1000
                   }
                 />

web/src/components/Incidents/IncidentsPage.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useSafeFetch } from '../console/utils/safe-fetch-hook';
-import { createAlertsQuery, fetchDataForIncidentsAndAlerts, fetchInstantData } from './api';
+import { createAlertsQuery, fetchDataForIncidentsAndAlerts } from './api';
 import { useTranslation } from 'react-i18next';
 import {
   Bullseye,
@@ -37,9 +37,8 @@ import {
   onDeleteIncidentFilterChip,
   onIncidentFiltersSelect,
   parseUrlParams,
-  PROMETHEUS_QUERY_INTERVAL_SECONDS,
-  roundTimestampToFiveMinutes,
   updateBrowserUrl,
+  DAY_MS,
 } from './utils';
 import { groupAlertsForTable, convertToAlerts } from './processAlerts';
 import { CompressArrowsAltIcon, CompressIcon, FilterIcon } from '@patternfly/react-icons';
@@ -48,9 +47,7 @@ import {
   setAlertsAreLoading,
   setAlertsData,
   setAlertsTableData,
-  setAlertsTimestamps,
   setFilteredIncidentsData,
-  setIncidentsTimestamps,
   setIncidentPageFilterType,
   setIncidents,
   setIncidentsActiveFilters,
@@ -150,10 +147,6 @@ const IncidentsPage = () => {
     (state: MonitoringState) => state.plugins.mcp.incidentsData.filteredIncidentsData,
   );
 
-  const incidentsTimestamps = useSelector(
-    (state: MonitoringState) => state.plugins.mcp.incidentsData.incidentsTimestamps,
-  );
-
   const selectedGroupId = incidentsActiveFilters.groupId?.[0] ?? undefined;
 
   const incidentPageFilterTypeSelected = useSelector(
@@ -243,66 +236,27 @@ const IncidentsPage = () => {
     }
 
     const currentTime = incidentsLastRefreshTime;
-    const ONE_DAY = 24 * 60 * 60 * 1000;
 
-    // Fetch timestamps and alerts in parallel, but wait for both before processing
-    const timestampPromise = fetchDataForIncidentsAndAlerts(
-      safeFetch,
-      { endTime: currentTime, duration: 15 * ONE_DAY },
-      'timestamp(ALERTS{alertstate="firing"})',
-    ).then((res) => res.data.result);
+    // Always fetch 15 days of alert data so firstTimestamp is computed from full history
+    const fetchTimeRanges = getIncidentsTimeRanges(15 * DAY_MS, currentTime);
 
-    const alertsPromise = Promise.all(
-      timeRanges.map(async (range) => {
+    Promise.all(
+      fetchTimeRanges.map(async (range) => {
         const response = await fetchDataForIncidentsAndAlerts(
           safeFetch,
           range,
           createAlertsQuery(incidentForAlertProcessing),
         );
         return response.data.result;
       }),
-    );
-
-    Promise.all([timestampPromise, alertsPromise])
-      .then(([timestampsResults, alertsResults]) => {
-        // Gaps detection here such that if the same timestamp has
-        // gaps greater than 5 minutes, this will be added more than one time.
-        // For example, if there is a metric for AlertH_Gapped
-        // with values:[ "1770699000", "1770699300", "1770708300", "1770708600", "1770708900"]
-        // there will be two gaps detected. With the following min values: 1770699300 and 1770699300
-        // the interval will be [1770699300 - 1770699300] and [1770708300 - 1770699300]
-
-        const timestampsValues = timestampsResults?.map((result: any) => ({
-          ...result,
-          value: detectMinForEachGap(result.values, PROMETHEUS_QUERY_INTERVAL_SECONDS),
-        }));
-
-        // Round timestamp values before storing
-        const roundedTimestamps =
-          timestampsValues?.map((result: any) => ({
-            ...result,
-            value: result.value.map((value: any) => [
-              value[0],
-              roundTimestampToFiveMinutes(parseInt(value[1])).toString(),
-            ]),
-          })) || [];
-
-        const fetchedAlertsTimestamps = {
-          minOverTime: roundedTimestamps,
-          lastOverTime: [],
-        };
-        dispatch(
-          setAlertsTimestamps({
-            alertsTimestamps: fetchedAlertsTimestamps,
-          }),
-        );
-
+    )
+      .then((alertsResults) => {
         const prometheusResults = alertsResults.flat();
         const alerts = convertToAlerts(
           prometheusResults,
           incidentForAlertProcessing,
           currentTime,
-          fetchedAlertsTimestamps,
+          daysSpan,
         );
         dispatch(
           setAlertsData({
@@ -342,68 +296,41 @@ const IncidentsPage = () => {
         ? incidentsActiveFilters.days[0].split(' ')[0] + 'd'
         : '',
     );
-    const calculatedTimeRanges = getIncidentsTimeRanges(daysDuration, currentTime);
 
     const isGroupSelected = !!selectedGroupId;
     const incidentsQuery = isGroupSelected
       ? `cluster_health_components_map{group_id='${selectedGroupId}'}`
       : 'cluster_health_components_map';
 
-    // Fetch timestamps and incidents in parallel, but wait for both before processing
-    const timestampPromise = fetchInstantData(
-      safeFetch,
-      'min_over_time(timestamp(cluster_health_components_map)[15d:5m])',
-    ).then((res) => res.data.result);
+    // Always fetch 15 days of data so firstTimestamp is computed from full history
+    const fetchTimeRanges = getIncidentsTimeRanges(15 * DAY_MS, currentTime);
 
-    const incidentsPromise = Promise.all(
-      calculatedTimeRanges.map(async (range) => {
+    Promise.all(
+      fetchTimeRanges.map(async (range) => {
         const response = await fetchDataForIncidentsAndAlerts(safeFetch, range, incidentsQuery);
         return response.data.result;
       }),
-    );
-
-    Promise.all([timestampPromise, incidentsPromise])
-      .then(([timestampsResults, incidentsResults]) => {
-        // Round timestamp values before storing
-        const roundedTimestamps =
-          timestampsResults?.map((result: any) => ({
-            ...result,
-            value: [
-              result.value[0],
-              roundTimestampToFiveMinutes(parseInt(result.value[1])).toString(),
-            ],
-          })) || [];
-
-        const fetchedTimestamps = {
-          minOverTime: roundedTimestamps,
-          lastOverTime: [],
-        };
-        dispatch(
-          setIncidentsTimestamps({
-            incidentsTimestamps: fetchedTimestamps,
-          }),
-        );
-
+    )
+      .then((incidentsResults) => {
         const prometheusResults = incidentsResults.flat();
-        const incidents = convertToIncidents(prometheusResults, currentTime);
+        const incidents = convertToIncidents(prometheusResults, currentTime, daysDuration);
 
         // Update the raw, unfiltered incidents state
         dispatch(setIncidents({ incidents }));
 
+        const filteredData = filterIncident(incidentsActiveFilters, incidents);
+
         // Filter the incidents and dispatch
         dispatch(
           setFilteredIncidentsData({
-            filteredIncidentsData: filterIncident(incidentsActiveFilters, incidents),
+            filteredIncidentsData: filteredData,
           }),
         );
 
         setIncidentsAreLoading(false);
 
         if (isGroupSelected) {
-          // Use fetchedTimestamps directly instead of stale closure value
-          setIncidentForAlertProcessing(
-            processIncidentsForAlerts(prometheusResults, fetchedTimestamps),
-          );
+          setIncidentForAlertProcessing(processIncidentsForAlerts(prometheusResults));
           dispatch(setAlertsAreLoading({ alertsAreLoading: true }));
         } else {
           closeDropDownFilters();
@@ -724,7 +651,6 @@ const IncidentsPage = () => {
                 <StackItem>
                   <IncidentsChart
                     incidentsData={filteredData}
-                    incidentsTimestamps={incidentsTimestamps}
                     chartDays={timeRanges.length}
                     theme={theme}
                     selectedGroupId={selectedGroupId}
@@ -759,30 +685,3 @@ export const McpCmoAlertingPage = () => {
     </MonitoringProvider>
   );
 };
-
-/**
- * @param {Array<Array>} dataValues - The matrix from out.json (data.result[0].values)
- * @param {number} gapThreshold - e.g., 300
- */
-const detectMinForEachGap = (dataValues, gapThreshold) => {
-  if (!dataValues || dataValues.length === 0) return [];
-
-  const mins = [];
-  let currentMin = dataValues[0];
-
-  // Start from the second element to compare with the previous one
-  for (let i = 1; i < dataValues.length; i++) {
-    const delta = dataValues[i][1] - dataValues[i - 1][1];
-
-    if (delta > gapThreshold) {
-      // Gap detected: save the min of the interval that just ended
-      mins.push(currentMin);
-      // The current timestamp is the min of the NEW interval
-      currentMin = dataValues[i];
-    }
-  }
-
-  // Always push the min of the last interval
-  mins.push(currentMin);
-  return mins;
-};

web/src/components/Incidents/IncidentsTable.tsx

@@ -95,9 +95,7 @@ export const IncidentsTable = () => {
     if (!alert.alertsExpandedRowData || alert.alertsExpandedRowData.length === 0) {
       return 0;
     }
-    return Math.min(
-      ...alert.alertsExpandedRowData.map((alertData) => alertData.firstTimestamps[0][1]),
-    );
+    return Math.min(...alert.alertsExpandedRowData.map((alertData) => alertData.firstTimestamp));
   };
 
   if (isEmpty(alertsTableData) || alertsAreLoading || isEmpty(incidentsActiveFilters.groupId)) {