[8.x] CDR workflow UI counters (elastic#196346)

# Backport

This will backport the following commits from `main` to `8.x`:
- [CDR workflow UI
counters](elastic#196305)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ido
Cohen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-15T15:16:15Z","message":"CDR
workflow UI
counters","sha":"489dc1dca3dc7793ebbf147e698834b9e54e3d7f","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor"],"title":"CDR workflow UI
counters","number":196305,"url":"https://github.com/elastic/kibana/pull/196305","mergeCommit":{"message":"CDR
workflow UI
counters","sha":"489dc1dca3dc7793ebbf147e698834b9e54e3d7f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196305","number":196305,"mergeCommit":{"message":"CDR
workflow UI
counters","sha":"489dc1dca3dc7793ebbf147e698834b9e54e3d7f"}}]}]
BACKPORT-->

Co-authored-by: Ido Cohen <[email protected]>

x-pack/packages/kbn-cloud-security-posture/common/utils/ui_metrics.ts

@@ -10,8 +10,14 @@ import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
 
 export const APP_NAME = 'cloud-security';
 
-export const ENTITY_FLYOUT_MISCONFIGURATION_VIEW_VISITS =
-  'entity-flyout-misconfiguration-view-visits';
+export const ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT =
+  'entity-flyout-with-misconfiguration-visits';
+export const ENTITY_FLYOUT_WITH_VULNERABILITY_PREVIEW =
+  'entity-flyout-with-vulnerability-preview-visits';
+export const ENTITY_FLYOUT_EXPAND_MISCONFIGURATION_VIEW_VISITS =
+  'entity-flyout-expand-misconfiguration-view-visits';
+export const ENTITY_FLYOUT_EXPAND_VULNERABILITY_VIEW_VISITS =
+  'entity-flyout-expand-vulnerability-view-visits';
 export const NAV_TO_FINDINGS_BY_HOST_NAME_FRPOM_ENTITY_FLYOUT =
   'nav-to-findings-by-host-name-from-entity-flyout';
 export const NAV_TO_FINDINGS_BY_RULE_NAME_FRPOM_ENTITY_FLYOUT =
@@ -22,18 +28,19 @@ export const VULNERABILITIES_FLYOUT_VISITS = 'vulnerabilities-flyout-visits';
 export const OPEN_FINDINGS_FLYOUT = 'open-findings-flyout';
 export const GROUP_BY_CLICK = 'group-by-click';
 export const CHANGE_RULE_STATE = 'change-rule-state';
-export const ENTITY_FLYOUT_VULNERABILITY_VIEW_VISITS = 'entity-flyout-vulnerability-view-visits';
 
 type CloudSecurityUiCounters =
-  | typeof ENTITY_FLYOUT_MISCONFIGURATION_VIEW_VISITS
+  | typeof ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT
+  | typeof ENTITY_FLYOUT_WITH_VULNERABILITY_PREVIEW
+  | typeof ENTITY_FLYOUT_EXPAND_MISCONFIGURATION_VIEW_VISITS
+  | typeof ENTITY_FLYOUT_EXPAND_VULNERABILITY_VIEW_VISITS
   | typeof NAV_TO_FINDINGS_BY_HOST_NAME_FRPOM_ENTITY_FLYOUT
-  | typeof VULNERABILITIES_FLYOUT_VISITS
   | typeof NAV_TO_FINDINGS_BY_RULE_NAME_FRPOM_ENTITY_FLYOUT
+  | typeof VULNERABILITIES_FLYOUT_VISITS
   | typeof OPEN_FINDINGS_FLYOUT
   | typeof CREATE_DETECTION_RULE_FROM_FLYOUT
   | typeof CREATE_DETECTION_FROM_TABLE_ROW_ACTION
   | typeof GROUP_BY_CLICK
-  | typeof ENTITY_FLYOUT_VULNERABILITY_VIEW_VISITS
   | typeof CHANGE_RULE_STATE;
 
 export class UiMetricService {

x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import type { Criteria, EuiBasicTableColumn } from '@elastic/eui';
 import { EuiSpacer, EuiIcon, EuiPanel, EuiLink, EuiText, EuiBasicTable } from '@elastic/eui';
 import { useMisconfigurationFindings } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_findings';
@@ -18,7 +18,7 @@ import { useNavigateFindings } from '@kbn/cloud-security-posture/src/hooks/use_n
 import type { CspBenchmarkRuleMetadata } from '@kbn/cloud-security-posture-common/schema/rules/latest';
 import { CspEvaluationBadge } from '@kbn/cloud-security-posture';
 import {
-  ENTITY_FLYOUT_MISCONFIGURATION_VIEW_VISITS,
+  ENTITY_FLYOUT_EXPAND_MISCONFIGURATION_VIEW_VISITS,
   NAV_TO_FINDINGS_BY_HOST_NAME_FRPOM_ENTITY_FLYOUT,
   NAV_TO_FINDINGS_BY_RULE_NAME_FRPOM_ENTITY_FLYOUT,
   uiMetricService,
@@ -58,7 +58,13 @@ const getFindingsStats = (passedFindingsStats: number, failedFindingsStats: numb
  */
 export const MisconfigurationFindingsDetailsTable = memo(
   ({ fieldName, queryName }: { fieldName: 'host.name' | 'user.name'; queryName: string }) => {
-    uiMetricService.trackUiMetric(METRIC_TYPE.COUNT, ENTITY_FLYOUT_MISCONFIGURATION_VIEW_VISITS);
+    useEffect(() => {
+      uiMetricService.trackUiMetric(
+        METRIC_TYPE.COUNT,
+        ENTITY_FLYOUT_EXPAND_MISCONFIGURATION_VIEW_VISITS
+      );
+    }, []);
+
     const { data } = useMisconfigurationFindings({
       query: buildEntityFlyoutPreviewQuery(fieldName, queryName),
       sort: [],

x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import type { Criteria, EuiBasicTableColumn } from '@elastic/eui';
 import { EuiSpacer, EuiIcon, EuiPanel, EuiLink, EuiText, EuiBasicTable } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -24,7 +24,7 @@ import {
   SeverityStatusBadge,
 } from '@kbn/cloud-security-posture';
 import {
-  ENTITY_FLYOUT_VULNERABILITY_VIEW_VISITS,
+  ENTITY_FLYOUT_EXPAND_VULNERABILITY_VIEW_VISITS,
   NAV_TO_FINDINGS_BY_HOST_NAME_FRPOM_ENTITY_FLYOUT,
   uiMetricService,
 } from '@kbn/cloud-security-posture-common/utils/ui_metrics';
@@ -42,7 +42,13 @@ interface VulnerabilitiesPackage extends Vulnerability {
 }
 
 export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryName: string }) => {
-  uiMetricService.trackUiMetric(METRIC_TYPE.COUNT, ENTITY_FLYOUT_VULNERABILITY_VIEW_VISITS);
+  useEffect(() => {
+    uiMetricService.trackUiMetric(
+      METRIC_TYPE.COUNT,
+      ENTITY_FLYOUT_EXPAND_VULNERABILITY_VIEW_VISITS
+    );
+  }, []);
+
   const { data } = useVulnerabilitiesFindings({
     query: buildEntityFlyoutPreviewQuery('host.name', queryName),
     sort: [],

x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { css } from '@emotion/react';
 import type { EuiThemeComputed } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle } from '@elastic/eui';
@@ -19,6 +19,11 @@ import { buildEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-commo
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
 import { hasVulnerabilitiesData } from '@kbn/cloud-security-posture';
+import { METRIC_TYPE } from '@kbn/analytics';
+import {
+  ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT,
+  uiMetricService,
+} from '@kbn/cloud-security-posture-common/utils/ui_metrics';
 import {
   CspInsightLeftPanelSubTab,
   EntityDetailsLeftPanelTab,
@@ -120,6 +125,9 @@ export const MisconfigurationsPreview = ({
   const passedFindings = data?.count.passed || 0;
   const failedFindings = data?.count.failed || 0;
 
+  useEffect(() => {
+    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT);
+  }, []);
   const { euiTheme } = useEuiTheme();
   const hasMisconfigurationFindings = passedFindings > 0 || failedFindings > 0;
 

x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { css } from '@emotion/react';
 import type { EuiThemeComputed } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle } from '@elastic/eui';
@@ -20,6 +20,11 @@ import {
 import { getVulnerabilityStats, hasVulnerabilitiesData } from '@kbn/cloud-security-posture';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview';
+import {
+  ENTITY_FLYOUT_WITH_VULNERABILITY_PREVIEW,
+  uiMetricService,
+} from '@kbn/cloud-security-posture-common/utils/ui_metrics';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { EntityDetailsLeftPanelTab } from '../../../flyout/entity_details/shared/components/left_panel/left_panel_header';
 import { HostDetailsPanelKey } from '../../../flyout/entity_details/host_details_left';
 import { useRiskScore } from '../../../entity_analytics/api/hooks/use_risk_score';
@@ -71,6 +76,10 @@ export const VulnerabilitiesPreview = ({
   name: string;
   isPreviewMode?: boolean;
 }) => {
+  useEffect(() => {
+    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, ENTITY_FLYOUT_WITH_VULNERABILITY_PREVIEW);
+  }, []);
+
   const { data } = useVulnerabilitiesPreview({
     query: buildEntityFlyoutPreviewQuery('host.name', name),
     sort: [],