Implement filtering by severity and release channel

Signed-off-by: Emanuele Aina <emanuele.aina@collabora.com>

bin/dashboard

@@ -43,6 +43,15 @@ def load_data(fileobj, args):
     return data
 
 
+def copydir(dirname, destdir):
+    dest = destdir / dirname
+    logging.debug(f"Copying {dirname} to {dest}")
+    shutil.rmtree(
+        dest, ignore_errors=True
+    )  # TODO use dirs_exist_ok=True below, needs python 3.8
+    shutil.copytree(dirname, dest)
+
+
 def render(packaging_data, storage_data, destdir):
     destdir.mkdir(parents=True, exist_ok=True)
 
@@ -66,11 +75,8 @@ def render(packaging_data, storage_data, destdir):
         with open(destdir / f"{html}.html", "w") as html_file:
             html_file.write(rendered)
 
-    logging.debug(f"Copying CSS to {destdir}/css")
-    shutil.rmtree(
-        destdir / "css", ignore_errors=True
-    )  # TODO use dirs_exist_ok=True below, needs python 3.8
-    shutil.copytree("css", destdir / "css")
+    copydir("css", destdir)
+    copydir("js", destdir)
 
 
 if __name__ == "__main__":

templates/index.html.jinja2

@@ -66,6 +66,31 @@
 
 {% block title %} Packages {% endblock %}
 
+{% block head %}
+  <script src="js/jquery-3.6.0.slim.min.js"></script>
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <script>//<![CDATA[
+  $(function(){
+    $('[data-filter]').change(e => {
+        const filtername = $(e.currentTarget).attr("data-filter");
+        const enabled = $(`[data-filter=${filtername}]:checked`).map((i, e) => $(e).val()).toArray();
+        const all_enabled = !$(`[data-filter=${filtername}]:not(:checked)`).length;
+        $(`[data-${filtername}]`).each((i, e) => {
+              const these = $(e).data(filtername).split();
+              const intersection = these.filter(value => enabled.includes(value));
+              const display = all_enabled || Boolean(intersection.length);
+              $(e).toggle(display);
+        });
+        // reset the visibility of each package before checking if it has visible reports
+        $("[data-package]").toggle(true);
+        $("[data-package]:not(:has([data-report]:visible))").toggle(false);
+    });
+  });
+  // ]]>
+  </script>
+{% endblock %}
+
+
 {% block summary %}
   <ul class="list-inline mr-auto">
     <li class="list-inline-item">
@@ -84,6 +109,39 @@
     <li class="list-inline-item">
       <a class="text-muted" href="tsv/index.html">🗒️ per-release indices</a>
     </li>
+
+    <div class="dropdown d-inline">
+      <button class="btn btn-secondary btn-sm dropdown-toggle"
+              id="dropdown-button-filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Filter
+      </button>
+      <div class="dropdown-menu" aria-labelledby="dropdown-button-filter">
+        <form class="container">
+          <fieldset class="form-group row">
+            <legend class="col-form-label col-sm-2 pt-0 font-weight-bold">Channels</legend>
+            <div class="col-sm-10">
+              {% for channel in channels.values()|map(attribute='base')|sort(reverse=true)|unique -%}
+              <div class="form-check">
+                <input class="form-check-input" type=checkbox checked name="channels" value="{{channel}}" data-filter="channels" id="filter-channels-{{channel.replace('/', '-')}}"/>
+                <label class="form-check-label" for="filter-channels-{{channel.replace('/', '-')}}">{{channel}}</label>
+              </div>
+              {% endfor %}
+            </div>
+          </fieldset>
+          <fieldset class="form-group row">
+            <legend class="col-form-label col-sm-2 pt-0 font-weight-bold">Severity</legend>
+            <div class="col-sm-10">
+              {% for severity in "error", "info" -%}
+              <div class="form-check">
+                <input class="form-check-input" type=checkbox checked name="severity" value="{{severity}}" data-filter="severity" id="filter-severity-{{severity}}"/>
+                <label class="form-check-label" for="filter-severity-{{severity}}">{{severity}}</label>
+              </div>
+              {% endfor %}
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
   </ul>
 
   <div>