diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index c9f9dff39de76..fd464d52b58e4 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -29,26 +29,6 @@ .euiDataGridHeaderCell:last-of-type { border-right: none; } - - .udtTimeline [data-gridcell-column-id|='select'] { - border-right: none; - } - .udtTimeline [data-gridcell-column-id|='openDetails'] .euiDataGridRowCell__contentByHeight { - margin-top: 3px; - } - - .udtTimeline [data-gridcell-column-id|='select'] .euiDataGridRowCell__contentByHeight { - margin-top: 5px; - } - - .udtTimeline .euiDataGridRowCell--lastColumn.euiDataGridRowCell--controlColumn { - background-color: white; - } - - .udtTimeline .siemEventsTable__trSupplement--summary { - background-color: #f7f8fc; - border-radius: 8px; - } } .udtDataTable__cellValue { diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index b7923ee218ee4..794e8a31100d3 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -26,6 +26,7 @@ import { EuiDataGridInMemory, EuiDataGridControlColumn, EuiDataGridCustomBodyProps, + EuiDataGridCellValueElementProps, } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/public'; import type { DocViewFilterFn } from '@kbn/discover-plugin/public'; @@ -37,8 +38,7 @@ import { import type { ToastsStart, IUiSettingsClient, HttpStart } from '@kbn/core/public'; import { Serializable } from '@kbn/utility-types'; import type { DataTableRecord } from '@kbn/discover-utils/types'; -import { getShouldShowFieldHandler } from '@kbn/discover-utils'; -import { DOC_HIDE_TIME_COLUMN_SETTING } from '@kbn/discover-utils'; +import { getShouldShowFieldHandler, DOC_HIDE_TIME_COLUMN_SETTING } from '@kbn/discover-utils'; import type { DataViewFieldEditorStart } from '@kbn/data-view-field-editor-plugin/public'; import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public'; import { ThemeServiceStart } from '@kbn/react-kibana-context-common'; @@ -221,6 +221,11 @@ export interface UnifiedDataTableProps { */ renderCustomGridBody?: (args: EuiDataGridCustomBodyProps) => React.ReactNode; trailingControlColumns?: EuiDataGridControlColumn[]; + visibleCellActions?: number; + externalCustomRenderers?: Record< + string, + (props: EuiDataGridCellValueElementProps) => React.ReactNode + >; } export const EuiDataGridMemoized = React.memo(EuiDataGrid); @@ -267,6 +272,8 @@ export const UnifiedDataTable = ({ externalControlColumns, externalAdditionalControls, rowsPerPageOptions, + visibleCellActions, + externalCustomRenderers, }: UnifiedDataTableProps) => { const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage } = services; const { darkMode } = useObservable(services.theme?.theme$ ?? of(themeDefault), themeDefault); @@ -317,6 +324,36 @@ export const UnifiedDataTable = ({ [displayedRows, dataView, fieldFormats] ); + const unifiedDataTableContextValue = useMemo( + () => ({ + expanded: expandedDoc, + setExpanded: setExpandedDoc, + rows: displayedRows, + onFilter, + dataView, + isDarkMode: darkMode, + selectedDocs: usedSelectedDocs, + setSelectedDocs: (newSelectedDocs: React.SetStateAction) => { + setSelectedDocs(newSelectedDocs); + if (isFilterActive && newSelectedDocs.length === 0) { + setIsFilterActive(false); + } + }, + valueToStringConverter, + }), + [ + darkMode, + dataView, + displayedRows, + expandedDoc, + isFilterActive, + onFilter, + setExpandedDoc, + usedSelectedDocs, + valueToStringConverter, + ] + ); + /** * Pagination */ @@ -406,7 +443,8 @@ export const UnifiedDataTable = ({ shouldShowFieldHandler, () => dataGridRef.current?.closeCellPopover(), services.fieldFormats, - maxDocFieldsDisplayed + maxDocFieldsDisplayed, + externalCustomRenderers ), [ dataView, @@ -415,6 +453,7 @@ export const UnifiedDataTable = ({ shouldShowFieldHandler, maxDocFieldsDisplayed, services.fieldFormats, + externalCustomRenderers, ] ); @@ -452,7 +491,7 @@ export const UnifiedDataTable = ({ ); const visibleColumns = useMemo( - () => getVisibleColumns(displayedColumns, dataView, showTimeCol) as string[], + () => getVisibleColumns(displayedColumns, dataView, showTimeCol), [dataView, displayedColumns, showTimeCol] ); @@ -504,6 +543,7 @@ export const UnifiedDataTable = ({ valueToStringConverter, onFilter, editField, + visibleCellActions, }), [ onFilter, @@ -520,6 +560,7 @@ export const UnifiedDataTable = ({ dataViewFieldEditor, valueToStringConverter, editField, + visibleCellActions, ] ); @@ -547,8 +588,7 @@ export const UnifiedDataTable = ({ return { columns: sortingColumns, onSort: () => {} }; }, [isSortEnabled, sortingColumns, isPlainRecord, inmemorySortingColumns, onTableSort]); - const DocumentView = getDocumentView; - const canSetExpandedDoc = Boolean(setExpandedDoc && !!DocumentView); + const canSetExpandedDoc = Boolean(setExpandedDoc && !!getDocumentView); const internalControlColumns = useMemo( () => @@ -576,7 +616,7 @@ export const UnifiedDataTable = ({ const showDisplaySelector = useMemo( () => - !!onUpdateRowHeight + onUpdateRowHeight ? { allowDensity: false, allowRowHeight: true, @@ -652,24 +692,7 @@ export const UnifiedDataTable = ({ } return ( - { - setSelectedDocs(newSelectedDocs); - if (isFilterActive && newSelectedDocs.length === 0) { - setIsFilterActive(false); - } - }, - valueToStringConverter, - }} - > +
)} - {setExpandedDoc && - expandedDoc && - getDocumentView && - getDocumentView(displayedRows, displayedColumns)} + {canSetExpandedDoc && expandedDoc && getDocumentView!(displayedRows, displayedColumns)} ); 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 index a77154509011f..cb81b688f1472 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx @@ -79,6 +79,7 @@ function buildEuiGridColumn({ onFilter, editField, columnCellActions, + visibleCellActions, }: { columnName: string; columnWidth: number | undefined; @@ -93,6 +94,7 @@ function buildEuiGridColumn({ onFilter?: DocViewFilterFn; editField?: (fieldName: string) => void; columnCellActions?: EuiDataGridColumnCellAction[]; + visibleCellActions?: number; }) { const dataViewField = dataView.getFieldByName(columnName); const editFieldButton = @@ -153,6 +155,7 @@ function buildEuiGridColumn({ ], }, cellActions, + visibleCellActions, }; if (column.id === dataView.timeFieldName) { @@ -202,6 +205,7 @@ export function getEuiGridColumns({ valueToStringConverter, onFilter, editField, + visibleCellActions, }: { columns: string[]; columnsCellActions?: EuiDataGridColumnCellAction[][]; @@ -219,6 +223,7 @@ export function getEuiGridColumns({ valueToStringConverter: ValueToStringConverter; onFilter: DocViewFilterFn; editField?: (fieldName: string) => void; + visibleCellActions?: number; }) { const getColWidth = (column: string) => settings?.columns?.[column]?.width ?? 0; @@ -237,6 +242,7 @@ export function getEuiGridColumns({ rowsCount, onFilter, editField, + visibleCellActions, }) ); } diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx index 59af28d7115cd..be3a1ada52fbd 100644 --- a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx +++ b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx @@ -41,7 +41,8 @@ export const getRenderCellValueFn = shouldShowFieldHandler: ShouldShowFieldInTableHandler, closePopover: () => void, fieldFormats: FieldFormatsStart, - maxEntries: number + maxEntries: number, + externalCustomRenderers?: Record React.ReactNode> ) => ({ rowIndex, columnId, isDetails, setCellProps }: EuiDataGridCellValueElementProps) => { const row = rows ? rows[rowIndex] : undefined; @@ -49,6 +50,15 @@ export const getRenderCellValueFn = const field = dataView.fields.getByName(columnId); const ctx = useContext(UnifiedDataTableContext); + if (externalCustomRenderers && externalCustomRenderers[columnId]) { + return externalCustomRenderers[columnId]({ + rowIndex, columnId, isDetails, setCellProps, + isExpandable: false, + isExpanded: false, + colIndex: 0 + }); + } + useEffect(() => { if (row?.isAnchor) { setCellProps({ diff --git a/packages/kbn-unified-data-table/tsconfig.json b/packages/kbn-unified-data-table/tsconfig.json index 2f9ddddbeea23..bb0884035ae3b 100644 --- a/packages/kbn-unified-data-table/tsconfig.json +++ b/packages/kbn-unified-data-table/tsconfig.json @@ -1,17 +1,32 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { - "outDir": "target/types", - "types": [ - "jest", - "node" - ] + "outDir": "target/types" }, - "include": [ - "**/*.ts", - ], + "include": ["*.ts", "src/**/*", "__mocks__/**/*.ts"], "exclude": [ "target/**/*" ], - "kbn_references": [] + "kbn_references": [ + "@kbn/i18n", + "@kbn/data-views-plugin", + "@kbn/discover-utils", + "@kbn/kibana-utils-plugin", + "@kbn/expressions-plugin", + "@kbn/saved-search-plugin", + "@kbn/discover-plugin", + "@kbn/search-response-warnings", + "@kbn/test-jest-helpers", + "@kbn/i18n-react", + "@kbn/ui-theme", + "@kbn/field-types", + "@kbn/kibana-utils-plugin", + "@kbn/cell-actions", + "@kbn/utility-types", + "@kbn/data-view-field-editor-plugin", + "@kbn/field-formats-plugin", + "@kbn/react-kibana-context-common", + "@kbn/data-plugin", + "@kbn/core", + ] }