Repository navigation
[APM] DT design polish II #24578
Description
Activity
Pinging @elastic/apm-ui
@jasonrhodes Can you confirm that the stick properties was fixed on the Error group detail page?
Added a minor polish fix to Context tables by adding some more line-height to the cells.
Add Traces route change to the description
@formgeist Ah, hadn't seen that one. 6.6 sounds fine with me. I'll remove it again from this issue.
Reacted by Casper HübertzCurrent histogram state has been moved to #24740
- Fix service legend
- Add Services label in front of services legend
- Include services legend in the locked element when scrolling a large timeline
These 3 ^^ moved to #24741
Confirming that the error group sticky properties margin has been fixed outside this ticket. I removed that and the line-height issue as I think it's clearer to only use the green checkmark to denote things that are done in this ticket.
Also: I just added in the visual regression here too, to cut down on PR churn. That replaces #24817
Moved the beta label removals in here too as they are incredibly simple, no need to have separate tickets and CI builds for each. :)
@jasonrhodes Sounds good 👍
Splitting up the mega issue and porting over more polish tasks from the original issue which isn't addressed in #24556
Remove beta labels
Machine Learning
We have beta labels in the Machine Learning integration flyout and integration popover we need to remove as the ML integration goes GA in 6.5
(beta)from popover linkSearch bar
The search bar will become GA in 6.5, so this is a reminder issue to remove the beta label for 6.5.
Timeline visual regression
There used to be a minimum width for transactions/spans, so they were visible. Also, the text would flow left when there was no more space on the right.
Before:
After:
Previous implementation: https://github.com/sqren/kibana/blob/a353979ebbca723bde1f07e0bfe2acf9241ad3e0/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/Span.js#L30-L45
Codepen demonstrating the solution: https://codepen.io/sqren/pen/JrXNjY
Note: if easy, add a minimum width to the span items as well, which will close #18680
Sample tabs navigation
It looks like the tabs navigation is not showing active state on Timeline when entering a Transaction detail page nor selecting a new sample from the distribution. Additionally, there's no border-bottom on the active item once it's active, since it's hidden by the grey horizontal divider between the sample header and the tab content.
Marks vertical lines
Looks like the dot is not longer resting on the x-axis horizontal line but sinks a little deeper. Probably means moving the x-axis labels a little further up from the x-axis line so there's space for the mark dots to appear underneath.
The mark on the right is a fixed mark
