[Cloud Posture] Rule Tags - table column and flyout (#138401) (#138434)

(cherry picked from commit 287e3b8bad)

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

x-pack/plugins/cloud_security_posture/public/common/utils/get_primary_rule_tags.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+const regexForCISSemanticVersioning = /CIS (0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/;
+
+export const getPrimaryRuleTags = (tags: string[]): { benchmark: string; version: string } =>
+  tags.reduce(
+    (acc, tag) => {
+      if (tag === 'Kubernetes' || tag === 'EKS') acc.benchmark = tag;
+      if (regexForCISSemanticVersioning.test(tag)) acc.version = tag;
+
+      return acc;
+    },
+    { benchmark: '', version: '' }
+  );

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

@@ -8,6 +8,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 export const CloudPosturePageTitle = ({ title, isBeta }: { title: string; isBeta: boolean }) => (
   <EuiFlexGroup alignItems="center" gutterSize="s">
@@ -17,7 +18,15 @@ export const CloudPosturePageTitle = ({ title, isBeta }: { title: string; isBeta
       </EuiTitle>
     </EuiFlexItem>
     {isBeta && (
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem
+        grow={false}
+        css={css`
+          // tooltipContent wraps EuiBetaBadge with a span element which breaks alignment
+          .euiToolTipAnchor {
+            display: flex;
+          }
+        `}
+      >
         <EuiBetaBadge
           label={i18n.translate('xpack.csp.common.cloudPosturePageTitle.BetaBadgeLabel', {
             defaultMessage: 'Beta',

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/overview_tab.tsx

@@ -7,6 +7,7 @@
 
 import {
   EuiAccordion,
+  EuiBadge,
   EuiDescriptionList,
   EuiLink,
   EuiPanel,
@@ -34,6 +35,18 @@ const getDetailsList = (data: CspFinding, discoverIndexLink: string | undefined)
     }),
     description: data.rule.name,
   },
+  {
+    title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.ruleTagsTitle', {
+      defaultMessage: 'Rule Tags',
+    }),
+    description: (
+      <>
+        {data.rule.tags.map((tag) => (
+          <EuiBadge>{tag}</EuiBadge>
+        ))}
+      </>
+    ),
+  },
   {
     title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.evaluatedAtTitle', {
       defaultMessage: 'Evaluated at',

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/rule_tab.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiDescriptionList } from '@elastic/eui';
+import { EuiBadge, EuiDescriptionList } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { CspFinding } from '../types';
@@ -24,6 +24,18 @@ export const getRuleList = (rule: CspFinding['rule']) => [
     }),
     description: <Markdown>{rule.description}</Markdown>,
   },
+  {
+    title: i18n.translate('xpack.csp.findings.findingsFlyout.ruleTab.tagsTitle', {
+      defaultMessage: 'Tags',
+    }),
+    description: (
+      <>
+        {rule.tags.map((tag) => (
+          <EuiBadge>{tag}</EuiBadge>
+        ))}
+      </>
+    ),
+  },
   {
     title: i18n.translate('xpack.csp.findings.findingsFlyout.ruleTab.frameworkSourcesTitle', {
       defaultMessage: 'Framework Sources',

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.tsx

@@ -66,6 +66,7 @@ const FindingsTableComponent = ({
       createColumnWithFilters(baseFindingsColumns['resource.name'], { onAddFilter }),
       createColumnWithFilters(baseFindingsColumns['rule.name'], { onAddFilter }),
       baseFindingsColumns['rule.section'],
+      baseFindingsColumns['rule.tags'],
       createColumnWithFilters(baseFindingsColumns.cluster_id, { onAddFilter }),
       baseFindingsColumns['@timestamp'],
     ],

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

@@ -61,6 +61,7 @@ const ResourceFindingsTableComponent = ({
       ),
       createColumnWithFilters(baseFindingsColumns['rule.name'], { onAddFilter }),
       baseFindingsColumns['rule.section'],
+      baseFindingsColumns['rule.tags'],
       createColumnWithFilters(baseFindingsColumns.cluster_id, { onAddFilter }),
       baseFindingsColumns['@timestamp'],
     ],

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

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import {
+  EuiBadge,
   EuiButtonIcon,
   EuiSpacer,
   EuiTableActionsColumnType,
@@ -18,6 +19,7 @@ import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { euiThemeVars } from '@kbn/ui-theme';
 import type { Serializable } from '@kbn/utility-types';
+import { getPrimaryRuleTags } from '../../../common/utils/get_primary_rule_tags';
 import { TimestampTableCell } from '../../../components/timestamp_table_cell';
 import { ColumnNameWithTooltip } from '../../../components/column_name_with_tooltip';
 import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge';
@@ -26,6 +28,8 @@ import {
   FINDINGS_TABLE_CELL_ADD_NEGATED_FILTER,
 } from '../test_subjects';
 
+export type OnAddFilter = <T extends string>(key: T, value: Serializable, negate: boolean) => void;
+
 export const PageTitle: React.FC = ({ children }) => (
   <EuiTitle size="l">
     <div>
@@ -56,8 +60,6 @@ export const getExpandColumn = <T extends unknown>({
   ],
 });
 
-export type OnAddFilter = <T extends string>(key: T, value: Serializable, negate: boolean) => void;
-
 const baseColumns = [
   {
     field: 'resource.id',
@@ -74,7 +76,7 @@ const baseColumns = [
       />
     ),
     truncateText: true,
-    width: '15%',
+    width: '10%',
     sortable: true,
     render: (filename: string) => (
       <EuiToolTip position="top" content={filename} anchorClassName="eui-textTruncate">
@@ -87,7 +89,7 @@ const baseColumns = [
     name: i18n.translate('xpack.csp.findings.findingsTable.findingsTableColumn.resultColumnLabel', {
       defaultMessage: 'Result',
     }),
-    width: '120px',
+    width: '110px',
     sortable: true,
     render: (type: PropsOf<typeof CspEvaluationBadge>['type']) => (
       <CspEvaluationBadge type={type} />
@@ -100,7 +102,7 @@ const baseColumns = [
       { defaultMessage: 'Resource Type' }
     ),
     sortable: true,
-    width: '150px',
+    truncateText: true,
   },
   {
     field: 'resource.name',
@@ -109,6 +111,7 @@ const baseColumns = [
       { defaultMessage: 'Resource Name' }
     ),
     sortable: true,
+    truncateText: true,
   },
   {
     field: 'rule.name',
@@ -126,6 +129,20 @@ const baseColumns = [
     sortable: true,
     truncateText: true,
   },
+  {
+    field: 'rule.tags',
+    name: i18n.translate(
+      'xpack.csp.findings.findingsTable.findingsTableColumn.ruleTagsColumnLabel',
+      { defaultMessage: 'Rule Tags' }
+    ),
+    width: '200px',
+    sortable: false,
+    truncateText: true,
+    render: (tags: string[]) => {
+      const { benchmark, version } = getPrimaryRuleTags(tags);
+      return [benchmark, version].map((tag) => <EuiBadge>{tag}</EuiBadge>);
+    },
+  },
   {
     field: 'cluster_id',
     name: (
@@ -140,6 +157,7 @@ const baseColumns = [
         )}
       />
     ),
+    width: '10%',
     truncateText: true,
     sortable: true,
   },