feat(Chart Alerts): Show alert state (#117)

![Screenshot 2023-11-20 at 6 07 32 PM](https://github.com/hyperdxio/hyperdx/assets/149748269/b9b3b2ff-21c5-4746-8790-46400fb2d021)

Pulse effect:

https://github.com/hyperdxio/hyperdx/assets/149748269/2908f086-4349-4cd1-839f-3921ed0391d2

.changeset/slimy-bananas-juggle.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Show chart alert state (OK and ALERT)

packages/app/src/DashboardPage.tsx

@@ -83,6 +83,7 @@ const Tile = forwardRef(
   (
     {
       chart,
+      alert,
       dateRange,
       onDuplicateClick,
       onEditClick,
@@ -91,7 +92,6 @@ const Tile = forwardRef(
       queued,
       onSettled,
       granularity,
-      hasAlert,
 
       // Properties forwarded by grid layout
       className,
@@ -102,6 +102,7 @@ const Tile = forwardRef(
       children,
     }: {
       chart: Chart;
+      alert?: Alert;
       dateRange: [Date, Date];
       onDuplicateClick: () => void;
       onEditClick: () => void;
@@ -110,7 +111,6 @@ const Tile = forwardRef(
       onSettled?: () => void;
       queued?: boolean;
       granularity: Granularity | undefined;
-      hasAlert?: boolean;
 
       // Properties forwarded by grid layout
       className?: string;
@@ -200,14 +200,22 @@ const Tile = forwardRef(
           <div className="fs-7 text-muted">{chart.name}</div>
           <i className="bi bi-grip-horizontal text-muted" />
           <div className="fs-7 text-muted d-flex gap-2 align-items-center">
-            {hasAlert && (
-              <div
-                className="rounded px-1 text-muted bg-grey opacity-90 cursor-default"
-                title="Has alert"
-              >
-                <span className="bi bi-bell" />
+            {alert && (
+              <div className="rounded px-1 text-muted bg-grey opacity-90 cursor-default">
+                {alert.state === 'ALERT' ? (
+                  <i
+                    className="bi bi-bell text-danger effect-pulse"
+                    title="Has alert and is in ALERT state"
+                  ></i>
+                ) : (
+                  <i
+                    className="bi bi-bell"
+                    title="Has alert and is in OK state"
+                  ></i>
+                )}
               </div>
             )}
+
             <Button
               variant="link"
               className="text-muted-hover p-0"
@@ -717,7 +725,7 @@ export default function DashboardPage() {
             dateRange={searchedTimeRange}
             onEditClick={() => setEditedChart(chart)}
             granularity={granularityQuery}
-            hasAlert={dashboard?.alerts?.some(a => a.chartId === chart.id)}
+            alert={dashboard?.alerts?.find(a => a.chartId === chart.id)}
             onDuplicateClick={async () => {
               if (dashboard != null) {
                 if (!(await confirm(`Duplicate ${chart.name}?`, 'Duplicate'))) {

packages/app/styles/app.scss

@@ -714,3 +714,19 @@ div.react-datepicker {
     );
   border-radius: 4px;
 }
+
+.effect-pulse {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.7;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}