feat: UI for adding alerts for dashboard tiles (#562)

![Screenshot 2025-01-20 at 3 34 13 PM](https://github.com/user-attachments/assets/bebdd2f4-48f8-46a7-9a52-3617ad26fce9)


Co-authored-by: Warren <[email protected]>

Author: ernestii

.changeset/sharp-worms-impress.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/common-utils': patch
+---
+
+refactor: Extract alert configuration schema into AlertBaseSchema

packages/api/src/controllers/alerts.ts

@@ -1,4 +1,5 @@
 import { sign, verify } from 'jsonwebtoken';
+import { groupBy } from 'lodash';
 import ms from 'ms';
 import { z } from 'zod';
 
@@ -122,6 +123,59 @@ export const getAlertById = async (
   });
 };
 
+export const getTeamDashboardAlertsByTile = async (teamId: ObjectId) => {
+  const alerts = await Alert.find({
+    source: AlertSource.TILE,
+    team: teamId,
+  });
+  return groupBy(alerts, 'tileId');
+};
+
+export const getDashboardAlertsByTile = async (
+  teamId: ObjectId,
+  dashboardId: ObjectId | string,
+) => {
+  const alerts = await Alert.find({
+    dashboard: dashboardId,
+    source: AlertSource.TILE,
+    team: teamId,
+  });
+  return groupBy(alerts, 'tileId');
+};
+
+export const createOrUpdateDashboardAlerts = async (
+  dashboardId: ObjectId | string,
+  teamId: ObjectId,
+  alertsByTile: Record<string, AlertInput>,
+) => {
+  return Promise.all(
+    Object.entries(alertsByTile).map(async ([tileId, alert]) => {
+      return await Alert.findOneAndUpdate(
+        {
+          dashboard: dashboardId,
+          tileId,
+          source: AlertSource.TILE,
+          team: teamId,
+        },
+        alert,
+        { new: true, upsert: true },
+      );
+    }),
+  );
+};
+
+export const deleteDashboardAlerts = async (
+  dashboardId: ObjectId | string,
+  teamId: ObjectId,
+  alertIds?: string[],
+) => {
+  return Alert.deleteMany({
+    dashboard: dashboardId,
+    team: teamId,
+    ...(alertIds && { _id: { $in: alertIds } }),
+  });
+};
+
 export const getAlertsEnhanced = async (teamId: ObjectId) => {
   return Alert.find({ team: teamId }).populate<{
     savedSearch: ISavedSearch;

packages/api/src/controllers/dashboard.ts

@@ -2,26 +2,59 @@ import {
   DashboardWithoutIdSchema,
   Tile,
 } from '@hyperdx/common-utils/dist/types';
-import { differenceBy, uniq } from 'lodash';
+import { uniq } from 'lodash';
 import { z } from 'zod';
 
+import {
+  createOrUpdateDashboardAlerts,
+  deleteDashboardAlerts,
+  getDashboardAlertsByTile,
+  getTeamDashboardAlertsByTile,
+} from '@/controllers/alerts';
 import type { ObjectId } from '@/models';
-import Alert from '@/models/alert';
 import Dashboard from '@/models/dashboard';
-import { tagsSchema } from '@/utils/zod';
+
+function pickAlertsByTile(tiles: Tile[]) {
+  return tiles.reduce((acc, tile) => {
+    if (tile.config.alert) {
+      acc[tile.id] = tile.config.alert;
+    }
+    return acc;
+  }, {});
+}
 
 export async function getDashboards(teamId: ObjectId) {
-  const dashboards = await Dashboard.find({
-    team: teamId,
-  });
+  const [_dashboards, alerts] = await Promise.all([
+    Dashboard.find({ team: teamId }),
+    getTeamDashboardAlertsByTile(teamId),
+  ]);
+
+  const dashboards = _dashboards
+    .map(d => d.toJSON())
+    .map(d => ({
+      ...d,
+      tiles: d.tiles.map(t => ({
+        ...t,
+        config: { ...t.config, alert: alerts[t.id]?.[0] },
+      })),
+    }));
+
   return dashboards;
 }
 
 export async function getDashboard(dashboardId: string, teamId: ObjectId) {
-  return Dashboard.findOne({
-    _id: dashboardId,
-    team: teamId,
-  });
+  const [_dashboard, alerts] = await Promise.all([
+    Dashboard.findOne({ _id: dashboardId, team: teamId }),
+    getDashboardAlertsByTile(teamId, dashboardId),
+  ]);
+
+  return {
+    ..._dashboard,
+    tiles: _dashboard?.tiles.map(t => ({
+      ...t,
+      config: { ...t.config, alert: alerts[t.id]?.[0] },
+    })),
+  };
 }
 
 export async function createDashboard(
@@ -32,60 +65,33 @@ export async function createDashboard(
     ...dashboard,
     team: teamId,
   }).save();
+
+  await createOrUpdateDashboardAlerts(
+    newDashboard._id,
+    teamId,
+    pickAlertsByTile(dashboard.tiles),
+  );
+
   return newDashboard;
 }
 
-export async function deleteDashboardAndAlerts(
-  dashboardId: string,
-  teamId: ObjectId,
-) {
+export async function deleteDashboard(dashboardId: string, teamId: ObjectId) {
   const dashboard = await Dashboard.findOneAndDelete({
     _id: dashboardId,
     team: teamId,
   });
   if (dashboard) {
-    await Alert.deleteMany({ dashboard: dashboard._id });
+    await deleteDashboardAlerts(dashboardId, teamId);
   }
 }
 
 export async function updateDashboard(
   dashboardId: string,
   teamId: ObjectId,
-  {
-    name,
-    tiles,
-    tags,
-  }: {
-    name: string;
-    tiles: Tile[];
-    tags: z.infer<typeof tagsSchema>;
-  },
+  updates: Partial<z.infer<typeof DashboardWithoutIdSchema>>,
 ) {
-  const updatedDashboard = await Dashboard.findOneAndUpdate(
-    {
-      _id: dashboardId,
-      team: teamId,
-    },
-    {
-      name,
-      tiles,
-      tags: tags && uniq(tags),
-    },
-    { new: true },
-  );
+  const oldDashboard = await getDashboard(dashboardId, teamId);
 
-  return updatedDashboard;
-}
-
-export async function updateDashboardAndAlerts(
-  dashboardId: string,
-  teamId: ObjectId,
-  dashboard: z.infer<typeof DashboardWithoutIdSchema>,
-) {
-  const oldDashboard = await Dashboard.findOne({
-    _id: dashboardId,
-    team: teamId,
-  });
   if (oldDashboard == null) {
     throw new Error('Dashboard not found');
   }
@@ -96,27 +102,42 @@ export async function updateDashboardAndAlerts(
       team: teamId,
     },
     {
-      ...dashboard,
-      tags: dashboard.tags && uniq(dashboard.tags),
+      ...updates,
+      tags: updates.tags && uniq(updates.tags),
     },
     { new: true },
   );
   if (updatedDashboard == null) {
     throw new Error('Could not update dashboard');
   }
 
-  // Delete related alerts
-  const deletedTileIds = differenceBy(
-    oldDashboard?.tiles || [],
-    updatedDashboard?.tiles || [],
-    'id',
-  ).map(c => c.id);
-
-  if (deletedTileIds?.length > 0) {
-    await Alert.deleteMany({
-      dashboard: dashboardId,
-      tileId: { $in: deletedTileIds },
-    });
+  // Update related alerts
+  // - Delete
+  const newAlertIds = new Set(
+    updates.tiles?.map(t => t.config.alert?.id).filter(Boolean),
+  );
+  const deletedAlertIds: string[] = [];
+
+  if (oldDashboard.tiles) {
+    for (const tile of oldDashboard.tiles) {
+      const alertId = tile.config.alert?.id;
+      if (alertId && !newAlertIds.has(alertId)) {
+        deletedAlertIds.push(alertId);
+      }
+    }
+
+    if (deletedAlertIds.length > 0) {
+      await deleteDashboardAlerts(dashboardId, teamId, deletedAlertIds);
+    }
+  }
+
+  // - Update / Create
+  if (updates.tiles) {
+    await createOrUpdateDashboardAlerts(
+      dashboardId,
+      teamId,
+      pickAlertsByTile(updates.tiles),
+    );
   }
 
   return updatedDashboard;

packages/api/src/fixtures.ts

@@ -302,16 +302,22 @@ export function buildMetricSeries({
 export const randomMongoId = () =>
   Math.floor(Math.random() * 1000000000000).toString();
 
-export const makeTile = (opts?: { id?: string }): Tile => ({
+export const makeTile = (opts?: {
+  id?: string;
+  alert?: SavedChartConfig['alert'];
+}): Tile => ({
   id: opts?.id ?? randomMongoId(),
   x: 1,
   y: 1,
   w: 1,
   h: 1,
-  config: makeChartConfig(),
+  config: makeChartConfig(opts),
 });
 
-export const makeChartConfig = (opts?: { id?: string }): SavedChartConfig => ({
+export const makeChartConfig = (opts?: {
+  id?: string;
+  alert?: SavedChartConfig['alert'];
+}): SavedChartConfig => ({
   name: 'Test Chart',
   source: 'test-source',
   displayType: DisplayType.Line,
@@ -331,6 +337,7 @@ export const makeChartConfig = (opts?: { id?: string }): SavedChartConfig => ({
     output: 'number',
   },
   filters: [],
+  alert: opts?.alert,
 });
 
 // TODO: DEPRECATED