UI: Improve display of labels and implement label search

This improves how labels are displayed so they are not as likely to wrap
or otherwise feel out of place.
It also implements label search provided by the API.

Change-Id: Ied11f8248feb74f8f28082b0a2ed4040565ef2fd
This commit is contained in:
David Moreau Simard
2020-01-28 12:12:23 -05:00
parent 5388fce943
commit fc9c72532d
2 changed files with 26 additions and 7 deletions

View File

@@ -29,12 +29,7 @@
<div style="padding-top:1em;" title="{{ playbook.path }}">
<a href="{% if page != "index" %}../{% endif %}playbook/{{ playbook.id }}.html">
{% if playbook.name is not None %}{{ playbook.name }}{% else %}{{ playbook.path | truncatechars:50 }}{% endif %}
</a><br>
<div title="Playbook labels">
{% for label in playbook.labels %}
<span class="pf-c-label">{{ label.name }}</span>
{% endfor %}
</div>
</a>
</div>
</div>
<div class="pf-c-data-list__cell pf-m-flex-1">
@@ -74,6 +69,30 @@
</div>
</div>
</div>
{% if playbook.labels %}
<div class="pf-c-data-list__item-row">
<ul class="pf-c-chip-group pf-m-toolbar">
<li>
<h4 class="pf-c-chip-group__label">Playbook labels</h4>
<ul class="pf-c-chip-group">
{% for label in playbook.labels %}
<li class="pf-c-chip" title="{{ label.name }}">
<span class="pf-c-chip__text">{{ label.name }}</span>
{% if not static_generation %}
<a class="pf-c-button pf-m-plain" type="button" aria-label="Search for this label" href="?label={{ label.name }}">
{% else %}
{# TODO: Lack of link and icon breaks styling #}
<a class="pf-c-button pf-m-plain" type="button" aria-label="Search for this label" disabled>
{% endif %}
<i class="fas fa-search" aria-hidden="true"></i>
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
</div>
{% endif %}
</li>
</ul>
</div>

View File

@@ -20,7 +20,7 @@ class Index(generics.ListAPIView):
def get(self, request, *args, **kwargs):
# TODO: Can we retrieve those fields automatically ?
fields = ["order", "name", "started_after", "status"]
fields = ["order", "name", "started_after", "status", "label"]
search_query = False
for field in fields:
if field in request.GET: