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,11 @@ 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,
   roundDateToInterval,
 } from '../utils';
 import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
@@ -58,7 +57,6 @@ const formatComponentList = (componentList: string[] | undefined): string => {
 
 const IncidentsChart = ({
   incidentsData,
-  incidentsTimestamps,
   chartDays,
   theme,
   selectedGroupId,
@@ -67,7 +65,6 @@ const IncidentsChart = ({
   lastRefreshTime,
 }: {
   incidentsData: Array<Incident>;
-  incidentsTimestamps: IncidentsTimestamps;
   chartDays: number;
   theme: 'light' | 'dark';
   selectedGroupId: string;
@@ -83,43 +80,39 @@ 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;
+
+    // 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]);
+      }
+    }
 
-    // Create chart bars and sort by original x values to maintain proper order
-    const chartBars = filteredIncidents.map((incident) =>
-      createIncidentsChartBars(incident, dateValues),
+    // Create chart bars per group and sort by original x values
+    const chartBars = Array.from(incidentsByGroupId.values()).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,9 @@ 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';
@@ -243,12 +243,11 @@ 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 },
+      { endTime: currentTime, duration: 15 * DAY_MS },
       'timestamp(ALERTS{alertstate="firing"})',
     ).then((res) => res.data.result);
 
@@ -265,35 +264,18 @@ const IncidentsPage = () => {
 
     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) => ({
+          timestampsResults?.map((result: any) => ({
             ...result,
-            value: result.value.map((value: any) => [
-              value[0],
-              roundTimestampToFiveMinutes(parseInt(value[1])).toString(),
+            values: result.values.map((value: any) => [
+              roundTimestampToFiveMinutes(parseInt(value[1])),
             ]),
           })) || [];
 
-        const fetchedAlertsTimestamps = {
-          minOverTime: roundedTimestamps,
-          lastOverTime: [],
-        };
         dispatch(
           setAlertsTimestamps({
-            alertsTimestamps: fetchedAlertsTimestamps,
+            alertsTimestamps: roundedTimestamps,
           }),
         );
 
@@ -302,7 +284,7 @@ const IncidentsPage = () => {
           prometheusResults,
           incidentForAlertProcessing,
           currentTime,
-          fetchedAlertsTimestamps,
+          roundedTimestamps,
         );
         dispatch(
           setAlertsData({
@@ -350,9 +332,10 @@ const IncidentsPage = () => {
       : 'cluster_health_components_map';
 
     // Fetch timestamps and incidents in parallel, but wait for both before processing
-    const timestampPromise = fetchInstantData(
+    const timestampPromise = fetchDataForIncidentsAndAlerts(
       safeFetch,
-      'min_over_time(timestamp(cluster_health_components_map)[15d:5m])',
+      { endTime: currentTime, duration: 15 * DAY_MS },
+      'timestamp(cluster_health_components_map)',
     ).then((res) => res.data.result);
 
     const incidentsPromise = Promise.all(
@@ -368,32 +351,29 @@ const IncidentsPage = () => {
         const roundedTimestamps =
           timestampsResults?.map((result: any) => ({
             ...result,
-            value: [
-              result.value[0],
-              roundTimestampToFiveMinutes(parseInt(result.value[1])).toString(),
-            ],
+            values: result.values.map((value: any) => [
+              roundTimestampToFiveMinutes(parseInt(value[1])),
+            ]),
           })) || [];
 
-        const fetchedTimestamps = {
-          minOverTime: roundedTimestamps,
-          lastOverTime: [],
-        };
         dispatch(
           setIncidentsTimestamps({
-            incidentsTimestamps: fetchedTimestamps,
+            incidentsTimestamps: roundedTimestamps,
           }),
         );
 
         const prometheusResults = incidentsResults.flat();
-        const incidents = convertToIncidents(prometheusResults, currentTime);
+        const incidents = convertToIncidents(prometheusResults, currentTime, roundedTimestamps);
 
         // 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,
           }),
         );
 
@@ -402,7 +382,7 @@ const IncidentsPage = () => {
         if (isGroupSelected) {
           // Use fetchedTimestamps directly instead of stale closure value
           setIncidentForAlertProcessing(
-            processIncidentsForAlerts(prometheusResults, fetchedTimestamps),
+            processIncidentsForAlerts(prometheusResults, roundedTimestamps),
           );
           dispatch(setAlertsAreLoading({ alertsAreLoading: true }));
         } else {
@@ -759,30 +739,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)) {

web/src/components/Incidents/model.ts

@@ -4,7 +4,7 @@ export type Timestamps = [number, string];
 
 export type SpanDates = Array<number>;
 
-export type AlertsIntervalsArray = [number, number, 'data' | 'nodata'];
+export type AlertsIntervalsArray = [number, number, 'data' | 'nodata', number?];
 
 export type Incident = {
   component: string;
@@ -15,23 +15,12 @@ export type Incident = {
   src_severity: string;
   src_alertname: string;
   src_namespace: string;
+  severity: any;
   silenced: boolean;
   x: number;
   values: Array<Timestamps>;
   metric: Metric;
   firstTimestamp: number;
-  firstTimestamps: Array<Array<any>>;
-  lastTimestamp: number;
-};
-
-export type IncidentsTimestamps = {
-  minOverTime: Array<any>;
-  lastOverTime: Array<any>;
-};
-
-export type AlertsTimestamps = {
-  minOverTime: Array<any>;
-  lastOverTime: Array<any>;
 };
 
 // Define the interface for Metric
@@ -60,7 +49,7 @@ export type Alert = {
   severity: Severity;
   silenced: boolean;
   x: number;
-  firstTimestamps: Array<Array<any>>;
+  firstTimestamp: number;
   values: Array<Timestamps>;
   alertsExpandedRowData?: Array<Alert>;
 };
@@ -115,8 +104,7 @@ export type IncidentsDetailsAlert = {
   resolved: boolean;
   severity: Severity;
   x: number;
-  firstTimestamps: Array<Array<any>>;
-  lastTimestamp: number;
+  firstTimestamp: number;
   values: Array<Timestamps>;
   silenced: boolean;
   rule: {