-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[APM] Show errors on the timeline instead of under the transaction (#…
…53756) (#54109) * creating error marker and refactoring some stuff * styling popover * adding agent marks and errors to waterfall items * adding agent marks and errors to waterfall items * adding agent marks and errors to waterfall items * fixing tests and typescript checking * refactoring helper * changing transaction error badge style * adding unit test * fixing agent marker position * fixing offset when error is registered before its parent * refactoring error marker * refactoring error marker * refactoring error marker * refactoring error marker * refactoring error marker * refactoring waterfall helper * refactoring waterfall helper * refactoring waterfall helper api * refactoring waterfall helper * removing unused code * refactoring waterfall helper * changing unit test * removing comment * refactoring marker component and waterfall helper * removing servicecolor from waterfall item and adding it to errormark * fixing trace order
- Loading branch information
1 parent
3f26145
commit 892dd5d
Showing
48 changed files
with
2,575 additions
and
1,339 deletions.
There are no files selected for viewing
32 changes: 32 additions & 0 deletions
32
...plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /* | ||
| * 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 { EuiText, EuiTextColor } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import React from 'react'; | ||
|
|
||
| interface Props { | ||
| count: number; | ||
| } | ||
|
|
||
| export const ErrorCount = ({ count }: Props) => ( | ||
| <EuiText size="xs"> | ||
| <h4> | ||
| <EuiTextColor | ||
| color="danger" | ||
| onClick={(e: React.MouseEvent) => { | ||
| e.stopPropagation(); | ||
| }} | ||
| > | ||
| {i18n.translate('xpack.apm.transactionDetails.errorCount', { | ||
| defaultMessage: | ||
| '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}', | ||
| values: { errorCount: count } | ||
| })} | ||
| </EuiTextColor> | ||
| </h4> | ||
| </EuiText> | ||
| ); |
17 changes: 0 additions & 17 deletions
17
...ns/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCountBadge.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
...onDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| /* | ||
| * 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 { IWaterfallItem } from '../../Waterfall/waterfall_helpers/waterfall_helpers'; | ||
| import { getErrorMarks } from '../get_error_marks'; | ||
|
|
||
| describe('getErrorMarks', () => { | ||
| describe('returns empty array', () => { | ||
| it('when items are missing', () => { | ||
| expect(getErrorMarks([], {})).toEqual([]); | ||
| }); | ||
| it('when any error is available', () => { | ||
| const items = [ | ||
| { docType: 'span' }, | ||
| { docType: 'transaction' } | ||
| ] as IWaterfallItem[]; | ||
| expect(getErrorMarks(items, {})).toEqual([]); | ||
| }); | ||
| }); | ||
|
|
||
| it('returns error marks', () => { | ||
| const items = [ | ||
| { | ||
| docType: 'error', | ||
| offset: 10, | ||
| skew: 5, | ||
| doc: { error: { id: 1 }, service: { name: 'opbeans-java' } } | ||
| } as unknown, | ||
| { docType: 'transaction' }, | ||
| { | ||
| docType: 'error', | ||
| offset: 50, | ||
| skew: 0, | ||
| doc: { error: { id: 2 }, service: { name: 'opbeans-node' } } | ||
| } as unknown | ||
| ] as IWaterfallItem[]; | ||
| expect( | ||
| getErrorMarks(items, { 'opbeans-java': 'red', 'opbeans-node': 'blue' }) | ||
| ).toEqual([ | ||
| { | ||
| type: 'errorMark', | ||
| offset: 15, | ||
| verticalLine: false, | ||
| id: 1, | ||
| error: { error: { id: 1 }, service: { name: 'opbeans-java' } }, | ||
| serviceColor: 'red' | ||
| }, | ||
| { | ||
| type: 'errorMark', | ||
| offset: 50, | ||
| verticalLine: false, | ||
| id: 2, | ||
| error: { error: { id: 2 }, service: { name: 'opbeans-node' } }, | ||
| serviceColor: 'blue' | ||
| } | ||
| ]); | ||
| }); | ||
|
|
||
| it('returns error marks without service color', () => { | ||
| const items = [ | ||
| { | ||
| docType: 'error', | ||
| offset: 10, | ||
| skew: 5, | ||
| doc: { error: { id: 1 }, service: { name: 'opbeans-java' } } | ||
| } as unknown, | ||
| { docType: 'transaction' }, | ||
| { | ||
| docType: 'error', | ||
| offset: 50, | ||
| skew: 0, | ||
| doc: { error: { id: 2 }, service: { name: 'opbeans-node' } } | ||
| } as unknown | ||
| ] as IWaterfallItem[]; | ||
| expect(getErrorMarks(items, {})).toEqual([ | ||
| { | ||
| type: 'errorMark', | ||
| offset: 15, | ||
| verticalLine: false, | ||
| id: 1, | ||
| error: { error: { id: 1 }, service: { name: 'opbeans-java' } }, | ||
| serviceColor: undefined | ||
| }, | ||
| { | ||
| type: 'errorMark', | ||
| offset: 50, | ||
| verticalLine: false, | ||
| id: 2, | ||
| error: { error: { id: 2 }, service: { name: 'opbeans-node' } }, | ||
| serviceColor: undefined | ||
| } | ||
| ]); | ||
| }); | ||
| }); |
31 changes: 31 additions & 0 deletions
31
.../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /* | ||
| * 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 { sortBy } from 'lodash'; | ||
| import { Transaction } from '../../../../../../../typings/es_schemas/ui/Transaction'; | ||
| import { Mark } from '.'; | ||
|
|
||
| // Extends Mark without adding new properties to it. | ||
| export interface AgentMark extends Mark { | ||
| type: 'agentMark'; | ||
| } | ||
|
|
||
| export function getAgentMarks(transaction?: Transaction): AgentMark[] { | ||
| const agent = transaction?.transaction.marks?.agent; | ||
| if (!agent) { | ||
| return []; | ||
| } | ||
|
|
||
| return sortBy( | ||
| Object.entries(agent).map(([name, ms]) => ({ | ||
| type: 'agentMark', | ||
| id: name, | ||
| offset: ms * 1000, | ||
| verticalLine: true | ||
| })), | ||
| 'offset' | ||
| ); | ||
| } |
39 changes: 39 additions & 0 deletions
39
.../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* | ||
| * 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 { isEmpty } from 'lodash'; | ||
| import { ErrorRaw } from '../../../../../../../typings/es_schemas/raw/ErrorRaw'; | ||
| import { | ||
| IWaterfallItem, | ||
| IWaterfallError, | ||
| IServiceColors | ||
| } from '../Waterfall/waterfall_helpers/waterfall_helpers'; | ||
| import { Mark } from '.'; | ||
|
|
||
| export interface ErrorMark extends Mark { | ||
| type: 'errorMark'; | ||
| error: ErrorRaw; | ||
| serviceColor?: string; | ||
| } | ||
|
|
||
| export const getErrorMarks = ( | ||
| items: IWaterfallItem[], | ||
| serviceColors: IServiceColors | ||
| ): ErrorMark[] => { | ||
| if (isEmpty(items)) { | ||
| return []; | ||
| } | ||
|
|
||
| return (items.filter( | ||
| item => item.docType === 'error' | ||
| ) as IWaterfallError[]).map(error => ({ | ||
| type: 'errorMark', | ||
| offset: error.offset + error.skew, | ||
| verticalLine: false, | ||
| id: error.doc.error.id, | ||
| error: error.doc, | ||
| serviceColor: serviceColors[error.doc.service.name] | ||
| })); | ||
| }; |
12 changes: 12 additions & 0 deletions
12
...components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| export interface Mark { | ||
| type: string; | ||
| offset: number; | ||
| verticalLine: boolean; | ||
| id: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.