From 813eebe1cef0fa63245f1a9df2c0e1b5a1945b6c Mon Sep 17 00:00:00 2001
From: Pablo Machado <machadoum@gmail.com>
Date: Tue, 22 Aug 2023 16:02:11 +0200
Subject: [PATCH] [Security Solutions] Add telemetry to the side navigation
 tracking for serverless pages (#164309)

issue: https://github.com/elastic/kibana/issues/164306

## Summary
Add <TrackApplicationView> telemetry to serverless-specific Security
pages
Pages: Investigations, Assets, ML, Project Settings.

## How to test it
* Visit Investigations, Assets, ML, and Project Settings.
When you navigate between pages the app should log "Reporting
application usage for securitySolutionUI, {PAGE}" like it does for the
other pages

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../security_solution_serverless/kibana.jsonc |  5 ++-
 .../public/pages/assets.tsx                   | 37 ++++++++++---------
 .../public/pages/investigations.tsx           | 11 ++++--
 .../public/pages/machine_learning.tsx         | 11 ++++--
 .../public/pages/project_settings.tsx         | 17 +++++----
 .../tsconfig.json                             |  3 +-
 6 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/x-pack/plugins/security_solution_serverless/kibana.jsonc b/x-pack/plugins/security_solution_serverless/kibana.jsonc
index 68b6eb71af8d50..3f9080adc51730 100644
--- a/x-pack/plugins/security_solution_serverless/kibana.jsonc
+++ b/x-pack/plugins/security_solution_serverless/kibana.jsonc
@@ -25,6 +25,9 @@
     "optionalPlugins": [
       "securitySolutionEss"
     ],
-    "requiredBundles": ["kibanaUtils"]
+    "requiredBundles": [
+      "kibanaUtils",
+      "usageCollection"
+    ]
   }
 }
