feat: fit the alerts timeline to the actual data timespan

Modified alerts timeline to automatically fit to actual alert data timespan instead of using fixed incidents timeline range, improving readability by focusing on relevant alert activity periods.

Assisted-by: Claude Code (claude-sonnet, claude-3-5-haiku)

Author: falox

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

@@ -26,9 +26,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setAlertsAreLoading } from '../../../actions/observe';
 import { MonitoringState } from '../../../reducers/observe';
 import { IncidentsTooltip } from '../IncidentsTooltip';
-import { createAlertsChartBars, formatDate, generateDateArray } from '../utils';
+import {
+  createAlertsChartBars,
+  formatDate,
+  generateDateArray,
+  generateAlertsDateArray,
+} from '../utils';
 
-const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' | 'dark' }) => {
+const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
   const [chartContainerHeight, setChartContainerHeight] = useState<number>();
   const [chartHeight, setChartHeight] = useState<number>();
@@ -45,12 +50,19 @@ const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' |
     state.plugins.mcp.getIn(['incidentsData', 'groupId']),
   );
 
-  const dateValues = useMemo(() => generateDateArray(chartDays), [chartDays]);
+  // Use dynamic date range based on actual alerts data instead of fixed chartDays
+  const dateValues = useMemo(() => {
+    if (!Array.isArray(alertsData) || alertsData.length === 0) {
+      // Fallback to single day if no alerts data
+      return generateDateArray(1);
+    }
+    return generateAlertsDateArray(alertsData);
+  }, [alertsData]);
 
   const chartData = useMemo(() => {
     if (!Array.isArray(alertsData) || alertsData.length === 0) return [];
-    return alertsData.map((alert) => createAlertsChartBars(alert, dateValues));
-  }, [alertsData, dateValues]);
+    return alertsData.map((alert) => createAlertsChartBars(alert));
+  }, [alertsData]);
 
   useEffect(() => {
     setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);

web/src/components/Incidents/IncidentsPage.tsx

@@ -515,7 +515,7 @@ const IncidentsPage = () => {
                     />
                   </StackItem>
                   <StackItem>
-                    <AlertsChart chartDays={timeRanges.length} theme={theme} />
+                    <AlertsChart theme={theme} />
                   </StackItem>
                 </>
               )}

web/src/components/Incidents/utils.ts

@@ -171,7 +171,7 @@ export const createIncidentsChartBars = (incident: Incident, dateArray: SpanDate
   return data;
 };
 
-function consolidateAndMergeAlertIntervals(data: Alert, dateArray: SpanDates) {
+function consolidateAndMergeAlertIntervals(data: Alert) {
   if (!data.values || data.values.length === 0) {
     return [];
   }
@@ -195,24 +195,15 @@ function consolidateAndMergeAlertIntervals(data: Alert, dateArray: SpanDates) {
 
   intervals.push([currentStart, sortedValues[sortedValues.length - 1][0], 'data']);
 
-  // Handle gaps before and after the detected intervals
-  const startBoundary = dateArray[0],
-    endBoundary = dateArray[dateArray.length - 1];
-  const firstIntervalStart = intervals[0][0],
-    lastIntervalEnd = intervals[intervals.length - 1][1];
-
-  if (firstIntervalStart > startBoundary) {
-    intervals.unshift([startBoundary, firstIntervalStart - 1, 'nodata']);
-  }
-  if (lastIntervalEnd < endBoundary) {
-    intervals.push([lastIntervalEnd + 1, endBoundary, 'nodata']);
-  }
+  // For dynamic alerts timeline, we don't add padding gaps since the dateArray
+  // is already calculated to fit the alert data with appropriate padding
+  // This allows the timeline to focus on the actual alert activity period
 
   return intervals;
 }
 
-export const createAlertsChartBars = (alert: Alert, dateValues: SpanDates) => {
-  const groupedData = consolidateAndMergeAlertIntervals(alert, dateValues);
+export const createAlertsChartBars = (alert: Alert) => {
+  const groupedData = consolidateAndMergeAlertIntervals(alert);
   const barChartColorScheme = {
     critical: t_global_color_status_danger_default.var,
     info: t_global_color_status_info_default.var,
@@ -298,6 +289,63 @@ export function generateDateArray(days: number): Array<number> {
   return dateArray;
 }
 
+/**
+ * Generates a dynamic date array based on the actual min/max timestamps from alerts data.
+ * This creates a focused timeline that spans only the relevant alert activity period.
+ *
+ * @param {Array<Alert>} alertsData - Array of alert objects containing timestamp values
+ * @returns {Array<number>} - Array of timestamp values representing the date range with some padding
+ *
+ * @example
+ * const alertsDateRange = generateAlertsDateArray(alertsData);
+ * // Returns timestamps spanning from earliest alert minus padding to latest alert plus padding
+ */
+export function generateAlertsDateArray(alertsData: Array<Alert>): Array<number> {
+  if (!Array.isArray(alertsData) || alertsData.length === 0) {
+    // Fallback to current day if no alerts data
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    return [now.getTime() / 1000];
+  }
+
+  let minTimestamp = Infinity;
+  let maxTimestamp = -Infinity;
+
+  // Find min and max timestamps across all alerts
+  alertsData.forEach((alert) => {
+    if (alert.values && Array.isArray(alert.values)) {
+      alert.values.forEach(([timestamp]) => {
+        minTimestamp = Math.min(minTimestamp, timestamp);
+        maxTimestamp = Math.max(maxTimestamp, timestamp);
+      });
+    }
+  });
+
+  // Handle edge case where no valid timestamps found
+  if (minTimestamp === Infinity || maxTimestamp === -Infinity) {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    return [now.getTime() / 1000];
+  }
+
+  // Add some padding to make the timeline more readable
+  // Padding: 10% of the time span, minimum 1 hour, maximum 24 hours
+  const timeSpan = maxTimestamp - minTimestamp;
+  const paddingSeconds = Math.max(3600, Math.min(86400, timeSpan * 0.1));
+
+  const paddedMin = minTimestamp - paddingSeconds;
+  const paddedMax = maxTimestamp + paddingSeconds;
+
+  // Generate array with exactly 2 timestamps: min (start) and max (end)
+  const dateArray: Array<number> = [];
+
+  // Always show exactly 2 ticks for clean X-axis: start and end only
+  dateArray.push(paddedMin); // Min date (start)
+  dateArray.push(paddedMax); // Max date (end)
+
+  return dateArray;
+}
+
 /**
  * Filters incidents based on the specified filters.
  *