fix: Allow aliases in alert chart preview (#816)

![Screenshot 2025-05-14 at 11 34 08 PM](https://github.com/user-attachments/assets/7d64592f-23df-490e-b816-201ceb7d4dd4)

Author: ernestii

packages/app/src/DBSearchPageAlertModal.tsx

@@ -63,6 +63,7 @@ const AlertForm = ({
   sourceId,
   where,
   whereLanguage,
+  select,
   defaultValues,
   loading,
   deleteLoading,
@@ -74,6 +75,7 @@ const AlertForm = ({
   sourceId?: string | null;
   where?: SearchCondition | null;
   whereLanguage?: SearchConditionLanguage | null;
+  select?: string | null;
   defaultValues?: null | Alert;
   loading?: boolean;
   deleteLoading?: boolean;
@@ -167,15 +169,18 @@ const AlertForm = ({
             <Text size="sm">Threshold chart</Text>
           </Accordion.Control>
           <Accordion.Panel>
-            <AlertPreviewChart
-              sourceId={sourceId}
-              where={where}
-              whereLanguage={whereLanguage}
-              interval={watch('interval')}
-              groupBy={watch('groupBy')}
-              threshold={watch('threshold')}
-              thresholdType={watch('thresholdType')}
-            />
+            {source && (
+              <AlertPreviewChart
+                source={source}
+                where={where}
+                whereLanguage={whereLanguage}
+                select={select}
+                interval={watch('interval')}
+                groupBy={watch('groupBy')}
+                threshold={watch('threshold')}
+                thresholdType={watch('thresholdType')}
+              />
+            )}
           </Accordion.Panel>
         </Accordion.Item>
       </Accordion>
@@ -397,6 +402,7 @@ export const DBSearchPageAlertModal = ({
           sourceId={searchedConfig?.source}
           where={searchedConfig?.where}
           whereLanguage={searchedConfig?.whereLanguage}
+          select={searchedConfig?.select}
           defaultValues={
             activeIndex === 'stage'
               ? null

packages/app/src/components/AlertPreviewChart.tsx

@@ -4,43 +4,56 @@ import {
   SearchCondition,
   SearchConditionLanguage,
 } from '@hyperdx/common-utils/dist/types';
+import { TSource } from '@hyperdx/common-utils/dist/types';
 import { Paper } from '@mantine/core';
 
 import { DBTimeChart } from '@/components/DBTimeChart';
-import { useSource } from '@/source';
+import { useAliasMapFromChartConfig } from '@/hooks/useChartConfig';
 import { intervalToDateRange, intervalToGranularity } from '@/utils/alerts';
 
 import { getAlertReferenceLines } from './Alerts';
 
 export type AlertPreviewChartProps = {
-  sourceId?: string | null;
+  source: TSource;
   where?: SearchCondition | null;
   whereLanguage?: SearchConditionLanguage | null;
   interval: AlertInterval;
   groupBy?: string;
   thresholdType: 'above' | 'below';
   threshold: number;
+  select?: string | null;
 };
 
 export const AlertPreviewChart = ({
-  sourceId,
+  source,
   where,
   whereLanguage,
   interval,
   groupBy,
   threshold,
   thresholdType,
+  select,
 }: AlertPreviewChartProps) => {
-  const { data: source } = useSource({ id: sourceId });
+  const { data: aliasMap } = useAliasMapFromChartConfig({
+    select: select || '',
+    where: where || '',
+    connection: source.connection,
+    from: source.from,
+  });
 
-  if (!sourceId || !source) {
-    return null;
-  }
+  const aliasWith = Object.entries(aliasMap ?? {}).map(([key, value]) => ({
+    name: key,
+    sql: {
+      sql: value,
+      params: {},
+    },
+    isSubquery: false,
+  }));
 
   return (
     <Paper w="100%" h={200}>
       <DBTimeChart
-        sourceId={sourceId}
+        sourceId={source.id}
         showDisplaySwitcher={false}
         referenceLines={getAlertReferenceLines({ threshold, thresholdType })}
         config={{
@@ -50,6 +63,7 @@ export const AlertPreviewChart = ({
           granularity: intervalToGranularity(interval),
           implicitColumnExpression: source.implicitColumnExpression,
           groupBy,
+          with: aliasWith,
           select: [
             {
               aggFn: 'count' as const,