Refine Project list filters #413 (#465)

Signed-off-by: Thomas Druez <[email protected]>

Author: tdruez

CHANGELOG.rst

@@ -47,6 +47,15 @@ v31.0.0 (next)
   details view. The summary is generated during the `scan_package` pipeline.
   https://github.com/nexB/scancode.io/issues/411
 
+- Enhance Project list view page:
+
+  - 20 projects are now displayed per page
+  - Creation date displayed under the project name
+  - Add ability to sort by date and name
+  - Add ability to filter by pipeline type
+
+  https://github.com/nexB/scancode.io/issues/413
+
 v30.2.0 (2021-12-17)
 --------------------
 

scanpipe/filters.py

@@ -20,17 +20,21 @@
 # ScanCode.io is a free software code scanning tool from nexB Inc. and others.
 # Visit https://github.com/nexB/scancode.io for support and download.
 
+from django.apps import apps
 from django.db import models
 from django.utils.translation import gettext_lazy as _
 
 import django_filters
+from django_filters.widgets import LinkWidget
 from packageurl.contrib.django.filters import PackageURLFilter
 
 from scanpipe.models import CodebaseResource
 from scanpipe.models import DiscoveredPackage
 from scanpipe.models import Project
 from scanpipe.models import ProjectError
 
+scanpipe_app = apps.get_app_config("scanpipe")
+
 
 class FilterSetUtilsMixin:
     @staticmethod
@@ -86,25 +90,75 @@ def verbose_name_plural(cls):
         return cls.Meta.model._meta.verbose_name_plural
 
 
+class BulmaLinkWidget(LinkWidget):
+    """
+    Replace LinkWidget rendering with Bulma CSS classes.
+    """
+
+    extra_css_class = ""
+
+    def render_option(self, name, selected_choices, option_value, option_label):
+        option = super().render_option(
+            name, selected_choices, option_value, option_label
+        )
+        css_class = str(self.extra_css_class)
+
+        selected_class = ' class="selected"'
+        if selected_class in option:
+            option = option.replace(selected_class, "")
+            css_class += " is-active"
+
+        option = option.replace("<a", f'<a class="{css_class}"')
+        return option
+
+
+class BulmaDropdownWidget(BulmaLinkWidget):
+    extra_css_class = "dropdown-item"
+
+
 class ProjectFilterSet(FilterSetUtilsMixin, django_filters.FilterSet):
     search = django_filters.CharFilter(field_name="name", lookup_expr="icontains")
     sort = django_filters.OrderingFilter(
-        fields=(("name", "name"), ("created_date", "created_date")),
+        label=_("Sort"),
+        fields=["created_date", "name"],
+        empty_label="Newest",
+        choices=(
+            ("created_date", "Oldest"),
+            ("name", "Name (a-Z)"),
+            ("-name", "Name (Z-a)"),
+        ),
+        widget=BulmaDropdownWidget,
+    )
+    pipeline = django_filters.ChoiceFilter(
+        label=_("Pipeline"),
+        field_name="runs__pipeline_name",
+        choices=scanpipe_app.get_pipeline_choices(include_blank=False),
+        widget=BulmaDropdownWidget,
     )
 
     class Meta:
         model = Project
-        fields = ["search", "is_archived"]
+        fields = ["is_archived"]
 
     def __init__(self, data=None, *args, **kwargs):
         """
         Filter out the archived projects by default.
         """
         super().__init__(data, *args, **kwargs)
 
-        if not data or "is_archived" not in data:
+        # Default filtering by "Active" projects.
+        if not data or data.get("is_archived", "") == "":
             self.queryset = self.queryset.filter(is_archived=False)
 
