feat: fix start dates in consecutive intervals bar

Author: rioloc

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

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

web/src/components/Incidents/IncidentsPage.tsx

@@ -37,6 +37,7 @@ import {
   onDeleteIncidentFilterChip,
   onIncidentFiltersSelect,
   parseUrlParams,
+  PROMETHEUS_QUERY_INTERVAL_SECONDS,
   roundTimestampToFiveMinutes,
   updateBrowserUrl,
 } from './utils';
@@ -242,11 +243,13 @@ 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 = fetchInstantData(
+    const timestampPromise = fetchDataForIncidentsAndAlerts(
       safeFetch,
-      'min_over_time(timestamp(ALERTS{alertstate="firing"})[15d:5m])',
+      { endTime: currentTime, duration: 15 * ONE_DAY },
+      'timestamp(ALERTS{alertstate="firing"})',
     ).then((res) => res.data.result);
 
     const alertsPromise = Promise.all(
@@ -262,14 +265,26 @@ 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 =
-          timestampsResults?.map((result: any) => ({
+          timestampsValues?.map((result: any) => ({
             ...result,
-            value: [
-              result.value[0],
-              roundTimestampToFiveMinutes(parseInt(result.value[1])).toString(),
-            ],
+            value: result.value.map((value: any) => [
+              value[0],
+              roundTimestampToFiveMinutes(parseInt(value[1])).toString(),
+            ]),
           })) || [];
 
         const fetchedAlertsTimestamps = {
@@ -744,3 +759,30 @@ 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,7 +95,9 @@ export const IncidentsTable = () => {
     if (!alert.alertsExpandedRowData || alert.alertsExpandedRowData.length === 0) {
       return 0;
     }
-    return Math.min(...alert.alertsExpandedRowData.map((alertData) => alertData.firstTimestamp));
+    return Math.min(
+      ...alert.alertsExpandedRowData.map((alertData) => alertData.firstTimestamps[0][1]),
+    );
   };
 
   if (isEmpty(alertsTableData) || alertsAreLoading || isEmpty(incidentsActiveFilters.groupId)) {

web/src/components/Incidents/model.ts

@@ -20,6 +20,7 @@ export type Incident = {
   values: Array<Timestamps>;
   metric: Metric;
   firstTimestamp: number;
+  firstTimestamps: Array<Array<any>>;
   lastTimestamp: number;
 };
 
@@ -59,7 +60,7 @@ export type Alert = {
   severity: Severity;
   silenced: boolean;
   x: number;
-  firstTimestamp: number;
+  firstTimestamps: Array<Array<any>>;
   values: Array<Timestamps>;
   alertsExpandedRowData?: Array<Alert>;
 };
@@ -114,7 +115,7 @@ export type IncidentsDetailsAlert = {
   resolved: boolean;
   severity: Severity;
   x: number;
-  firstTimestamp: number;
+  firstTimestamps: Array<Array<any>>;
   lastTimestamp: number;
   values: Array<Timestamps>;
   silenced: boolean;

web/src/components/Incidents/processAlerts.ts

@@ -277,20 +277,24 @@ export function convertToAlerts(
         resolved,
         x: 0, // Will be set after sorting
         silenced: matchingIncident.silenced ?? false,
-        firstTimestamp: 0, // Will be set from matched timestamp
+        firstTimestamps: [],
       };
 
       let matchedMinTimestamp = matchTimestampMetric(labeledAlert, alertsTimestamps.minOverTime);
-      if (matchedMinTimestamp && matchedMinTimestamp.value[1] < matchingIncident.firstTimestamp) {
+      const lastTimestampIdx = matchedMinTimestamp?.value.length - 1;
+      if (
+        matchedMinTimestamp &&
+        parseInt(matchedMinTimestamp.value[lastTimestampIdx][1]) < matchingIncident.firstTimestamp
+      ) {
         matchedMinTimestamp = {
-          value: [matchingIncident.firstTimestamp, matchingIncident.firstTimestamp.toString()],
+          value: [[matchingIncident.firstTimestamp, matchingIncident.firstTimestamp.toString()]],
         };
       }
 
       if (matchedMinTimestamp) {
         labeledAlert = {
           ...labeledAlert,
-          firstTimestamp: parseInt(matchedMinTimestamp?.value?.[1] ?? '0'),
+          firstTimestamps: matchedMinTimestamp?.value,
         } as Alert;
       }
       return labeledAlert;

web/src/components/Incidents/processIncidents.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 
 import { PrometheusLabels, PrometheusResult } from '@openshift-console/dynamic-plugin-sdk';
-import { Incident, IncidentsTimestamps, Metric, ProcessedIncident } from './model';
+import { IncidentsTimestamps, Metric, ProcessedIncident } from './model';
 import {
   insertPaddingPointsForChart,
   isResolved,
@@ -194,17 +194,18 @@ export const getIncidentsTimeRanges = (
 export const processIncidentsForAlerts = (
   incidents: Array<PrometheusResult>,
   incidentsTimestamps: IncidentsTimestamps,
-): Array<Partial<Incident>> => {
+) => {
   const matchedIncidents = incidents.map((incident) => {
     // expand matchTimestampMetricForIncident here
     const matchedMinTimestamp = matchTimestampMetricForIncident(
       incident.metric,
       incidentsTimestamps.minOverTime,
     );
+
     return {
       ...incident,
       firstTimestamp: parseInt(matchedMinTimestamp?.value?.[1] ?? '0'),
-    } as Partial<Incident>;
+    };
   });
 
   return matchedIncidents.map((incident, index) => {
@@ -213,12 +214,13 @@ export const processIncidentsForAlerts = (
     const silenced = incident.metric.silenced === 'true';
 
     // Return the processed incident
-    return {
+    const retval = {
       ...incident.metric,
       values: incident.values,
       x: incidents.length - index,
       silenced,
       firstTimestamp: incident.firstTimestamp,
     };
+    return retval;
   });
 };

web/src/components/Incidents/utils.ts

@@ -335,20 +335,45 @@ export const createIncidentsChartBars = (incident: Incident, dateArray: SpanDate
     warning: t_global_color_status_warning_default.var,
   };
 
+  let prev = null;
   for (let i = 0; i < groupedData.length; i++) {
     const severity = getSeverityName(groupedData[i][2]);
     const isLastElement = i === groupedData.length - 1;
+    const isNodata = groupedData[i][2] === 'nodata';
 
-    // - To avoid certain edge cases the startDate should
-    //   be the minimum between alert.firstTimestamp and groupedData[i][0]
     // - Round the result since groupedData comes from raw time series values.
-    // - We are considering only the first element of the groupedData (i === 0)
-    //   because in the case of consecutive intervals (i.e. the incident changes priority)
-    //   we want that the end of a bar is equal to the start of the next one
-    const startDate =
-      i === 0
-        ? roundTimestampToFiveMinutes(Math.min(incident.firstTimestamp, groupedData[i][0]))
-        : groupedData[i][0];
+    let startDate = 0;
+    if (i === 0) {
+      // - For the first bar, use the incident's first timestamp (rounded)
+      //   This represents when the incident actually started
+      //   If the first interval is 'nodata', we still use incident.firstTimestamp
+      //   as the absolute start, since 'nodata' at the beginning is just visualization
+      // - Math.min is needed to handle edge cases when the incident is quite new and the firstTimestamp may be greater
+      //   than the aggregated data from the query_range
+      startDate =
+        roundTimestampToFiveMinutes(Math.min(incident.firstTimestamp, groupedData[i][0])) * 1000;
+    } else {
+      // For subsequent bars, only calculate startDate for non-nodata intervals
+      // (nodata intervals don't need accurate startDate for tooltip display)
+      if (!isNodata) {
+        if (prev) {
+          // Calculate absolute start by:
+          // Previous bar's absolute start + duration of previous bar + gap to current bar
+          // This maintains continuity in the absolute timeline
+          const prevBarDuration = prev.y.getTime() - prev.startDate.getTime();
+          const gapToCurrent = groupedData[i][0] * 1000 - prev.y.getTime();
+          startDate = prev.startDate.getTime() + prevBarDuration + gapToCurrent;
+        } else {
+          // If prev is null (e.g., first interval was 'nodata'), fall back to incident.firstTimestamp or first groupedData
+          // This ensures we always have a valid absolute start time
+          startDate = roundTimestampToFiveMinutes(Math.min(incident.firstTimestamp, groupedData[i][0])) * 1000;
+        }
+      } else {
+        // For 'nodata' intervals, we can use the interval start timestamp
+        // This is mainly for consistency, but won't be displayed in tooltips
+        startDate = groupedData[i][0] * 1000;
+      }
+    }
 
     data.push({
       y0: new Date(groupedData[i][0] * 1000),
@@ -359,14 +384,17 @@ export const createIncidentsChartBars = (incident: Incident, dateArray: SpanDate
       componentList: incident.componentList || [],
       group_id: incident.group_id,
       nodata: groupedData[i][2] === 'nodata' ? true : false,
-      startDate: new Date(startDate * 1000),
+      startDate: new Date(startDate),
       fill:
         severity === 'Critical'
           ? barChartColorScheme.critical
           : severity === 'Warning'
           ? barChartColorScheme.warning
           : barChartColorScheme.info,
     });
+    if (!isNodata) {
+      prev = data[i];
+    }
   }
 
   return data;
@@ -415,15 +443,26 @@ export const createAlertsChartBars = (alert: IncidentsDetailsAlert): AlertsChart
 
   const data = [];
 
-  for (let i = 0; i < groupedData.length; i++) {
+  let idx = alert.firstTimestamps.length - 1;
+  for (let i = groupedData.length - 1; i >= 0; i--) {
     const isLastElement = i === groupedData.length - 1;
-
-    // to avoid certain edge cases the startDate should
-    // be the minimum between alert.firstTimestamp and groupedData[i][0]
-    // Round the result since groupedData comes from raw time series values
-    const startDate = roundTimestampToFiveMinutes(
-      Math.min(alert.firstTimestamp, groupedData[i][0]),
-    );
+    const isNodata = groupedData[i][2] === 'nodata';
+
+    let startDate = 0;
+    if (i === 0) {
+      // For the first bar, use the minimum of alert's first timestamp and the first interval start
+      // This handles the case when the alert was created within 5 minutes
+      startDate = roundTimestampToFiveMinutes(
+        Math.min(parseInt(alert.firstTimestamps[idx][1]), groupedData[i][0]),
+      );
+      idx--;
+    } else {
+      if (!isNodata && idx >= 0) {
+        startDate = roundTimestampToFiveMinutes(parseInt(alert.firstTimestamps[idx][1]));
+        idx--;
+      }
+      // Note: If isNodata, startDate remains 0 (not used in tooltips for nodata intervals)
+    }
 
     data.push({
       y0: new Date(groupedData[i][0] * 1000),