feat: Broadcast adhoc filters to promql tiles

Author: pulpdrew

.changeset/adhoc-filter-broadcast.md

@@ -3,4 +3,4 @@
 '@hyperdx/app': patch
 ---
 
-feat: Apply adhoc dashboard filter conditions to builder and raw SQL tiles
+feat: Broadcast adhoc dashboard filter conditions

packages/app/src/DBDashboardPage.tsx

@@ -35,6 +35,10 @@ import {
   isTimeSeriesDisplayType,
 } from '@hyperdx/common-utils/dist/core/utils';
 import { getBlockingRequiredFilterNames } from '@hyperdx/common-utils/dist/dashboardFilterValues';
+import {
+  getPromqlFilters,
+  getSqlFilters,
+} from '@hyperdx/common-utils/dist/filters';
 import {
   displayTypeRequiresSource,
   isBuilderChartConfig,
@@ -51,12 +55,12 @@ import {
 import { isMissingFiltersMacro } from '@hyperdx/common-utils/dist/macros';
 import {
   AlertState,
+  BroadcastFilter,
   ChartConfigWithDateRange,
   ChartVariable,
   DashboardContainer as DashboardContainerSchema,
   DashboardFilter,
   DisplayType,
-  Filter,
   getSampleWeightExpression,
   isLogSource,
   isTraceSource,
@@ -471,7 +475,7 @@ const Tile = ({
   onSettled?: () => void;
   granularity: SQLInterval | undefined;
   onTimeRangeSelect: (start: Date, end: Date) => void;
-  filters?: Filter[];
+  filters?: BroadcastFilter[];
   variables?: ChartVariable[];
   /** The dashboard's required filters that have nothing selected. */
   unsatisfiedRequiredFilters?: DashboardFilter[];
@@ -654,6 +658,15 @@ const Tile = ({
     missingRequiredFilterNames.length > 0 &&
     displayTypeRequiresSource(chart.config.displayType);
 
+  const sqlFilters = useMemo(
+    () => (filters ? getSqlFilters(filters) : undefined),
+    [filters],
+  );
+  const promqlFilters = useMemo(
+    () => (filters ? getPromqlFilters(filters) : undefined),
+    [filters],
+  );
+
   useEffect(() => {
     if (isPromqlSavedChartConfig(chart.config)) {
       if (source != null) {
@@ -664,6 +677,7 @@ const Tile = ({
           dateRange,
           granularity,
           variables: tileVariables,
+          filters: promqlFilters,
         });
       }
       return;
@@ -676,7 +690,7 @@ const Tile = ({
           ...chart.config,
           dateRange,
           granularity,
-          filters,
+          filters: sqlFilters,
           variables: tileVariables,
         });
       } else if (source != null) {
@@ -695,7 +709,7 @@ const Tile = ({
           sampleWeightExpression: getSampleWeightExpression(source),
           dateRange,
           granularity,
-          filters,
+          filters: sqlFilters,
           variables: tileVariables,
         });
       }
@@ -736,13 +750,21 @@ const Tile = ({
             ? source.bodyExpression
             : undefined,
           sampleWeightExpression: getSampleWeightExpression(source),
-          filters,
+          filters: sqlFilters,
           variables: tileVariables,
           metricTables: isMetricSource ? source.metricTables : undefined,
         });
       }
     }
-  }, [source, chart, dateRange, granularity, filters, tileVariables]);
+  }, [
+    source,
+    chart,
+    dateRange,
+    granularity,
+    sqlFilters,
+    promqlFilters,
+    tileVariables,
+  ]);
 
   const [hovered, setHovered] = useState(false);
 
@@ -813,7 +835,7 @@ const Tile = ({
       where: builderConfig?.where,
       whereLanguage: builderConfig?.whereLanguage,
       select: builderConfig?.select,
-      filters,
+      filters: sqlFilters,
     },
   );
 
@@ -823,10 +845,10 @@ const Tile = ({
   );
 
   const filterWarning = useMemo(() => {
-    const doFiltersExist = !!filters?.filter(
+    const doFiltersExist = !!sqlFilters?.filter(
       f => (f.type === 'lucene' || f.type === 'sql') && f.condition.trim(),
     )?.length;
-    const doLuceneFiltersExist = !!filters?.filter(
+    const doLuceneFiltersExist = !!sqlFilters?.filter(
       f => f.type === 'lucene' && f.condition.trim(),
     )?.length;
 
@@ -862,7 +884,7 @@ const Tile = ({
         <IconZoomExclamation size={16} color="var(--color-text-danger)" />
       </Tooltip>
     );
-  }, [filters, queriedConfig, source]);
+  }, [sqlFilters, queriedConfig, source]);
 
   const replaySearchUrl = useMemo(() => {
     return buildDashboardReplaySearchUrl({
@@ -1656,7 +1678,7 @@ const EditTileModal = ({
   isSaving?: boolean;
   onSave: (chart: Tile) => void;
   variables?: ChartVariable[];
-  getDashboardFilters: (sourceId: string | undefined) => Filter[];
+  getDashboardFilters: (sourceId: string | undefined) => BroadcastFilter[];
   unsatisfiedRequiredFilters?: DashboardFilter[];
 }) => {
   const contextZIndex = useZIndex();
@@ -2435,7 +2457,7 @@ function DBDashboardPage({
   // `sourceId`. Shared with the tile editor so its preview queries what the
   // tile does.
   const getTileFilters = useCallback(
-    (sourceId: string | undefined): Filter[] => [
+    (sourceId: string | undefined): BroadcastFilter[] => [
       {
         type: whereLanguage === 'sql' ? 'sql' : 'lucene',
         condition: where,

packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx

@@ -22,11 +22,11 @@ import {
   isRawSqlSavedChartConfig,
 } from '@hyperdx/common-utils/dist/guards';
 import {
+  BroadcastFilter,
   ChartConfigWithDateRange,
   ChartVariable,
   DashboardFilter,
   DisplayType,
-  Filter,
   HeatmapMode,
   SavedChartConfig,
   SourceKind,
@@ -106,6 +106,7 @@ import {
   displayTypeToActiveTab,
   resolveTilePreviewFilters,
   TABS_WITH_GENERATED_SQL,
+  withBroadcastFilters,
   zSavedChartConfig,
 } from './utils';
 
@@ -115,7 +116,7 @@ type EditTimeChartFormProps = {
   /** Variables and their selected values, from the parent dashboard (if one exists). */
   variables?: ChartVariable[];
   /** Function returning the dashboard's broadcast filters for the given source, if any. */
-  getDashboardFilters?: (sourceId: string | undefined) => Filter[];
+  getDashboardFilters?: (sourceId: string | undefined) => BroadcastFilter[];
   /** The dashboard's required filters that have nothing selected, if any */
   unsatisfiedRequiredFilters?: DashboardFilter[];
   displayedTimeInputValue?: string;
@@ -524,8 +525,7 @@ export default function EditTimeChartForm({
       return queriedConfig;
     }
     return {
-      ...queriedConfig,
-      filters: previewDashboardFilters?.filters,
+      ...withBroadcastFilters(queriedConfig, previewDashboardFilters?.filters),
       variables: previewDashboardFilters?.variables,
     };
   }, [queriedConfig, previewDashboardFilters]);

packages/app/src/components/DBEditTimeChartForm/__tests__/utils.test.ts

@@ -3,7 +3,9 @@ import {
   ChartVariable,
   DashboardFilter,
   DisplayType,
+  Filter,
   PromqlExpressionList,
+  PromqlFilter,
   SavedChartConfig,
   SourceKind,
   TSource,
@@ -23,6 +25,7 @@ import {
   seriesToFilters,
   tabQueriesData,
   TABS_WITH_GENERATED_SQL,
+  withBroadcastFilters,
 } from '@/components/DBEditTimeChartForm/utils';
 
 // ---------------------------------------------------------------------------
@@ -639,6 +642,7 @@ describe('resolveTilePreviewFilters', () => {
     { type: 'sql' as const, condition: "ServiceName IN ('api')" },
   ];
   const variables = [{ name: 'service', values: ['api'] }];
+  const promqlFilter: PromqlFilter = { type: 'promql', condition: 'job="api"' };
 
   const promqlConfig: ChartConfigWithDateRange = {
     configType: 'promql',
@@ -696,8 +700,30 @@ describe('resolveTilePreviewFilters', () => {
     });
   });
 
-  it('never hands filters to a PromQL tile', () => {
-    expect(resolve({ config: promqlConfig }).filters).toBeUndefined();
+  it('never hands SQL filters to a PromQL tile', () => {
+    expect(resolve({ config: promqlConfig }).filters).toEqual([]);
+  });
+
+  it('hands each tile the filters in its own query language', () => {
+    const filters = [...dashboardFilters, promqlFilter];
+
+    expect(resolve({ config: promqlConfig, filters }).filters).toEqual([
+      promqlFilter,
+    ]);
+    expect(resolve({ filters }).filters).toEqual(dashboardFilters);
+    expect(
+      resolve({ config: rawSqlWithFiltersMacro, filters }).filters,
+    ).toEqual(dashboardFilters);
+  });
+
+  it('drops PromQL filters when turned off', () => {
+    expect(
+      resolve({
+        config: promqlConfig,
+        filters: [promqlFilter],
+        applySelections: false,
+      }).filters,
+    ).toBeUndefined();
   });
 
   it('drops the filters a raw-SQL template would not apply', () => {
@@ -761,6 +787,29 @@ describe('resolveTilePreviewFilters', () => {
   });
 });
 
+describe('withBroadcastFilters', () => {
+  const sqlFilter: Filter = { type: 'sql', condition: "ServiceName = 'api'" };
+  const promqlFilter: PromqlFilter = { type: 'promql', condition: 'job="api"' };
+  const promqlConfig: ChartConfigWithDateRange = {
+    configType: 'promql',
+    promqlExpression: 'up',
+    connection: 'local',
+    dateRange,
+  };
+
+  it('attaches only PromQL filters to a PromQL config', () => {
+    expect(
+      withBroadcastFilters(promqlConfig, [sqlFilter, promqlFilter]),
+    ).toMatchObject({ filters: [promqlFilter] });
+  });
+
+  it('attaches only SQL and Lucene filters to other configs', () => {
+    expect(
+      withBroadcastFilters(builderConfig, [sqlFilter, promqlFilter]),
+    ).toMatchObject({ filters: [sqlFilter] });
+  });
+});
+
 // ---------------------------------------------------------------------------
 // buildSampleEventsConfig
 // ---------------------------------------------------------------------------

packages/app/src/components/DBEditTimeChartForm/utils.ts

@@ -12,6 +12,10 @@ import {
   configConsumesBroadcastFilters,
   getBlockingRequiredFilterNames,
 } from '@hyperdx/common-utils/dist/dashboardFilterValues';
+import {
+  getPromqlFilters,
+  getSqlFilters,
+} from '@hyperdx/common-utils/dist/filters';
 import {
   isBuilderChartConfig,
   isPromqlChartConfig,
@@ -20,6 +24,7 @@ import {
 } from '@hyperdx/common-utils/dist/guards';
 import { substitutePromqlChartConfigTemplates } from '@hyperdx/common-utils/dist/macros';
 import {
+  BroadcastFilter,
   BuilderChartConfigWithDateRange,
   ChartAlertBaseSchema,
   ChartConfigWithDateRange,
@@ -201,8 +206,8 @@ export function resolvePreviewVariables({
 
 /** What the dashboard's filter state contributes to a tile preview. */
 export type TilePreviewFilters = {
-  /** Broadcast filter conditions to query the preview with. */
-  filters: Filter[] | undefined;
+  /** Broadcast filter conditions to query the preview with, in its query language. */
+  filters: BroadcastFilter[] | undefined;
   /** The referenced variables, with or without their selections. */
   variables: ChartVariable[] | undefined;
   /** Names of the required filters that have nothing selected. */
@@ -225,7 +230,7 @@ export function resolveTilePreviewFilters({
 }: {
   config: ChartConfigWithDateRange;
   sourceId: string | undefined;
-  filters: Filter[] | undefined;
+  filters: BroadcastFilter[] | undefined;
   variables: ChartVariable[] | undefined;
   unsatisfiedRequiredFilters: DashboardFilter[] | undefined;
   applySelections: boolean;
@@ -244,13 +249,16 @@ export function resolveTilePreviewFilters({
     };
   }
 
-  const consumesBroadcastFilters = configConsumesBroadcastFilters(
-    config,
-    sourceId,
-  );
+  // PromQL tiles take only PromQL conditions; `configConsumesBroadcastFilters`
+  // stays false for them so that required SQL filters don't block them.
+  const previewFilters = isPromqlChartConfig(config)
+    ? filters && getPromqlFilters(filters)
+    : configConsumesBroadcastFilters(config, sourceId) && filters
+      ? getSqlFilters(filters)
+      : undefined;
 
   return {
-    filters: consumesBroadcastFilters ? filters : undefined,
+    filters: previewFilters,
     variables: previewVariables,
     missingRequiredFilterNames: getBlockingRequiredFilterNames({
       config,
@@ -261,6 +269,17 @@ export function resolveTilePreviewFilters({
   };
 }
 
+/** The config with the broadcast filters in its own query language attached. */
+export function withBroadcastFilters(
+  config: ChartConfigWithDateRange,
+  filters: BroadcastFilter[] | undefined,
+): ChartConfigWithDateRange {
+  if (isPromqlChartConfig(config)) {
+    return { ...config, filters: filters && getPromqlFilters(filters) };
+  }
+  return { ...config, filters: filters && getSqlFilters(filters) };
+}
+
 /** One expression as a PromQL tile queries it. */
 type RenderedPromqlEntry = {
   id: string;