[Cloud Posture] Column titles with tooltips (#132806) (#133001)

(cherry picked from commit 2acf777487)

# Conflicts:
#	x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx

Co-authored-by: Jordan <51442161+JordanSh@users.noreply.github.com>
Co-authored-by: Spencer <spencer@elastic.co>

x-pack/plugins/cloud_security_posture/public/components/column_name_with_tooltip.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip, EuiToolTipProps } from '@elastic/eui';
+import React, { ReactNode } from 'react';
+
+export const ColumnNameWithTooltip = ({
+  tooltipContent,
+  columnName,
+}: {
+  tooltipContent: EuiToolTipProps['content'];
+  columnName: ReactNode;
+}) => (
+  <EuiToolTip content={tooltipContent}>
+    <EuiFlexGroup gutterSize="xs" alignItems="center">
+      <EuiFlexItem>
+        <span>{columnName}</span>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiIcon size="m" color="subdued" type="questionInCircle" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiToolTip>
+);

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/findings_by_resource_table.test.tsx

@@ -27,6 +27,7 @@ const getFakeFindingsByResource = (): CspFindingsByResource => {
   const normalized = count / total;
 
   return {
+    cluster_id: chance.guid(),
     resource_id: chance.guid(),
     resource_name: chance.word(),
     resource_subtype: chance.word(),

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/findings_by_resource_table.tsx

@@ -18,6 +18,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import numeral from '@elastic/numeral';
 import { Link, generatePath } from 'react-router-dom';
+import { ColumnNameWithTooltip } from '../../../components/column_name_with_tooltip';
 import { extractErrorMessage } from '../../../../common/utils/helpers';
 import * as TEST_SUBJECTS from '../test_subjects';
 import * as TEXT from '../translations';
@@ -70,9 +71,14 @@ const columns: Array<EuiTableFieldDataColumnType<CspFindingsByResource>> = [
   {
     field: 'resource_id',
     name: (
-      <FormattedMessage
-        id="xpack.csp.findings.groupByResourceTable.resourceIdColumnLabel"
-        defaultMessage="Resource ID"
+      <ColumnNameWithTooltip
+        columnName={TEXT.RESOURCE_ID}
+        tooltipContent={i18n.translate(
+          'xpack.csp.findings.resourceTable.resourceTableColumn.resourceIdColumnTooltipLabel',
+          {
+            defaultMessage: 'Custom Elastic Resource ID',
+          }
+        )}
       />
     ),
     render: (resourceId: CspFindingsByResource['resource_id']) => (
@@ -112,6 +118,21 @@ const columns: Array<EuiTableFieldDataColumnType<CspFindingsByResource>> = [
     ),
     render: (sections: string[]) => sections.join(', '),
   },
+  {
+    field: 'cluster_id',
+    name: (
+      <ColumnNameWithTooltip
+        columnName={TEXT.CLUSTER_ID}
+        tooltipContent={i18n.translate(
+          'xpack.csp.findings.resourceTable.resourceTableColumn.clusterIdColumnTooltipLabel',
+          {
+            defaultMessage: 'Kube-System Namespace ID',
+          }
+        )}
+      />
+    ),
+    truncateText: true,
+  },
   {
     field: 'failed_findings',
     width: '150px',

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/use_findings_by_resource.ts

@@ -45,6 +45,7 @@ interface FindingsAggBucket extends estypes.AggregationsStringRareTermsBucketKey
   failed_findings: estypes.AggregationsMultiBucketBase;
   name: estypes.AggregationsMultiBucketAggregateBase<estypes.AggregationsStringTermsBucketKeys>;
   subtype: estypes.AggregationsMultiBucketAggregateBase<estypes.AggregationsStringTermsBucketKeys>;
+  cluster_id: estypes.AggregationsMultiBucketAggregateBase<estypes.AggregationsStringTermsBucketKeys>;
   cis_sections: estypes.AggregationsMultiBucketAggregateBase<estypes.AggregationsStringRareTermsBucketKeys>;
 }
 
@@ -75,6 +76,9 @@ export const getFindingsByResourceAggQuery = ({
           failed_findings: {
             filter: { term: { 'result.evaluation.keyword': 'failed' } },
           },
+          cluster_id: {
+            terms: { field: 'cluster_id.keyword', size: 1 },
+          },
           sort_failed_findings: {
             bucket_sort: {
               from,
@@ -129,14 +133,20 @@ const createFindingsByResource = (resource: FindingsAggBucket) => {
   if (
     !Array.isArray(resource.cis_sections.buckets) ||
     !Array.isArray(resource.name.buckets) ||
-    !Array.isArray(resource.subtype.buckets)
+    !Array.isArray(resource.subtype.buckets) ||
+    !Array.isArray(resource.cluster_id.buckets) ||
+    !resource.cis_sections.buckets.length ||
+    !resource.name.buckets.length ||
+    !resource.subtype.buckets.length ||
+    !resource.cluster_id.buckets.length
   )
     throw new Error('expected buckets to be an array');
 
   return {
     resource_id: resource.key,
-    resource_name: resource.name.buckets.map((v) => v.key).at(0),
-    resource_subtype: resource.subtype.buckets.map((v) => v.key).at(0),
+    resource_name: resource.name.buckets[0].key,
+    resource_subtype: resource.subtype.buckets[0].key,
+    cluster_id: resource.cluster_id.buckets[0].key,
     cis_sections: resource.cis_sections.buckets.map((v) => v.key),
     failed_findings: {
       count: resource.failed_findings.doc_count,

x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx

@@ -17,6 +17,7 @@ import {
 import { css } from '@emotion/react';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
+import { ColumnNameWithTooltip } from '../../../components/column_name_with_tooltip';
 import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge';
 import * as TEXT from '../translations';
 import { CspFinding } from '../types';
@@ -67,7 +68,17 @@ export const getExpandColumn = <T extends unknown>({
 export const getFindingsColumns = (): Array<EuiBasicTableColumn<CspFinding>> => [
   {
     field: 'resource_id',
-    name: TEXT.RESOURCE_ID,
+    name: (
+      <ColumnNameWithTooltip
+        columnName={TEXT.RESOURCE_ID}
+        tooltipContent={i18n.translate(
+          'xpack.csp.findings.findingsTable.findingsTableColumn.resourceIdColumnTooltipLabel',
+          {
+            defaultMessage: 'Custom Elastic Resource ID',
+          }
+        )}
+      />
+    ),
     truncateText: true,
     width: '15%',
     sortable: true,
@@ -91,18 +102,28 @@ export const getFindingsColumns = (): Array<EuiBasicTableColumn<CspFinding>> =>
     name: TEXT.RULE,
     sortable: true,
   },
-  {
-    field: 'cluster_id',
-    name: TEXT.CLUSTER_ID,
-    truncateText: true,
-    sortable: true,
-  },
   {
     field: 'rule.section',
     name: TEXT.CIS_SECTION,
     sortable: true,
     truncateText: true,
   },
+  {
+    field: 'cluster_id',
+    name: (
+      <ColumnNameWithTooltip
+        columnName={TEXT.CLUSTER_ID}
+        tooltipContent={i18n.translate(
+          'xpack.csp.findings.resourceTable.resourceTableColumn.clusterIdColumnTooltipLabel',
+          {
+            defaultMessage: 'Kube-System Namespace ID',
+          }
+        )}
+      />
+    ),
+    truncateText: true,
+    sortable: true,
+  },
   {
     field: '@timestamp',
     width: '150px',