[Usage Collection] Kibana Overview Page UI Metrics (#81937)

Co-authored-by: Kibana Machine <[email protected]>

src/plugins/kibana_overview/kibana.json

@@ -4,6 +4,6 @@
   "server": false,
   "ui": true,
   "requiredPlugins": ["navigation", "data", "home"],
-  "optionalPlugins": ["newsfeed"],
+  "optionalPlugins": ["newsfeed", "usageCollection"],
   "requiredBundles": ["kibanaReact", "newsfeed"]
 }

src/plugins/kibana_overview/public/components/add_data/add_data.test.tsx

@@ -55,6 +55,10 @@ const mockFeatures = [
   },
 ];
 
+jest.mock('../../lib/ui_metric', () => ({
+  trackUiMetric: jest.fn(),
+}));
+
 const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
 
 describe('AddData', () => {

src/plugins/kibana_overview/public/components/add_data/add_data.tsx

@@ -26,6 +26,7 @@ import { RedirectAppLinks, useKibana } from '../../../../../../src/plugins/kiban
 import { FeatureCatalogueEntry } from '../../../../../../src/plugins/home/public';
 // @ts-expect-error untyped component
 import { Synopsis } from '../synopsis';
+import { METRIC_TYPE, trackUiMetric } from '../../lib/ui_metric';
 
 interface Props {
   addBasePath: (path: string) => string;
@@ -82,6 +83,9 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => {
                 title={feature.title}
                 url={addBasePath(feature.path)}
                 wrapInPanel
+                onClick={() => {
+                  trackUiMetric(METRIC_TYPE.CLICK, `ingest_data_card_${feature.id}`);
+                }}
               />
             </RedirectAppLinks>
           </EuiFlexItem>

src/plugins/kibana_overview/public/components/manage_data/manage_data.test.tsx

@@ -66,6 +66,10 @@ const mockFeatures = [
   },
 ];
 
+jest.mock('../../lib/ui_metric', () => ({
+  trackUiMetric: jest.fn(),
+}));
+
 const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
 
 describe('ManageData', () => {

src/plugins/kibana_overview/public/components/manage_data/manage_data.tsx

@@ -26,6 +26,7 @@ import { RedirectAppLinks, useKibana } from '../../../../../../src/plugins/kiban
 import { FeatureCatalogueEntry } from '../../../../../../src/plugins/home/public';
 // @ts-expect-error untyped component
 import { Synopsis } from '../synopsis';
+import { METRIC_TYPE, trackUiMetric } from '../../lib/ui_metric';
 
 interface Props {
   addBasePath: (path: string) => string;
@@ -68,6 +69,9 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => {
                     title={feature.title}
                     url={addBasePath(feature.path)}
                     wrapInPanel
+                    onClick={() => {
+                      trackUiMetric(METRIC_TYPE.CLICK, `ingest_data_card_${feature.id}`);
+                    }}
                   />
                 </RedirectAppLinks>
               </EuiFlexItem>

src/plugins/kibana_overview/public/components/overview/overview.test.tsx

@@ -36,6 +36,10 @@ jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
   OverviewPageHeader: jest.fn().mockReturnValue(<></>),
 }));
 
+jest.mock('../../lib/ui_metric', () => ({
+  trackUiMetric: jest.fn(),
+}));
+
 afterAll(() => jest.clearAllMocks());
 
 const mockNewsFetchResult = {

src/plugins/kibana_overview/public/components/overview/overview.tsx

@@ -49,6 +49,7 @@ import { AddData } from '../add_data';
 import { GettingStarted } from '../getting_started';
 import { ManageData } from '../manage_data';
 import { NewsFeed } from '../news_feed';
+import { METRIC_TYPE, trackUiMetric } from '../../lib/ui_metric';
 
 const sortByOrder = (featureA: FeatureCatalogueEntry, featureB: FeatureCatalogueEntry) =>
   (featureA.order || Infinity) - (featureB.order || Infinity);
@@ -108,6 +109,9 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
           <EuiCard
             description={app?.subtitle || ''}
             href={addBasePath(app.path)}
+            onClick={() => {
+              trackUiMetric(METRIC_TYPE.CLICK, `app_card_${appId}`);
+            }}
             image={addBasePath(
               `/plugins/${PLUGIN_ID}/assets/kibana_${appId}_${IS_DARK_THEME ? 'dark' : 'light'}.svg`
             )}
@@ -222,6 +226,9 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
                               title={title}
                               titleElement="h3"
                               titleSize="xs"
+                              onClick={() => {
+                                trackUiMetric(METRIC_TYPE.CLICK, `solution_panel_${id}`);
+                              }}
                             />
                           </RedirectAppLinks>
                         </EuiFlexItem>
@@ -252,7 +259,16 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
 
         <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-        <OverviewPageFooter addBasePath={addBasePath} path={PLUGIN_PATH} />
+        <OverviewPageFooter
+          addBasePath={addBasePath}
+          path={PLUGIN_PATH}
+          onSetDefaultRoute={() => {
+            trackUiMetric(METRIC_TYPE.CLICK, 'set_kibana_overview_as_default_route');
+          }}
+          onChangeDefaultRoute={() => {
+            trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
+          }}
+        />
       </div>
     </main>
   );

src/plugins/kibana_overview/public/lib/ui_metric.ts

@@ -0,0 +1,37 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { UiCounterMetricType, METRIC_TYPE } from '@kbn/analytics';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
+
+export { METRIC_TYPE };
+
+export let reportUiCounter: UsageCollectionSetup['reportUiCounter'] | undefined;
+
+export function init(_reportUiCounter: UsageCollectionSetup['reportUiCounter']): void {
+  reportUiCounter = _reportUiCounter;
+}
+
+export function trackUiMetric(metricType: UiCounterMetricType, name: string | string[]) {
+  if (!reportUiCounter) {
+    return;
+  }
+
+  reportUiCounter('kibana_overview', metricType, name);
+}

src/plugins/kibana_overview/public/plugin.ts

@@ -36,6 +36,7 @@ import {
   AppPluginStartDependencies,
 } from './types';
 import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_PATH, PLUGIN_ICON } from '../common';
+import { init as initStatsReporter } from './lib/ui_metric';
 
 export class KibanaOverviewPlugin
   implements
@@ -47,8 +48,12 @@ export class KibanaOverviewPlugin
     > {
   public setup(
     core: CoreSetup<AppPluginStartDependencies>,
-    { home }: AppPluginSetupDependencies
+    { home, usageCollection }: AppPluginSetupDependencies
   ): KibanaOverviewPluginSetup {
+    if (usageCollection) {
+      initStatsReporter(usageCollection.reportUiCounter);
+    }
+
     const appUpdater$ = from(core.getStartServices()).pipe(
       switchMap(([coreDeps]) => coreDeps.chrome.navLinks.getNavLinks$()),
       map((navLinks) => {

src/plugins/kibana_overview/public/types.ts

@@ -21,6 +21,7 @@ import { HomePublicPluginSetup, HomePublicPluginStart } from 'src/plugins/home/p
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { NewsfeedPublicPluginStart } from 'src/plugins/newsfeed/public';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface KibanaOverviewPluginSetup {}
@@ -30,6 +31,7 @@ export interface KibanaOverviewPluginStart {}
 
 export interface AppPluginSetupDependencies {
   home: HomePublicPluginSetup;
+  usageCollection?: UsageCollectionSetup;
 }
 
 export interface AppPluginStartDependencies {