+        active_count = Project.objects.filter(is_archived=False).count()
+        archived_count = Project.objects.filter(is_archived=True).count()
+        self.filters["is_archived"].extra["widget"] = BulmaLinkWidget(
+            choices=[
+                ("", f'<i class="fas fa-seedling"></i> {active_count} Active'),
+                ("true", f'<i class="fas fa-dice-d6"></i> {archived_count} Archived'),
+            ]
+        )
+
 
 class JSONContainsFilter(django_filters.CharFilter):
     """

scanpipe/management/commands/__init__.py

@@ -71,8 +71,12 @@ def get_run_status_code(self, run):
         return status.upper()
 
     def display_status(self, project, verbosity):
+        project_label = f"Project: {project.name}"
+        if project.is_archived:
+            project_label += " [archived]"
+
         message = [
-            self.style.HTTP_INFO(f"Project: {project.name}"),
+            self.style.HTTP_INFO(project_label),
         ]
 
         if verbosity >= 2:

scanpipe/management/commands/list-project.py

@@ -39,6 +39,7 @@ def add_arguments(self, parser):
         parser.add_argument(
             "--include-archived",
             action="store_true",
+            dest="include_archived",
             help="Include archived projects.",
         )
 

scanpipe/templates/scanpipe/includes/filter_dropdown.html

@@ -0,0 +1,15 @@
+<div class="dropdown is-right is-hoverable">
+  <div class="dropdown-trigger">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+      <span>{{ filter_form_field.label }}</span>
+      <span class="icon is-small">
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <div class="dropdown-menu" id="dropdown-sort-filters" role="menu">
+    <div class="dropdown-content">
+      {{ filter_form_field }}
+    </div>
+  </div>
+</div>

scanpipe/templates/scanpipe/includes/project_list_table.html

@@ -66,4 +66,4 @@
     </tr>
   {% endfor %}
   </tbody>
-</table>
+</table>

scanpipe/templates/scanpipe/includes/search_field.html

@@ -1,10 +1,8 @@
-<div class="field">
-  <form method="get">
-    <p class="control has-icons-left">
-      <input class="input {{ extra_class }}" type="text" placeholder="Search {{ filter.verbose_name_plural }}" name="{{ filter.form.search.name }}" value="{{ filter.form.search.value|default_if_none:'' }}">
-      <span class="icon is-small is-left">
-        <i class="fas fa-search"></i>
-      </span>
-    </p>
-  </form>
-</div>
+<form method="get">
+  <p class="control has-icons-left">
+    <input class="input {{ extra_class }}" type="text" placeholder="Search {{ filter.verbose_name_plural }}" name="{{ filter.form.search.name }}" value="{{ filter.form.search.value|default_if_none:'' }}">
+    <span class="icon is-small is-left">
+      <i class="fas fa-search"></i>
+    </span>
+  </p>
+</form>

scanpipe/templates/scanpipe/project_list.html

@@ -1,6 +1,16 @@
 {% extends "scanpipe/base.html" %}
 {% load humanize %}
 
+{% block extrahead %}
+  <style>
+    ul#id_is_archived {display: inline-flex;}
+    ul#id_is_archived li {margin-right: 1rem;}
+    ul#id_is_archived li a {color: #7a7a7a;}
+    ul#id_is_archived li a:hover {text-decoration: underline;}
+    ul#id_is_archived li a.is-active {color: #363636;}
+  </style>
+{% endblock %}
+
 {% block content %}
   <div class="container is-max-desktop">
     {% include 'scanpipe/includes/navbar_header.html' %}
@@ -10,42 +20,21 @@
       <div class="is-flex is-justify-content-space-between mb-2">
         <div>
           {% include 'scanpipe/includes/breadcrumb.html' %}
-          {% if archived_count > 0 %}
-            <a href="{% url 'project_list' %}" class="{% if 'is_archived' in request.GET %}is-grey-link{% else %}is-black-link{% endif %}">
-              <i class="fas fa-seedling"></i>
-              {{ active_count }} Active
-            </a>
-            <a href="{% url 'project_list' %}?is_archived=true" class="ml-4 {% if 'is_archived' in request.GET %}is-black-link{% else %}is-grey-link{% endif %}">
-              <i class="fas fa-dice-d6"></i>
-              {{ archived_count }} Archived
-            </a>
-          {% endif %}
+          {{ filter.form.is_archived }}
+        </div>
+        <a href="{% url 'project_add' %}" class="button is-link">New Project</a>
+      </div>
+
+      <div class="is-flex mb-3">
+        <div class="is-flex-grow-1 mr-2">
+          {% include 'scanpipe/includes/search_field.html' %}
         </div>
         <div>
-          <div class="dropdown is-right is-hoverable">
-            <div class="dropdown-trigger">
-              <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-                <span>Sort</span>
-                <span class="icon is-small">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
-            <div class="dropdown-menu" id="dropdown-sort-filters" role="menu">
-              <div class="dropdown-content">
-                <a href="?sort=name" class="dropdown-item">Name (A-Z)</a>
-                <a href="?sort=-name" class="dropdown-item">Name (Z-A)</a>
-                <a href="?sort=created_date" class="dropdown-item">Oldest</a>
-                <a href="?sort=-created_date" class="dropdown-item">Newest</a>
-              </div>
-            </div>
-          </div>
-          <a href="{% url 'project_add' %}" class="button is-link">New Project</a>
+          {% include 'scanpipe/includes/filter_dropdown.html' with filter_form_field=filter.form.pipeline only %}
+          {% include 'scanpipe/includes/filter_dropdown.html' with filter_form_field=filter.form.sort only %}
         </div>
       </div>
 
-      {% include 'scanpipe/includes/search_field.html' %}
-
       {% if object_list %}
         {% include 'scanpipe/includes/project_list_table.html' with projects=object_list only %}
       {% else %}
@@ -69,4 +58,4 @@
   </div>
 
   {% include 'scanpipe/includes/run_modal.html' %}
-{% endblock %}
+{% endblock %}

scanpipe/tests/test_views.py

@@ -47,15 +47,15 @@ def setUp(self):
     def test_scanpipe_views_project_list_is_archived(self):
         project2 = Project.objects.create(name="project2", is_archived=True)
         url = reverse("project_list")
-        url_with_filter = url + "?is_archived=true"
+        is_archive_filter = "?is_archived=true"
 
         response = self.client.get(url)
         self.assertContains(response, self.project1.name)
         self.assertNotContains(response, project2.name)
         self.assertContains(response, url)
-        self.assertContains(response, url_with_filter)
+        self.assertContains(response, is_archive_filter)
 
-        response = self.client.get(url_with_filter)
+        response = self.client.get(url + is_archive_filter)
         self.assertNotContains(response, self.project1.name)
         self.assertContains(response, project2.name)
 

scanpipe/views.py

@@ -34,7 +34,6 @@
 from django.shortcuts import redirect
 from django.shortcuts import render
 from django.urls import reverse_lazy
-from django.utils.html import escape
 from django.views import generic
 from django.views.generic.detail import SingleObjectMixin
 from django.views.generic.edit import FormView
@@ -187,12 +186,6 @@ class ProjectListView(
     prefetch_related = ["runs"]
     paginate_by = 20
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["active_count"] = Project.objects.filter(is_archived=False).count()
-        context["archived_count"] = Project.objects.filter(is_archived=True).count()
-        return context
-
 
 class ProjectCreateView(ConditionalLoginRequired, generic.CreateView):
     model = Project