[Cloud Security] Table tab for vuln flyout (#158401)

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx

@@ -49,7 +49,7 @@ describe('<VulnerabilityFindingFlyout/>', () => {
     it('show display Vulnerability JSON Tab', () => {
       const { getAllByText } = render(<TestComponent />);
 
-      userEvent.click(screen.getByTestId(`vulnerability-finding-flyout-tab-json`));
+      userEvent.click(screen.getByTestId(`vulnerability-finding-flyout-tab-vuln-flyout-json-tab`));
 
       getAllByText('JSON');
     });

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.tsx

@@ -35,9 +35,11 @@ import {
   FINDINGS_VULNERABILITY_FLYOUT_DESCRIPTION_LIST,
   TAB_ID_VULNERABILITY_FLYOUT,
 } from '../test_subjects';
+import { VulnerabilityTableTab } from './vulnerability_table_tab';
 
-const overviewTabId = 'overview';
-const jsonTabId = 'json';
+const overviewTabId = 'vuln-flyout-overview-tab';
+const tableTabId = 'vuln-flyout-table-tab';
+const jsonTabId = 'vuln-flyout-json-tab';
 
 const getFlyoutDescriptionList = (
   vulnerabilityRecord: VulnerabilityRecord
@@ -96,6 +98,16 @@ export const VulnerabilityFindingFlyout = ({
         ),
         content: <VulnerabilityOverviewTab vulnerability={vulnerability} />,
       },
+      {
+        id: tableTabId,
+        name: (
+          <FormattedMessage
+            id="xpack.csp.vulnerabilities.vulnerabilityFindingFlyout.tableTabLabel"
+            defaultMessage="Table"
+          />
+        ),
+        content: <VulnerabilityTableTab vulnerabilityRecord={vulnerabilityRecord} />,
+      },
       {
         id: jsonTabId,
         name: (

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_table_tab.tsx

@@ -0,0 +1,92 @@
+/*
+ * 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 {
+  EuiCode,
+  EuiCodeBlock,
+  EuiInMemoryTable,
+  EuiInMemoryTableProps,
+  EuiText,
+} from '@elastic/eui';
+import React from 'react';
+import { getFlattenedObject } from '@kbn/std';
+import { i18n } from '@kbn/i18n';
+import { VulnerabilityRecord } from '../types';
+
+interface FlattenedItem {
+  key: string; // flattened dot notation object path for Vulnerability;
+  value: unknown;
+}
+
+const getDescriptionDisplay = (value: unknown) => {
+  if (value === undefined) return 'undefined';
+  if (typeof value === 'boolean' || value === null) {
+    return <EuiCode>{JSON.stringify(value)}</EuiCode>;
+  }
+
+  if (typeof value === 'object') {
+    return (
+      <EuiCodeBlock isCopyable={true} overflowHeight={300}>
+        {JSON.stringify(value, null, 2)}
+      </EuiCodeBlock>
+    );
+  }
+
+  return <EuiText size="s">{value as string}</EuiText>;
+};
+
+const search: EuiInMemoryTableProps<FlattenedItem>['search'] = {
+  box: {
+    incremental: true,
+  },
+};
+
+const sorting: EuiInMemoryTableProps<FlattenedItem>['sorting'] = {
+  sort: {
+    field: 'key',
+    direction: 'asc',
+  },
+};
+
+const pagination: EuiInMemoryTableProps<FlattenedItem>['pagination'] = {
+  initialPageSize: 100,
+  showPerPageOptions: false,
+};
+
+const columns: EuiInMemoryTableProps<FlattenedItem>['columns'] = [
+  {
+    field: 'key',
+    name: i18n.translate('xpack.csp.vulnerabilities.flyoutTabs.fieldLabel', {
+      defaultMessage: 'Field',
+    }),
+    width: '25%',
+  },
+  {
+    field: 'value',
+    name: i18n.translate('xpack.csp.vulnerabilities.flyoutTabs.fieldValueLabel', {
+      defaultMessage: 'Value',
+    }),
+    render: (value: unknown) => <div style={{ width: '100%' }}>{getDescriptionDisplay(value)}</div>,
+  },
+];
+
+const getFlattenedItems = (vulnerabilityRecord: VulnerabilityRecord) =>
+  Object.entries(getFlattenedObject(vulnerabilityRecord)).map(([key, value]) => ({ key, value }));
+
+export const VulnerabilityTableTab = ({
+  vulnerabilityRecord,
+}: {
+  vulnerabilityRecord: VulnerabilityRecord;
+}) => (
+  <EuiInMemoryTable
+    items={getFlattenedItems(vulnerabilityRecord)}
+    columns={columns}
+    sorting={sorting}
+    search={search}
+    pagination={pagination}
+  />
+);