diff --git a/src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts b/src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts index d5d88cdcc8288..996c64d34bd12 100644 --- a/src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts +++ b/src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts @@ -8,16 +8,14 @@ */ import { useMemo } from 'react'; -import { useDiscoverServices } from '../../../../hooks/use_discover_services'; import { useDiscoverCustomization } from '../../../../customizations'; import { DataGridColumnsDeps, getDataGridColumnsConfiguration } from './logs'; export * from './logs'; -type ContextualGridCustomizationParams = DataGridColumnsDeps['params']; +type ContextualGridCustomizationParams = DataGridColumnsDeps; export const useContextualGridCustomisations = (params: ContextualGridCustomizationParams) => { - const { data } = useDiscoverServices(); // TODO / NOTE: This will eventually rely on Discover's context resolution to determine which fields // are returned based on the data type. const isLogsContext = useDiscoverCustomization('data_table')?.logsEnabled; @@ -25,8 +23,8 @@ export const useContextualGridCustomisations = (params: ContextualGridCustomizat const virtualColumnsConfiguration = useMemo(() => { if (!isLogsContext) return null; - return getDataGridColumnsConfiguration({ data, params }); - }, [data, isLogsContext, params]); + return getDataGridColumnsConfiguration(params); + }, [isLogsContext, params]); return virtualColumnsConfiguration; }; diff --git a/src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx b/src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx index 39ef66a4678e5..409c1e03fa737 100644 --- a/src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx +++ b/src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx @@ -15,18 +15,18 @@ import { export type DataGridColumnsDeps = CustomCellRendererDeps; -export const getDataGridColumnsConfiguration = ({ data, params }: DataGridColumnsDeps) => { +export const getDataGridColumnsConfiguration = (params: DataGridColumnsDeps) => { return { - customCellRenderer: createCustomCellRenderer({ data, params }), + customCellRenderer: createCustomCellRenderer(params), customGridColumnsConfiguration: createCustomGridColumnsConfiguration(), }; }; type CustomCellRendererDeps = SummaryColumnGetterDeps; -export const createCustomCellRenderer = (deps: CustomCellRendererDeps) => { +export const createCustomCellRenderer = (params: CustomCellRendererDeps) => { return { - [SOURCE_COLUMN]: getSummaryColumn(deps), + [SOURCE_COLUMN]: getSummaryColumn(params), }; }; diff --git a/src/plugins/discover/public/application/main/hooks/grid_customisations/use_data_grid_cell_services.tsx b/src/plugins/discover/public/application/main/hooks/grid_customisations/use_data_grid_cell_services.tsx deleted file mode 100644 index a654ba333620f..0000000000000 --- a/src/plugins/discover/public/application/main/hooks/grid_customisations/use_data_grid_cell_services.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side - * Public License v 1"; you may not use this file except in compliance with, at - * your election, the "Elastic License 2.0", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import createContainer from 'constate'; -import type { DataView } from '@kbn/data-views-plugin/common'; -import { DataPublicPluginStart } from '@kbn/data-plugin/public'; - -export interface DataGridCellServicesProviderProps { - services: { - data: DataPublicPluginStart; - dataView: DataView; - }; -} - -const useDataGridCellServices = ({ services }: DataGridCellServicesProviderProps) => services; - -export const [DataGridCellServicesProvider, useDataGridCellServicesContext] = - createContainer(useDataGridCellServices); diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx index 203bf5104b251..be6bf1574787c 100644 --- a/src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx +++ b/src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx @@ -26,16 +26,19 @@ import { formatJsonDocumentForContent } from './utils'; interface ContentProps extends DataGridCellValueElementProps { isCompressed: boolean; + isSingleLine?: boolean; shouldShowFieldHandler: ShouldShowFieldInTableHandler; } const LogMessage = ({ field, value, + className, isCompressed, }: { field: string; value: string; + className: string; isCompressed: boolean; }) => { const shouldRenderFieldName = field !== constants.MESSAGE_FIELD; @@ -60,7 +63,8 @@ const LogMessage = ({ } return ( - @@ -72,6 +76,7 @@ export const Content = ({ dataView, fieldFormats, isCompressed, + isSingleLine = false, row, shouldShowFieldHandler, }: ContentProps) => { @@ -80,7 +85,12 @@ export const Content = ({ const shouldRenderContent = !!field && !!value; return shouldRenderContent ? ( - + ) : ( import('./summary_column')); -export interface SummaryColumnGetterDeps { - data: DataPublicPluginStart; - params: CellRenderersExtensionParams; -} +export type SummaryColumnGetterDeps = CellRenderersExtensionParams; -export const getSummaryColumn = ({ data, params }: SummaryColumnGetterDeps) => { +export const getSummaryColumn = (params: SummaryColumnGetterDeps) => { const { actions, dataView, density, rowHeight } = params; const shouldShowFieldHandler = createGetShouldShowFieldHandler(dataView); return (props: SummaryColumnProps) => ( { +export const Resource = ({ fields, limited = false, onFilter, ...props }: ResourceProps) => { const displayedFields = limited ? fields.slice(0, MAX_LIMITED_FIELDS_VISIBLE) : fields; const extraFieldsCount = limited ? fields.length - MAX_LIMITED_FIELDS_VISIBLE : 0; return ( - + {displayedFields.map(({ name, value, ResourceBadge, Icon }) => ( ))} @@ -38,15 +38,3 @@ export const Resource = ({ fields, limited = false, onFilter }: ResourceProps) = ); }; - -export const StaticResource = ({ fields }: Pick) => { - return ( - - {fields.map(({ name, value, Icon }) => ( - - {value} - - ))} - - ); -}; diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx index 824274c374727..b8eeea613c9c6 100644 --- a/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx +++ b/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx @@ -13,7 +13,6 @@ import { dataViewMock } from '@kbn/discover-utils/src/__mocks__'; import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks'; import { render, screen } from '@testing-library/react'; import SummaryColumn, { SummaryColumnFactoryDeps, SummaryColumnProps } from './summary_column'; -import { dataPluginMock } from '@kbn/data-plugin/public/mocks'; import { DataGridDensity, ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table'; import * as constants from '../../../../../common/data_types/logs/constants'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; @@ -37,7 +36,6 @@ const renderSummary = ( fieldFormats={fieldFormatsMock} setCellProps={() => {}} closePopover={() => {}} - data={dataPluginMock.createStartContract()} density={DataGridDensity.COMPACT} rowHeight={ROWS_HEIGHT_OPTIONS.single} onFilter={jest.fn()} diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.tsx index 3b750702f330e..a15308549d623 100644 --- a/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.tsx +++ b/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.tsx @@ -13,7 +13,6 @@ import { DataGridDensity, } from '@kbn/unified-data-table'; import React from 'react'; -import { DataPublicPluginStart } from '@kbn/data-plugin/public'; import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'; import { ShouldShowFieldInTableHandler, @@ -22,14 +21,12 @@ import { } from '@kbn/discover-utils'; import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public'; import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types'; -import { DataGridCellServicesProvider } from '../../../../application/main/hooks/grid_customisations/use_data_grid_cell_services'; -import { Resource, StaticResource } from './resource'; +import { Resource } from './resource'; import { Content } from './content'; import { contentLabel, jsonLabel, resourceLabel } from '../translations'; import { createResourceFields, formatJsonDocumentForContent } from './utils'; export interface SummaryColumnFactoryDeps { - data: DataPublicPluginStart; density: DataGridDensity | undefined; rowHeight: number | undefined; shouldShowFieldHandler: ShouldShowFieldInTableHandler; @@ -56,7 +53,7 @@ const SummaryCell = ({ rowHeight: maybeNullishRowHeight, ...props }: SummaryColumnProps & SummaryColumnFactoryDeps) => { - const { data, dataView, onFilter, row } = props; + const { onFilter, row } = props; const density = maybeNullishDensity ?? DataGridDensity.COMPACT; const isCompressed = density === DataGridDensity.COMPACT; @@ -66,24 +63,38 @@ const SummaryCell = ({ const resourceFields = createResourceFields(row); const shouldRenderResource = resourceFields.length > 0; - const gutterSize = isSingleLine ? 's' : 'none'; - return ( - - - {shouldRenderResource && ( - - - - )} - - - + return isSingleLine ? ( + + {shouldRenderResource && ( + + + + )} + + + ) : ( + <> + {shouldRenderResource && ( + + )} + + ); }; const SummaryCellPopover = (props: SummaryColumnProps & SummaryColumnFactoryDeps) => { - const { row, data, dataView, fieldFormats } = props; + const { row, dataView, fieldFormats, onFilter } = props; const resourceFields = createResourceFields(row); const shouldRenderResource = resourceFields.length > 0; @@ -95,46 +106,51 @@ const SummaryCellPopover = (props: SummaryColumnProps & SummaryColumnFactoryDeps const shouldRenderSource = !shouldRenderContent; return ( - - - {shouldRenderResource && ( - - - {resourceLabel} - - - - )} + + {shouldRenderResource && ( - {contentLabel} + {resourceLabel} - {shouldRenderContent && ( - - - {field} - - - {value} - - - )} - {shouldRenderSource && ( - - - {jsonLabel} - - - - )} + + )} + + + {contentLabel} + + {shouldRenderContent && ( + + + {field} + + + {value} + + + )} + {shouldRenderSource && ( + + + {jsonLabel} + + + + )} - + ); }; + +const singleLineResourceCss = { + lineHeight: 'normal', + marginTop: -1, +}; + +const multiLineResourceCss = { display: 'inline-flex' }; diff --git a/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/get_cell_renderers.tsx b/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/get_cell_renderers.tsx index 9e957f03ec700..9e45892070120 100644 --- a/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/get_cell_renderers.tsx +++ b/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/get_cell_renderers.tsx @@ -16,12 +16,9 @@ import { import { getLogLevelBadgeCell } from '../../../../../components/data_types/logs/log_level_badge_cell'; import { getServiceNameCell } from '../../../../../components/data_types/logs/service_name_cell'; import type { DataSourceProfileProvider } from '../../../../profiles'; -import { ProfileProviderServices } from '../../../profile_provider_services'; -export const makeGetCellRenderersHandler = - (services: ProfileProviderServices): DataSourceProfileProvider['profile']['getCellRenderers'] => - (prev) => - (params) => ({ +export const getCellRenderers: DataSourceProfileProvider['profile']['getCellRenderers'] = + (prev) => (params) => ({ ...prev(params), ...LOG_LEVEL_FIELDS.reduce( (acc, field) => ({ @@ -39,5 +36,5 @@ export const makeGetCellRenderersHandler = }), {} ), - [SOURCE_COLUMN]: getSummaryColumn({ data: services.data, params }), + [SOURCE_COLUMN]: getSummaryColumn(params), }); diff --git a/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/index.ts b/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/index.ts index b76a9a53c232c..720a1add3c926 100644 --- a/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/index.ts +++ b/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/index.ts @@ -9,5 +9,5 @@ export { getRowIndicatorProvider } from './get_row_indicator_provider'; export { createGetDefaultAppState } from './get_default_app_state'; -export { makeGetCellRenderersHandler } from './get_cell_renderers'; +export { getCellRenderers } from './get_cell_renderers'; export { getRowAdditionalLeadingControls } from './get_row_additional_leading_controls'; diff --git a/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/profile.ts b/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/profile.ts index 5060e3d87c43f..f2818c336bf40 100644 --- a/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/profile.ts +++ b/src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/profile.ts @@ -10,7 +10,7 @@ import { DataSourceCategory, DataSourceProfileProvider } from '../../../profiles'; import { ProfileProviderServices } from '../../profile_provider_services'; import { - makeGetCellRenderersHandler, + getCellRenderers, getRowIndicatorProvider, getRowAdditionalLeadingControls, } from './accessors'; @@ -21,7 +21,7 @@ export const createLogsDataSourceProfileProvider = ( ): DataSourceProfileProvider => ({ profileId: 'logs-data-source-profile', profile: { - getCellRenderers: makeGetCellRenderersHandler(services), + getCellRenderers, getRowIndicatorProvider, getRowAdditionalLeadingControls, },