github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Use summary column service name component for service name… (#196742)

Browse source 
closes https://github.com/elastic/kibana/issues/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
This commit is contained in:
mohamedhamed-ahmed 2024-10-22 13:33:20 +01:00 • committed by GitHub
parent b668544406
commit 3130492752
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 90 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/plugins/discover/public/components/data_types/logs/service_name_cell.test.tsx
View file

@ -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}
@ -40,22 +71,12 @@ describe('getServiceNameCell', () => {
dataViewMock
);
renderCell('service.name', record);
expect(screen.getByTestId('serviceNameCell-nodejs')).toBeInTheDocument();
expect(screen.getByTestId('dataTableCellActionsPopover_service.name')).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();
});
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
src/plugins/discover/public/components/data_types/logs/service_name_cell.tsx
View file

@ -7,19 +7,27 @@
* 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;
@ -27,19 +35,18 @@ export const getServiceNameCell =
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
src/plugins/discover/public/context_awareness/profile_providers/common/logs_data_source_profile/accessors/get_cell_renderers.tsx
View file

@ -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),
}),
{}
),

20
test/functional/apps/discover/context_awareness/extensions/_get_cell_renderers.ts
View file

@ -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');
});
});
});

20
x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_cell_renderers.ts
View file

@ -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');
});
});
});