diff --git a/x-pack/plugins/security_solution_serverless/public/pages/assets.tsx b/x-pack/plugins/security_solution_serverless/public/pages/assets.tsx
index 1781a527692973..ae3b90c0ec8774 100644
--- a/x-pack/plugins/security_solution_serverless/public/pages/assets.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/pages/assets.tsx
@@ -12,6 +12,7 @@ import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { EuiCallOut, EuiPageHeader, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { LinkButton } from '@kbn/security-solution-navigation/links';
+import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
 import { useNavLink } from '../common/hooks/use_nav_links';
 import { ExternalPageName } from '../navigation/links/constants';
 
@@ -42,23 +43,25 @@ export const AssetsRoute: React.FC = () => {
   return (
     <KibanaPageTemplate restrictWidth={false} contentBorder={false} grow={true}>
       <KibanaPageTemplate.Section>
-        <EuiPageHeader pageTitle={title} />
-        <EuiSpacer size="l" />
-        <EuiSpacer size="xl" />
-        <LandingLinksIconsGroups items={links} />
-        <EuiSpacer size="l" />
-        <EuiSpacer size="l" />
-        <EuiCallOut
-          title={INTEGRATIONS_CALLOUT_TITLE}
-          color="primary"
-          iconType="cluster"
-          style={{ borderRadius: euiTheme.border.radius.medium }}
-        >
-          <p>{INTEGRATIONS_CALLOUT_DESCRIPTION}</p>
-          <LinkButton id={ExternalPageName.integrationsSecurity} fill>
-            {INTEGRATIONS_CALLOUT_BUTTON_TEXT}
-          </LinkButton>
-        </EuiCallOut>
+        <TrackApplicationView viewId={SecurityPageName.assets}>
+          <EuiPageHeader pageTitle={title} />
+          <EuiSpacer size="l" />
+          <EuiSpacer size="xl" />
+          <LandingLinksIconsGroups items={links} />
+          <EuiSpacer size="l" />
+          <EuiSpacer size="l" />
+          <EuiCallOut
+            title={INTEGRATIONS_CALLOUT_TITLE}
+            color="primary"
+            iconType="cluster"
+            style={{ borderRadius: euiTheme.border.radius.medium }}
+          >
+            <p>{INTEGRATIONS_CALLOUT_DESCRIPTION}</p>
+            <LinkButton id={ExternalPageName.integrationsSecurity} fill>
+              {INTEGRATIONS_CALLOUT_BUTTON_TEXT}
+            </LinkButton>
+          </EuiCallOut>
+        </TrackApplicationView>
       </KibanaPageTemplate.Section>
     </KibanaPageTemplate>
   );
diff --git a/x-pack/plugins/security_solution_serverless/public/pages/investigations.tsx b/x-pack/plugins/security_solution_serverless/public/pages/investigations.tsx
index 0aeedb8133a589..af217b94e89983 100644
--- a/x-pack/plugins/security_solution_serverless/public/pages/investigations.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/pages/investigations.tsx
@@ -10,6 +10,7 @@ import { LandingLinksIcons } from '@kbn/security-solution-navigation/landing_lin
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
 import { useNavLink } from '../common/hooks/use_nav_links';
 
 export const InvestigationsRoute: React.FC = () => {
@@ -19,10 +20,12 @@ export const InvestigationsRoute: React.FC = () => {
   return (
     <KibanaPageTemplate restrictWidth={false} contentBorder={false} grow={true}>
       <KibanaPageTemplate.Section>
-        <EuiPageHeader pageTitle={title} />
-        <EuiSpacer size="l" />
-        <EuiSpacer size="xl" />
-        <LandingLinksIcons items={links} />
+        <TrackApplicationView viewId={SecurityPageName.investigations}>
+          <EuiPageHeader pageTitle={title} />
+          <EuiSpacer size="l" />
+          <EuiSpacer size="xl" />
+          <LandingLinksIcons items={links} />
+        </TrackApplicationView>
       </KibanaPageTemplate.Section>
     </KibanaPageTemplate>
   );
diff --git a/x-pack/plugins/security_solution_serverless/public/pages/machine_learning.tsx b/x-pack/plugins/security_solution_serverless/public/pages/machine_learning.tsx
index 84d5841d14a07f..a790e7784e37ea 100644
--- a/x-pack/plugins/security_solution_serverless/public/pages/machine_learning.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/pages/machine_learning.tsx
@@ -10,6 +10,7 @@ import { LandingLinksIconsCategories } from '@kbn/security-solution-navigation/l
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
 import { useNavLink } from '../common/hooks/use_nav_links';
 
 export const MachineLearningRoute: React.FC = () => {
@@ -19,10 +20,12 @@ export const MachineLearningRoute: React.FC = () => {
   return (
     <KibanaPageTemplate restrictWidth={false} contentBorder={false} grow={true}>
       <KibanaPageTemplate.Section>
-        <EuiPageHeader pageTitle={title} />
-        <EuiSpacer size="l" />
-        <EuiSpacer size="xl" />
-        <LandingLinksIconsCategories links={links} categories={categories} />
+        <TrackApplicationView viewId={SecurityPageName.mlLanding}>
+          <EuiPageHeader pageTitle={title} />
+          <EuiSpacer size="l" />
+          <EuiSpacer size="xl" />
+          <LandingLinksIconsCategories links={links} categories={categories} />
+        </TrackApplicationView>
       </KibanaPageTemplate.Section>
     </KibanaPageTemplate>
   );
diff --git a/x-pack/plugins/security_solution_serverless/public/pages/project_settings.tsx b/x-pack/plugins/security_solution_serverless/public/pages/project_settings.tsx
index dc9e81b8194118..9c3f8e5012a67b 100644
--- a/x-pack/plugins/security_solution_serverless/public/pages/project_settings.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/pages/project_settings.tsx
@@ -18,6 +18,7 @@ import {
   SecurityPageName,
 } from '@kbn/security-solution-navigation';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
 import { useNavLink } from '../common/hooks/use_nav_links';
 
 export const ProjectSettingsRoute: React.FC = () => {
@@ -34,13 +35,15 @@ export const ProjectSettingsRoute: React.FC = () => {
   return (
     <KibanaPageTemplate restrictWidth={false} contentBorder={false} grow={true}>
       <KibanaPageTemplate.Section>
-        <EuiPageHeader pageTitle={title} />
-        <EuiSpacer size="l" />
-        <EuiSpacer size="xl" />
-        <LandingLinksIcons items={iconLinks} />
-        <EuiSpacer size="l" />
-        <EuiHorizontalRule />
-        <LandingLinksIconsCategoriesGroups links={links} categories={accordionCategories} />
+        <TrackApplicationView viewId={SecurityPageName.projectSettings}>
+          <EuiPageHeader pageTitle={title} />
+          <EuiSpacer size="l" />
+          <EuiSpacer size="xl" />
+          <LandingLinksIcons items={iconLinks} />
+          <EuiSpacer size="l" />
+          <EuiHorizontalRule />
+          <LandingLinksIconsCategoriesGroups links={links} categories={accordionCategories} />
+        </TrackApplicationView>
       </KibanaPageTemplate.Section>
     </KibanaPageTemplate>
   );
diff --git a/x-pack/plugins/security_solution_serverless/tsconfig.json b/x-pack/plugins/security_solution_serverless/tsconfig.json
index ba8d4bbd9688f6..6ea4adba542916 100644
--- a/x-pack/plugins/security_solution_serverless/tsconfig.json
+++ b/x-pack/plugins/security_solution_serverless/tsconfig.json
@@ -37,6 +37,7 @@
     "@kbn/cloud-plugin",
     "@kbn/cloud-security-posture-plugin",
     "@kbn/fleet-plugin",
-    "@kbn/core-elasticsearch-server"
+    "@kbn/core-elasticsearch-server",
+    "@kbn/usage-collection-plugin"
   ]
 }