From 99ab557eece41076b780f9e8b63e8a36dc6e5892 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Mon, 18 Oct 2021 15:18:21 -0400
Subject: [PATCH] add application tracker

---
 .../applications/integrations/index.tsx       | 23 ++++++----
 .../sections/epm/components/package_card.tsx  | 46 ++++++++++---------
 x-pack/plugins/fleet/public/plugin.ts         | 16 ++++++-
 3 files changed, 53 insertions(+), 32 deletions(-)

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 de7f9f46a7e39..a4c71098de3fb 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';
 
@@ -50,26 +52,28 @@ export function PackageCard({
 
   const testid = `integration-card:${id}`;
   return (
-    <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 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/plugin.ts b/x-pack/plugins/fleet/public/plugin.ts
index e1f263b0763e8..dded0a9781661 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 {
@@ -77,6 +80,7 @@ export interface FleetSetupDeps {
   cloud?: CloudSetup;
   globalSearch?: GlobalSearchPluginSetup;
   customIntegrations: CustomIntegrationsSetup;
+  usageCollection?: UsageCollectionSetup;
 }
 
 export interface FleetStartDeps {
@@ -141,7 +145,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();