feat: edge case when 5m aggregated timestamp is greater than current datapoint

Author: rioloc

web/src/components/Incidents/utils.ts

@@ -319,6 +319,10 @@ export const createIncidentsChartBars = (incident: Incident, dateArray: SpanDate
     const severity = getSeverityName(groupedData[i][2]);
     const isLastElement = i === groupedData.length - 1;
 
+    // to avoid certain edge cases the startDate should
+    // be the minimum between alert.firstTimestamp and groupedData[i][0]
+    const startDate = Math.min(incident.firstTimestamp, groupedData[i][0]);
+
     data.push({
       y0: new Date(groupedData[i][0] * 1000),
       y: new Date(groupedData[i][1] * 1000),
@@ -328,7 +332,7 @@ 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(roundTimestampToFiveMinutes(incident.firstTimestamp) * 1000),
+      startDate: new Date(roundTimestampToFiveMinutes(startDate) * 1000),
       fill:
         severity === 'Critical'
           ? barChartColorScheme.critical
@@ -387,10 +391,14 @@ export const createAlertsChartBars = (alert: IncidentsDetailsAlert): AlertsChart
   for (let i = 0; i < groupedData.length; 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]
+    const startDate = Math.min(alert.firstTimestamp, groupedData[i][0]);
+
     data.push({
       y0: new Date(groupedData[i][0] * 1000),
       y: new Date(groupedData[i][1] * 1000),
-      startDate: new Date(roundTimestampToFiveMinutes(alert.firstTimestamp) * 1000),
+      startDate: new Date(roundTimestampToFiveMinutes(startDate) * 1000),
       x: alert.x,
       severity: alert.severity[0].toUpperCase() + alert.severity.slice(1),
       name: alert.alertname,