Improve Prometheus UI Target page by hiding empty fields / or by reverting back to dynamic alignment.

[bwplotka]

What did you do?
I visited Target page on Prometheus v2.2.X UI

What did you expect to see?
Every target with readable label sets.

What did you see instead? Under which circumstances?
Badly wrapped label sets that obfuscates the view ):

Almost all my targets have more than 4 labels which ends up with random wrapping like this.

I already started discussion about it here: #3373
Not sure if that change actually introduced weird wrappings, but making fixed align here is not really helping. There is less space for things that are usually wider.

I guess, there are several options to fix this:

1. Fix wrapping logic - unfortunately that will make each entry quite long in height (because of fixed align)
2. Revert back to dynamic align (esthetics vs clearness) - that will make more space for things that are wide.

I am not necessarily a frontend guy, so can anybody more experienced (any design wizards here?) help us with this? (: Any suggestions? @lovisas @caarlos0

Environment

• System information:
  Chrome, linux

• Prometheus version:
  v2.2.1

[biglovisa]

I worked on the PR that was supposed to make this situation better, and am happy to pick this up again :)

I am not a design wiz either, but the UX designer I work with has expressed interest in helping out with things like this! I'll talk to her and circle back here. I'm sure a few small changes will go a long way in this case.

[biglovisa]

@Bplotka would the static align be less of an issue if the label wrapping was better and it allowed for more space for fields with a lot of info?

[bwplotka]

Hm... @lovisas TBH, I am not a particular fan of the static align.
I am basically not sure why I need to look on that:

(:

But... sure definitely better than the current state. (:

[biglovisa]

Yeah good point... I think we can find a solution that will hide empty fields, while still having some alignment.

[bwplotka]

yes, please! ❤️

[lae]

Hi guys,

Maybe I'm missing something here, but wouldn't setting display: inline-block; for the .label class fix the wrapping issue? A quick test for me seems to show that's the case for me, but perhaps it's used elsewhere in a way this would cause an unintended side effect?

(p.s. people may find the title of this issue is a bit distasteful.)

[biglovisa]

@lae submit a pr with the change! I haven't been able to circle back to this yet, but I'd be happy to pull down your changes and try it out.

[lae]

@biglovisa See #4276

[simonpasquier]

AFAICT it has been fixed by #5226. Feel free to re-open if not.