Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Show errors on the timeline instead of under the transaction #52863

Closed

Conversation

@cauemarcondes
Copy link
Contributor

cauemarcondes commented Dec 12, 2019

closes #45619

Show errors on timeline:
Screenshot 2019-12-19 at 15 11 58

  • If the link inside the popover is clicked, it will navigate to the Error detail page, filtering by transaction and trace id.
  • The error count in the summary reflects the number of errors in the timeline.

change the error badge style:
Screenshot 2019-12-18 at 14 58 56

@cauemarcondes cauemarcondes changed the title [APM] Show errors on the timeline instead of under the transaction [WIP][APM] Show errors on the timeline instead of under the transaction Dec 12, 2019
@@ -72,18 +73,33 @@ interface IWaterfallItemBase {
childIds?: Array<IWaterfallItemBase['id']>;

This comment has been minimized.

Copy link
@sqren

sqren Dec 17, 2019

Member

I looks like childIds is no longer used. Do you agree?

This comment has been minimized.

Copy link
@cauemarcondes

cauemarcondes Dec 18, 2019

Author Contributor

Yes, I want to remove it in another PR, because I will also remove other properties.

id: error.error.id,
parentId: error.parent?.id,
serviceName: error.service.name,
message: error.error.log?.message || error.error.exception?.[0]?.message,

This comment has been minimized.

Copy link
@sqren

sqren Dec 17, 2019

Member

It looks like we are adding more properties (like message) to the top-level waterfallItem which are irrelevant to the other types of items. Maybe we should strip it down to just the things that are required for positioning it on the timeline, and then make an open-ended doc property that contains anything necessary for displaying it.

interface IWaterfallItemBase<T> {
  custom: T;

  /**
   * Duration in us
   */
  duration: number;

  /**
   * offset from first item in us
   */
  offset: number;

  /**
   * skew from timestamp in us
   */
  skew: number;
}

export type IWaterfallItem = IWaterfallItemBase<Transaction> | IWaterfallItemBase<Span>;

My intention is to make the interface as small as possible but I don't know if this is a good approach in practice.

This comment has been minimized.

Copy link
@cauemarcondes

cauemarcondes Dec 18, 2019

Author Contributor

@sqren is it fine if I do this change in another PR? then I can remove the childIds, getTransactionById and other properties which are not necessary.

This comment has been minimized.

Copy link
@sqren

sqren Dec 18, 2019

Member

Sure

([name, ms]) =>
({
id: name,
name,

This comment has been minimized.

Copy link
@sqren

sqren Dec 17, 2019

Member

Having name looks a bit odd. Maybe another reason for keeping the custom data in a specific field:

{
  custom: { customData... },
  offset: ms * 1000,
  docType: 'agentMark'
}
@cauemarcondes cauemarcondes force-pushed the cauemarcondes:waterfall-erros-timeline branch from 5f09af6 to 227eb30 Dec 18, 2019
@cauemarcondes cauemarcondes marked this pull request as ready for review Dec 18, 2019
@cauemarcondes cauemarcondes requested a review from elastic/apm-ui as a code owner Dec 18, 2019
@cauemarcondes cauemarcondes changed the title [WIP][APM] Show errors on the timeline instead of under the transaction [APM] Show errors on the timeline instead of under the transaction Dec 18, 2019
@cauemarcondes cauemarcondes requested a review from formgeist Dec 18, 2019
Copy link
Contributor

formgeist left a comment

This looks terrific! A few nits around the use of styled components > existing or EUI components. Small font size suggestion too.

@cauemarcondes cauemarcondes requested a review from formgeist Dec 19, 2019
@cauemarcondes cauemarcondes force-pushed the cauemarcondes:waterfall-erros-timeline branch from 295fd7c to 9dcdecf Dec 19, 2019
Copy link
Contributor

formgeist left a comment

There's a couple of style suggestions. Other than that, I found that the placement of the popover covers the original click-area of the square icon. Is it possible to move the popover offset above the square?

The last thing is whether we should simply set the skewed timestamp, if negative values, to <0 ms? Just to indicate that, yes there's skew, but not necessarily show the full negative timestamp.

@formgeist

This comment has been minimized.

Copy link
Contributor

formgeist commented Dec 19, 2019

Forgot my redline screenshot
Screenshot 2019-12-19 at 09 54 17

@cauemarcondes

This comment has been minimized.

Copy link
Contributor Author

cauemarcondes commented Dec 19, 2019

Forgot my redline screenshot
Screenshot 2019-12-19 at 09 54 17

@formgeist have you pulled my last changes? if yes can you send me the link to this waterfall?

@cauemarcondes

This comment has been minimized.

Copy link
Contributor Author

cauemarcondes commented Dec 19, 2019

Forgot my redline screenshot
Screenshot 2019-12-19 at 09 54 17

Fixed:
Screenshot 2019-12-19 at 10 53 13

@formgeist

This comment has been minimized.

Copy link
Contributor

formgeist commented Dec 19, 2019

Awesome! Not sure if you haven't gotten there yet, but did you look into repositioning the popover against the square icon? As I mentioned earlier, the popover arrow is covering the square, which means the option to click it again is a little hard. Understandably, the user can click anywhere outside the popover, but it's also a visual thing when comparing it to the other mark tooltips.

Current position

Screenshot 2019-12-19 at 12 24 54

Suggested position

Screenshot 2019-12-19 at 12 24 32

@cauemarcondes

This comment has been minimized.

Copy link
Contributor Author

cauemarcondes commented Dec 19, 2019

Awesome! Not sure if you haven't gotten there yet, but did you look into repositioning the popover against the square icon? As I mentioned earlier, the popover arrow is covering the square, which means the option to click it again is a little hard. Understandably, the user can click anywhere outside the popover, but it's also a visual thing when comparing it to the other mark tooltips.

Current position

Screenshot 2019-12-19 at 12 24 54

Suggested position

Screenshot 2019-12-19 at 12 24 32

@formgeist WDYT?
Screenshot 2019-12-19 at 15 11 58

@elasticmachine

This comment has been minimized.

Copy link
Contributor

elasticmachine commented Dec 19, 2019

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@formgeist

This comment has been minimized.

Copy link
Contributor

formgeist commented Dec 19, 2019

LGTM 🎉

@cauemarcondes cauemarcondes force-pushed the cauemarcondes:waterfall-erros-timeline branch from 9196cbb to 7782d45 Jan 6, 2020
@cauemarcondes

This comment has been minimized.

Copy link
Contributor Author

cauemarcondes commented Jan 6, 2020

@sqren can you review it, please?

@kibanamachine

This comment has been minimized.

Copy link

kibanamachine commented Jan 6, 2020

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@@ -133,6 +135,10 @@ export class Waterfall extends Component<Props> {
const itemContainerHeight = 58; // TODO: This is a nasty way to calculate the height of the svg element. A better approach should be found
const waterfallHeight = itemContainerHeight * waterfall.orderedItems.length;

const marks = waterfall.orderedItems.filter(
item => item.docType === 'error' || item.docType === 'agentMark'

This comment has been minimized.

Copy link
@sqren

sqren Jan 6, 2020

Member

I thought you ended up deciding not treating agentMark as a docType (because it's not) and just have it has custom payload inside transactions?

const serviceColors = getServiceColors(orderedItems);

// the agentMarks should be added direct inside orderedItems, as it doesnt have parent-child relationship
orderedItems.push(...getAgentMarks(entryTransaction));

This comment has been minimized.

Copy link
@sqren

sqren Jan 6, 2020

Member

I'm a little confused about the difference in implementation in this PR and #53756. Which one are you going for?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.