[Security Solutions] Add telemetry to the side navigation tracking fo…

…r serverless pages (#164309) issue: #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 <[email protected]>
elastic · Aug 22, 2023 · 813eebe · 813eebe
1 parent 03e2ba9
commit 813eebe
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
   ]
 }