[HDX-3969] Add alerts page (Shift+A) with overview and recent history (#2093)

Author: wrn14897

.changeset/add-alerts-page.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/cli": patch
+---
+
+Add alerts page (Shift+A) with overview and recent trigger history

packages/cli/AGENTS.md

@@ -43,6 +43,7 @@ src/
 │                        #   buildTraceLogsSql (waterfall correlated logs)
 │                        #   buildFullRowSql (SELECT * for row detail)
 ├── components/
+│   ├── AlertsPage.tsx   # Alerts overview page — list + detail with recent history (Shift+A)
 │   ├── EventViewer.tsx  # Main TUI view — table, search, detail panel with tabs
 │   ├── TraceWaterfall.tsx # Trace waterfall chart with j/k navigation + event details
 │   ├── RowOverview.tsx  # Structured overview (top-level attrs, event attrs, resource attrs)
@@ -156,6 +157,7 @@ Key expression mappings from the web frontend's `getConfig()`:
 | `t`           | Edit time range in $EDITOR                 |
 | `f`           | Toggle follow mode (live tail)             |
 | `w`           | Toggle line wrap                           |
+| `A` (Shift+A) | Open alerts page                           |
 | `?`           | Toggle help screen                         |
 | `q`           | Quit                                       |
 

packages/cli/src/App.tsx

@@ -9,12 +9,13 @@ import {
   type SourceResponse,
   type SavedSearchResponse,
 } from '@/api/client';
+import AlertsPage from '@/components/AlertsPage';
 import ErrorDisplay from '@/components/ErrorDisplay';
 import LoginForm from '@/components/LoginForm';
 import SourcePicker from '@/components/SourcePicker';
 import EventViewer from '@/components/EventViewer';
 
-type Screen = 'loading' | 'login' | 'pick-source' | 'events';
+type Screen = 'loading' | 'login' | 'pick-source' | 'events' | 'alerts';
 
 interface AppProps {
   apiUrl: string;
@@ -122,6 +123,18 @@ export default function App({ apiUrl, query, sourceName, follow }: AppProps) {
     [eventSources],
   );
 
+  // Track the screen before alerts so we can return to it
+  const [preAlertsScreen, setPreAlertsScreen] = useState<Screen>('events');
+
+  const handleOpenAlerts = useCallback(() => {
+    setPreAlertsScreen(screen);
+    setScreen('alerts');
+  }, [screen]);
+
+  const handleCloseAlerts = useCallback(() => {
+    setScreen(preAlertsScreen);
+  }, [preAlertsScreen]);
+
   if (error) {
     return (
       <Box paddingX={1}>
@@ -152,10 +165,17 @@ export default function App({ apiUrl, query, sourceName, follow }: AppProps) {
             </Text>
             <Text dimColor>Search and tail events from the terminal</Text>
           </Box>
-          <SourcePicker sources={eventSources} onSelect={handleSourceSelect} />
+          <SourcePicker
+            sources={eventSources}
+            onSelect={handleSourceSelect}
+            onOpenAlerts={handleOpenAlerts}
+          />
         </Box>
       );
 
+    case 'alerts':
+      return <AlertsPage client={client} onClose={handleCloseAlerts} />;
+
     case 'events':
       if (!selectedSource) return null;
       return (
@@ -166,6 +186,7 @@ export default function App({ apiUrl, query, sourceName, follow }: AppProps) {
           sources={eventSources}
           savedSearches={savedSearches}
           onSavedSearchSelect={handleSavedSearchSelect}
+          onOpenAlerts={handleOpenAlerts}
           initialQuery={activeQuery}
           follow={follow}
         />

packages/cli/src/api/client.ts

@@ -138,6 +138,12 @@ export class ApiClient {
     return res.json() as Promise<DashboardResponse[]>;
   }
 
+  async getAlerts(): Promise<AlertsResponse> {
+    const res = await this.get('/alerts');
+    if (!res.ok) throw new Error(`GET /alerts failed: ${res.status}`);
+    return res.json() as Promise<AlertsResponse>;
+  }
+
   // ---- ClickHouse client via proxy ---------------------------------
 
   createClickHouseClient(
@@ -379,3 +385,59 @@ interface DashboardResponse {
   createdAt?: string;
   updatedAt?: string;
 }
+
+// ---- Alerts --------------------------------------------------------
+
+export interface AlertHistoryItem {
+  counts: number;
+  createdAt: string;
+  lastValues: Array<{ startTime: string; count: number }>;
+  state: 'ALERT' | 'OK' | 'INSUFFICIENT_DATA' | 'DISABLED';
+}
+
+export interface AlertItem {
+  _id: string;
+  interval: string;
+  scheduleOffsetMinutes?: number;
+  scheduleStartAt?: string | null;
+  threshold: number;
+  thresholdType: 'above' | 'below';
+  channel: { type?: string | null };
+  state?: 'ALERT' | 'OK' | 'INSUFFICIENT_DATA' | 'DISABLED';
+  source?: 'saved_search' | 'tile';
+  dashboardId?: string;
+  savedSearchId?: string;
+  tileId?: string;
+  name?: string | null;
+  message?: string | null;
+  createdAt: string;
+  updatedAt: string;
+  history: AlertHistoryItem[];
+  dashboard?: {
+    _id: string;
+    name: string;
+    updatedAt: string;
+    tags: string[];
+    tiles: Array<{ id: string; config: { name?: string } }>;
+  };
+  savedSearch?: {
+    _id: string;
+    createdAt: string;
+    name: string;
+    updatedAt: string;
+    tags: string[];
+  };
+  createdBy?: {
+    email: string;
+    name?: string;
+  };
+  silenced?: {
+    by: string;
+    at: string;
+    until: string;
+  };
+}
+
+interface AlertsResponse {
+  data: AlertItem[];
+}