ui: move playbook labels onto their own row

[dmsimard]

This reduces the waste of whitespace from the labels wrapping.

Related: #499

[dmsimard]

I'm not super confident it's the prettiest implementation but it looks better ¯_(ツ)_/¯

Before

After

[dmsimard]

If we go ahead with something like this, it would be worth revisiting the hosts and tasks tables to do something similar with host facts and task tags:

[dmsimard]

@ianw, @hille721, what do you think ? do you have an opinion ?

[softwarefactory-project-zuul]

Build succeeded.
https://ansible.softwarefactory-project.io/zuul/buildset/cc74a0c7c22d41d3afd5fa7d9cdb6290

✔️ ara-tox-py3 SUCCESS in 3m 26s
✔️ ara-tox-linters SUCCESS in 3m 58s
✔️ ara-basic-ansible-core-devel SUCCESS in 6m 24s (non-voting)
✔️ ara-basic-ansible-8 SUCCESS in 5m 43s
✔️ ara-basic-ansible-core-2.15 SUCCESS in 5m 44s
✔️ ara-basic-ansible-core-2.14 SUCCESS in 6m 08s
✔️ ara-container-images SUCCESS in 11m 27s

[hille721]

from only checking the pictures it looks a bit overloaded. But generally I thing it's a great idea. What could be help is to better sperate the rows, eg. by a clearer borderline or a bit of whitespace between the rows.

[dmsimard]

from only checking the pictures it looks a bit overloaded. But generally I thing it's a great idea. What could be help is to better sperate the rows, eg. by a clearer borderline or a bit of whitespace between the rows.

... I agree. I think if we could have everything on one line it would be ideal and it's part of why I've been trying to resist a change like this. I thought it was worth trying out even if just to visualize what it looked like in practice.

There's too much information for the amount of width we have available which leads us to truncating strings and resorting to these "hacks".. UI/UX is hard and I might put this off for now unless we figure out what would look good.

[dmsimard]

Yeah, I'll leave this open but remove it from the 1.7.0 milestone.

This isn't a blocker for the release and we can revisit it later.

[ianw]

The tags contain a lot of repeated information and probably aren't that helpful for "first level" debugging ... i.e. my playbook usually works but something broke; they seem more useful for the less common but still relevant "something is subtly wrong with how this this working".

I know that it's easy to say and not so easy to write up in javascript; it feels like maybe if there was a tags label with a count that you mouse-over and it unrolls the tags, click to keep them around, and a toggle "show all tags" it would be the best of all worlds.

One thing about the sample https://5636c233c25b7ab53fbc-f7539d74592ba1909ca4d781e774dc92.ssl.cf5.rackcdn.com/509/066ab7e3bea8c31580772604d54fae712c08db60/check/ara-basic-ansible-core-2.15/0fb611f/server/static/index.html is that the labels are a button, so highlights and gives a pointer when moving over, suggesting it is clickable, which it really isn't?

[dmsimard]

The tags contain a lot of repeated information and probably aren't that helpful for "first level" debugging ... i.e. my playbook usually works but something broke; they seem more useful for the less common but still relevant "something is subtly wrong with how this this working".

I agree.

I know that it's easy to say and not so easy to write up in javascript; it feels like maybe if there was a tags label with a count that you mouse-over and it unrolls the tags, click to keep them around, and a toggle "show all tags" it would be the best of all worlds.

My skills and interest in frontend are limited, pulls requests will be considered :D

One thing about the sample https://5636c233c25b7ab53fbc-f7539d74592ba1909ca4d781e774dc92.ssl.cf5.rackcdn.com/509/066ab7e3bea8c31580772604d54fae712c08db60/check/ara-basic-ansible-core-2.15/0fb611f/server/static/index.html is that the labels are a button, so highlights and gives a pointer when moving over, suggesting it is clickable, which it really isn't?

Oh, that's because in the non-static version they are clickable and allows to search across every playbook for a label -- i.e: https://dev.demo.recordsansible.org/?label=tags:keystone

If we really wanted to fix that, it'd be inside the various if's like this one, I suppose we could have a different class or something:

ara/ara/ui/templates/partials/tables/playbooks.html

Lines 144 to 150 in 9cadcbb

	{% for label in playbook.labels %}
	{% if not static_generation %}
	<a href="{% url 'ui:index' %}?label={{ label.name }}" class="btn btn-outline-success ara-label">{{ label.name }}</a>
	{% else %}
	<span class="btn btn-outline-success ara-label">{{ label.name }}</span>
	{% endif %}
	{% endfor %}

[hille721]

The tags contain a lot of repeated information and probably aren't that helpful for "first level" debugging

Are we talking about tags or labels?
If we are talking about labels, then I disagree, as a user you can define what should be in the labels. E.g. I only have one to two lables, which are mostly grouping my playbooks. Thus the label directly tells me to wich category the playbook belongs and that it is a clickable button to filter for it, is really great.