[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

@@ -39,7 +39,8 @@
     "dashboard",
     "savedObjects",
     "home",
-    "maps"
+    "maps",
+    "usageCollection"
   ],
   "extraPublicDirs": [
     "common"

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>
   );
 };

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>;
+};

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>
+              );
             }}
           />
         );

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
         );