From 7420cc228c3462b9b5b3ba34fd18166e54718d8f Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 19 Oct 2021 09:59:29 -0400
Subject: [PATCH] [Fleet] Add telemetry for integration cards (#115413)

---
 x-pack/plugins/fleet/kibana.json              |  2 +-
 .../applications/integrations/index.tsx       | 23 +++++----
 .../sections/epm/components/package_card.tsx  | 47 +++++++++++--------
 .../epm/screens/home/available_packages.tsx   |  2 +-
 .../sections/epm/screens/home/index.tsx       |  2 +-
 x-pack/plugins/fleet/public/plugin.ts         | 16 ++++++-
 6 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/x-pack/plugins/fleet/kibana.json b/x-pack/plugins/fleet/kibana.json
index 9de538ee91b8c..1ca88cac1cc11 100644
--- a/x-pack/plugins/fleet/kibana.json
+++ b/x-pack/plugins/fleet/kibana.json
@@ -11,5 +11,5 @@
   "requiredPlugins": ["licensing", "data", "encryptedSavedObjects", "navigation", "customIntegrations", "share"],
   "optionalPlugins": ["security", "features", "cloud", "usageCollection", "home", "globalSearch"],
   "extraPublicDirs": ["common"],
-  "requiredBundles": ["kibanaReact", "esUiShared", "home", "infra", "kibanaUtils"]
+  "requiredBundles": ["kibanaReact", "esUiShared", "home", "infra", "kibanaUtils", "usageCollection"]
 }
diff --git a/x-pack/plugins/fleet/public/applications/integrations/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/index.tsx
index 0abb78f850076..4099879538afa 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/index.tsx
@@ -70,18 +70,21 @@ export function renderApp(
   { element, appBasePath, history, setHeaderActionMenu }: AppMountParameters,
   config: FleetConfigType,
   kibanaVersion: string,
-  extensions: UIExtensionsStorage
+  extensions: UIExtensionsStorage,
+  UsageTracker: React.FC
 ) {
   ReactDOM.render(
-    <IntegrationsApp
-      basepath={appBasePath}
-      startServices={startServices}
-      config={config}
-      history={history}
-      kibanaVersion={kibanaVersion}
-      extensions={extensions}
-      setHeaderActionMenu={setHeaderActionMenu}
-    />,
+    <UsageTracker>
+      <IntegrationsApp
+        basepath={appBasePath}
+        startServices={startServices}
+        config={config}
+        history={history}
+        kibanaVersion={kibanaVersion}
+        extensions={extensions}
+        setHeaderActionMenu={setHeaderActionMenu}
+      />
+    </UsageTracker>,
     element
   );
 
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
index 091eb4c97183d..7181241776dda 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
@@ -9,6 +9,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { EuiCard, EuiFlexItem, EuiBadge, EuiToolTip, EuiSpacer } from '@elastic/eui';
 
+import { TrackApplicationView } from '../../../../../../../../../src/plugins/usage_collection/public';
+
 import { CardIcon } from '../../../../../components/package_icon';
 import type { IntegrationCardItem } from '../../../../../../common/types/models/epm';
 
@@ -31,6 +33,7 @@ export function PackageCard({
   integration,
   url,
   release,
+  id,
 }: PackageCardProps) {
   let releaseBadge: React.ReactNode | null = null;
 
@@ -47,26 +50,30 @@ export function PackageCard({
     );
   }
 
+  const testid = `integration-card:${id}`;
   return (
-    <Card
-      layout="horizontal"
-      title={title || ''}
-      titleSize="xs"
-      description={description}
-      hasBorder
-      icon={
-        <CardIcon
-          icons={icons}
-          packageName={name}
-          integrationName={integration}
-          version={version}
-          size="xl"
-        />
-      }
-      href={url}
-      target={url.startsWith('http') || url.startsWith('https') ? '_blank' : undefined}
-    >
-      {releaseBadge}
-    </Card>
+    <TrackApplicationView viewId={testid}>
+      <Card
+        data-test-subj={testid}
+        layout="horizontal"
+        title={title || ''}
+        titleSize="xs"
+        description={description}
+        hasBorder
+        icon={
+          <CardIcon
+            icons={icons}
+            packageName={name}
+            integrationName={integration}
+            version={version}
+            size="xl"
+          />
+        }
+        href={url}
+        target={url.startsWith('http') || url.startsWith('https') ? '_blank' : undefined}
+      >
+        {releaseBadge}
+      </Card>
+    </TrackApplicationView>
   );
 }
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx
index f5c521ebacf16..73de0e51bea65 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx
@@ -79,7 +79,7 @@ const packageListToIntegrationsList = (packages: PackageList): PackageList => {
             const allCategories = [...topCategories, ...categories];
             return {
               ...restOfPackage,
-              id: `${restOfPackage}-${name}`,
+              id: `${restOfPackage.id}-${name}`,
               integration: name,
               title,
               description,
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
index 4270d360b9294..e3fc5e15488e6 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
@@ -74,7 +74,7 @@ export const mapToCard = (
   }
 
   return {
-    id: `${item.type === 'ui_link' ? 'ui_link' : 'epr'}-${item.id}`,
+    id: `${item.type === 'ui_link' ? 'ui_link' : 'epr'}:${item.id}`,
     description: item.description,
     icons: !item.icons || !item.icons.length ? [] : item.icons,
     title: item.title,
diff --git a/x-pack/plugins/fleet/public/plugin.ts b/x-pack/plugins/fleet/public/plugin.ts
index 4a2a6900cc78c..b0e4e56aa344a 100644
--- a/x-pack/plugins/fleet/public/plugin.ts
+++ b/x-pack/plugins/fleet/public/plugin.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import type {
   AppMountParameters,
   CoreSetup,
@@ -23,6 +24,8 @@ import type {
 
 import type { SharePluginStart } from 'src/plugins/share/public';
 
+import type { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
+
 import { DEFAULT_APP_CATEGORIES, AppNavLinkStatus } from '../../../../src/core/public';
 
 import type {
@@ -73,6 +76,7 @@ export interface FleetSetupDeps {
   cloud?: CloudSetup;
   globalSearch?: GlobalSearchPluginSetup;
   customIntegrations: CustomIntegrationsSetup;
+  usageCollection?: UsageCollectionSetup;
 }
 
 export interface FleetStartDeps {
@@ -137,7 +141,17 @@ export class FleetPlugin implements Plugin<FleetSetup, FleetStart, FleetSetupDep
           cloud: deps.cloud,
         };
         const { renderApp, teardownIntegrations } = await import('./applications/integrations');
-        const unmount = renderApp(startServices, params, config, kibanaVersion, extensions);
+
+        const Tracker =
+          deps.usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
+        const unmount = renderApp(
+          startServices,
+          params,
+          config,
+          kibanaVersion,
+          extensions,
+          Tracker
+        );
 
         return () => {
           unmount();