From 1c0b5e02a6cb8c5450bf8ac778f43d8e2689a25b Mon Sep 17 00:00:00 2001 From: mohamedhamed-ahmed Date: Thu, 17 Oct 2024 18:29:36 +0200 Subject: [PATCH 1/4] [Discover] Use summary column service name component for service name column --- .../logs/service_name_cell.test.tsx | 51 +++++++++++++------ .../data_types/logs/service_name_cell.tsx | 32 ++++++------ .../accessors/get_cell_renderers.tsx | 4 +- 3 files changed, 55 insertions(+), 32 deletions(-) diff --git a/src/plugins/discover/public/components/data_types/logs/service_name_cell.test.tsx b/src/plugins/discover/public/components/data_types/logs/service_name_cell.test.tsx index 8cf45be4f09e5..3171c5e61e629 100644 --- a/src/plugins/discover/public/components/data_types/logs/service_name_cell.test.tsx +++ b/src/plugins/discover/public/components/data_types/logs/service_name_cell.test.tsx @@ -7,15 +7,46 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ +import React from 'react'; import { buildDataTableRecord, DataTableRecord } from '@kbn/discover-utils'; 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 React from 'react'; +import { DataGridDensity, ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table'; import { getServiceNameCell } from './service_name_cell'; +import { CellRenderersExtensionParams } from '../../../context_awareness'; + +const core = { + application: { + capabilities: { + apm: { + show: true, + }, + }, + }, + uiSettings: { + get: () => true, + }, +}; + +jest.mock('../../../hooks/use_discover_services', () => { + const originalModule = jest.requireActual('../../../hooks/use_discover_services'); + return { + ...originalModule, + useDiscoverServices: () => ({ core, share: {} }), + }; +}); const renderCell = (serviceNameField: string, record: DataTableRecord) => { - const ServiceNameCell = getServiceNameCell(serviceNameField); + const cellRenderersExtensionParamsMock: CellRenderersExtensionParams = { + actions: { + addFilter: jest.fn(), + }, + dataView: dataViewMock, + density: DataGridDensity.COMPACT, + rowHeight: ROWS_HEIGHT_OPTIONS.single, + }; + const ServiceNameCell = getServiceNameCell(serviceNameField, cellRenderersExtensionParamsMock); render( { dataViewMock ); renderCell('service.name', record); - expect(screen.getByTestId('serviceNameCell-nodejs')).toBeInTheDocument(); - }); - - it('renders default icon with unknwon test subject if agent name is missing', () => { - const record = buildDataTableRecord( - { fields: { 'service.name': 'test-service' } }, - dataViewMock - ); - renderCell('service.name', record); - expect(screen.getByTestId('serviceNameCell-unknown')).toBeInTheDocument(); + expect(screen.getByTestId('dataTableCellActionsPopover_service.name')).toBeInTheDocument(); }); - it('does not render if service name is missing', () => { + it('does render empty div if service name is missing', () => { const record = buildDataTableRecord({ fields: { 'agent.name': 'nodejs' } }, dataViewMock); renderCell('service.name', record); - expect(screen.queryByTestId('serviceNameCell-nodejs')).not.toBeInTheDocument(); - expect(screen.queryByTestId('serviceNameCell-unknown')).not.toBeInTheDocument(); + expect(screen.queryByTestId('serviceNameCell-empty')).toBeInTheDocument(); }); }); diff --git a/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx b/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx index 39d112de5258e..72ce150eca873 100644 --- a/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx +++ b/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx @@ -7,19 +7,22 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; +import { EuiToolTip } from '@elastic/eui'; import type { AgentName } from '@kbn/elastic-agent-utils'; import { dynamic } from '@kbn/shared-ux-utility'; import type { DataGridCellValueElementProps } from '@kbn/unified-data-table'; import React from 'react'; import { getFieldValue } from '@kbn/discover-utils'; +import { CellRenderersExtensionParams } from '../../../context_awareness'; import { AGENT_NAME_FIELD } from '../../../../common/data_types/logs/constants'; +import { ServiceNameBadgeWithActions } from './service_name_badge_with_actions'; const dataTestSubj = 'serviceNameCell'; const AgentIcon = dynamic(() => import('@kbn/custom-icons/src/components/agent_icon')); export const getServiceNameCell = - (serviceNameField: string) => (props: DataGridCellValueElementProps) => { + (serviceNameField: string, { actions }: CellRenderersExtensionParams) => + (props: DataGridCellValueElementProps) => { const serviceNameValue = getFieldValue(props.row, serviceNameField) as string; const agentName = getFieldValue(props.row, AGENT_NAME_FIELD) as AgentName; @@ -27,19 +30,18 @@ export const getServiceNameCell = return -; } + const getIcon = () => ( + + + + ); + return ( - - - - - - - {serviceNameValue} - + ); }; 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 9e45892070120..7e13baf8ddcf9 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 @@ -31,8 +31,8 @@ export const getCellRenderers: DataSourceProfileProvider['profile']['getCellRend ...SERVICE_NAME_FIELDS.reduce( (acc, field) => ({ ...acc, - [field]: getServiceNameCell(field), - [`${field}.keyword`]: getServiceNameCell(`${field}.keyword`), + [field]: getServiceNameCell(field, params), + [`${field}.keyword`]: getServiceNameCell(`${field}.keyword`, params), }), {} ), From a7739b080454c8514b11278656ad9d9b20c6f9d9 Mon Sep 17 00:00:00 2001 From: mohamedhamed-ahmed Date: Sun, 20 Oct 2024 17:47:39 +0200 Subject: [PATCH 2/4] Fix Tests --- .../extensions/_get_cell_renderers.ts | 20 +++++++++++++------ .../extensions/_get_cell_renderers.ts | 20 +++++++++++++------ 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/test/functional/apps/discover/context_awareness/extensions/_get_cell_renderers.ts b/test/functional/apps/discover/context_awareness/extensions/_get_cell_renderers.ts index cb66afc7ebc57..e18f6c5860dd2 100644 --- a/test/functional/apps/discover/context_awareness/extensions/_get_cell_renderers.ts +++ b/test/functional/apps/discover/context_awareness/extensions/_get_cell_renderers.ts @@ -105,8 +105,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const firstCell = await dataGrid.getCellElementExcludingControlColumns(0, 0); const lastCell = await dataGrid.getCellElementExcludingControlColumns(2, 0); - const firstServiceNameCell = await firstCell.findByTestSubject('serviceNameCell-java'); - const lastServiceNameCell = await lastCell.findByTestSubject('serviceNameCell-unknown'); + const firstServiceNameCell = await firstCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); + const lastServiceNameCell = await lastCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); expect(await firstServiceNameCell.getVisibleText()).to.be('product'); expect(await lastServiceNameCell.getVisibleText()).to.be('accounting'); }); @@ -130,7 +134,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await retry.try(async () => { const firstCell = await dataGrid.getCellElementExcludingControlColumns(0, 0); expect(await firstCell.getVisibleText()).to.be('product'); - await testSubjects.missingOrFail('*serviceNameCell*'); + await testSubjects.missingOrFail('dataTableCellActionsPopover_service.name'); }); }); }); @@ -278,8 +282,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await retry.try(async () => { firstCell = await dataGrid.getCellElementExcludingControlColumns(0, 1); lastCell = await dataGrid.getCellElementExcludingControlColumns(2, 1); - const firstServiceNameCell = await firstCell.findByTestSubject('serviceNameCell-java'); - const lastServiceNameCell = await lastCell.findByTestSubject('serviceNameCell-unknown'); + const firstServiceNameCell = await firstCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); + const lastServiceNameCell = await lastCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); expect(await firstServiceNameCell.getVisibleText()).to.be('product'); expect(await lastServiceNameCell.getVisibleText()).to.be('accounting'); }); @@ -309,7 +317,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await firstCell.getVisibleText()).to.be('product'); expect(await lastCell.getVisibleText()).to.be('accounting'); - await testSubjects.missingOrFail('*serviceNameCell*'); + await testSubjects.missingOrFail('dataTableCellActionsPopover_service.name'); }); }); }); diff --git a/x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_cell_renderers.ts b/x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_cell_renderers.ts index 0cf8aeedd257a..b8503e0f8dcab 100644 --- a/x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_cell_renderers.ts +++ b/x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_cell_renderers.ts @@ -105,8 +105,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const firstCell = await dataGrid.getCellElementExcludingControlColumns(0, 0); const lastCell = await dataGrid.getCellElementExcludingControlColumns(2, 0); - const firstServiceNameCell = await firstCell.findByTestSubject('serviceNameCell-java'); - const lastServiceNameCell = await lastCell.findByTestSubject('serviceNameCell-unknown'); + const firstServiceNameCell = await firstCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); + const lastServiceNameCell = await lastCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); expect(await firstServiceNameCell.getVisibleText()).to.be('product'); expect(await lastServiceNameCell.getVisibleText()).to.be('accounting'); }); @@ -130,7 +134,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await retry.try(async () => { const firstCell = await dataGrid.getCellElementExcludingControlColumns(0, 0); expect(await firstCell.getVisibleText()).to.be('product'); - await testSubjects.missingOrFail('*serviceNameCell*'); + await testSubjects.missingOrFail('dataTableCellActionsPopover_service.name'); }); }); }); @@ -277,8 +281,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await retry.try(async () => { firstCell = await dataGrid.getCellElementExcludingControlColumns(0, 1); lastCell = await dataGrid.getCellElementExcludingControlColumns(2, 1); - const firstServiceNameCell = await firstCell.findByTestSubject('serviceNameCell-java'); - const lastServiceNameCell = await lastCell.findByTestSubject('serviceNameCell-unknown'); + const firstServiceNameCell = await firstCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); + const lastServiceNameCell = await lastCell.findByTestSubject( + 'dataTableCellActionsPopover_service.name' + ); expect(await firstServiceNameCell.getVisibleText()).to.be('product'); expect(await lastServiceNameCell.getVisibleText()).to.be('accounting'); }); @@ -308,7 +316,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await firstCell.getVisibleText()).to.be('product'); expect(await lastCell.getVisibleText()).to.be('accounting'); - await testSubjects.missingOrFail('*serviceNameCell*'); + await testSubjects.missingOrFail('dataTableCellActionsPopover_service.name'); }); }); }); From f07d2ac40e993eec8fa04928fc9ba1d7c991be94 Mon Sep 17 00:00:00 2001 From: mohamedhamed-ahmed Date: Mon, 21 Oct 2024 11:32:17 +0200 Subject: [PATCH 3/4] Fix Agent Icon Style --- .../components/data_types/logs/service_name_cell.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx b/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx index 72ce150eca873..ab79ee2b89603 100644 --- a/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx +++ b/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx @@ -7,12 +7,14 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ +import React from 'react'; import { EuiToolTip } from '@elastic/eui'; import type { AgentName } from '@kbn/elastic-agent-utils'; import { dynamic } from '@kbn/shared-ux-utility'; import type { DataGridCellValueElementProps } from '@kbn/unified-data-table'; -import React from 'react'; +import { css } from '@emotion/react'; import { getFieldValue } from '@kbn/discover-utils'; +import { euiThemeVars } from '@kbn/ui-theme'; import { CellRenderersExtensionParams } from '../../../context_awareness'; import { AGENT_NAME_FIELD } from '../../../../common/data_types/logs/constants'; import { ServiceNameBadgeWithActions } from './service_name_badge_with_actions'; @@ -32,7 +34,13 @@ export const getServiceNameCell = const getIcon = () => ( - + ); From 530b4d1cd40416f12b5bd06c09eafab4c6c9a01f Mon Sep 17 00:00:00 2001 From: mohamedhamed-ahmed Date: Tue, 22 Oct 2024 11:53:24 +0200 Subject: [PATCH 4/4] Refactor Code --- .../data_types/logs/service_name_cell.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx b/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx index ab79ee2b89603..cd94cd609dc69 100644 --- a/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx +++ b/src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx @@ -19,8 +19,11 @@ import { CellRenderersExtensionParams } from '../../../context_awareness'; import { AGENT_NAME_FIELD } from '../../../../common/data_types/logs/constants'; import { ServiceNameBadgeWithActions } from './service_name_badge_with_actions'; -const dataTestSubj = 'serviceNameCell'; const AgentIcon = dynamic(() => import('@kbn/custom-icons/src/components/agent_icon')); +const dataTestSubj = 'serviceNameCell'; +const agentIconStyle = css` + margin-right: ${euiThemeVars.euiSizeXS}; +`; export const getServiceNameCell = (serviceNameField: string, { actions }: CellRenderersExtensionParams) => @@ -34,13 +37,7 @@ export const getServiceNameCell = const getIcon = () => ( - + );