[Monitoring] Usage collection (#75878) (#78537)

* First stab at some internal telemetry

* Add missing files

* mbCount telemetry

* Include more data

* Remove unused field

* This file isn't used

* Mock in tests

* Add schema

* Store schema

* Use sample cluster instead

* Fix telemetry schema

* Fix type issues

* Updates

* Fix schema and tests

* Add tests

* Add tests

* Go back to using an array

* Fix schema

* Add page view data

* Remove debug

* Handle loading scenario here

* Add delay tracking too

* Add clicks for setup mode

* Add clicks for setup mode

* Fix beats/apm page views

* Fix typings
# Conflicts:
#	x-pack/plugins/monitoring/common/constants.ts

Author: chrisronline

x-pack/plugins/monitoring/common/constants.ts

@@ -276,3 +276,10 @@ export const ALERT_EMAIL_SERVICES = ['gmail', 'hotmail', 'icloud', 'outlook365',
 
 export const MONITORING_CONFIG_ALERTING_EMAIL_ADDRESS = 'monitoring:alertingEmailAddress';
 export const XPACK_DEFAULT_ADMIN_EMAIL_UI_SETTING = 'xPack:defaultAdminEmail';
+
+/**
+ * The saved object type for various monitoring data
+ */
+export const SAVED_OBJECT_TELEMETRY = 'monitoring-telemetry';
+
+export const TELEMETRY_METRIC_BUTTON_CLICK = 'btnclick__';

x-pack/plugins/monitoring/kibana.json

@@ -12,7 +12,8 @@
     "triggers_actions_ui",
     "alerts",
     "actions",
-    "encryptedSavedObjects"
+    "encryptedSavedObjects",
+    "observability"
   ],
   "optionalPlugins": ["infra", "telemetryCollectionManager", "usageCollection", "home", "cloud"],
   "server": true,

x-pack/plugins/monitoring/public/angular/index.ts

@@ -26,6 +26,7 @@ export class AngularApp {
       pluginInitializerContext,
       externalConfig,
       triggersActionsUi,
+      usageCollection,
       kibanaLegacy,
     } = deps;
     const app: IModule = localAppModule(deps);
@@ -42,6 +43,7 @@ export class AngularApp {
           externalConfig,
           kibanaLegacy,
           triggersActionsUi,
+          usageCollection,
         },
         this.injector
       );

x-pack/plugins/monitoring/public/components/page_loading/index.js

@@ -15,8 +15,9 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import './page_loading.scss';
+import { useTrackPageview } from '../../../../observability/public';
 
