Alerting: Track central ash interactions (#90330)

* Track central ash interactions

* refactor

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

@@ -8,6 +8,7 @@ import { contextSrv } from 'app/core/core';
 import { RuleNamespace } from '../../../types/unified-alerting';
 import { RulerRulesConfigDTO } from '../../../types/unified-alerting-dto';
 
+import { FilterType } from './components/rules/central-state-history/EventListSceneObject';
 import { getSearchFilterFromQuery, RulesFilter } from './search/rulesSearchParser';
 import { RuleFormType } from './types/rule-form';
 
@@ -24,6 +25,7 @@ export const LogMessages = {
   cancelSavingAlertRule: 'user canceled alert rule creation',
   successSavingAlertRule: 'alert rule saved successfully',
   unknownMessageFromError: 'unknown messageFromError',
+  loadedCentralAlertStateHistory: 'loaded central alert state history',
 };
 
 const { logInfo, logError, logMeasurement } = createMonitoringLogger('features.alerting', { module: 'Alerting' });
@@ -254,6 +256,17 @@ export function trackUseCustomInputInTemplate() {
 export function trackUseSingleTemplateInInput() {
   reportInteraction('grafana_alerting_contact_point_form_use_single_template_in_input');
 }
+export function trackUseCentralHistoryFilterByClicking(payload: { type: FilterType; key: string; value: string }) {
+  reportInteraction('grafana_alerting_central_alert_state_history_filter_by_clicking', payload);
+}
+
+export function trackUseCentralHistoryExpandRow() {
+  reportInteraction('grafana_alerting_central_alert_state_history_expand_row');
+}
+
+export function trackUseCentralHistoryMaxEventsReached(payload: { from: number; to: number }) {
+  reportInteraction('grafana_alerting_central_alert_state_history_max_events_reached', payload);
+}
 
 export type AlertRuleTrackingProps = {
   user_id: number;

public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { useEffect } from 'react';
 
 import { GrafanaTheme2, VariableHide } from '@grafana/data';
 import {
@@ -34,6 +35,7 @@ import {
 } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
+import { LogMessages, logInfo } from '../../../Analytics';
 import { DataSourceInformation } from '../../../home/Insights';
 
 import { alertStateHistoryDatasource, useRegisterHistoryRuntimeDataSource } from './CentralHistoryRuntimeDataSource';
@@ -60,6 +62,11 @@ export const StateFilterValues = {
 } as const;
 
 export const CentralAlertHistoryScene = () => {
+  //track the loading of the central alert state history
+  useEffect(() => {
+    logInfo(LogMessages.loadedCentralAlertStateHistory);
+  }, []);
+
   // create the variables for the filters
   // textbox variable for filtering by labels
   const labelsFilterVariable = new TextBoxVariable({

public/app/features/alerting/unified/components/rules/central-state-history/EventDetails.tsx

@@ -1,12 +1,13 @@
 import { css } from '@emotion/css';
 import { capitalize, groupBy } from 'lodash';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { DataFrame, DataFrameJSON, GrafanaTheme2, TimeRange } from '@grafana/data';
 import { Icon, Stack, Text, useStyles2, useTheme2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 import { CombinedRule } from 'app/types/unified-alerting';
 
+import { trackUseCentralHistoryExpandRow } from '../../../Analytics';
 import { stateHistoryApi } from '../../../api/stateHistoryApi';
 import { useCombinedRule } from '../../../hooks/useCombinedRule';
 import { labelsMatchMatchers } from '../../../utils/alertmanager';
@@ -29,6 +30,11 @@ interface EventDetailsProps {
   timeRange: TimeRange;
 }
 export function EventDetails({ record, addFilter, timeRange }: EventDetailsProps) {
+  // track the usage of the expand row
+  useEffect(() => {
+    trackUseCentralHistoryExpandRow();
+  }, []);
+
   // get the rule from the ruleUID
   const ruleUID = record.line?.ruleUID ?? '';
   const labelsInInstance = record.line?.labels;

public/app/features/alerting/unified/components/rules/central-state-history/EventListSceneObject.tsx

@@ -22,6 +22,7 @@ import {
   mapStateWithReasonToReason,
 } from 'app/types/unified-alerting-dto';
 
+import { trackUseCentralHistoryFilterByClicking, trackUseCentralHistoryMaxEventsReached } from '../../../Analytics';
 import { stateHistoryApi } from '../../../api/stateHistoryApi';
 import { usePagination } from '../../../hooks/usePagination';
 import { combineMatcherStrings, labelsMatchMatchers } from '../../../utils/alertmanager';
@@ -88,6 +89,9 @@ export const HistoryEventsList = ({
   }
 
   const maximumEventsReached = !isLoading && stateHistory?.data?.values?.[0]?.length === LIMIT_EVENTS;
+  if (maximumEventsReached) {
+    trackUseCentralHistoryMaxEventsReached({ from, to });
+  }
 
   return (
     <>
@@ -515,14 +519,15 @@ export function HistoryEventsListObjectRenderer({ model }: SceneComponentProps<H
 
   const addFilter = (key: string, value: string, type: FilterType) => {
     const newFilterToAdd = `${key}=${value}`;
+    trackUseCentralHistoryFilterByClicking({ type, key, value });
     if (type === 'stateTo') {
       stateToFilterVariable.changeValueTo(value);
     }
     if (type === 'stateFrom') {
       stateFromFilterVariable.changeValueTo(value);
     }
+    const finalFilter = combineMatcherStrings(valueInfilterTextBox.toString(), newFilterToAdd);
     if (type === 'label') {
-      const finalFilter = combineMatcherStrings(valueInfilterTextBox.toString(), newFilterToAdd);
       labelsFiltersVariable.setValue(finalFilter);
     }
   };