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

Author: rioloc

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

@@ -34,11 +34,8 @@ import {
   createIncidentsChartBars,
   generateDateArray,
   matchTimestampMetricForIncident,
-<<<<<<< HEAD
   roundDateToInterval,
-=======
   roundTimestampToFiveMinutes,
->>>>>>> 55a5bc3 (feat: round absolute start dates to 5 minutes boundaries)
 } from '../utils';
 import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
 import { useTranslation } from 'react-i18next';

web/src/components/Incidents/utils.spec.ts

@@ -1,6 +1,7 @@
 import {
   getCurrentTime,
-  insertPaddingPointsForChart, roundDateToInterval,
+  insertPaddingPointsForChart,
+  roundDateToInterval,
   matchTimestampMetricForIncident,
   roundTimestampToFiveMinutes,
 } from './utils';

web/src/components/Incidents/utils.ts

@@ -339,6 +339,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),
@@ -348,7 +352,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
@@ -407,10 +411,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,