Skip to content

Commit e2abb03

Browse files
dgieselaarkibanamachine
dgieselaar
and
kibanamachine
authored
[APM] Color by span type when there's only one service (#90424)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent acb7b77 commit e2abb03

11 files changed

Lines changed: 666 additions & 160 deletions

File tree

‎x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getErrorMarks } from './get_error_marks';
1111
describe('getErrorMarks', () => {
1212
describe('returns empty array', () => {
1313
it('when items are missing', () => {
14-
expect(getErrorMarks([], {})).toEqual([]);
14+
expect(getErrorMarks([])).toEqual([]);
1515
});
1616
});
1717

@@ -22,17 +22,17 @@ describe('getErrorMarks', () => {
2222
offset: 10,
2323
skew: 5,
2424
doc: { error: { id: 1 }, service: { name: 'opbeans-java' } },
25+
color: 'red',
2526
} as unknown,
2627
{
2728
docType: 'error',
2829
offset: 50,
2930
skew: 0,
3031
doc: { error: { id: 2 }, service: { name: 'opbeans-node' } },
32+
color: 'blue',
3133
} as unknown,
3234
] as IWaterfallError[];
33-
expect(
34-
getErrorMarks(items, { 'opbeans-java': 'red', 'opbeans-node': 'blue' })
35-
).toEqual([
35+
expect(getErrorMarks(items)).toEqual([
3636
{
3737
type: 'errorMark',
3838
offset: 15,
@@ -59,30 +59,32 @@ describe('getErrorMarks', () => {
5959
offset: 10,
6060
skew: 5,
6161
doc: { error: { id: 1 }, service: { name: 'opbeans-java' } },
62+
color: '',
6263
} as unknown,
6364
{
6465
docType: 'error',
6566
offset: 50,
6667
skew: 0,
6768
doc: { error: { id: 2 }, service: { name: 'opbeans-node' } },
69+
color: '',
6870
} as unknown,
6971
] as IWaterfallError[];
70-
expect(getErrorMarks(items, {})).toEqual([
72+
expect(getErrorMarks(items)).toEqual([
7173
{
7274
type: 'errorMark',
7375
offset: 15,
7476
verticalLine: false,
7577
id: 1,
7678
error: { error: { id: 1 }, service: { name: 'opbeans-java' } },
77-
serviceColor: undefined,
79+
serviceColor: '',
7880
},
7981
{
8082
type: 'errorMark',
8183
offset: 50,
8284
verticalLine: false,
8385
id: 2,
8486
error: { error: { id: 2 }, service: { name: 'opbeans-node' } },
85-
serviceColor: undefined,
87+
serviceColor: '',
8688
},
8789
]);
8890
});

‎x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,16 @@
77

88
import { isEmpty } from 'lodash';
99
import { ErrorRaw } from '../../../../../../../typings/es_schemas/raw/error_raw';
10-
import {
11-
IWaterfallError,
12-
IServiceColors,
13-
} from '../Waterfall/waterfall_helpers/waterfall_helpers';
10+
import { IWaterfallError } from '../Waterfall/waterfall_helpers/waterfall_helpers';
1411
import { Mark } from '.';
1512

1613
export interface ErrorMark extends Mark {
1714
type: 'errorMark';
1815
error: ErrorRaw;
19-
serviceColor?: string;
16+
serviceColor: string;
2017
}
2118

22-
export const getErrorMarks = (
23-
errorItems: IWaterfallError[],
24-
serviceColors: IServiceColors
25-
): ErrorMark[] => {
19+
export const getErrorMarks = (errorItems: IWaterfallError[]): ErrorMark[] => {
2620
if (isEmpty(errorItems)) {
2721
return [];
2822
}
@@ -33,6 +27,6 @@ export const getErrorMarks = (
3327
verticalLine: false,
3428
id: error.doc.error.id,
3529
error: error.doc,
36-
serviceColor: serviceColors[error.doc.service.name],
30+
serviceColor: error.color,
3731
}));
3832
};

‎x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { asDuration } from '../../../../../../../common/utils/formatters';
1414
import { isRumAgentName } from '../../../../../../../common/agent_name';
1515
import { px, unit, units } from '../../../../../../style/variables';
1616
import { ErrorCount } from '../../ErrorCount';
17-
import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
17+
import { IWaterfallSpanOrTransaction } from './waterfall_helpers/waterfall_helpers';
1818
import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
1919
import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames';
2020
import { SyncBadge } from './SyncBadge';
@@ -75,14 +75,14 @@ const ItemText = euiStyled.span`
7575
interface IWaterfallItemProps {
7676
timelineMargins: Margins;
7777
totalDuration?: number;
78-
item: IWaterfallItem;
78+
item: IWaterfallSpanOrTransaction;
7979
color: string;
8080
isSelected: boolean;
8181
errorCount: number;
8282
onClick: () => unknown;
8383
}
8484

85-
function PrefixIcon({ item }: { item: IWaterfallItem }) {
85+
function PrefixIcon({ item }: { item: IWaterfallSpanOrTransaction }) {
8686
switch (item.docType) {
8787
case 'span': {
8888
// icon for database spans
@@ -110,7 +110,7 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
110110

111111
interface SpanActionToolTipProps {
112112
children: ReactNode;
113-
item?: IWaterfallItem;
113+
item?: IWaterfallSpanOrTransaction;
114114
}
115115

116116
function SpanActionToolTip({ item, children }: SpanActionToolTipProps) {
@@ -124,15 +124,15 @@ function SpanActionToolTip({ item, children }: SpanActionToolTipProps) {
124124
return <>{children}</>;
125125
}
126126

127-
function Duration({ item }: { item: IWaterfallItem }) {
127+
function Duration({ item }: { item: IWaterfallSpanOrTransaction }) {
128128
return (
129129
<EuiText color="subdued" size="xs">
130130
{asDuration(item.duration)}
131131
</EuiText>
132132
);
133133
}
134134

135-
function HttpStatusCode({ item }: { item: IWaterfallItem }) {
135+
function HttpStatusCode({ item }: { item: IWaterfallSpanOrTransaction }) {
136136
// http status code for transactions of type 'request'
137137
const httpStatusCode =
138138
item.docType === 'transaction' && item.doc.transaction.type === 'request'
@@ -146,7 +146,7 @@ function HttpStatusCode({ item }: { item: IWaterfallItem }) {
146146
return <EuiText size="xs">{httpStatusCode}</EuiText>;
147147
}
148148

149-
function NameLabel({ item }: { item: IWaterfallItem }) {
149+
function NameLabel({ item }: { item: IWaterfallSpanOrTransaction }) {
150150
switch (item.docType) {
151151
case 'span':
152152
return <EuiText size="s">{item.doc.span.name}</EuiText>;
@@ -156,8 +156,6 @@ function NameLabel({ item }: { item: IWaterfallItem }) {
156156
<h5>{item.doc.transaction.name}</h5>
157157
</EuiTitle>
158158
);
159-
default:
160-
return null;
161159
}
162160
}
163161

‎x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,21 @@ import { Margins } from '../../../../../shared/charts/Timeline';
1414
import { WaterfallItem } from './WaterfallItem';
1515
import {
1616
IWaterfall,
17-
IWaterfallItem,
17+
IWaterfallSpanOrTransaction,
1818
} from './waterfall_helpers/waterfall_helpers';
1919

2020
interface AccordionWaterfallProps {
2121
isOpen: boolean;
22-
item: IWaterfallItem;
22+
item: IWaterfallSpanOrTransaction;
2323
level: number;
24-
serviceColors: IWaterfall['serviceColors'];
2524
duration: IWaterfall['duration'];
2625
waterfallItemId?: string;
2726
location: Location;
2827
errorsPerTransaction: IWaterfall['errorsPerTransaction'];
29-
childrenByParentId: Record<string, IWaterfallItem[]>;
28+
childrenByParentId: Record<string, IWaterfallSpanOrTransaction[]>;
3029
onToggleEntryTransaction?: () => void;
3130
timelineMargins: Margins;
32-
onClickWaterfallItem: (item: IWaterfallItem) => void;
31+
onClickWaterfallItem: (item: IWaterfallSpanOrTransaction) => void;
3332
}
3433

3534
const StyledAccordion = euiStyled(EuiAccordion).withConfig({
@@ -98,7 +97,6 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
9897
const {
9998
item,
10099
level,
101-
serviceColors,
102100
duration,
103101
childrenByParentId,
104102
waterfallItemId,
@@ -134,7 +132,7 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
134132
<WaterfallItem
135133
key={item.id}
136134
timelineMargins={timelineMargins}
137-
color={serviceColors[item.doc.service.name]}
135+
color={item.color}
138136
item={item}
139137
totalDuration={duration}
140138
isSelected={item.id === waterfallItemId}
@@ -161,7 +159,6 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
161159
isOpen={isOpen}
162160
item={child}
163161
level={nextLevel}
164-
serviceColors={serviceColors}
165162
waterfallItemId={waterfallItemId}
166163
location={location}
167164
errorsPerTransaction={errorsPerTransaction}

‎x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { WaterfallFlyout } from './WaterfallFlyout';
2121
import {
2222
IWaterfall,
2323
IWaterfallItem,
24+
IWaterfallSpanOrTransaction,
2425
} from './waterfall_helpers/waterfall_helpers';
2526

2627
const Container = euiStyled.div`
@@ -76,13 +77,13 @@ export function Waterfall({
7677
const itemContainerHeight = 58; // TODO: This is a nasty way to calculate the height of the svg element. A better approach should be found
7778
const waterfallHeight = itemContainerHeight * waterfall.items.length;
7879

79-
const { serviceColors, duration } = waterfall;
80+
const { duration } = waterfall;
8081

8182
const agentMarks = getAgentMarks(waterfall.entryWaterfallTransaction?.doc);
82-
const errorMarks = getErrorMarks(waterfall.errorItems, serviceColors);
83+
const errorMarks = getErrorMarks(waterfall.errorItems);
8384

8485
function renderItems(
85-
childrenByParentId: Record<string | number, IWaterfallItem[]>
86+
childrenByParentId: Record<string | number, IWaterfallSpanOrTransaction[]>
8687
) {
8788
const { entryWaterfallTransaction } = waterfall;
8889
if (!entryWaterfallTransaction) {
@@ -95,7 +96,6 @@ export function Waterfall({
9596
isOpen={isAccordionOpen}
9697
item={entryWaterfallTransaction}
9798
level={0}
98-
serviceColors={serviceColors}
9999
waterfallItemId={waterfallItemId}
100100
location={location}
101101
errorsPerTransaction={waterfall.errorsPerTransaction}

0 commit comments

Comments
 (0)