Skip to content

Commit

Permalink
[Discover] Use summary column service name component for service name… (
Browse files Browse the repository at this point in the history 
#196742)

closes #196541
## 📝  Summary

This PR updated the `service.name` cell renderer so that it mimics what
we have in the `summary` column.
It now shows a clickable pill shape for quick filters and navigating to
the service page if `APM` is available.

## 🎥 Demo


https://github.com/user-attachments/assets/627b39af-f008-487b-82f2-c0ab79aff9a4
  • Loading branch information
@mohamedhamed-ahmed
mohamedhamed-ahmed authored Oct 22, 2024
1 parent b668544 commit 3130492
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 46 deletions.
51 changes: 36 additions & 15 deletions src/plugins/discover/public/components/data_types/logs/service_name_cell.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<ServiceNameCell
rowIndex={0}
Expand All @@ -40,22 +71,12 @@ describe('getServiceNameCell', () => {
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();
});
});
41 changes: 24 additions & 17 deletions src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,46 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
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';

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) => (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;

if (!serviceNameValue) {
return <span data-test-subj={`${dataTestSubj}-empty`}>-</span>;
}

const getIcon = () => (
<EuiToolTip position="left" content={agentName} repositionOnScroll={true}>
<AgentIcon agentName={agentName} size="m" css={agentIconStyle} />
</EuiToolTip>
);

return (
<EuiFlexGroup
gutterSize="xs"
data-test-subj={`${dataTestSubj}-${agentName || 'unknown'}`}
responsive={false}
alignItems="center"
>
<EuiFlexItem grow={false}>
<EuiToolTip position="left" content={agentName} repositionOnScroll={true}>
<AgentIcon agentName={agentName} size="m" />
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem grow={false}>{serviceNameValue}</EuiFlexItem>
</EuiFlexGroup>
<ServiceNameBadgeWithActions
onFilter={actions.addFilter}
icon={getIcon}
value={serviceNameValue}
property={serviceNameField}
/>
);
};
4 changes: 2 additions & 2 deletions ...reness/profile_providers/common/logs_data_source_profile/accessors/get_cell_renderers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
}),
{}
),
Expand Down
20 changes: 14 additions & 6 deletions test/functional/apps/discover/context_awareness/extensions/_get_cell_renderers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand All @@ -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');
});
});
});
Expand Down Expand Up @@ -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');
});
Expand Down Expand Up @@ -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');
});
});
});
Expand Down
20 changes: 14 additions & 6 deletions ...unctional/test_suites/common/discover/context_awareness/extensions/_get_cell_renderers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand All @@ -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');
});
});
});
Expand Down Expand Up @@ -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');
});
Expand Down Expand Up @@ -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');
});
});
});
Expand Down

0 comments on commit 3130492

Please sign in to comment.