Alerting: Add filterVariant to tracking calls (#110609)

* add filterVariant to tracking calls

* update test to check correct variant

public/app/features/alerting/unified/Analytics.ts

@@ -299,21 +299,30 @@ export function trackFilterButtonClick() {
 
 export function trackAlertRuleFilterEvent(
   payload:
-    | { filterMethod: 'search-input'; filter: RulesFilter }
-    | { filterMethod: 'filter-component'; filter: keyof RulesFilter }
+    | { filterMethod: 'search-input'; filter: RulesFilter; filterVariant: 'v1' | 'v2' }
+    | { filterMethod: 'filter-component'; filter: keyof RulesFilter; filterVariant: 'v1' | 'v2' }
 ) {
+  const variant = payload.filterVariant;
   if (payload.filterMethod === 'search-input') {
     const meaningfulValues = filterMeaningfulValues(payload.filter);
-    reportInteraction('grafana_alerting_rules_filter', { ...meaningfulValues, filterMethod: 'search-input' });
+    reportInteraction('grafana_alerting_rules_filter', {
+      ...meaningfulValues,
+      filter_method: 'search-input',
+      filter_variant: variant,
+    });
     return;
   }
-  reportInteraction('grafana_alerting_rules_filter', { filter: payload.filter, filterMethod: 'filter-component' });
+  reportInteraction('grafana_alerting_rules_filter', {
+    filter: payload.filter,
+    filter_method: 'filter-component',
+    filter_variant: variant,
+  });
 }
 
 export function trackRulesSearchInputCleared(prev: string, next: string) {
   // Only report an explicit clear action when transitioning from non-empty to empty
   if (prev !== '' && next === '') {
-    reportInteraction('grafana_alerting_rules_filter_cleared', { filterMethod: 'search-input' });
+    reportInteraction('grafana_alerting_rules_filter_cleared', { filter_method: 'search-input' });
   }
 }
 
@@ -323,7 +332,8 @@ export function trackFilterButtonApplyClick(payload: AdvancedFilters, pluginsFil
 
   reportInteraction('grafana_alerting_rules_filter', {
     ...meaningfulValues,
-    filterMethod: 'filter-component',
+    filter_method: 'filter-component',
+    filter_variant: 'v2',
   });
 }
 
@@ -354,7 +364,9 @@ function filterMeaningfulValues(
 }
 
 export function trackFilterButtonClearClick() {
-  reportInteraction('grafana_alerting_rules_filter_cleared', { filterMethod: 'filter-component' });
+  reportInteraction('grafana_alerting_rules_filter_cleared', {
+    filter_method: 'filter-component',
+  });
 }
 
 export type AlertRuleTrackingProps = {

public/app/features/alerting/unified/components/rules/Filter/RulesFilter.v1.tsx

@@ -74,7 +74,7 @@ const RulesFilter = ({ onClear = () => undefined, viewMode, onViewModeChange }:
     });
 
     setFilterKey((key) => key + 1);
-    trackAlertRuleFilterEvent({ filterMethod: 'filter-component', filter: 'dataSourceNames' });
+    trackAlertRuleFilterEvent({ filterMethod: 'filter-component', filter: 'dataSourceNames', filterVariant: 'v1' });
   };
 
   type Filters = typeof filterState;
@@ -83,7 +83,7 @@ const RulesFilter = ({ onClear = () => undefined, viewMode, onViewModeChange }:
     <K extends keyof Filters>(key: K) =>
     (value: Filters[K]) => {
       updateFilters({ ...filterState, [key]: value });
-      trackAlertRuleFilterEvent({ filterMethod: 'filter-component', filter: key });
+      trackAlertRuleFilterEvent({ filterMethod: 'filter-component', filter: key, filterVariant: 'v1' });
     };
 
   const clearDataSource = () => {
@@ -266,6 +266,7 @@ const RulesFilter = ({ onClear = () => undefined, viewMode, onViewModeChange }:
               trackAlertRuleFilterEvent({
                 filterMethod: 'search-input',
                 filter: getSearchFilterFromQuery(data.searchQuery),
+                filterVariant: 'v1',
               });
             })}
           >

public/app/features/alerting/unified/rule-list/filter/RulesFilter.v2.test.tsx

@@ -388,6 +388,7 @@ describe('RulesFilterV2', () => {
       expect(analytics.trackAlertRuleFilterEvent).toHaveBeenCalled();
       const callArg = (analytics.trackAlertRuleFilterEvent as jest.Mock).mock.calls.at(-1)?.[0];
       expect(callArg.filterMethod).toBe('search-input');
+      expect(callArg.filterVariant).toBe('v2');
       expect(callArg.filter).toMatchObject({ ruleName: 'test', ruleState: 'firing' });
     });
 
@@ -400,6 +401,7 @@ describe('RulesFilterV2', () => {
       expect(analytics.trackAlertRuleFilterEvent).toHaveBeenCalled();
       const callArg = (analytics.trackAlertRuleFilterEvent as jest.Mock).mock.calls.at(-1)?.[0];
       expect(callArg.filterMethod).toBe('search-input');
+      expect(callArg.filterVariant).toBe('v2');
       expect(callArg.filter).toMatchObject({ ruleState: 'firing' });
     });
 

public/app/features/alerting/unified/rule-list/filter/RulesFilter.v2.tsx

@@ -80,7 +80,7 @@ export default function RulesFilter({ viewMode, onViewModeChange }: RulesFilterP
 
   const submitHandler: SubmitHandler<SearchQueryForm> = (values: SearchQueryForm) => {
     const parsedFilter = getSearchFilterFromQuery(values.query);
-    trackAlertRuleFilterEvent({ filterMethod: 'search-input', filter: parsedFilter });
+    trackAlertRuleFilterEvent({ filterMethod: 'search-input', filter: parsedFilter, filterVariant: 'v2' });
     updateFilters(parsedFilter);
   };
 
@@ -175,7 +175,11 @@ export default function RulesFilter({ viewMode, onViewModeChange }: RulesFilterP
                   onBlur={() => {
                     const currentQuery = field.value;
                     const parsedFilter = getSearchFilterFromQuery(currentQuery);
-                    trackAlertRuleFilterEvent({ filterMethod: 'search-input', filter: parsedFilter });
+                    trackAlertRuleFilterEvent({
+                      filterMethod: 'search-input',
+                      filter: parsedFilter,
+                      filterVariant: 'v2',
+                    });
                     updateFilters(parsedFilter);
                   }}
                   value={field.value}