add clickable alert timeline chips (#1394)

https://github.com/user-attachments/assets/02b1b518-e132-4560-9782-78d74326d0be

Fixes HDX-2674

Author: brandon-pereira

.changeset/proud-jobs-train.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Add clickable alert timeline chips

packages/app/src/AlertsPage.tsx

@@ -18,29 +18,68 @@ import type { AlertsPageItem } from './types';
 
 import styles from '../styles/AlertsPage.module.scss';
 
-function AlertHistoryCard({ history }: { history: AlertHistory }) {
+function AlertHistoryCard({
+  history,
+  alertUrl,
+}: {
+  history: AlertHistory;
+  alertUrl: string;
+}) {
   const start = new Date(history.createdAt.toString());
   const today = React.useMemo(() => new Date(), []);
 
+  const href = React.useMemo(() => {
+    if (!alertUrl || !history.lastValues?.[0]?.startTime) return null;
+
+    // Create time window from alert creation to last recorded value
+    const to = new Date(history.createdAt).getTime();
+    const from = new Date(history.lastValues[0].startTime).getTime();
+
+    // Construct URL with time range parameters
+    const url = new URL(alertUrl, window.location.origin);
+    url.searchParams.set('from', from.toString());
+    url.searchParams.set('to', to.toString());
+    url.searchParams.set('isLive', 'false');
+
+    return url.pathname + url.search;
+  }, [history, alertUrl]);
+
+  const content = (
+    <div
+      className={cx(
+        styles.historyCard,
+        history.state === AlertState.OK ? styles.ok : styles.alarm,
+        href && styles.clickable,
+      )}
+    />
+  );
+
   return (
     <Tooltip
       label={`${history.counts ?? 0} alerts ${formatRelative(start, today)}`}
       color="dark"
       withArrow
     >
-      <div
-        className={cx(
-          styles.historyCard,
-          history.state === AlertState.OK ? styles.ok : styles.alarm,
-        )}
-      />
+      {href ? (
+        <a href={href} className={styles.historyCardLink}>
+          {content}
+        </a>
+      ) : (
+        content
+      )}
     </Tooltip>
   );
 }
 
 const HISTORY_ITEMS = 18;
 
-function AlertHistoryCardList({ history }: { history: AlertHistory[] }) {
+function AlertHistoryCardList({
+  history,
+  alertUrl,
+}: {
+  history: AlertHistory[];
+  alertUrl: string;
+}) {
   const items = React.useMemo(() => {
     if (history.length < HISTORY_ITEMS) {
       return history;
@@ -66,7 +105,7 @@ function AlertHistoryCardList({ history }: { history: AlertHistory[] }) {
         .slice()
         .reverse()
         .map((history, index) => (
-          <AlertHistoryCard key={index} history={history} />
+          <AlertHistoryCard key={index} history={history} alertUrl={alertUrl} />
         ))}
     </div>
   );
@@ -192,7 +231,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
       </Group>
 
       <Group>
-        <AlertHistoryCardList history={alert.history} />
+        <AlertHistoryCardList history={alert.history} alertUrl={alertUrl} />
       </Group>
     </div>
   );

packages/app/styles/AlertsPage.module.scss

@@ -23,7 +23,7 @@
   background-color: var(--color-bg-muted);
   border-radius: 2px;
   margin: 0 1px;
-  cursor: pointer;
+  cursor: default;
   transition: opacity 0.1s ease-in;
 
   &:hover {
@@ -38,6 +38,10 @@
   &.alarm {
     background-color: var(--color-bg-danger);
   }
+
+  &.clickable {
+    cursor: pointer;
+  }
 }
 
 .alertRow {