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

Sort service list by TPM if health is not shown (#80447)

Browse source 
Fall back to sorting by transactions per minute if the health column is not available.

Update the test for the component by moving it, removing snapshots, converting to React Testing Library, converting to TypeScript, and adding new cases for this sorting logic.

Fixes #79827.
This commit is contained in:
Nathan L Smith 2020-10-14 23:09:34 -05:00 • committed by GitHub
parent d6c8140747
commit 725550f58f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 127 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/props.json → x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__fixtures__/props.json
View file

@ -11,10 +11,7 @@
"value": 46.06666666666667,
"timeseries": []
},
"avgResponseTime": null,
"environments": [
"test"
]
"environments": ["test"]
},
{
"serviceName": "opbeans-python",

80
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/List.test.js
View file

@ -1,80 +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;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { shallow } from 'enzyme';
import { ServiceList, SERVICE_COLUMNS } from '../index';
import props from './props.json';
import { mockMoment } from '../../../../../utils/testHelpers';
import { ServiceHealthStatus } from '../../../../../../common/service_health_status';
describe('ServiceOverview -> List', () => {
beforeAll(() => {
mockMoment();
});
it('renders empty state', () => {
const wrapper = shallow(<ServiceList items={[]} />);
expect(wrapper).toMatchSnapshot();
});
it('renders with data', () => {
const wrapper = shallow(<ServiceList items={props.items} />);
expect(wrapper).toMatchSnapshot();
});
it('renders columns correctly', () => {
const service = {
serviceName: 'opbeans-python',
agentName: 'python',
transactionsPerMinute: {
value: 86.93333333333334,
timeseries: [],
},
errorsPerMinute: {
value: 12.6,
timeseries: [],
},
avgResponseTime: {
value: 91535.42944785276,
timeseries: [],
},
environments: ['test'],
};
const renderedColumns = SERVICE_COLUMNS.map((c) =>
c.render(service[c.field], service)
);
expect(renderedColumns[0]).toMatchSnapshot();
});
describe('without ML data', () => {
it('does not render health column', () => {
const wrapper = shallow(<ServiceList items={props.items} />);
const columns = wrapper.props().columns;
expect(columns[0].field).not.toBe('healthStatus');
});
});
describe('with ML data', () => {
it('renders health column', () => {
const wrapper = shallow(
<ServiceList
items={props.items.map((item) => ({
...item,
healthStatus: ServiceHealthStatus.warning,
}))}
/>
);
const columns = wrapper.props().columns;
expect(columns[0].field).toBe('healthStatus');
});
});
});

153
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/__snapshots__/List.test.js.snap generated
View file

@ -1,153 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ServiceOverview -> List renders columns correctly 1`] = `
<HealthBadge
healthStatus="unknown"
/>
`;
exports[`ServiceOverview -> List renders empty state 1`] = `
<Memo(UnoptimizedManagedTable)
columns={
Array [
Object {
"field": "serviceName",
"name": "Name",
"render": [Function],
"sortable": true,
"width": "40%",
},
Object {
"field": "environments",
"name": "Environment",
"render": [Function],
"sortable": true,
"width": "160px",
},
Object {
"align": "left",
"dataType": "number",
"field": "avgResponseTime",
"name": "Avg. response time",
"render": [Function],
"sortable": true,
"width": "160px",
},
Object {
"align": "left",
"dataType": "number",
"field": "transactionsPerMinute",
"name": "Trans. per minute",
"render": [Function],
"sortable": true,
"width": "160px",
},
Object {
"align": "left",
"dataType": "number",
"field": "errorsPerMinute",
"name": "Error rate %",
"render": [Function],
"sortable": true,
"width": "160px",
},
]
}
initialPageSize={50}
initialSortDirection="desc"
initialSortField="healthStatus"
items={Array []}
sortFn={[Function]}
/>
`;
exports[`ServiceOverview -> List renders with data 1`] = `
<Memo(UnoptimizedManagedTable)
columns={
Array [
Object {
"field": "serviceName",
"name": "Name",
"render": [Function],
"sortable": true,
"width": "40%",
},
Object {
"field": "environments",
"name": "Environment",
"render": [Function],
"sortable": true,
"width": "160px",
},
Object {
"align": "left",
"dataType": "number",
"field": "avgResponseTime",
"name": "Avg. response time",
"render": [Function],
"sortable": true,
"width": "160px",
},
Object {
"align": "left",
"dataType": "number",
"field": "transactionsPerMinute",
"name": "Trans. per minute",
"render": [Function],
"sortable": true,
"width": "160px",
},
Object {
"align": "left",
"dataType": "number",
"field": "errorsPerMinute",
"name": "Error rate %",
"render": [Function],
"sortable": true,
"width": "160px",
},
]
}
initialPageSize={50}
initialSortDirection="desc"
initialSortField="healthStatus"
items={
Array [
Object {
"agentName": "nodejs",
"avgResponseTime": null,
"environments": Array [
"test",
],
"errorsPerMinute": Object {
"timeseries": Array [],
"value": 46.06666666666667,
},
"serviceName": "opbeans-node",
"transactionsPerMinute": Object {
"timeseries": Array [],
"value": 0,
},
},
Object {
"agentName": "python",
"avgResponseTime": Object {
"timeseries": Array [],
"value": 91535.42944785276,
},
"environments": Array [],
"errorsPerMinute": Object {
"timeseries": Array [],
"value": 12.6,
},
"serviceName": "opbeans-python",
"transactionsPerMinute": Object {
"timeseries": Array [],
"value": 86.93333333333334,
},
},
]
}
sortFn={[Function]}
/>
`;

6
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
View file

@ -191,18 +191,20 @@ export function ServiceList({ items, noItemsMessage }: Props) {
const columns = displayHealthStatus
? SERVICE_COLUMNS
: SERVICE_COLUMNS.filter((column) => column.field !== 'healthStatus');
const initialSortField = displayHealthStatus
? 'healthStatus'
: 'transactionsPerMinute';
return (
<ManagedTable
columns={columns}
items={items}
noItemsMessage={noItemsMessage}
initialSortField="healthStatus"
initialSortField={initialSortField}
initialSortDirection="desc"
initialPageSize={50}
sortFn={(itemsToSort, sortField, sortDirection) => {
// For healthStatus, sort items by healthStatus first, then by TPM
return sortField === 'healthStatus'
? orderBy(
itemsToSort,

122
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/service_list.test.tsx Normal file
View file

@ -0,0 +1,122 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { ReactNode } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { ServiceHealthStatus } from '../../../../../common/service_health_status';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { ServiceListAPIResponse } from '../../../../../server/lib/services/get_services';
import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
import { mockMoment, renderWithTheme } from '../../../../utils/testHelpers';
import { ServiceList, SERVICE_COLUMNS } from './';
import props from './__fixtures__/props.json';
function Wrapper({ children }: { children?: ReactNode }) {
return (
<MockApmPluginContextWrapper>
<MemoryRouter>{children}</MemoryRouter>
</MockApmPluginContextWrapper>
);
}
describe('ServiceList', () => {
beforeAll(() => {
mockMoment();
});
it('renders empty state', () => {
expect(() =>
renderWithTheme(<ServiceList items={[]} />, { wrapper: Wrapper })
).not.toThrowError();
});
it('renders with data', () => {
expect(() =>
// Types of property 'avgResponseTime' are incompatible.
// Type 'null' is not assignable to type '{ value: number | null; timeseries: { x: number; y: number | null; }[]; } | undefined'.ts(2322)
renderWithTheme(
<ServiceList items={props.items as ServiceListAPIResponse['items']} />,
{ wrapper: Wrapper }
)
).not.toThrowError();
});
it('renders columns correctly', () => {
const service: any = {
serviceName: 'opbeans-python',
agentName: 'python',
transactionsPerMinute: {
value: 86.93333333333334,
timeseries: [],
},
errorsPerMinute: {
value: 12.6,
timeseries: [],
},
avgResponseTime: {
value: 91535.42944785276,
timeseries: [],
},
environments: ['test'],
};
const renderedColumns = SERVICE_COLUMNS.map((c) =>
c.render!(service[c.field!], service)
);
expect(renderedColumns[0]).toMatchInlineSnapshot(`
<HealthBadge
healthStatus="unknown"
/>
`);
});
describe('without ML data', () => {
it('does not render the health column', () => {
const { queryByText } = renderWithTheme(
<ServiceList items={props.items as ServiceListAPIResponse['items']} />,
{
wrapper: Wrapper,
}
);
const healthHeading = queryByText('Health');
expect(healthHeading).toBeNull();
});
it('sorts by transactions per minute', async () => {
const { findByTitle } = renderWithTheme(
<ServiceList items={props.items as ServiceListAPIResponse['items']} />,
{
wrapper: Wrapper,
}
);
expect(
await findByTitle('Trans. per minute; Sorted in descending order')
).toBeInTheDocument();
});
});
describe('with ML data', () => {
it('renders the health column', async () => {
const { findByTitle } = renderWithTheme(
<ServiceList
items={(props.items as ServiceListAPIResponse['items']).map(
(item) => ({
...item,
healthStatus: ServiceHealthStatus.warning,
})
)}
/>,
{ wrapper: Wrapper }
);
expect(
await findByTitle('Health; Sorted in descending order')
).toBeInTheDocument();
});
});
});