[Cloud Security]Added Support to handle Labels on Unified Data Table (e…

…lastic#184295) ## Summary Added Support to handle Labels on Unified Data Table. Previously Findings and Vulnerabilities table columns shows Labels by using the customLabel field in Dataview and we did this by Updating the Dataview when we first retrieve the Dataview. However, we have removed the Update logic, as such we would need a different way to do this which is this PR We used the **settings** prop on UnifiedDataTable to pass on the Column Labels that will be shown in Findings/Vulnerabilities table
PhilippeOberti · May 30, 2024 · 1bd6c24 · 1bd6c24
1 parent dff2754
commit 1bd6c24
Show file tree

Hide file tree

Showing 14 changed files with 176 additions and 40 deletions.
diff --git a/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx b/packages/kbn-unified-data-table/src/components/data_table_column_header.tsx
@@ -105,12 +105,14 @@ export const DataTableTimeColumnHeader = ({
   dataView,
   dataViewField,
   headerRowHeight = 1,
+  columnLabel,
 }: {
   dataView: DataView;
   dataViewField?: DataViewField;
   headerRowHeight?: number;
+  columnLabel?: string;
 }) => {
-  const timeFieldName = dataViewField?.customLabel ?? dataView.timeFieldName;
+  const timeFieldName = columnLabel || (dataViewField?.customLabel ?? dataView.timeFieldName);
   const primaryTimeAriaLabel = i18n.translate(
     'unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel',
     {

diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.test.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.test.tsx
@@ -21,6 +21,7 @@ import { dataViewWithoutTimefieldMock } from '../../__mocks__/data_view_without_
 import { dataTableContextMock } from '../../__mocks__/table_context';
 import { servicesMock } from '../../__mocks__/services';
 import { ROWS_HEIGHT_OPTIONS } from '../constants';
+import { UnifiedDataTableSettingsColumn } from '../types';
 
 const columns = ['extension', 'message'];
 const columnsWithTimeCol = getVisibleColumns(
@@ -460,4 +461,35 @@ describe('Data table columns', function () {
       expect(deserializeHeaderRowHeight(2)).toBe(2);
     });
   });
+
+  describe('Column label display', () => {
+    it('Column Name should display provided label from display otherwise it defaults to columns name', () => {
+      const mockColumnHeaders: Record<string, UnifiedDataTableSettingsColumn> = {
+        test_column_1: { display: 'test_column_one' },
+        test_column_2: { display: 'test_column_two' },
+        test_column_3: { display: 'test_column_three' },
+      } as const;
+      const customizedGridColumns = getEuiGridColumns({
+        columns: ['test_column_1', 'test_column_2', 'test_column_4'],
+        settings: { columns: mockColumnHeaders },
+        dataView: dataViewWithTimefieldMock,
+        defaultColumns: false,
+        isSortEnabled: true,
+        valueToStringConverter: dataTableContextMock.valueToStringConverter,
+        rowsCount: 100,
+        headerRowHeightLines: 5,
+        services: {
+          uiSettings: servicesMock.uiSettings,
+          toastNotifications: servicesMock.toastNotifications,
+        },
+        hasEditDataViewPermission: () =>
+          servicesMock.dataViewFieldEditor.userPermissions.editIndexPattern(),
+      });
+      const columnDisplayNames = customizedGridColumns.map((column) => column.displayAsText);
+      expect(columnDisplayNames.includes('test_column_one')).toBeTruthy();
+      expect(columnDisplayNames.includes('test_column_two')).toBeTruthy();
+      expect(columnDisplayNames.includes('test_column_three')).toBeFalsy();
+      expect(columnDisplayNames.includes('test_column_4')).toBeTruthy();
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx
@@ -27,6 +27,24 @@ import { buildCopyColumnNameButton, buildCopyColumnValuesButton } from './build_
 import { buildEditFieldButton } from './build_edit_field_button';
 import { DataTableColumnHeader, DataTableTimeColumnHeader } from './data_table_column_header';
 
+const getColumnDisplayName = (
+  columnName: string,
+  dataViewFieldDisplayName: string | undefined,
+  columnDisplay: string | undefined
+) => {
+  if (columnDisplay) {
+    return columnDisplay;
+  }
+
+  if (columnName === '_source') {
+    return i18n.translate('unifiedDataTable.grid.documentHeader', {
+      defaultMessage: 'Document',
+    });
+  }
+
+  return dataViewFieldDisplayName || columnName;
+};
+
 const DataTableColumnHeaderMemoized = React.memo(DataTableColumnHeader);
 const DataTableTimeColumnHeaderMemoized = React.memo(DataTableTimeColumnHeader);
 
@@ -97,6 +115,7 @@ function buildEuiGridColumn({
   showColumnTokens,
   headerRowHeight,
   customGridColumnsConfiguration,
+  columnDisplay,
 }: {
   numberOfColumns: number;
   columnName: string;
@@ -117,6 +136,7 @@ function buildEuiGridColumn({
   showColumnTokens?: boolean;
   headerRowHeight?: number;
   customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
+  columnDisplay?: string;
 }) {
   const dataViewField = !isPlainRecord
     ? dataView.getFieldByName(columnName)
@@ -133,12 +153,12 @@ function buildEuiGridColumn({
     editField &&
     dataViewField &&
     buildEditFieldButton({ hasEditDataViewPermission, dataView, field: dataViewField, editField });
-  const columnDisplayName =
-    columnName === '_source'
-      ? i18n.translate('unifiedDataTable.grid.documentHeader', {
-          defaultMessage: 'Document',
-        })
-      : dataViewField?.displayName || columnName;
+
+  const columnDisplayName = getColumnDisplayName(
+    columnName,
+    dataViewField?.displayName,
+    columnDisplay
+  );
 
   let cellActions: EuiDataGridColumnCellAction[];
 
@@ -212,6 +232,7 @@ function buildEuiGridColumn({
         dataView={dataView}
         dataViewField={dataViewField}
         headerRowHeight={headerRowHeight}
+        columnLabel={columnDisplay}
       />
     );
     if (numberOfColumns > 1) {
@@ -306,6 +327,7 @@ export function getEuiGridColumns({
       showColumnTokens,
       headerRowHeight,
       customGridColumnsConfiguration,
+      columnDisplay: settings?.columns?.[column]?.display,
     })
   );
 }

diff --git a/packages/kbn-unified-data-table/src/types.ts b/packages/kbn-unified-data-table/src/types.ts
@@ -23,6 +23,12 @@ export interface UnifiedDataTableSettings {
 
 export interface UnifiedDataTableSettingsColumn {
   width?: number;
+  /**
+  Optional props passed to Columns to display provided labels as column names instead of field names.
+  This object maps column field names to their corresponding display labels.
+  These labels will take precedence over the data view field names.
+  */
+  display?: string;
 }
 
 export type ValueToStringConverter = (

diff --git a/...ecurity_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx b/...ecurity_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx
@@ -77,6 +77,8 @@ export interface CloudSecurityDataTableProps {
    * Height override for the data grid.
    */
   height?: number | string;
+  /* Optional props passed to Columns to display Provided Labels as Column name instead of field name */
+  columnHeaders?: Record<string, string>;
   /**
    * Specify if distribution bar is shown on data table, used to calculate height of data table in virtualized mode
    */
@@ -95,6 +97,7 @@ export const CloudSecurityDataTable = ({
   customCellRenderer,
   groupSelectorComponent,
   height,
+  columnHeaders,
   hasDistributionBar = true,
   ...rest
 }: CloudSecurityDataTableProps) => {
@@ -117,7 +120,9 @@ export const CloudSecurityDataTable = ({
     `${columnsLocalStorageKey}:settings`,
     {
       columns: defaultColumns.reduce((prev, curr) => {
-        const columnDefaultSettings = curr.width ? { width: curr.width } : {};
+        const columnDefaultSettings = curr.width
+          ? { width: curr.width, display: columnHeaders?.[curr.id] }
+          : { display: columnHeaders?.[curr.id] };
         const newColumn = { [curr.id]: columnDefaultSettings };
         return { ...prev, ...newColumn };
       }, {} as UnifiedDataTableSettings['columns']),
@@ -227,6 +232,7 @@ export const CloudSecurityDataTable = ({
     const newColumns = { ...(grid.columns || {}) };
     newColumns[colSettings.columnId] = {
       width: Math.round(colSettings.width),
+      display: columnHeaders?.[colSettings.columnId],
     };
     const newGrid = { ...grid, columns: newColumns };
     setSettings(newGrid);

diff --git a/...ublic/components/cloud_security_data_table/fields_selector/fields_selector_table.test.tsx b/...ublic/components/cloud_security_data_table/fields_selector/fields_selector_table.test.tsx
@@ -22,12 +22,12 @@ const VIEW_MENU_SELECTED_TEXT = 'View: selected';
 const mockDataView = {
   fields: {
     getAll: () => [
-      { id: 'field1', name: 'field1', customLabel: 'Label 1', visualizable: true },
-      { id: 'field2', name: 'field2', customLabel: 'Label 2', visualizable: true },
-      { id: 'field3', name: 'field3', customLabel: 'Label 3', visualizable: true },
-      { id: 'field4', name: 'field4', customLabel: 'Label 3.A', visualizable: true },
-      { id: 'not-visible', name: 'not-visible', customLabel: 'Label 3.A', visualizable: false },
-      { id: '_index', name: '_index', customLabel: 'should not be shown', visualizable: true },
+      { id: 'field1', name: 'field1', visualizable: true },
+      { id: 'field2', name: 'field2', visualizable: true },
+      { id: 'field3', name: 'field3', visualizable: true },
+      { id: 'field4', name: 'field4', visualizable: true },
+      { id: 'not-visible', name: 'not-visible', visualizable: false },
+      { id: '_index', name: '_index', visualizable: true },
     ],
   },
 } as any;
@@ -58,8 +58,8 @@ describe('FieldsSelectorTable', () => {
   it('renders the table with data correctly', () => {
     const { getByText } = renderFieldsTable();
 
-    expect(getByText('Label 1')).toBeInTheDocument();
-    expect(getByText('Label 2')).toBeInTheDocument();
+    expect(getByText('field1')).toBeInTheDocument();
+    expect(getByText('field2')).toBeInTheDocument();
   });
 
   it('calls onAddColumn when a checkbox is checked', () => {
@@ -174,17 +174,12 @@ describe('FieldsSelectorTable', () => {
       ).toEqual(4);
 
       expect(
-        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'Label', false)
+        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'field', false)
           .length
       ).toEqual(4);
 
       expect(
-        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'Label 3', false)
-          .length
-      ).toEqual(2);
-
-      expect(
-        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'Label 3.A', false)
+        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'field3', false)
           .length
       ).toEqual(1);
 
@@ -207,17 +202,12 @@ describe('FieldsSelectorTable', () => {
       ).toEqual(2);
 
       expect(
-        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'Label', true)
-          .length
-      ).toEqual(2);
-
-      expect(
-        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'Label 3', true)
+        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'field', true)
           .length
       ).toEqual(2);
 
       expect(
-        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'Label 3.A', true)
+        filterFieldsBySearch(mockDataView.fields.getAll(), ['field3', 'field4'], 'field3', true)
           .length
       ).toEqual(1);
 

diff --git a/...ure/public/components/cloud_security_data_table/fields_selector/fields_selector_table.tsx b/...ure/public/components/cloud_security_data_table/fields_selector/fields_selector_table.tsx
@@ -153,13 +153,6 @@ export const FieldsSelectorTable = ({
       }),
       sortable: true,
     },
-    {
-      field: 'displayName',
-      name: i18n.translate('xpack.csp.dataTable.fieldsModalCustomLabel', {
-        defaultMessage: 'Custom Label',
-      }),
-      sortable: (field: Field) => field.displayName.toLowerCase(),
-    },
   ];
 
   const error = useMemo(() => {

diff --git a/...curity_posture/public/pages/configurations/latest_findings/findings_table_field_labels.ts b/...curity_posture/public/pages/configurations/latest_findings/findings_table_field_labels.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const findingsTableFieldLabels: Record<string, string> = {
+  'result.evaluation': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.resultColumnLabel',
+    { defaultMessage: 'Result' }
+  ),
+  'resource.id': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.resourceIdColumnLabel',
+    { defaultMessage: 'Resource ID' }
+  ),
+  'resource.name': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.resourceNameColumnLabel',
+    { defaultMessage: 'Resource Name' }
+  ),
+  'resource.sub_type': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.resourceTypeColumnLabel',
+    { defaultMessage: 'Resource Type' }
+  ),
+  'rule.benchmark.rule_number': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.ruleNumberColumnLabel',
+    { defaultMessage: 'Rule Number' }
+  ),
+  'rule.name': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.ruleNameColumnLabel',
+    { defaultMessage: 'Rule Name' }
+  ),
+  'rule.section': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.ruleSectionColumnLabel',
+    { defaultMessage: 'CIS Section' }
+  ),
+  '@timestamp': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.lastCheckedColumnLabel',
+    { defaultMessage: 'Last Checked' }
+  ),
+} as const;
diff --git a/...ud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx b/...ud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx
@@ -20,6 +20,7 @@ import { TimestampTableCell } from '../../../components/timestamp_table_cell';
 import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge';
 import { CspFinding } from '../../../../common/schemas/csp_finding';
 import { FindingsRuleFlyout } from '../findings_flyout/findings_flyout';
+import { findingsTableFieldLabels } from './findings_table_field_labels';
 
 interface LatestFindingsTableProps {
   groupSelectorComponent?: JSX.Element;
@@ -136,6 +137,7 @@ export const LatestFindingsTable = ({
             customCellRenderer={customCellRenderer}
             groupSelectorComponent={groupSelectorComponent}
             height={height}
+            columnHeaders={findingsTableFieldLabels}
           />
         </>
       )}

diff --git a/...gins/cloud_security_posture/public/pages/vulnerabilities/latest_vulnerabilities_table.tsx b/...gins/cloud_security_posture/public/pages/vulnerabilities/latest_vulnerabilities_table.tsx
@@ -18,6 +18,7 @@ import { getDefaultQuery, defaultColumns } from './constants';
 import { VulnerabilityFindingFlyout } from './vulnerabilities_finding_flyout/vulnerability_finding_flyout';
 import { ErrorCallout } from '../configurations/layout/error_callout';
 import { CVSScoreBadge, SeverityStatusBadge } from '../../components/vulnerability_badges';
+import { vulnerabilitiesTableFieldLabels } from './vulnerabilities_table_field_labels';
 
 interface LatestVulnerabilitiesTableProps {
   groupSelectorComponent?: JSX.Element;
@@ -115,6 +116,7 @@ export const LatestVulnerabilitiesTable = ({
           groupSelectorComponent={groupSelectorComponent}
           height={height}
           hasDistributionBar={false}
+          columnHeaders={vulnerabilitiesTableFieldLabels}
         />
       )}
     </>

diff --git a/...cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_table_field_labels.ts b/...cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_table_field_labels.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const vulnerabilitiesTableFieldLabels: Record<string, string> = {
+  'resource.id': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.resourceIdColumnLabel',
+    { defaultMessage: 'Resource ID' }
+  ),
+  'resource.name': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.resourceNameColumnLabel',
+    { defaultMessage: 'Resource Name' }
+  ),
+  'vulnerability.id': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.vulnerabilityIdColumnLabel',
+    { defaultMessage: 'Vulnerability' }
+  ),
+  'vulnerability.score.base': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.vulnerabilityScoreColumnLabel',
+    { defaultMessage: 'CVSS' }
+  ),
+  'vulnerability.severity': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.vulnerabilitySeverityColumnLabel',
+    { defaultMessage: 'Severity' }
+  ),
+  'package.name': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.packageNameColumnLabel',
+    { defaultMessage: 'Package' }
+  ),
+  'package.version': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.packageVersionColumnLabel',
+    { defaultMessage: 'Version' }
+  ),
+  'package.fixed_version': i18n.translate(
+    'xpack.csp.findings.findingsTable.findingsTableColumn.packageFixedVersionColumnLabel',
+    { defaultMessage: 'Fix Version' }
+  ),
+} as const;
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -12786,7 +12786,6 @@
     "xpack.csp.dataTable.fieldsModal.viewLabel": "Afficher",
     "xpack.csp.dataTable.fieldsModal.viewSelected": "sélectionné",
     "xpack.csp.dataTable.fieldsModalClose": "Fermer",
-    "xpack.csp.dataTable.fieldsModalCustomLabel": "Étiquette personnalisée",
     "xpack.csp.dataTable.fieldsModalError": "Aucun champ trouvé dans l'affichage de données",
     "xpack.csp.dataTable.fieldsModalFieldsShowing": "Affichage",
     "xpack.csp.dataTable.fieldsModalName": "Nom",