add application tracker

elastic · Oct 18, 2021 · 99ab557 · 99ab557
1 parent ba350bc
commit 99ab557
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 32 deletions.
diff --git 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/...k/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx b/...k/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
@@ -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();