feat(alerts): scroll Slack alert links to the firing tile

.changeset/quick-poems-flash.md

@@ -0,0 +1,6 @@
+---
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+feat(alerts): include tileId in Slack alert URLs

packages/api/src/tasks/checkAlerts/__tests__/checkAlerts.test.ts

@@ -1232,7 +1232,7 @@ describe('checkAlerts', () => {
       expect(
         buildAlertMessageTemplateHdxLink(alertProvider, defaultChartView),
       ).toMatchInlineSnapshot(
-        `"http://app:8080/dashboards/id-123?from=1679089083103&granularity=5+minute&to=1679093339103"`,
+        `"http://app:8080/dashboards/id-123?from=1679089083103&granularity=5+minute&to=1679093339103&highlightedTileId=test-tile-id"`,
       );
     });
 
@@ -2573,7 +2573,7 @@ describe('checkAlerts', () => {
             {
               text: {
                 text: [
-                  `*<http://app:8080/dashboards/${dashboard._id}?from=1700170200000&granularity=5+minute&to=1700174700000 | 🚨 Alert for "Logs Count" in "My Dashboard" - 3 meets or exceeds 1>*`,
+                  `*<http://app:8080/dashboards/${dashboard._id}?from=1700170200000&granularity=5+minute&to=1700174700000&highlightedTileId=17quud | 🚨 Alert for "Logs Count" in "My Dashboard" - 3 meets or exceeds 1>*`,
                   '',
                   '3 meets or exceeds 1',
                   'Time Range (UTC): [Nov 16 10:05:00 PM - Nov 16 10:10:00 PM)',
@@ -3540,7 +3540,7 @@ describe('checkAlerts', () => {
       expect(fetchMock).toHaveBeenCalledWith('https://webhook.site/123', {
         method: 'POST',
         body: JSON.stringify({
-          text: `http://app:8080/dashboards/${dashboard.id}?from=1700170200000&granularity=5+minute&to=1700174700000 | 🚨 Alert for "Logs Count" in "My Dashboard" - 3 meets or exceeds 1`,
+          text: `http://app:8080/dashboards/${dashboard.id}?from=1700170200000&granularity=5+minute&to=1700174700000&highlightedTileId=17quud | 🚨 Alert for "Logs Count" in "My Dashboard" - 3 meets or exceeds 1`,
         }),
         headers: {
           'Content-Type': 'application/json',
@@ -5340,7 +5340,7 @@ describe('checkAlerts', () => {
             {
               text: {
                 text: [
-                  `*<http://app:8080/dashboards/${dashboard._id}?from=1700170200000&granularity=5+minute&to=1700174700000 | 🚨 Alert for "CPU" in "My Dashboard" - 6 meets or exceeds 1>*`,
+                  `*<http://app:8080/dashboards/${dashboard._id}?from=1700170200000&granularity=5+minute&to=1700174700000&highlightedTileId=17quud | 🚨 Alert for "CPU" in "My Dashboard" - 6 meets or exceeds 1>*`,
                   '',
                   '6 meets or exceeds 1',
                   'Time Range (UTC): [Nov 16 10:05:00 PM - Nov 16 10:10:00 PM)',

packages/api/src/tasks/checkAlerts/providers/__tests__/default.test.ts

@@ -990,6 +990,44 @@ describe('DefaultAlertProvider', () => {
       expect(params.has('granularity')).toBe(true);
     });
 
+    it('should include highlightedTileId when tileId is provided', () => {
+      const result = provider.buildChartLink({
+        dashboardId: 'dashboard-123',
+        startTime: new Date('2023-03-17T22:13:03.103Z'),
+        endTime: new Date('2023-03-17T22:13:59.103Z'),
+        granularity: '5m',
+        tileId: 'tile-abc-789',
+      });
+
+      const url = new URL(result);
+      expect(url.searchParams.get('highlightedTileId')).toBe('tile-abc-789');
+    });
+
+    it('should omit highlightedTileId when tileId is undefined', () => {
+      const result = provider.buildChartLink({
+        dashboardId: 'dashboard-123',
+        startTime: new Date('2023-03-17T22:13:03.103Z'),
+        endTime: new Date('2023-03-17T22:13:59.103Z'),
+        granularity: '5m',
+      });
+
+      const url = new URL(result);
+      expect(url.searchParams.has('highlightedTileId')).toBe(false);
+    });
+
+    it('should omit highlightedTileId when tileId is an empty string', () => {
+      const result = provider.buildChartLink({
+        dashboardId: 'dashboard-123',
+        startTime: new Date('2023-03-17T22:13:03.103Z'),
+        endTime: new Date('2023-03-17T22:13:59.103Z'),
+        granularity: '5m',
+        tileId: '',
+      });
+
+      const url = new URL(result);
+      expect(url.searchParams.has('highlightedTileId')).toBe(false);
+    });
+
     it('should handle very close dates', () => {
       const startTime = new Date('2023-03-17T22:13:03.103Z');
       const endTime = new Date('2023-03-17T22:13:03.104Z'); // 1ms difference

packages/api/src/tasks/checkAlerts/providers/default.ts

@@ -318,11 +318,13 @@ export default class DefaultAlertProvider implements AlertProvider {
     endTime,
     granularity,
     startTime,
+    tileId,
   }: {
     dashboardId: string;
     endTime: Date;
     granularity: string;
     startTime: Date;
+    tileId?: string;
   }): string {
     const url = new URL(`${config.FRONTEND_URL}/dashboards/${dashboardId}`);
     // extend both start and end time by 7x granularity
@@ -333,6 +335,9 @@ export default class DefaultAlertProvider implements AlertProvider {
       granularity: convertMsToGranularityString(ms(granularity)),
       to,
     });
+    if (tileId) {
+      queryParams.set('highlightedTileId', tileId);
+    }
     url.search = queryParams.toString();
     return url.toString();
   }

packages/api/src/tasks/checkAlerts/providers/index.ts

@@ -73,6 +73,7 @@ export interface AlertProvider {
     endTime: Date;
     granularity: string;
     startTime: Date;
+    tileId?: string;
   }): string;
 
   /**

packages/api/src/tasks/checkAlerts/template.ts

@@ -388,6 +388,7 @@ export const buildAlertMessageTemplateHdxLink = (
       endTime,
       granularity,
       startTime,
+      tileId: alert.tileId,
     });
   }
 

packages/app/src/DBDashboardPage.tsx

@@ -1557,6 +1557,32 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     [setUrlActiveTabs],
   );
 
+  // When arriving via ?highlightedTileId, switch to the tile's tab if it
+  // isn't already active so the tile is in the DOM for the Tile-level
+  // scroll/highlight effect to take effect. Guard with a ref keyed on the
+  // highlighted id so a user manually switching tabs afterwards doesn't
+  // get reverted on the next render.
+  const handledHighlightRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!highlightedTileId || !dashboard) return;
+    if (handledHighlightRef.current === highlightedTileId) return;
+    handledHighlightRef.current = highlightedTileId;
+    const tile = dashboard.tiles.find(t => t.id === highlightedTileId);
+    if (!tile?.containerId || !tile.tabId) return;
+    const container = containers.find(c => c.id === tile.containerId);
+    if (!container || getActiveTabId(container) === tile.tabId) return;
+    setUrlActiveTabs(prev => ({
+      ...(prev ?? {}),
+      [container.id]: tile.tabId!,
+    }));
+  }, [
+    highlightedTileId,
+    dashboard,
+    containers,
+    getActiveTabId,
+    setUrlActiveTabs,
+  ]);
+
   // Valid move targets: groups and individual tabs within groups
   const moveTargetContainers = useMemo<MoveTarget[]>(() => {
     const targets: MoveTarget[] = [];