Add telemetry to every filter action in entity data table

Graylog2 · Jan 9, 2025 · bf22b78 · bf22b78
1 parent de57856
commit bf22b78
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/graylog2-web-interface/src/components/common/EntityFilters/EntityFilters.tsx b/graylog2-web-interface/src/components/common/EntityFilters/EntityFilters.tsx
@@ -25,6 +25,10 @@ import ActiveFilters from 'components/common/EntityFilters/ActiveFilters';
 import useFiltersWithTitle from 'components/common/EntityFilters/hooks/useFiltersWithTitle';
 
 import { ROW_MIN_HEIGHT } from './Constants';
+import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
+import useLocation from 'routing/useLocation';
+import {TELEMETRY_EVENT_TYPE} from 'logic/telemetry/Constants';
+import {getPathnameWithoutId} from 'util/URLUtils';
 
 const SUPPORTED_ATTRIBUTE_TYPES = ['STRING', 'BOOLEAN', 'DATE', 'OBJECT_ID'];
 
@@ -43,10 +47,14 @@ type Props = {
   attributes: Attributes,
   urlQueryFilters: UrlQueryFilters | undefined,
   setUrlQueryFilters: (urlQueryFilters: UrlQueryFilters) => void,
-  filterValueRenderers?: { [attributeId: string]: (value: Filter['value'], title: string) => React.ReactNode };
+  filterValueRenderers?: { [attributeId: string]: (value: Filter['value'], title: string) => React.ReactNode },
+  appSection: string,
 }
 
-const EntityFilters = ({ attributes = [], filterValueRenderers, urlQueryFilters, setUrlQueryFilters }: Props) => {
+const EntityFilters = ({ attributes = [], filterValueRenderers, urlQueryFilters, setUrlQueryFilters, appSection }: Props) => {
+  const { pathname } = useLocation();
+  const sendTelemetry = useSendTelemetry();
+
   const {
     data: activeFilters,
     onChange: onChangeFiltersWithTitle,
@@ -68,13 +76,27 @@ const EntityFilters = ({ attributes = [], filterValueRenderers, urlQueryFilters,
   }, [onChangeFiltersWithTitle, setUrlQueryFilters]);
 
   const onCreateFilter = useCallback((attributeId: string, filter: Filter) => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.ENTITY_DATA_TABLE.FILTER_CREATED, {
+      app_pathname: getPathnameWithoutId(pathname),
+      app_section: appSection,
+      app_action_value: 'new-filter-created',
+      attribute_id: attributeId,
+    });
+
     onChangeFilters(OrderedMap(activeFilters).set(
       attributeId,
       [...(activeFilters?.get(attributeId) ?? []), filter],
     ));
   }, [activeFilters, onChangeFilters]);
 
   const onDeleteFilter = useCallback((attributeId: string, filterId: string) => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.ENTITY_DATA_TABLE.FILTER_DELETED, {
+      app_pathname: getPathnameWithoutId(pathname),
+      app_section: appSection,
+      app_action_value: 'filter-deleted',
+      attribute_id: attributeId,
+    });
+
     const filterGroup = activeFilters.get(attributeId);
     const updatedFilterGroup = filterGroup.filter(({ value }) => value !== filterId);
 
@@ -86,6 +108,13 @@ const EntityFilters = ({ attributes = [], filterValueRenderers, urlQueryFilters,
   }, [activeFilters, onChangeFilters]);
 
   const onChangeFilter = useCallback((attributeId: string, prevValue: string, newFilter: Filter) => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.ENTITY_DATA_TABLE.FILTER_CHANGED, {
+      app_pathname: getPathnameWithoutId(pathname),
+      app_section: appSection,
+      app_action_value: 'filter-value-changed',
+      attribute_id: attributeId,
+    });
+
     const filterGroup = activeFilters.get(attributeId);
     const targetFilterIndex = filterGroup.findIndex(({ value }) => value === prevValue);
     const updatedFilterGroup = [...filterGroup];

diff --git a/graylog2-web-interface/src/components/common/PaginatedEntityTable/PaginatedEntityTable.tsx b/graylog2-web-interface/src/components/common/PaginatedEntityTable/PaginatedEntityTable.tsx
@@ -107,14 +107,16 @@ const PaginatedEntityTable = <T extends EntityBase, M = unknown>({
     setUrlQueryFilters(newUrlQueryFilters);
   }, [paginationQueryParameter, setUrlQueryFilters]);
 
+  const appSection = `${tableLayout.entityTableId}-list`;
+
   const {
     onPageSizeChange,
     onSearch,
     onSearchReset,
     onColumnsChange,
     onSortChange,
   } = useTableEventHandlers({
-    appSection: `${tableLayout.entityTableId}-list`,
+    appSection,
     paginationQueryParameter,
     updateTableLayout,
     setQuery,
@@ -146,7 +148,8 @@ const PaginatedEntityTable = <T extends EntityBase, M = unknown>({
               <EntityFilters attributes={attributes}
                              urlQueryFilters={urlQueryFilters}
                              setUrlQueryFilters={onChangeFilters}
-                             filterValueRenderers={filterValueRenderers} />
+                             filterValueRenderers={filterValueRenderers}
+                             appSection={appSection} />
             </div>
           </SearchForm>
           {topRightCol}

diff --git a/graylog2-web-interface/src/logic/telemetry/Constants.ts b/graylog2-web-interface/src/logic/telemetry/Constants.ts
@@ -404,5 +404,8 @@ export const TELEMETRY_EVENT_TYPE = {
     COLUMNS_CHANGED: 'Entity Data Table Columns Changed',
     SORT_CHANGED: 'Entity Data Table Sort Changed',
     PAGE_SIZE_CHANGED: 'Entity Data Table Page Size Changed',
+    FILTER_CREATED: 'Entity Data Table Filter Created',
+    FILTER_DELETED: 'Entity Data Table Filter Deleted',
+    FILTER_CHANGED: 'Entity Data Table Filter Changed',
   },
 } as const;