[8.16] [Entity Inventory] Add basic telemetry (#197055) (#198047)

# Backport This will backport the following commits from `main` to `8.16`: - [[Entity Inventory] Add basic telemetry (#197055)](#197055)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Irene Blanco <[email protected]>
elastic · Oct 29, 2024 · 512cabc · 512cabc
1 parent 6f333b8
commit 512cabc
Show file tree

Hide file tree

Showing 16 changed files with 549 additions and 21 deletions.
diff --git a/x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx b/x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx
@@ -15,7 +15,7 @@ import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import type { InventoryKibanaContext } from '../public/hooks/use_kibana';
-import type { ITelemetryClient } from '../public/services/telemetry/types';
+import { ITelemetryClient } from '../public/services/telemetry/types';
 
 export function getMockInventoryContext(): InventoryKibanaContext {
   const coreStart = coreMock.createStart();

diff --git a/...ns/observability_solution/inventory/public/components/entities_grid/entity_name/index.tsx b/...ns/observability_solution/inventory/public/components/entities_grid/entity_name/index.tsx
@@ -25,13 +25,22 @@ interface EntityNameProps {
 }
 
 export function EntityName({ entity }: EntityNameProps) {
-  const { services } = useKibana();
+  const {
+    services: { telemetry, share },
+  } = useKibana();
 
   const assetDetailsLocator =
-    services.share?.url.locators.get<AssetDetailsLocatorParams>(ASSET_DETAILS_LOCATOR_ID);
+    share?.url.locators.get<AssetDetailsLocatorParams>(ASSET_DETAILS_LOCATOR_ID);
 
   const serviceOverviewLocator =
-    services.share?.url.locators.get<ServiceOverviewParams>('serviceOverviewLocator');
+    share?.url.locators.get<ServiceOverviewParams>('serviceOverviewLocator');
+
+  const handleLinkClick = useCallback(() => {
+    telemetry.reportEntityViewClicked({
+      view_type: 'detail',
+      entity_type: entity['entity.type'],
+    });
+  }, [entity, telemetry]);
 
   const getEntityRedirectUrl = useCallback(() => {
     const type = entity[ENTITY_TYPE];
@@ -58,7 +67,12 @@ export function EntityName({ entity }: EntityNameProps) {
   }, [entity, assetDetailsLocator, serviceOverviewLocator]);
 
   return (
-    <EuiLink data-test-subj="entityNameLink" href={getEntityRedirectUrl()}>
+    // eslint-disable-next-line @elastic/eui/href-or-on-click
+    <EuiLink
+      data-test-subj="entityNameLink"
+      href={getEntityRedirectUrl()}
+      onClick={handleLinkClick}
+    >
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem grow={0}>
           <EntityIcon entity={entity} />

diff --git a/x-pack/plugins/observability_solution/inventory/public/components/entities_grid/index.tsx b/x-pack/plugins/observability_solution/inventory/public/components/entities_grid/index.tsx
@@ -85,12 +85,13 @@ export function EntitiesGrid({
       }
 
       const columnEntityTableId = columnId as EntityColumnIds;
+      const entityType = entity[ENTITY_TYPE];
+
       switch (columnEntityTableId) {
         case 'alertsCount':
           return entity?.alertsCount ? <AlertsBadge entity={entity} /> : null;
 
         case ENTITY_TYPE:
-          const entityType = entity[columnEntityTableId];
           return (
             <BadgeFilterWithPopover
               field={ENTITY_TYPE}

diff --git a/...gins/observability_solution/inventory/public/components/inventory_page_template/index.tsx b/...gins/observability_solution/inventory/public/components/inventory_page_template/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui';
 import {
   FeatureFeedbackButton,
@@ -18,6 +18,7 @@ import { useEntityManager } from '../../hooks/use_entity_manager';
 import { Welcome } from '../entity_enablement/welcome_modal';
 import { useInventoryAbortableAsync } from '../../hooks/use_inventory_abortable_async';
 import { EmptyState } from '../empty_states/empty_state';
+import { useIsLoadingComplete } from '../../hooks/use_is_loading_complete';
 
 const pageTitle = (
   <EuiFlexGroup gutterSize="s">
@@ -36,7 +37,7 @@ const INVENTORY_FEEDBACK_LINK = 'https://ela.st/feedback-new-inventory';
 
 export function InventoryPageTemplate({ children }: { children: React.ReactNode }) {
   const {
-    services: { observabilityShared, inventoryAPIClient, kibanaEnvironment },
+    services: { observabilityShared, inventoryAPIClient, kibanaEnvironment, telemetry },
   } = useKibana();
 
   const { PageTemplate: ObservabilityPageTemplate } = observabilityShared.navigation;
@@ -62,6 +63,23 @@ export function InventoryPageTemplate({ children }: { children: React.ReactNode
     [inventoryAPIClient]
   );
 
+  const isLoadingComplete = useIsLoadingComplete({
+    loadingStates: [isEnablementLoading, hasDataLoading],
+  });
+
+  useEffect(() => {
+    if (isLoadingComplete) {
+      const viewState = isEntityManagerEnabled
+        ? value.hasData
+          ? 'populated'
+          : 'empty'
+        : 'eem_disabled';
+      telemetry.reportEntityInventoryViewed({
+        view_state: viewState,
+      });
+    }
+  }, [isEntityManagerEnabled, value.hasData, telemetry, isLoadingComplete]);
+
   if (isEnablementLoading || hasDataLoading) {
     return (
       <ObservabilityPageTemplate

diff --git a/x-pack/plugins/observability_solution/inventory/public/components/search_bar/index.tsx b/x-pack/plugins/observability_solution/inventory/public/components/search_bar/index.tsx
@@ -9,13 +9,15 @@ import { SearchBarOwnProps } from '@kbn/unified-search-plugin/public/search_bar'
 import deepEqual from 'fast-deep-equal';
 import React, { useCallback, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { Query } from '@kbn/es-query';
 import { EntityType } from '../../../common/entities';
 import { useInventorySearchBarContext } from '../../context/inventory_search_bar_context_provider';
 import { useAdHocInventoryDataView } from '../../hooks/use_adhoc_inventory_data_view';
 import { useInventoryParams } from '../../hooks/use_inventory_params';
 import { useKibana } from '../../hooks/use_kibana';
 import { EntityTypesControls } from './entity_types_controls';
 import { DiscoverButton } from './discover_button';
+import { getKqlFieldsWithFallback } from '../../utils/get_kql_field_names_with_fallback';
 
 export function SearchBar() {
   const { searchBarContentSubject$ } = useInventorySearchBarContext();
@@ -25,6 +27,7 @@ export function SearchBar() {
       data: {
         query: { queryString: queryStringService },
       },
+      telemetry,
     },
   } = useKibana();
 
@@ -51,11 +54,41 @@ export function SearchBar() {
     syncSearchBarWithUrl();
   }, [syncSearchBarWithUrl]);
 
+  const registerSearchSubmittedEvent = useCallback(
+    ({
+      searchQuery,
+      searchIsUpdate,
+      searchEntityTypes,
+    }: {
+      searchQuery?: Query;
+      searchEntityTypes?: string[];
+      searchIsUpdate?: boolean;
+    }) => {
+      telemetry.reportEntityInventorySearchQuerySubmitted({
+        kuery_fields: getKqlFieldsWithFallback(searchQuery?.query as string),
+        entity_types: searchEntityTypes || [],
+        action: searchIsUpdate ? 'submit' : 'refresh',
+      });
+    },
+    [telemetry]
+  );
+
+  const registerEntityTypeFilteredEvent = useCallback(
+    ({ filterEntityTypes, filterKuery }: { filterEntityTypes: string[]; filterKuery?: string }) => {
+      telemetry.reportEntityInventoryEntityTypeFiltered({
+        entity_types: filterEntityTypes,
+        kuery_fields: filterKuery ? getKqlFieldsWithFallback(filterKuery) : [],
+      });
+    },
+    [telemetry]
+  );
+
   const handleEntityTypesChange = useCallback(
     (nextEntityTypes: EntityType[]) => {
       searchBarContentSubject$.next({ kuery, entityTypes: nextEntityTypes, refresh: false });
+      registerEntityTypeFilteredEvent({ filterEntityTypes: nextEntityTypes, filterKuery: kuery });
     },
-    [kuery, searchBarContentSubject$]
+    [kuery, registerEntityTypeFilteredEvent, searchBarContentSubject$]
   );
 
   const handleQuerySubmit = useCallback<NonNullable<SearchBarOwnProps['onQuerySubmit']>>(
@@ -65,8 +98,14 @@ export function SearchBar() {
         entityTypes,
         refresh: !isUpdate,
       });
+
+      registerSearchSubmittedEvent({
+        searchQuery: query,
+        searchEntityTypes: entityTypes,
+        searchIsUpdate: isUpdate,
+      });
     },
-    [entityTypes, searchBarContentSubject$]
+    [entityTypes, registerSearchSubmittedEvent, searchBarContentSubject$]
   );
 
   return (

diff --git a/x-pack/plugins/observability_solution/inventory/public/hooks/use_is_loading_complete.test.ts b/x-pack/plugins/observability_solution/inventory/public/hooks/use_is_loading_complete.test.ts
@@ -0,0 +1,109 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useIsLoadingComplete } from './use_is_loading_complete';
+
+describe('useIsLoadingComplete', () => {
+  describe('initialization', () => {
+    it('should initialize with undefined', () => {
+      const { result } = renderHook(() => useIsLoadingComplete({ loadingStates: [false, false] }));
+      expect(result.current).toBeUndefined();
+    });
+
+    it('should handle an empty array of loadingStates', () => {
+      const { result } = renderHook(() => useIsLoadingComplete({ loadingStates: [] }));
+      expect(result.current).toBeUndefined();
+    });
+
+    it('should handle a single loading state that is false', () => {
+      const { result } = renderHook(() => useIsLoadingComplete({ loadingStates: [false] }));
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  describe('loading states', () => {
+    it('should set isLoadingComplete to false when some loadingStates are true', () => {
+      const { result } = renderHook(() => useIsLoadingComplete({ loadingStates: [true, false] }));
+      expect(result.current).toBe(false);
+    });
+
+    it('should set isLoadingComplete to false when all loadingStates are true', () => {
+      const { result } = renderHook(() => useIsLoadingComplete({ loadingStates: [true, true] }));
+      expect(result.current).toBe(false);
+    });
+
+    it('should handle a single loading state that is true', () => {
+      const { result } = renderHook(() => useIsLoadingComplete({ loadingStates: [true] }));
+      expect(result.current).toBe(false);
+    });
+  });
+
+  describe('loading completion', () => {
+    it('should set isLoadingComplete to true when all loadingStates are false after being true', () => {
+      const { result, rerender } = renderHook(
+        ({ loadingStates }) => useIsLoadingComplete({ loadingStates }),
+        {
+          initialProps: { loadingStates: [true, false] },
+        }
+      );
+
+      expect(result.current).toBe(false);
+
+      rerender({ loadingStates: [false, false] });
+
+      expect(result.current).toBe(true);
+    });
+
+    it('should set isLoadingComplete to true when all loadingStates are false after being mixed', () => {
+      const { result, rerender } = renderHook(
+        ({ loadingStates }) => useIsLoadingComplete({ loadingStates }),
+        {
+          initialProps: { loadingStates: [true, false] },
+        }
+      );
+
+      expect(result.current).toBe(false);
+
+      rerender({ loadingStates: [false, false] });
+
+      expect(result.current).toBe(true);
+    });
+  });
+
+  describe('mixed states', () => {
+    it('should not change isLoadingComplete if loadingStates are mixed', () => {
+      const { result, rerender } = renderHook(
+        ({ loadingStates }) => useIsLoadingComplete({ loadingStates }),
+        {
+          initialProps: { loadingStates: [true, true] },
+        }
+      );
+
+      expect(result.current).toBe(false);
+
+      rerender({ loadingStates: [true, false] });
+
+      expect(result.current).toBe(false);
+    });
+
+    it('should not change isLoadingComplete if loadingStates change from all true to mixed', () => {
+      const { result, rerender } = renderHook(
+        ({ loadingStates }) => useIsLoadingComplete({ loadingStates }),
+        {
+          initialProps: { loadingStates: [true, true] },
+        }
+      );
+
+      expect(result.current).toBe(false);
+
+      rerender({ loadingStates: [true, false] });
+
+      expect(result.current).toBe(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/observability_solution/inventory/public/hooks/use_is_loading_complete.ts b/x-pack/plugins/observability_solution/inventory/public/hooks/use_is_loading_complete.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useState, useEffect } from 'react';
+
+interface UseIsLoadingCompleteProps {
+  loadingStates: boolean[];
+}
+
+export const useIsLoadingComplete = ({ loadingStates }: UseIsLoadingCompleteProps) => {
+  const [isLoadingComplete, setIsLoadingComplete] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const someLoading = loadingStates.some((loading) => loading);
+    const allLoaded = loadingStates.every((loading) => !loading);
+
+    if (isLoadingComplete === undefined && someLoading) {
+      setIsLoadingComplete(false);
+    } else if (isLoadingComplete === false && allLoaded) {
+      setIsLoadingComplete(true);
+    }
+  }, [isLoadingComplete, loadingStates]);
+
+  return isLoadingComplete;
+};
diff --git a/x-pack/plugins/observability_solution/inventory/public/plugin.ts b/x-pack/plugins/observability_solution/inventory/public/plugin.ts
@@ -49,6 +49,7 @@ export class InventoryPlugin
     this.kibanaVersion = context.env.packageInfo.version;
     this.isServerlessEnv = context.env.packageInfo.buildFlavor === 'serverless';
   }
+
   setup(
     coreSetup: CoreSetup<InventoryStartDependencies, InventoryPublicStart>,
     pluginsSetup: InventorySetupDependencies
@@ -58,6 +59,13 @@ export class InventoryPlugin
       'observability:entityCentricExperience',
       true
     );
+
+    this.telemetry.setup({
+      analytics: coreSetup.analytics,
+    });
+
+    const telemetry = this.telemetry.start();
+
     const getStartServices = coreSetup.getStartServices();
 
     const hideInventory$ = from(getStartServices).pipe(
@@ -105,9 +113,6 @@ export class InventoryPlugin
 
     pluginsSetup.observabilityShared.navigation.registerSections(sections$);
 
-    this.telemetry.setup({ analytics: coreSetup.analytics });
-    const telemetry = this.telemetry.start();
-
     const isCloudEnv = !!pluginsSetup.cloud?.isCloudEnabled;
     const isServerlessEnv = pluginsSetup.cloud?.isServerlessEnabled || this.isServerlessEnv;