fix(Tracking): Use custom reporter (#277)

Author: grafakus

docs/sources/choose-a-view/index.md

@@ -180,7 +180,7 @@ Similar to a `git diff`, it takes the selected flame graphs and highlights the d
 
 ### Favorites
 
-The **Favorites** view shows all your favorited visualizations. 
+The **Favorites** view shows all your favorited visualizations.
 Clicking on the star (⭐️) at the top-right corner of a visualization saves it as a favorite.
 
 Using favories, you can create an overview of what's important, as well as jump to the **Flame graph** view or the **Labels** view.

src/pages/ProfilesExplorerView/components/SceneExploreServiceFlameGraph/components/SceneExportMenu/SceneExportMenu.tsx

@@ -1,8 +1,8 @@
 import { TimeRange } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
 import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { Button, Dropdown, Menu } from '@grafana/ui';
 import { displayError } from '@shared/domain/displayStatus';
+import { reportInteraction } from '@shared/domain/reportInteraction';
 import { useMaxNodesFromUrl } from '@shared/domain/url-params/useMaxNodesFromUrl';
 import { DEFAULT_SETTINGS } from '@shared/infrastructure/settings/PluginSettings';
 import { useFetchPluginSettings } from '@shared/infrastructure/settings/useFetchPluginSettings';
@@ -89,7 +89,7 @@ export class SceneExportMenu extends SceneObjectBase<SceneExportMenuState> {
  const { settings } = useFetchPluginSettings();
 
  const downloadPng = () => {
- reportInteraction('g_pyroscope_export_profile', { format: 'png' });
+ reportInteraction('g_pyroscope_app_export_profile', { format: 'png' });
 
  const filename = `${getExportFilename(query, timeRange)}.png`;
 
@@ -105,7 +105,7 @@ export class SceneExportMenu extends SceneObjectBase<SceneExportMenuState> {
  };
 
  const downloadJson = async () => {
- reportInteraction('g_pyroscope_export_profile', { format: 'json' });
+ reportInteraction('g_pyroscope_app_export_profile', { format: 'json' });
 
  const profile = await this.fetchFlamebearerProfile({ dataSourceUid, query, timeRange, maxNodes });
  if (!profile) {
@@ -119,7 +119,7 @@ export class SceneExportMenu extends SceneObjectBase<SceneExportMenuState> {
  };
 
  const downloadPprof = async () => {
- reportInteraction('g_pyroscope_export_profile', { format: 'pprof' });
+ reportInteraction('g_pyroscope_app_export_profile', { format: 'pprof' });
 
  const profile = await this.fetchPprofProfile({ dataSourceUid, query, timeRange, maxNodes });
  if (!profile) {
@@ -132,7 +132,7 @@ export class SceneExportMenu extends SceneObjectBase<SceneExportMenuState> {
  };
 
  const uploadToFlamegraphDotCom = async () => {
- reportInteraction('g_pyroscope_export_profile', { format: 'flamegraph.com' });
+ reportInteraction('g_pyroscope_app_export_profile', { format: 'flamegraph.com' });
 
  const profile = await this.fetchFlamebearerProfile({ dataSourceUid, query, timeRange, maxNodes });
  if (!profile) {

src/pages/ProfilesExplorerView/components/SceneProfilesExplorer/components/domain/useHeader.ts

@@ -1,6 +1,6 @@
-import { reportInteraction } from '@grafana/runtime';
 import { SceneObject, SceneVariable } from '@grafana/scenes';
 import { displaySuccess } from '@shared/domain/displayStatus';
+import { reportInteraction } from '@shared/domain/reportInteraction';
 import { logger } from '@shared/infrastructure/tracking/logger';
 import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';

src/pages/ProfilesExplorerView/domain/variables/FiltersVariable/FiltersVariable.tsx

@@ -1,7 +1,7 @@
-import { reportInteraction } from '@grafana/runtime';
 import { AdHocFiltersVariable, SceneComponentProps, sceneGraph } from '@grafana/scenes';
 import { CompleteFilters, OperatorKind } from '@shared/components/QueryBuilder/domain/types';
 import { QueryBuilder } from '@shared/components/QueryBuilder/QueryBuilder';
+import { reportInteraction } from '@shared/domain/reportInteraction';
 import { uniq } from 'lodash';
 import React from 'react';
 
@@ -43,7 +43,7 @@ export class FiltersVariable extends AdHocFiltersVariable {
  }
 
  onChangeQuery = (query: string, filters: CompleteFilters) => {
- reportInteraction('g_pyroscope_filters_changed', {
+ reportInteraction('g_pyroscope_app_filters_changed', {
  name: this.state.name,
  count: filters.length,
  operators: uniq(filters.map((f) => f.operator.label)),

src/shared/domain/reportInteraction.ts

@@ -4,42 +4,24 @@ import { PYROSCOPE_APP_ID, ROUTES } from '../../constants';
 import { LayoutType } from '../../pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/SceneLayoutSwitcher';
 import { PanelType } from '../../pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/ScenePanelTypeSwitcher';
 
-const PROFILES_EXPLORER_PAGE_NAME = ROUTES.PROFILES_EXPLORER_VIEW.slice(1);
-
-function getCurrentPage(): string {
- const { pathname } = new URL(window.location.toString());
- return pathname.split('/').pop() || '';
-}
-
-function getExtraProperties() {
- const page = getCurrentPage();
- const version = config.apps[PYROSCOPE_APP_ID].version;
- const extraProperties: Record<string, any> = { page, version };
-
- if (page === PROFILES_EXPLORER_PAGE_NAME) {
- extraProperties.explorationType = new URLSearchParams(window.location.search).get('explorationType');
- }
-
- return extraProperties;
-}
-
 // hey future dev: don't forget to add any new value to our features tracking dashboard!
 export type InteractionName =
  | 'g_pyroscope_app_compare_link_clicked'
- | 'g_pyroscope_app_diff_preset_selected'
- | 'g_pyroscope_app_diff_preset_save_clicked'
  | 'g_pyroscope_app_diff_auto_select_clicked'
  | 'g_pyroscope_app_diff_choose_preset_clicked'
  | 'g_pyroscope_app_diff_learn_how_clicked'
- | 'g_pyroscope_app_include_action_clicked'
+ | 'g_pyroscope_app_diff_preset_save_clicked'
+ | 'g_pyroscope_app_diff_preset_selected'
  | 'g_pyroscope_app_exclude_action_clicked'
  | 'g_pyroscope_app_explain_flamegraph_clicked'
  | 'g_pyroscope_app_exploration_type_clicked'
  | 'g_pyroscope_app_export_profile'
  | 'g_pyroscope_app_fav_action_clicked'
+ | 'g_pyroscope_app_filters_changed'
  | 'g_pyroscope_app_function_details_clicked'
  | 'g_pyroscope_app_group_by_label_clicked'
  | 'g_pyroscope_app_hide_no_data_changed'
+ | 'g_pyroscope_app_include_action_clicked'
  | 'g_pyroscope_app_layout_changed'
  | 'g_pyroscope_app_optimize_code_clicked'
  | 'g_pyroscope_app_panel_type_changed'
@@ -56,9 +38,11 @@ type InteractionProperties =
  // g_pyroscope_app_exploration_type_clicked
  | { explorationType: string }
  // g_pyroscope_app_export_profile
- | { format: 'png' | 'json' | 'flamegraph.com' }
+ | { format: 'png' | 'json' | 'pprof' | 'flamegraph.com' }
  // g_pyroscope_app_fav_action_clicked
  | { favAfterClick: boolean }
+ // g_pyroscope_app_filters_changed
+ | { name: string; count: number; operators: string[] }
  // g_pyroscope_app_group_by_label_clicked
  | { label: string }
  // g_pyroscope_app_hide_no_data_changed
@@ -70,6 +54,25 @@ type InteractionProperties =
  // g_pyroscope_app_select_action_clicked
  | { type: string };
 
+const PROFILES_EXPLORER_PAGE_NAME = ROUTES.PROFILES_EXPLORER_VIEW.slice(1);
+
+function getCurrentPage(): string {
+ const { pathname } = new URL(window.location.toString());
+ return pathname.split('/').pop() || '';
+}
+
+function getExtraProperties() {
+ const page = getCurrentPage();
+ const version = config.apps[PYROSCOPE_APP_ID].version;
+ const extraProperties: Record<string, any> = { page, version };
+
+ if (page === PROFILES_EXPLORER_PAGE_NAME) {
+ extraProperties.explorationType = new URLSearchParams(window.location.search).get('explorationType');
+ }
+
+ return extraProperties;
+}
+
 export function reportInteraction(interactionName: InteractionName, properties?: InteractionProperties) {
  grafanaReportInteraction(interactionName, {
  ...properties,