[Cloud Posture] add resource table columns

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

@@ -6,12 +6,14 @@
  */
 import React from 'react';
 import {
-  EuiTableFieldDataColumnType,
   EuiEmptyPrompt,
   EuiBasicTable,
   EuiTextColor,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIconTip,
+  EuiToolTip,
+  EuiBasicTableColumn,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import numeral from '@elastic/numeral';
@@ -21,6 +23,7 @@ import * as TEST_SUBJECTS from '../test_subjects';
 import * as TEXT from '../translations';
 import type { CspFindingsByResourceResult } from './use_findings_by_resource';
 import { findingsNavigation } from '../../../common/navigation/constants';
+import { getResourceIdColumn } from '../layout/findings_layout';
 
 export const formatNumber = (value: number) =>
   value < 1000 ? value : numeral(value).format('0.0a');
@@ -54,39 +57,71 @@ const FindingsByResourceTableComponent = ({
   );
 };
 
-const columns: Array<EuiTableFieldDataColumnType<CspFindingsByResource>> = [
+const columns: Array<EuiBasicTableColumn<CspFindingsByResource>> = [
+  getResourceIdColumn<CspFindingsByResource>({
+    render: (resourceId: string) => (
+      <EuiToolTip position="top" content={resourceId} anchorClassName={'eui-textTruncate'}>
+        <Link to={generatePath(findingsNavigation.resource_findings.path, { resourceId })}>
+          {resourceId}
+        </Link>
+      </EuiToolTip>
+    ),
+  }),
   {
-    field: 'resource_id',
+    field: 'resource.type',
+    truncateText: true,
     name: (
       <FormattedMessage
-        id="xpack.csp.findings.groupByResourceTable.resourceIdColumnLabel"
-        defaultMessage="Resource ID"
+        id="xpack.csp.findings.groupByResourceTable.resourceTypeColumnLabel"
+        defaultMessage="Resource Type"
       />
     ),
-    render: (resourceId: CspFindingsByResource['resource_id']) => (
-      <Link to={generatePath(findingsNavigation.resource_findings.path, { resourceId })}>
-        {resourceId}
-      </Link>
+  },
+  {
+    field: 'resource.name',
+    truncateText: true,
+    name: (
+      <FormattedMessage
+        id="xpack.csp.findings.groupByResourceTable.resourceNameColumnLabel"
+        defaultMessage="Resource Name"
+      />
     ),
   },
   {
     field: 'cis_section',
     truncateText: true,
     name: (
       <FormattedMessage
-        id="xpack.csp.findings.groupByResourceTable.cisSectionColumnLabel"
-        defaultMessage="CIS Section"
+        id="xpack.csp.findings.groupByResourceTable.cisSectionsColumnLabel"
+        defaultMessage="CIS Sections"
       />
     ),
+    render: (sections?: string[]) => sections?.join?.(', '),
   },
   {
     field: 'cluster_id',
     truncateText: true,
     name: (
-      <FormattedMessage
-        id="xpack.csp.findings.groupByResourceTable.clusterIdColumnLabel"
-        defaultMessage="Cluster ID"
-      />
+      <EuiFlexGroup gutterSize="xs">
+        <EuiFlexItem>
+          <FormattedMessage
+            id="xpack.csp.findings.groupByResourceTable.clusterIdColumnLabel"
+            defaultMessage="Cluster ID"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiIconTip
+            type="iInCircle"
+            color="subdued"
+            content={
+              <FormattedMessage
+                id="xpack.csp.findings.groupByResourceTable.clusterIdColumnDescription"
+                defaultMessage="Kube-System Namespace ID"
+              />
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     ),
   },
   {

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

@@ -22,19 +22,19 @@ export type CspFindingsByResourceResult = FindingsQueryResult<
   unknown
 >;
 
-interface FindingsByResourceAggs extends estypes.AggregationsCompositeAggregate {
-  groupBy: {
-    buckets: FindingsAggBucket[];
-  };
-}
+export type FindingsByResourceAggregationsKeys = Record<
+  'resource_id' | 'cluster_id' | 'cis_section' | 'resource_type' | 'resource_name',
+  string
+>;
 
-interface FindingsAggBucket {
+export interface FindingsAggBucket {
   doc_count: number;
   failed_findings: { doc_count: number };
-  key: {
-    resource_id: string;
-    cluster_id: string;
-    cis_section: string;
+  key: FindingsByResourceAggregationsKeys;
+}
+interface FindingsByResourceAggs extends estypes.AggregationsCompositeAggregate {
+  groupBy: {
+    buckets: FindingsAggBucket[];
   };
 }
 
@@ -54,6 +54,8 @@ export const getFindingsByResourceAggQuery = ({
             { resource_id: { terms: { field: 'resource_id.keyword' } } },
             { cluster_id: { terms: { field: 'cluster_id.keyword' } } },
             { cis_section: { terms: { field: 'rule.section.keyword' } } },
+            { resource_type: { terms: { field: 'resource.type.keyword' } } },
+            { resource_name: { terms: { field: 'resource.name.keyword' } } },
           ],
         },
         aggs: {

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

@@ -7,6 +7,9 @@
 import React from 'react';
 import {
   EuiBasicTableColumn,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
   EuiSpacer,
   EuiTableActionsColumnType,
   EuiTitle,
@@ -16,6 +19,7 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import moment from 'moment';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge';
 import * as TEXT from '../translations';
 import { CspFinding } from '../types';
@@ -61,19 +65,45 @@ export const getExpandColumn = <T extends unknown>({
   ],
 });
 
+export const getResourceIdColumn = <T extends Pick<CspFinding, 'resource_id'>>(
+  column?: Partial<EuiBasicTableColumn<T>>
+): EuiBasicTableColumn<T> => ({
+  field: 'resource_id',
+  truncateText: true,
+  width: '15%',
+  sortable: true,
+  name: (
+    <EuiFlexGroup gutterSize="xs">
+      <EuiFlexItem>
+        <FormattedMessage
+          id="xpack.csp.findings.resourceIdColumnLabel"
+          defaultMessage="Resource ID"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiIconTip
+          type="iInCircle"
+          color="subdued"
+          content={
+            <FormattedMessage
+              id="xpack.csp.findings.resourceIdColumnDescription"
+              defaultMessage="Custom Elastic Resource ID"
+            />
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ),
+  render: (filename: string) => (
+    <EuiToolTip position="top" content={filename} anchorClassName={'eui-textTruncate'}>
+      <span>{filename}</span>
+    </EuiToolTip>
+  ),
+  ...column,
+});
+
 export const getFindingsColumns = (): Array<EuiBasicTableColumn<CspFinding>> => [
-  {
-    field: 'resource_id',
-    name: TEXT.RESOURCE_ID,
-    truncateText: true,
-    width: '15%',
-    sortable: true,
-    render: (filename: string) => (
-      <EuiToolTip position="top" content={filename}>
-        <span>{filename}</span>
-      </EuiToolTip>
-    ),
-  },
+  getResourceIdColumn(),
   {
     field: 'result.evaluation',
     name: TEXT.RESULT,

x-pack/plugins/cloud_security_posture/public/pages/findings/types.ts

@@ -30,6 +30,7 @@ export interface FindingsQueryResult<TData = unknown, TError = unknown> {
 // TODO: this needs to be defined in a versioned schema
 export interface CspFinding {
   '@timestamp': string;
+  resource_id: string;
   cycle_id: string;
   result: CspFindingResult;
   resource: CspFindingResource;