Skip to content

[APM] DT design polish #24475

@formgeist

Description

@formgeist

Note: I'm starting in on this (Jason), please ping me before you start on any of this work, we can work out how to split it up. Will be working on branch `jasonrhodes:polish-6.5


✅ Span row design update

In order to make it clearer to the user that there's a difference between transactions and spans in the Timeline (and since they open different information flyouts), I would prefer to make some minor updates to the appearance of transaction and span rows in the visualization.

row-spans-update

  • Change transaction rows font styling
    • Propose to use the EuiText h4 styling. It will render close to font-family: font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 600; Not sure if there'll be issues with margins using the h4 styling inside the row.
  • Show EuiIcon merge in front of transactions span rows.

We can keep the span rows as they are.


✅ Remove Transaction sample panel deep shadow

screenshot 2018-10-24 at 10 16 24

  • hasShadow should be changed to false so we avoid the deeper shadow on the panel.

✅Align heading styles

screenshot 2018-10-24 at 10 33 44

  • Change "Response time distribution" heading to the same style. We're using EuiTitle for the "Transaction sample" heading in the sample header, so perhaps adopt the same principles to these headings altogether. The style should be equal to the EuiTitle size xs for all three headings.

Transaction flyout

✅Change Flyout size to medium

screenshot 2018-10-24 at 10 11 36

  • Change Flyout size to m instead of l. It hides more of the background content than desired.
  • Add ownFocus={true} so that outside clicks close the flyout
  • Wrap flyout in EuiPortal so that the ownFocus treatment works correctly
  • Convert to EuiToolTip to fix bug with existing tooltip z-index

✅Remove the "View Transaction group detail" button from the header

screenshot 2018-10-25 at 10 26 17

  • Remove the button, as we already have a link on the Name value to the Transaction detail page for the particular transaction.

Span flyout

✅Change Flyout size to medium

screenshot 2018-10-24 at 10 11 09

  • Change Flyout size to m instead of l. It hides more of the background content than desired.
  • Add ownFocus={true} so that outside clicks close the flyout

✅Re-arrange sticky properties

In an effort to align the Transaction and Span flyout StickyProperties, so placement is the same when moving between them, I'm suggesting to make the following re-arranging of the properties;

screenshot 2018-10-25 at 10 09 19

  • Split the 4 properties related to the span into two rows, moving duration to the 2nd row along with % of transaction.

Metadata

Metadata

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions