[Automatic Import V2] UI Telemetry

packages/kbn-optimizer/limits.yml

@@ -7,7 +7,7 @@ pageLoadAssetSize:
   apm: 38573
   apmSourcesAccess: 2278
   automaticImport: 12162
-  automaticImportVTwo: 4694
+  automaticImportVTwo: 8223
   banners: 4087
   canvas: 15142
   cases: 153204

x-pack/platform/plugins/shared/automatic_import_v2/moon.yml

@@ -42,6 +42,7 @@ dependsOn:
   - '@kbn/i18n'
   - '@kbn/features-plugin'
   - '@kbn/task-manager-plugin'
+  - '@kbn/core-analytics-browser'
 tags:
   - plugin
   - prod

x-pack/platform/plugins/shared/automatic_import_v2/public/application.tsx

@@ -10,28 +10,35 @@ import ReactDOM from 'react-dom';
 import type { AppMountParameters, CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { IntegrationManagement } from './components/integration_management/integration_management';
+import { TelemetryContextProvider } from './components/integration_management/telemetry';
 import type { Services } from './services/types';
+import type { TelemetryService } from './services/telemetry/service';
 import type { AutomaticImportPluginStartDependencies } from './types';
 
 export const renderApp = ({
   coreStart,
   plugins,
   params,
+  telemetry,
 }: {
   coreStart: CoreStart;
   plugins: AutomaticImportPluginStartDependencies;
   params: AppMountParameters;
+  telemetry: TelemetryService;
 }) => {
   const { element } = params;
   const services: Services = {
     ...coreStart,
     ...plugins,
+    telemetry,
   };
 
   ReactDOM.render(
     coreStart.rendering.addContext(
       <KibanaContextProvider services={services}>
-        <IntegrationManagement />
+        <TelemetryContextProvider>
+          <IntegrationManagement />
+        </TelemetryContextProvider>
       </KibanaContextProvider>
     ),
     element

x-pack/platform/plugins/shared/automatic_import_v2/public/common/hooks/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { useKibana } from './use_kibana';

x-pack/platform/plugins/shared/automatic_import_v2/public/common/hooks/use_kibana.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { useKibana as _useKibana } from '@kbn/kibana-react-plugin/public';
+import type { Services } from '../../services';
+
+export const useKibana = () => _useKibana<Services>();

x-pack/platform/plugins/shared/automatic_import_v2/public/common/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { useKibana } from './hooks';

x-pack/platform/plugins/shared/automatic_import_v2/public/components/integration_management/telemetry.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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, { useCallback, useMemo, useRef } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { TelemetryEventType } from '../../services/telemetry/types';
+import { useKibana } from '../../common/hooks/use_kibana';
+
+type ReportIntegrationManagementOpen = () => void;
+
+type ReportDataStreamFlyoutOpen = (params: { datastreamName: string }) => void;
+
+type ReportUploadLogsComplete = (params: { datastreamName: string; error?: string }) => void;
+
+type ReportViewResultsFlyoutOpen = (params: {
+  datastreamName: string;
+  sampleRows: number;
+  model: string;
+  provider: string;
+  error?: string;
+}) => void;
+
+type ReportAutomaticImportComplete = (params: {
+  integrationName: string;
+  integrationDescription: string;
+  dataStreamNames: string[];
+  inputTypes: string[];
+  actionTypeId: string;
+  model: string;
+  provider: string;
+  error?: string;
+}) => void;
+
+interface TelemetryContextProps {
+  reportIntegrationManagementOpen: ReportIntegrationManagementOpen;
+  reportDataStreamFlyoutOpen: ReportDataStreamFlyoutOpen;
+  reportUploadLogsComplete: ReportUploadLogsComplete;
+  reportViewResultsFlyoutOpen: ReportViewResultsFlyoutOpen;
+  reportAutomaticImportComplete: ReportAutomaticImportComplete;
+}
+
+const TelemetryContext = React.createContext<TelemetryContextProps | null>(null);
+
+/**
+ * Hook to easily use telemetry reporting functions.
+ * Restricted by the events defined in the telemetry service.
+ * @throws Error if used outside provider
+ */
+export const useTelemetry = () => {
+  const context = React.useContext(TelemetryContext);
+  if (!context) {
+    throw new Error('useTelemetry must be used within a TelemetryContextProvider');
+  }
+  return context;
+};
+
+export const TelemetryContextProvider: React.FC<{ children: React.ReactNode }> = React.memo(
+  ({ children }) => {
+    const sessionData = useRef({ sessionId: uuidV4(), startedAt: Date.now() });
+    const { telemetry } = useKibana().services;
+
+    const reportIntegrationManagementOpen = useCallback<ReportIntegrationManagementOpen>(() => {
+      const sessionId = uuidV4();
+      sessionData.current = { sessionId, startedAt: Date.now() };
+      telemetry.reportEvent(TelemetryEventType.IntegrationManagementOpen, {
+        sessionId,
+      });
+    }, [telemetry]);
+
+    const reportDataStreamFlyoutOpen = useCallback<ReportDataStreamFlyoutOpen>(
+      ({ datastreamName }) => {
+        telemetry.reportEvent(TelemetryEventType.CreateManageDataStreamFlyoutOpen, {
+          sessionId: sessionData.current.sessionId,
+          datastreamName,
+        });
+      },
+      [telemetry]
+    );
+
+    const reportUploadLogsComplete = useCallback<ReportUploadLogsComplete>(
+      ({ datastreamName, error }) => {
+        telemetry.reportEvent(TelemetryEventType.UploadDatastreamLogsZipCompleteData, {
+          datastreamName,
+          errorMessage: error,
+        });
+      },
+      [telemetry]
+    );
+
+    const reportViewResultsFlyoutOpen = useCallback<ReportViewResultsFlyoutOpen>(
+      ({ datastreamName, sampleRows, model, provider, error }) => {
+        telemetry.reportEvent(TelemetryEventType.ViewResultsFlyoutOpen, {
+          sessionId: sessionData.current.sessionId,
+          datastreamName,
+          sampleRows,
+          model,
+          provider,
+          errorMessage: error,
+        });
+      },
+      [telemetry]
+    );
+
+    const reportAutomaticImportComplete = useCallback<ReportAutomaticImportComplete>(
+      ({
+        integrationName,
+        integrationDescription,
+        dataStreamNames,
+        inputTypes,
+        actionTypeId,
+        model,
+        provider,
+        error,
+      }) => {
+        telemetry.reportEvent(TelemetryEventType.AutomaticImportComplete, {
+          sessionId: sessionData.current.sessionId,
+          integrationName,
+          integrationDescription,
+          dataStreamNames,
+          inputTypes,
+          actionTypeId,
+          model,
+          provider,
+          errorMessage: error,
+        });
+      },
+      [telemetry]
+    );
+
+    const value = useMemo<TelemetryContextProps>(
+      () => ({
+        reportIntegrationManagementOpen,
+        reportDataStreamFlyoutOpen,
+        reportUploadLogsComplete,
+        reportViewResultsFlyoutOpen,
+        reportAutomaticImportComplete,
+      }),
+      [
+        reportIntegrationManagementOpen,
+        reportDataStreamFlyoutOpen,
+        reportUploadLogsComplete,
+        reportViewResultsFlyoutOpen,
+        reportAutomaticImportComplete,
+      ]
+    );
+
+    return <TelemetryContext.Provider value={value}>{children}</TelemetryContext.Provider>;
+  }
+);
+TelemetryContextProvider.displayName = 'TelemetryContextProvider';

x-pack/platform/plugins/shared/automatic_import_v2/public/plugin.ts

@@ -19,23 +19,34 @@ import type {
   AutomaticImportPluginStart,
   AutomaticImportPluginStartDependencies,
 } from './types';
+import { Telemetry } from './services/telemetry/service';
 
 export class AutomaticImportPlugin
   implements Plugin<AutomaticImportPluginSetup, AutomaticImportPluginStart>
 {
+  private telemetry = new Telemetry();
+
   constructor(_: PluginInitializerContext) {}
 
   public setup(
     core: CoreSetup<AutomaticImportPluginStartDependencies, AutomaticImportPluginStart>
   ): AutomaticImportPluginSetup {
+    this.telemetry.setup(core.analytics);
+
+    const telemetry = this.telemetry;
     core.application.register({
       id: PLUGIN_ID,
       title: PLUGIN_NAME,
       visibleIn: [],
       async mount(params: AppMountParameters) {
         const { renderApp } = await import('./application');
         const [coreStart, plugins] = await core.getStartServices();
-        return renderApp({ coreStart, plugins, params });
+        return renderApp({
+          coreStart,
+          plugins,
+          params,
+          telemetry: telemetry.start(),
+        });
       },
     });
 

x-pack/platform/plugins/shared/automatic_import_v2/public/services/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+export type * from './types';
+export { Telemetry } from './telemetry/service';