ui: Keep form arguments when filtering/sorting by date/duration

The links provided by the UI when filtering or sorting by date/duration
didn't carry existing search arguments so if you sorted or filtered, you
lost existing search queries.

The sorting and filtering is now handled by the same django form which
takes care of keeping our arguments around.

Fixes: https://github.com/ansible-community/ara/issues/201
Change-Id: I03af5baaadd7fd731133db3ad83dee74ed4813ba

ara/ui/forms.py

@@ -29,6 +29,8 @@ class PlaybookSearchForm(forms.Form):
         widget=forms.CheckboxSelectMultiple, choices=models.Playbook.STATUS, required=False
     )
     label = forms.CharField(label="Playbook label", max_length=255, required=False)
+    started_after = forms.DateField(label="Started after", required=False)
+    order = forms.CharField(label="Order", max_length=255, required=False)
 
 
 class ResultSearchForm(forms.Form):

ara/ui/templates/index.html

@@ -3,9 +3,9 @@
 {% load truncatepath %}
 {% block body %}
 {% if not static_generation %}
+<form novalidate action="/" method="get" class="pf-c-form">
 <div class="pf-l-flex">
     <div class="pf-l-flex">
-        <form novalidate action="/" method="get" class="pf-c-form">
         <div class="pf-c-form__group pf-m-inline">
             <div class="pf-l-flex__item pf-m-flex-1">
                 <label class="pf-c-form__label" for="ansible_version">
@@ -89,16 +89,15 @@
             </div>
             {% endif %}
         </div>
-        </form>
     </div>
     <div class="pf-l-flex pf-m-align-right">
         <div class="pf-l-flex__item">
             <h1 class="pf-c-title pf-m-2xl"><i class="fas fa-clock"></i> Filter by date</h1>
             <ul class="pf-c-list pf-m-inline">
-                <li><a href="?started_after={% past_timestamp with minutes=60 %}">Last 60 minutes</a></li>
-                <li><a href="?started_after={% past_timestamp with hours=24 %}">Last 24 hours</a></li>
-                <li><a href="?started_after={% past_timestamp with days=7 %}">Last 7 days</a></li>
-                <li><a href="?started_after={% past_timestamp with days=30 %}">Last 30 days</a></li>
+                <li><button class="pf-c-button pf-m-link" name="started_after" value="{% past_timestamp with minutes=60 %}" type="submit">Last 60 minutes</button></li>
+                <li><button class="pf-c-button pf-m-link" name="started_after" value="{% past_timestamp with hours=24 %}" type="submit">Last 24 hours</button></li>
+                <li><button class="pf-c-button pf-m-link" name="started_after" value="{% past_timestamp with days=7 %}" type="submit">Last 7 days</button></li>
+                <li><button class="pf-c-button pf-m-link" name="started_after" value="{% past_timestamp with days=30 %}" type="submit">Last 30 days</button></li>
             </ul>
         </div>
     </div>
@@ -233,6 +232,7 @@
     </table>
 </div>
 {% if not static_generation %}
+</form>
 {% include "partials/pagination.html" %}
 {% endif %}
 {% endblock %}

ara/ui/templates/partials/sort_by_date.html

@@ -1,29 +1,33 @@
 {% if not static_generation %}
     {% if request.GET.order == "-started" %}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=started">Date
+    <button class="pf-c-button pf-m-plain" name="order" value="started" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-long-arrow-alt-down"></i>
         </span>
-    </a>
+        Date
+    </button>
     {% elif request.GET.order == "started" %}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=-started">Date
+    <button class="pf-c-button pf-m-plain" name="order" value="-started" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-long-arrow-alt-up"></i>
         </span>
-    </a>
+        Date
+    </button>
     {% elif not request.GET.order %}
     {# The default sorting is by date #}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=started">Date
+    <button class="pf-c-button pf-m-plain" name="order" value="started" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-long-arrow-alt-down"></i>
         </span>
-    </a>
+        Date
+    </button>
     {% else %}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=-started">Date
+    <button class="pf-c-button pf-m-plain" name="order" value="started" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-arrows-alt-v"></i>
         </span>
-    </a>
+        Date
+    </button>
     {% endif %}
 {% else %}
 Date

ara/ui/templates/partials/sort_by_duration.html

@@ -1,22 +1,25 @@
 {% if not static_generation %}
     {% if request.GET.order == "-duration" %}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=duration">Duration
+    <button class="pf-c-button pf-m-plain" name="order" value="duration" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-long-arrow-alt-down"></i>
         </span>
-    </a>
+        Duration
+    </button>
     {% elif request.GET.order == "duration" %}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=-duration">Duration
+    <button class="pf-c-button pf-m-plain" name="order" value="-duration" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-long-arrow-alt-up"></i>
         </span>
-    </a>
+        Duration
+    </button>
     {% else %}
-    <a class="pf-c-button pf-m-plain" type="button" href="?order=-duration">Duration
+    <button class="pf-c-button pf-m-plain" name="order" value="-duration" type="submit">
         <span class="pf-c-table__sort-indicator">
             <i class="fas fa-arrows-alt-v"></i>
         </span>
-    </a>
+        Duration
+    </button>
     {% endif %}
 {% else %}
 Duration

ara/ui/templates/playbook.html

@@ -144,9 +144,9 @@
         <details id="results" open="true">
             <summary>Task results</summary>
             {% if not static_generation %}
+            <form method="get" action="{% url 'ui:playbook' playbook.id %}#results" class="pf-c-form">
             <div class="pf-l-flex">
                 <div class="pf-l-flex">
-                    <form method="get" action="{% url 'ui:playbook' playbook.id %}#results" class="pf-c-form">
                     <div class="pf-c-form__group pf-m-inline">
                         <div class="pf-l-flex__item pf-m-flex-1" for="{{ search_form.host.id_for_label }}">
                             <label class="pf-c-form__label" for="{{ search_form.host.id_for_label }}">
@@ -219,7 +219,6 @@
                         </div>
                         {% endif %}
                     </div>
-                    </form>
                 </div>
             </div>
             {% include "partials/pagination.html" with data=results %}
@@ -272,6 +271,9 @@
                     No task results have been recorded for this playbook yet. It may be in progress or has been interrupted.
                 {% endif %}
             {% endif %}
+            {% if not static_generation %}
+            </form>
+            {% endif %}
         </details>
     </div>
 </div>

ara/ui/views.py

@@ -21,17 +21,10 @@ class Index(generics.ListAPIView):
     template_name = "index.html"
 
     def get(self, request, *args, **kwargs):
-        # TODO: Can we retrieve those fields automatically ?
-        fields = ["order", "controller", "name", "started_after", "status", "label"]
         search_query = False
-        for field in fields:
-            if field in request.GET:
-                search_query = True
-
-        if search_query:
-            search_form = forms.PlaybookSearchForm(request.GET)
-        else:
-            search_form = forms.PlaybookSearchForm()
+        if request.GET:
+            search_query = True
+        search_form = forms.PlaybookSearchForm(request.GET)
 
         query = self.filter_queryset(self.queryset.all().order_by("-id"))
         page = self.paginate_queryset(query)