-export function PageLoading() {
+function PageLoadingUI() {
   return (
     <EuiPage style={{ height: 'calc(100vh - 50px)' }}>
       <EuiPageBody>
@@ -45,3 +46,18 @@ export function PageLoading() {
     </EuiPage>
   );
 }
+
+function PageLoadingTracking({ pageViewTitle }) {
+  const path = pageViewTitle.toLowerCase().replace(/-/g, '').replace(/\s+/g, '_');
+  useTrackPageview({ app: 'stack_monitoring', path });
+  useTrackPageview({ app: 'stack_monitoring', path, delay: 15000 });
+  return <PageLoadingUI />;
+}
+
+export function PageLoading({ pageViewTitle }) {
+  if (pageViewTitle) {
+    return <PageLoadingTracking pageViewTitle={pageViewTitle} />;
+  }
+
+  return <PageLoadingUI />;
+}

x-pack/plugins/monitoring/public/components/setup_mode/enter_button.tsx

@@ -8,6 +8,8 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import './enter_button.scss';
+import { METRIC_TYPE, useUiTracker } from '../../../../observability/public';
+import { TELEMETRY_METRIC_BUTTON_CLICK } from '../../../common/constants';
 
 export interface SetupModeEnterButtonProps {
   enabled: boolean;
@@ -18,6 +20,7 @@ export const SetupModeEnterButton: React.FC<SetupModeEnterButtonProps> = (
   props: SetupModeEnterButtonProps
 ) => {
   const [isLoading, setIsLoading] = React.useState(false);
+  const trackStat = useUiTracker({ app: 'stack_monitoring' });
 
   if (!props.enabled) {
     return null;
@@ -26,6 +29,10 @@ export const SetupModeEnterButton: React.FC<SetupModeEnterButtonProps> = (
   async function enterSetupMode() {
     setIsLoading(true);
     await props.toggleSetupMode(true);
+    trackStat({
+      metric: `${TELEMETRY_METRIC_BUTTON_CLICK}setupmode_enter`,
+      metricType: METRIC_TYPE.CLICK,
+    });
     setIsLoading(false);
   }
 

x-pack/plugins/monitoring/public/legacy_shims.ts

@@ -14,6 +14,7 @@ import { TriggersAndActionsUIPublicPluginSetup } from '../../triggers_actions_ui
 import { TypeRegistry } from '../../triggers_actions_ui/public/application/type_registry';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ActionTypeModel, AlertTypeModel } from '../../triggers_actions_ui/public/types';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 
 interface BreadcrumbItem {
   ['data-test-subj']?: string;
@@ -59,13 +60,14 @@ export interface IShims {
   ) => Promise<any>;
   isCloud: boolean;
   triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
+  usageCollection: UsageCollectionSetup;
 }
 
 export class Legacy {
   private static _shims: IShims;
 
   public static init(
-    { core, data, isCloud, triggersActionsUi }: MonitoringStartPluginDependencies,
+    { core, data, isCloud, triggersActionsUi, usageCollection }: MonitoringStartPluginDependencies,
     ngInjector: angular.auto.IInjectorService
   ) {
     this._shims = {
@@ -119,6 +121,7 @@ export class Legacy {
         }),
       isCloud,
       triggersActionsUi,
+      usageCollection,
     };
   }
 

x-pack/plugins/monitoring/public/lib/setup_mode.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { get, includes } from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 import { Legacy } from '../legacy_shims';
 import { ajaxErrorHandlersProvider } from './ajax_error_handler';
 import { SetupModeEnterButton } from '../components/setup_mode/enter_button';
@@ -179,8 +180,17 @@ export const setSetupModeMenuItem = () => {
   const globalState = angularState.injector.get('globalState');
   const enabled = !globalState.inSetupMode;
 
+  const services = {
+    usageCollection: Legacy.shims.usageCollection,
+  };
+  const I18nContext = Legacy.shims.I18nContext;
+
   render(
-    <SetupModeEnterButton enabled={enabled} toggleSetupMode={toggleSetupMode} />,
+    <KibanaContextProvider services={services}>
+      <I18nContext>
+        <SetupModeEnterButton enabled={enabled} toggleSetupMode={toggleSetupMode} />
+      </I18nContext>
+    </KibanaContextProvider>,
     document.getElementById('setupModeNav')
   );
 };

x-pack/plugins/monitoring/public/plugin.ts

@@ -13,6 +13,7 @@ import {
   Plugin,
   PluginInitializerContext,
 } from 'kibana/public';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 import {
   FeatureCatalogueCategory,
   HomePublicPluginSetup,
@@ -28,6 +29,7 @@ interface MonitoringSetupPluginDependencies {
   home?: HomePublicPluginSetup;
   cloud?: { isCloudEnabled: boolean };
   triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
+  usageCollection: UsageCollectionSetup;
 }
 
 export class MonitoringPlugin
@@ -93,6 +95,7 @@ export class MonitoringPlugin
           pluginInitializerContext: this.initializerContext,
           externalConfig: this.getExternalConfig(),
           triggersActionsUi: plugins.triggers_actions_ui,
+          usageCollection: plugins.usageCollection,
         };
 
         pluginsStart.kibanaLegacy.loadFontAwesome();

x-pack/plugins/monitoring/public/types.ts

@@ -9,6 +9,7 @@ import { NavigationPublicPluginStart as NavigationStart } from '../../../../src/
 import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { TriggersAndActionsUIPublicPluginSetup } from '../../triggers_actions_ui/public';
 import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 export { MonitoringConfig } from '../server';
@@ -23,4 +24,5 @@ export interface MonitoringStartPluginDependencies {
   pluginInitializerContext: PluginInitializerContext;
   externalConfig: Array<Array<string | number> | Array<string | boolean>>;
   triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
+  usageCollection: UsageCollectionSetup;
 }

x-pack/plugins/monitoring/public/views/apm/instance/index.js

@@ -44,6 +44,7 @@ uiRoutes.when('/apm/instances/:uuid', {
             apm: 'APM server',
           },
         }),
+        telemetryPageViewTitle: 'apm_server_instance',
         api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm/${$route.current.params.uuid}`,
         defaultData: {},
         reactNodeId: 'apmInstanceReact',
@@ -63,21 +64,16 @@ uiRoutes.when('/apm/instances/:uuid', {
             })
           );
           title($scope.cluster, `APM server - ${get(data, 'apmSummary.name')}`);
-          this.renderReact(data);
+          this.renderReact(
+            <ApmServerInstance
+              summary={data.apmSummary || {}}
+              metrics={data.metrics || {}}
+              onBrush={this.onBrush}
+              zoomInfo={this.zoomInfo}
+            />
+          );
         }
       );
     }
-
-    renderReact(data) {
-      const component = (
-        <ApmServerInstance
-          summary={data.apmSummary || {}}
-          metrics={data.metrics || {}}
-          onBrush={this.onBrush}
-          zoomInfo={this.zoomInfo}
-        />
-      );
-      super.renderReact(component);
-    }
   },
 });