Kibana: [APM] Message/culprit is cut off without indicating truncation

[sqren]

On the error overview page message/culprit is cut off without any further indication to the user, even though there is a lot of whitespace to the right.

The issue is caused by not having truncation indication (text-overflow: ellipsis;) and the "Unhandled" badged taking up a hardcoded number of pixels - whether it's there or not.

Example with _Unhandled_ badge

Suggested solution

The message should have a truncation indicator (available via truncate helper) and the "Unhandled" badge should not be in a separate column but instead inside the message column.

Handled column is defined here: https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx#L110-L123

[Gaurav-Punjabi]

Hey, I'm new here. Can I solve this issue?

[sqren]

Hi @Gaurav-Punjabi,

Yes, feel free to pick this up.

The easiest way to start working on Elastic APM is by following the APM UI readme to setup the stack: https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/apm/readme.md

I've added a bit information under "Suggested solution", which I hope is enough to get you started.

LMK if you need more help.

[IanvsPoplicola]

Hi there, I'm new here too; is it all right if I also give this one a go?

[sqren]

@IanvsPoplicola I would hate for you to do double work in case @Gaurav-Punjabi has already started on this. If not you are more than welcome to give this a shot.

[Gaurav-Punjabi]

Yeah I have already solved this issue and will submit a PR by tomorrow.

[sqren]

@Gaurav-Punjabi LMK if you are blocked and need anything from me. if you are busy with other things I can unassign you and move the item to the backlog for others to pick up.

[Gaurav-Punjabi]

I am a little stuck with the "unhandled" badge. I'll try solving it again and inform you accordingly ASAP.

[sqren]

@Gaurav-Punjabi Anything I can help with?

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)