[Monitoring] Usage collection

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, '_');
+  console.log({ pageViewTitle, path });
+  useTrackPageview({ app: 'stack_monitoring', path });
+  return <PageLoadingUI />;
+}
+
+export function PageLoading({ pageViewTitle }) {
+  if (pageViewTitle) {
+    return <PageLoadingTracking pageViewTitle={pageViewTitle} />;
+  }
+
+  return <PageLoadingUI />;
+}

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/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/base_controller.js

@@ -13,6 +13,7 @@ import { Legacy } from '../legacy_shims';
 import { PromiseWithCancel } from '../../common/cancel_promise';
 import { SetupModeFeature } from '../../common/enums';
 import { updateSetupModeData, isSetupModeFeatureEnabled } from '../lib/setup_mode';
+import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
 
 /**
  * Given a timezone, this function will calculate the offset in milliseconds
@@ -88,6 +89,7 @@ export class MonitoringViewBaseController {
     options = {},
     alerts = { shouldFetch: false, options: {} },
     fetchDataImmediately = true,
+    telemetryPageViewTitle = '',
   }) {
     const titleService = $injector.get('title');
     const $executor = $injector.get('$executor');
@@ -99,6 +101,7 @@ export class MonitoringViewBaseController {
     $scope.pageData = this.data = { ...defaultData };
     this._isDataInitialized = false;
     this.reactNodeId = reactNodeId;
+    this.telemetryPageViewTitle = telemetryPageViewTitle || title;
 
     let deferTimer;
     let zoomInLevel = 0;
@@ -204,6 +207,8 @@ export class MonitoringViewBaseController {
         deferTimer = setTimeout(() => addPopstateHandler(), 10);
       };
 
+      // Render loading state
+      this.renderReact(null, true);
       fetchDataImmediately && this.updateData();
     });
 
@@ -225,15 +230,26 @@ export class MonitoringViewBaseController {
     this.setTitle = (title) => titleService($scope.cluster, title);
   }
 
-  renderReact(component) {
+  renderReact(component, trackPageView = false) {
     const renderElement = document.getElementById(this.reactNodeId);
     if (!renderElement) {
       console.warn(`"#${this.reactNodeId}" element has not been added to the DOM yet`);
       return;
     }
+    const services = {
+      usageCollection: Legacy.shims.usageCollection,
+    };
     const I18nContext = Legacy.shims.I18nContext;
     const wrappedComponent = (
-      <I18nContext>{!this._isDataInitialized ? <PageLoading /> : component}</I18nContext>
+      <KibanaContextProvider services={services}>
+        <I18nContext>
+          {!this._isDataInitialized ? (
+            <PageLoading pageViewTitle={trackPageView ? this.telemetryPageViewTitle : null} />
+          ) : (
+            component
+          )}
+        </I18nContext>
+      </KibanaContextProvider>
     );
     render(wrappedComponent, renderElement);
   }

x-pack/plugins/monitoring/public/views/cluster/listing/index.js

@@ -48,6 +48,7 @@ uiRoutes
           $scope,
           $injector,
           reactNodeId: 'monitoringClusterListingApp',
+          telemetryPageViewTitle: 'cluster_listing',
         });
 
         const $route = $injector.get('$route');

x-pack/plugins/monitoring/public/views/cluster/overview/index.js

@@ -51,6 +51,7 @@ uiRoutes.when('/overview', {
         alerts: {
           shouldFetch: true,
         },
+        telemetryPageViewTitle: 'cluster_overview',
       });
 
       this.init = () => this.renderReact(null);

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js

@@ -39,13 +39,12 @@ uiRoutes.when('/elasticsearch/ccr', {
       $scope.$watch(
         () => this.data,
         (data) => {
-          this.renderReact(data);
+          if (!data) {
+            return;
+          }
+          this.renderReact(<Ccr data={data.data} />);
         }
       );
-
-      this.renderReact = ({ data }) => {
-        super.renderReact(<Ccr data={data} />);
-      };
     }
   },
 });

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js

@@ -48,13 +48,12 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
       $scope.$watch(
         () => this.data,
         (data) => {
-          this.renderReact(data);
+          if (!data) {
+            return;
+          }
+          this.renderReact(<CcrShard {...data} />);
         }
       );
-
-      this.renderReact = (props) => {
-        super.renderReact(<CcrShard {...props} />);
-      };
     }
   },
 });

x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js

@@ -64,23 +64,24 @@ uiRoutes.when('/elasticsearch/indices', {
       $scope.$watch(
         () => this.data,
         (data) => {
-          this.renderReact(data);
+          if (!data) {
+            return;
+          }
+
+          const { clusterStatus, indices } = data;
+          this.renderReact(
+            <ElasticsearchIndices
+              clusterStatus={clusterStatus}
+              indices={indices}
+              showSystemIndices={showSystemIndices}
+              toggleShowSystemIndices={toggleShowSystemIndices}
+              sorting={this.sorting}
+              pagination={this.pagination}
+              onTableChange={this.onTableChange}
+            />
+          );
         }
       );
-
-      this.renderReact = ({ clusterStatus, indices }) => {
-        super.renderReact(
-          <ElasticsearchIndices
-            clusterStatus={clusterStatus}
-            indices={indices}
-            showSystemIndices={showSystemIndices}
-            toggleShowSystemIndices={toggleShowSystemIndices}
-            sorting={this.sorting}
-            pagination={this.pagination}
-            onTableChange={this.onTableChange}
-          />
-        );
-      };
     }
   },
 });

x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js

@@ -92,38 +92,41 @@ uiRoutes.when('/elasticsearch/nodes', {
 
       $scope.$watch(
         () => this.data,
-        () => this.renderReact(this.data || {})
-      );
+        (data) => {
+          if (!data) {
+            return;
+          }
 
-      this.renderReact = ({ clusterStatus, nodes, totalNodeCount }) => {
-        const pagination = {
-          ...this.pagination,
-          totalItemCount: totalNodeCount,
-        };
+          const { clusterStatus, nodes, totalNodeCount } = data;
+          const pagination = {
+            ...this.pagination,
+            totalItemCount: totalNodeCount,
+          };
 
-        super.renderReact(
-          <SetupModeRenderer
-            scope={$scope}
-            injector={$injector}
-            productName={ELASTICSEARCH_SYSTEM_ID}
-            render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
-              <Fragment>
-                {flyoutComponent}
-                <ElasticsearchNodes
-                  clusterStatus={clusterStatus}
-                  clusterUuid={globalState.cluster_uuid}
-                  setupMode={setupMode}
-                  nodes={nodes}
-                  alerts={this.alerts}
-                  showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
-                  {...this.getPaginationTableProps(pagination)}
-                />
-                {bottomBarComponent}
-              </Fragment>
-            )}
-          />
-        );
-      };
+          this.renderReact(
+            <SetupModeRenderer
+              scope={$scope}
+              injector={$injector}
+              productName={ELASTICSEARCH_SYSTEM_ID}
+              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+                <Fragment>
+                  {flyoutComponent}
+                  <ElasticsearchNodes
+                    clusterStatus={clusterStatus}
+                    clusterUuid={globalState.cluster_uuid}
+                    setupMode={setupMode}
+                    nodes={nodes}
+                    alerts={this.alerts}
+                    showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
+                    {...this.getPaginationTableProps(pagination)}
+                  />
+                  {bottomBarComponent}
+                </Fragment>
+              )}
+            />
+          );
+        }
+      );
     }
   },
 });

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

@@ -66,6 +66,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
     constructor($injector, $scope) {
       super({
         title: `Kibana - ${get($scope.pageData, 'kibanaSummary.name')}`,
+        telemetryPageViewTitle: 'kibana_instance',
         defaultData: {},
         getPageData,
         reactNodeId: 'monitoringKibanaInstanceApp',
@@ -85,7 +86,6 @@ uiRoutes.when('/kibana/instances/:uuid', {
           if (!data || !data.metrics) {
             return;
           }
-
           this.setTitle(`Kibana - ${get(data, 'kibanaSummary.name')}`);
 
           this.renderReact(

x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js

@@ -69,6 +69,7 @@ uiRoutes.when('/logstash/node/:uuid/advanced', {
         reactNodeId: 'monitoringLogstashNodeAdvancedApp',
         $scope,
         $injector,
+        telemetryPageViewTitle: 'logstash_node_advanced',
       });
 
       $scope.$watch(

x-pack/plugins/monitoring/public/views/logstash/node/index.js

@@ -76,6 +76,7 @@ uiRoutes.when('/logstash/node/:uuid', {
             alertTypeIds: [ALERT_LOGSTASH_VERSION_MISMATCH],
           },
         },
+        telemetryPageViewTitle: 'logstash_node',
       });
 
       $scope.$watch(

x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js

@@ -81,6 +81,7 @@ uiRoutes.when('/logstash/node/:uuid/pipelines', {
         $scope,
         $injector,
         fetchDataImmediately: false, // We want to apply pagination before sending the first request
+        telemetryPageViewTitle: 'logstash_node_pipelines',
       });
 
       $scope.$watch(