From 2f947a5cb58008f6b016277b41c76d67e7d5425f Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Mon, 14 Jun 2021 19:51:45 +0200
Subject: [PATCH] [ML] Add usage collection for pages in the ML app (#101886)
 (#102088)

* [ML] setup usageCollection provider

* [ML] track page usage
---
 x-pack/plugins/ml/kibana.json                 |  3 ++-
 x-pack/plugins/ml/public/application/app.tsx  | 19 ++++++++++++-------
 .../application/routing/ml_page_wrapper.tsx   | 12 ++++++++++++
 .../ml/public/application/routing/router.tsx  |  5 ++++-
 x-pack/plugins/ml/public/plugin.ts            |  3 +++
 5 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/routing/ml_page_wrapper.tsx

diff --git a/x-pack/plugins/ml/kibana.json b/x-pack/plugins/ml/kibana.json
index f34172765e1dd..e3bcf307e6f00 100644
--- a/x-pack/plugins/ml/kibana.json
+++ b/x-pack/plugins/ml/kibana.json
@@ -39,7 +39,8 @@
     "dashboard",
     "savedObjects",
     "home",
-    "maps"
+    "maps",
+    "usageCollection"
   ],
   "extraPublicDirs": [
     "common"
diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx
index f16a7c561ac5d..8be513f372e56 100644
--- a/x-pack/plugins/ml/public/application/app.tsx
+++ b/x-pack/plugins/ml/public/application/app.tsx
@@ -87,17 +87,22 @@ const App: FC<AppProps> = ({ coreStart, deps, appMountParams }) => {
   };
 
   const I18nContext = coreStart.i18n.Context;
+  const ApplicationUsageTrackingProvider =
+    deps.usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
+
   return (
     /** RedirectAppLinks intercepts all <a> tags to use navigateToUrl
      * avoiding full page reload **/
     <RedirectAppLinks application={coreStart.application}>
-      <I18nContext>
-        <KibanaContextProvider
-          services={{ ...services, mlServices: getMlGlobalServices(coreStart.http) }}
-        >
-          <MlRouter pageDeps={pageDeps} />
-        </KibanaContextProvider>
-      </I18nContext>
+      <ApplicationUsageTrackingProvider>
+        <I18nContext>
+          <KibanaContextProvider
+            services={{ ...services, mlServices: getMlGlobalServices(coreStart.http) }}
+          >
+            <MlRouter pageDeps={pageDeps} />
+          </KibanaContextProvider>
+        </I18nContext>
+      </ApplicationUsageTrackingProvider>
     </RedirectAppLinks>
   );
 };
diff --git a/x-pack/plugins/ml/public/application/routing/ml_page_wrapper.tsx b/x-pack/plugins/ml/public/application/routing/ml_page_wrapper.tsx
new file mode 100644
index 0000000000000..e97ab0fb830a5
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/routing/ml_page_wrapper.tsx
@@ -0,0 +1,12 @@
+/*
+ * 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 React, { FC } from 'react';
+import { TrackApplicationView } from '../../../../../../src/plugins/usage_collection/public';
+
+export const MlPageWrapper: FC<{ path: string }> = ({ path, children }) => {
+  return <TrackApplicationView viewId={path}>{children}</TrackApplicationView>;
+};
diff --git a/x-pack/plugins/ml/public/application/routing/router.tsx b/x-pack/plugins/ml/public/application/routing/router.tsx
index 27de3781bc7ab..c2129ef18df3a 100644
--- a/x-pack/plugins/ml/public/application/routing/router.tsx
+++ b/x-pack/plugins/ml/public/application/routing/router.tsx
@@ -18,6 +18,7 @@ import { MlContext, MlContextValue } from '../contexts/ml';
 import { UrlStateProvider } from '../util/url_state';
 
 import * as routes from './routes';
+import { MlPageWrapper } from './ml_page_wrapper';
 
 // custom RouteProps making location non-optional
 interface MlRouteProps extends RouteProps {
@@ -97,7 +98,9 @@ const MlRoutes: FC<{
               window.setTimeout(() => {
                 pageDeps.setBreadcrumbs(route.breadcrumbs);
               });
-              return route.render(props, pageDeps);
+              return (
+                <MlPageWrapper path={route.path}>{route.render(props, pageDeps)}</MlPageWrapper>
+              );
             }}
           />
         );
diff --git a/x-pack/plugins/ml/public/plugin.ts b/x-pack/plugins/ml/public/plugin.ts
index 1191f3b253fd7..e3a4a8348ebc1 100644
--- a/x-pack/plugins/ml/public/plugin.ts
+++ b/x-pack/plugins/ml/public/plugin.ts
@@ -52,6 +52,7 @@ import {
 import { DataVisualizerPluginStart } from '../../data_visualizer/public';
 import { PluginSetupContract as AlertingSetup } from '../../alerting/public';
 import { registerManagementSection } from './application/management';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 
 export interface MlStartDependencies {
   data: DataPublicPluginStart;
@@ -78,6 +79,7 @@ export interface MlSetupDependencies {
   share: SharePluginSetup;
   triggersActionsUi?: TriggersAndActionsUIPublicPluginSetup;
   alerting?: AlertingSetup;
+  usageCollection?: UsageCollectionSetup;
 }
 
 export type MlCoreSetup = CoreSetup<MlStartDependencies, MlPluginStart>;
@@ -121,6 +123,7 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
             kibanaVersion,
             triggersActionsUi: pluginsStart.triggersActionsUi,
             dataVisualizer: pluginsStart.dataVisualizer,
+            usageCollection: pluginsSetup.usageCollection,
           },
           params
         );