feat: fix misaligned start dates by always loading 15 days

Author: rioloc

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

@@ -32,6 +32,7 @@ import {
   generateDateArray,
   generateAlertsDateArray,
   getCurrentTime,
+  isInTimeWindow,
 } from '../utils';
 import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
 import { useTranslation } from 'react-i18next';
@@ -41,7 +42,7 @@ import { MonitoringState } from '../../../store/store';
 import { isEmpty } from 'lodash-es';
 import { DataTestIDs } from '../../data-test';
 
-const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
+const AlertsChart = ({ theme, daysSpan }: { theme: 'light' | 'dark'; daysSpan: number }) => {
   const dispatch = useDispatch();
   const [chartContainerHeight, setChartContainerHeight] = useState<number>();
   const [chartHeight, setChartHeight] = useState<number>();
@@ -72,8 +73,13 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
 
   const chartData: AlertsChartBar[][] = useMemo(() => {
     if (!Array.isArray(alertsData) || alertsData.length === 0) return [];
-    return alertsData.map((alert) => createAlertsChartBars(alert));
-  }, [alertsData]);
+    return alertsData
+      .filter((alert) => {
+        const lastTimestamp = alert.values[alert.values.length - 1][0];
+        return isInTimeWindow(lastTimestamp, daysSpan, currentTime);
+      })
+      .map((alert) => createAlertsChartBars(alert));
+  }, [alertsData, currentTime, daysSpan]);
 
   useEffect(() => {
     setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 55);

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

@@ -33,6 +33,7 @@ import {
   calculateIncidentsChartDomain,
   createIncidentsChartBars,
   generateDateArray,
+  isInTimeWindow,
 } from '../utils';
 import { dateTimeFormatter, timeFormatter } from '../../console/utils/datetime';
 import { useTranslation } from 'react-i18next';
@@ -84,10 +85,15 @@ const IncidentsChart = ({
   const chartData = useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
 
-    const filteredIncidents = selectedGroupId
+    const groupFilteredIncidents = selectedGroupId
       ? incidentsData.filter((incident) => incident.group_id === selectedGroupId)
       : incidentsData;
 
+    const filteredIncidents = groupFilteredIncidents.filter((incident) => {
+      const lastTimestamp = incident.values[incident.values.length - 1][0];
+      return isInTimeWindow(lastTimestamp, chartDays * (60 * 60 * 24 * 1000), currentTime);
+    });
+
     // Create chart bars and sort by original x values to maintain proper order
     const chartBars = filteredIncidents.map((incident) =>
       createIncidentsChartBars(incident, dateValues),
@@ -96,7 +102,7 @@ const IncidentsChart = ({
 
     // Reassign consecutive x values to eliminate gaps between bars
     return chartBars.map((bars, index) => bars.map((bar) => ({ ...bar, x: index + 1 })));
-  }, [incidentsData, dateValues, selectedGroupId]);
+  }, [incidentsData, dateValues, selectedGroupId, currentTime, chartDays]);
 
   useEffect(() => {
     setIsLoading(false);

web/src/components/Incidents/IncidentsPage.tsx

@@ -265,7 +265,12 @@ const IncidentsPage = () => {
     if (rules && alertsData) {
       dispatch(
         setAlertsTableData({
-          alertsTableData: groupAlertsForTable(alertsData, rules),
+          alertsTableData: groupAlertsForTable(
+            alertsData,
+            rules,
+            incidentsLastRefreshTime,
+            daysSpan,
+          ),
         }),
       );
     }
@@ -604,7 +609,7 @@ const IncidentsPage = () => {
                 <StackItem>
                   <IncidentsChart
                     incidentsData={filteredData}
-                    chartDays={timeRanges.length}
+                    chartDays={daysSpan / (60 * 60 * 24 * 1000)} // Convert ms to days
                     theme={theme}
                     selectedGroupId={selectedGroupId}
                     onIncidentClick={handleIncidentChartClick}
@@ -613,7 +618,7 @@ const IncidentsPage = () => {
                   />
                 </StackItem>
                 <StackItem>
-                  <AlertsChart theme={theme} />
+                  <AlertsChart theme={theme} daysSpan={daysSpan} />
                 </StackItem>
               </>
             )}

web/src/components/Incidents/processAlerts.ts

@@ -290,8 +290,19 @@ export function convertToAlerts(
 export const groupAlertsForTable = (
   alerts: Array<Alert>,
   alertingRulesData: Array<PrometheusRule>,
+  currentTime: number,
+  daysSpan: number,
 ): Array<GroupedAlert> => {
-  const groupedAlerts = alerts.reduce((acc: Array<GroupedAlert>, alert) => {
+  const filteredAlerts = alerts.filter((alert) => {
+    const endTime = alert.values[alert.values.length - 1][0];
+    const delta = (currentTime - daysSpan) / 1000;
+    if (endTime < delta) {
+      return false;
+    }
+    return true;
+  });
+
+  const groupedAlerts = filteredAlerts.reduce((acc: Array<GroupedAlert>, alert) => {
     const { component, alertstate, severity, layer, alertname, silenced } = alert;
     const existingGroup = acc.find((group) => group.component === component);
     const rule = alertingRulesData?.find((rule) => alertname === rule.name);

web/src/components/Incidents/utils.ts

@@ -72,6 +72,24 @@ export const isResolved = (lastTimestamp: number, currentTime: number): boolean
   return delta >= threshold;
 };
 
+/**
+ * Checks if the last timestamp is in the time window.
+ * @param lastTimestamp - The last timestamp in the incident/alert (in seconds)
+ * @param daysSpan - The number of days in the time window (in milliseconds).
+ * @param currentTime - The current time in milliseconds.
+ * @returns true if the last timestamp is in the time window, false otherwise.
+ */
+export const isInTimeWindow = (
+  lastTimestamp: number,
+  daysSpan: number,
+  currentTime: number,
+): boolean => {
+  // convert chartDays to ms and then convert the result to seconds
+  const timeWindow = (currentTime - daysSpan) / 1000;
+  // if endTime is lower than currentTime-chartDays, return false else true
+  return lastTimestamp >= timeWindow;
+};
+
 /**
  * Inserts padding data points to ensure the chart renders correctly.
  * This allows the chart to properly render events, especially single data points.