Skip to content

Commit c71dab6

Browse files
smithsorenlouv
smith
authored and
sorenlouv
committed
Transaction type handling and breakdown chart (#83587)
1 parent 6f106de commit c71dab6

20 files changed

Lines changed: 213 additions & 87 deletions

File tree

‎x-pack/plugins/apm/common/agent_name.test.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import {
8+
getFirstTransactionType,
9+
isJavaAgentName,
10+
isRumAgentName,
11+
} from './agent_name';
12+
13+
describe('agent name helpers', () => {
14+
describe('getFirstTransactionType', () => {
15+
describe('with no transaction types', () => {
16+
expect(getFirstTransactionType([])).toBeUndefined();
17+
});
18+
19+
describe('with a non-rum agent', () => {
20+
it('returns "request"', () => {
21+
expect(getFirstTransactionType(['worker', 'request'], 'java')).toEqual(
22+
'request'
23+
);
24+
});
25+
26+
describe('with no request types', () => {
27+
it('returns the first type', () => {
28+
expect(
29+
getFirstTransactionType(['worker', 'shirker'], 'java')
30+
).toEqual('worker');
31+
});
32+
});
33+
});
34+
35+
describe('with a rum agent', () => {
36+
it('returns "page-load"', () => {
37+
expect(
38+
getFirstTransactionType(['http-request', 'page-load'], 'js-base')
39+
).toEqual('page-load');
40+
});
41+
});
42+
});
43+
44+
describe('isJavaAgentName', () => {
45+
describe('when the agent name is java', () => {
46+
it('returns true', () => {
47+
expect(isJavaAgentName('java')).toEqual(true);
48+
});
49+
});
50+
describe('when the agent name is not java', () => {
51+
it('returns true', () => {
52+
expect(isJavaAgentName('not java')).toEqual(false);
53+
});
54+
});
55+
});
56+
57+
describe('isRumAgentName', () => {
58+
describe('when the agent name is js-base', () => {
59+
it('returns true', () => {
60+
expect(isRumAgentName('js-base')).toEqual(true);
61+
});
62+
});
63+
64+
describe('when the agent name is rum-js', () => {
65+
it('returns true', () => {
66+
expect(isRumAgentName('rum-js')).toEqual(true);
67+
});
68+
});
69+
70+
describe('when the agent name is opentelemetry/webjs', () => {
71+
it('returns true', () => {
72+
expect(isRumAgentName('opentelemetry/webjs')).toEqual(true);
73+
});
74+
});
75+
76+
describe('when the agent name something else', () => {
77+
it('returns true', () => {
78+
expect(isRumAgentName('java')).toEqual(false);
79+
});
80+
});
81+
});
82+
});

‎x-pack/plugins/apm/common/agent_name.ts‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
*/
66

77
import { AgentName } from '../typings/es_schemas/ui/fields/agent';
8+
import {
9+
TRANSACTION_PAGE_LOAD,
10+
TRANSACTION_REQUEST,
11+
} from './transaction_types';
812

913
/*
1014
* Agent names can be any string. This list only defines the official agents
@@ -46,14 +50,34 @@ export const RUM_AGENT_NAMES: AgentName[] = [
4650
'opentelemetry/webjs',
4751
];
4852

49-
export function isRumAgentName(
53+
function getDefaultTransactionTypeForAgentName(agentName?: string) {
54+
return isRumAgentName(agentName)
55+
? TRANSACTION_PAGE_LOAD
56+
: TRANSACTION_REQUEST;
57+
}
58+
59+
export function getFirstTransactionType(
60+
transactionTypes: string[],
5061
agentName?: string
51-
): agentName is 'js-base' | 'rum-js' | 'opentelemetry/webjs' {
52-
return RUM_AGENT_NAMES.includes(agentName! as AgentName);
62+
) {
63+
const defaultTransactionType = getDefaultTransactionTypeForAgentName(
64+
agentName
65+
);
66+
67+
return (
68+
transactionTypes.find((type) => type === defaultTransactionType) ??
69+
transactionTypes[0]
70+
);
5371
}
5472

5573
export function isJavaAgentName(
5674
agentName: string | undefined
5775
): agentName is 'java' {
5876
return agentName === 'java';
5977
}
78+
79+
export function isRumAgentName(
80+
agentName?: string
81+
): agentName is 'js-base' | 'rum-js' | 'opentelemetry/webjs' {
82+
return RUM_AGENT_NAMES.includes(agentName! as AgentName);
83+
}

‎x-pack/plugins/apm/jest.config.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,9 @@ const { createJestConfig } = require('../../dev-tools/jest/create_jest_config');
1414
const { resolve } = require('path');
1515

1616
const rootDir = resolve(__dirname, '.');
17-
const xPackKibanaDirectory = resolve(__dirname, '../..');
1817
const kibanaDirectory = resolve(__dirname, '../../..');
1918

20-
const jestConfig = createJestConfig({
21-
kibanaDirectory,
22-
rootDir,
23-
xPackKibanaDirectory,
24-
});
19+
const jestConfig = createJestConfig({ kibanaDirectory, rootDir });
2520

2621
module.exports = {
2722
...jestConfig,

‎x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { ServiceMap } from '../ServiceMap';
2323
import { ServiceMetrics } from '../service_metrics';
2424
import { ServiceNodeOverview } from '../ServiceNodeOverview';
2525
import { ServiceOverview } from '../service_overview';
26-
import { TransactionOverview } from '../TransactionOverview';
26+
import { TransactionOverview } from '../transaction_overview';
2727

2828
interface Tab {
2929
key: string;

‎x-pack/plugins/apm/public/components/app/service_overview/index.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import React from 'react';
1616
import { useTrackPageview } from '../../../../../observability/public';
1717
import { isRumAgentName } from '../../../../common/agent_name';
1818
import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
19+
import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
1920
import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
2021
import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
2122
import { SearchBar } from '../../shared/search_bar';
@@ -103,22 +104,7 @@ export function ServiceOverview({
103104
<EuiFlexItem>
104105
<EuiFlexGroup gutterSize="s">
105106
<EuiFlexItem grow={4}>
106-
<EuiPanel>
107-
<EuiFlexGroup>
108-
<EuiFlexItem>
109-
<EuiTitle size="xs">
110-
<h2>
111-
{i18n.translate(
112-
'xpack.apm.serviceOverview.averageDurationBySpanTypeChartTitle',
113-
{
114-
defaultMessage: 'Average duration by span type',
115-
}
116-
)}
117-
</h2>
118-
</EuiTitle>
119-
</EuiFlexItem>
120-
</EuiFlexGroup>
121-
</EuiPanel>
107+
<TransactionBreakdownChart showAnnotations={false} />
122108
</EuiFlexItem>
123109
<EuiFlexItem grow={6}>
124110
<EuiPanel>

‎x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { MockUrlParamsContextProvider } from '../../../context/UrlParamsContext/
1717
import * as useDynamicIndexPatternHooks from '../../../hooks/useDynamicIndexPattern';
1818
import * as useFetcherHooks from '../../../hooks/useFetcher';
1919
import { FETCH_STATUS } from '../../../hooks/useFetcher';
20+
import * as useAnnotationsHooks from '../../../hooks/use_annotations';
21+
import * as useTransactionBreakdownHooks from '../../../hooks/use_transaction_breakdown';
2022
import { renderWithTheme } from '../../../utils/testHelpers';
2123
import { ServiceOverview } from './';
2224

@@ -53,6 +55,9 @@ function Wrapper({ children }: { children?: ReactNode }) {
5355

5456
describe('ServiceOverview', () => {
5557
it('renders', () => {
58+
jest
59+
.spyOn(useAnnotationsHooks, 'useAnnotations')
60+
.mockReturnValue({ annotations: [] });
5661
jest
5762
.spyOn(useDynamicIndexPatternHooks, 'useDynamicIndexPattern')
5863
.mockReturnValue({
@@ -71,6 +76,13 @@ describe('ServiceOverview', () => {
7176
refetch: () => {},
7277
status: FETCH_STATUS.SUCCESS,
7378
});
79+
jest
80+
.spyOn(useTransactionBreakdownHooks, 'useTransactionBreakdown')
81+
.mockReturnValue({
82+
data: { timeseries: [] },
83+
error: undefined,
84+
status: FETCH_STATUS.SUCCESS,
85+
});
7486

7587
expect(() =>
7688
renderWithTheme(<ServiceOverview serviceName="test service name" />, {

x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx renamed to x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/TransactionList.stories.tsx

File renamed without changes.

x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/index.tsx renamed to x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx

File renamed without changes.

x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx renamed to x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
import { i18n } from '@kbn/i18n';
1919
import { FormattedMessage } from '@kbn/i18n/react';
2020
import { Location } from 'history';
21-
import { first } from 'lodash';
2221
import React, { useMemo } from 'react';
2322
import { useLocation } from 'react-router-dom';
2423
import { useTrackPageview } from '../../../../../observability/public';
@@ -29,6 +28,7 @@ import { useServiceTransactionTypes } from '../../../hooks/useServiceTransaction
2928
import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
3029
import { useTransactionList } from '../../../hooks/useTransactionList';
3130
import { useUrlParams } from '../../../hooks/useUrlParams';
31+
import { useTransactionType } from '../../../hooks/use_transaction_type';
3232
import { TransactionCharts } from '../../shared/charts/transaction_charts';
3333
import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
3434
import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
@@ -41,23 +41,22 @@ import { useRedirect } from './useRedirect';
4141
import { UserExperienceCallout } from './user_experience_callout';
4242

4343
function getRedirectLocation({
44-
urlParams,
4544
location,
46-
serviceTransactionTypes,
45+
transactionType,
46+
urlParams,
4747
}: {
4848
location: Location;
49+
transactionType?: string;
4950
urlParams: IUrlParams;
50-
serviceTransactionTypes: string[];
5151
}): Location | undefined {
52-
const { transactionType } = urlParams;
53-
const firstTransactionType = first(serviceTransactionTypes);
52+
const transactionTypeFromUrlParams = urlParams.transactionType;
5453

55-
if (!transactionType && firstTransactionType) {
54+
if (!transactionTypeFromUrlParams && transactionType) {
5655
return {
5756
...location,
5857
search: fromQuery({
5958
...toQuery(location.search),
60-
transactionType: firstTransactionType,
59+
transactionType,
6160
}),
6261
};
6362
}
@@ -70,19 +69,11 @@ interface TransactionOverviewProps {
7069
export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
7170
const location = useLocation();
7271
const { urlParams } = useUrlParams();
73-
const { transactionType } = urlParams;
74-
75-
// TODO: fetching of transaction types should perhaps be lifted since it is needed in several places. Context?
72+
const transactionType = useTransactionType();
7673
const serviceTransactionTypes = useServiceTransactionTypes(urlParams);
7774

7875
// redirect to first transaction type
79-
useRedirect(
80-
getRedirectLocation({
81-
urlParams,
82-
location,
83-
serviceTransactionTypes,
84-
})
85-
);
76+
useRedirect(getRedirectLocation({ location, transactionType, urlParams }));
8677

8778
const {
8879
data: transactionCharts,

x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionOverview.test.tsx renamed to x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx

File renamed without changes.

0 commit comments

Comments
 (0)