dashboard/app: add targeting controls to the coverage page

It allows to control known parameters:
1. Period (months or days).
2. Target subsystem.
3. Target manager.

And adds the disabled "Only unique" checkbox.

Author: tarasmadan

dashboard/app/main.go

@@ -13,6 +13,7 @@ import (
 	"net/url"
 	"os"
 	"regexp"
+	"slices"
 	"sort"
 	"strconv"
 	"strings"
@@ -76,6 +77,7 @@ func initHTTPHandlers() {
 		http.Handle("/"+ns+"/repos", handlerWrapper(handleRepos))
 		http.Handle("/"+ns+"/bug-summaries", handlerWrapper(handleBugSummaries))
 		http.Handle("/"+ns+"/subsystems", handlerWrapper(handleSubsystemsList))
+		http.Handle("/"+ns+"/managers", handlerWrapper(handleManagersList))
 		http.Handle("/"+ns+"/backports", handlerWrapper(handleBackports))
 		http.Handle("/"+ns+"/s/", handlerWrapper(handleSubsystemPage))
 		http.Handle("/"+ns+"/manager/", handlerWrapper(handleManagerPage))
@@ -1423,6 +1425,23 @@ func findBugByID(c context.Context, r *http.Request) (*Bug, error) {
 	return nil, fmt.Errorf("mandatory parameter id/extid is missing")
 }
 
+func handleManagersList(c context.Context, w http.ResponseWriter, r *http.Request) error {
+	if r.FormValue("json") != "1" {
+		return ErrClientBadRequest
+	}
+	hdr, err := commonHeader(c, r, w, "")
+	if err != nil {
+		return err
+	}
+	managers, err := CachedManagerList(c, hdr.Namespace)
+	if err != nil {
+		return err
+	}
+	w.Header().Set("Content-Type", "application/json")
+	slices.Sort(managers)
+	return json.NewEncoder(w).Encode(managers)
+}
+
 func handleSubsystemsList(c context.Context, w http.ResponseWriter, r *http.Request) error {
 	hdr, err := commonHeader(c, r, w, "")
 	if err != nil {
@@ -1436,6 +1455,10 @@ func handleSubsystemsList(c context.Context, w http.ResponseWriter, r *http.Requ
 	if service == nil {
 		return fmt.Errorf("%w: the namespace does not have subsystems", ErrClientBadRequest)
 	}
+	if r.FormValue("json") == "1" {
+		w.Header().Set("Content-Type", "application/json")
+		return ssListJSON(service, w)
+	}
 	nonEmpty := r.FormValue("all") != "true"
 	list := []*uiSubsystem{}
 	someHidden := false
@@ -1468,6 +1491,15 @@ func handleSubsystemsList(c context.Context, w http.ResponseWriter, r *http.Requ
 	})
 }
 
+func ssListJSON(service *subsystem.Service, w http.ResponseWriter) error {
+	res := []string{}
+	for _, subsystem := range service.List() {
+		res = append(res, subsystem.Name)
+	}
+	slices.Sort(res)
+	return json.NewEncoder(w).Encode(res)
+}
+
 func createUISubsystem(ns string, item *subsystem.Subsystem, cached *Cached) *uiSubsystem {
 	stats := cached.Subsystems[item.Name]
 	return &uiSubsystem{

dashboard/app/static/coverage.js

@@ -11,6 +11,50 @@ function initTogglers(){
   });
 }
 
+function initSelector(controlId, url, defVal){
+  $.ajax({
+    url: url,
+    method: 'GET',
+    success: function(data) {
+      data.forEach(item => {
+        $(controlId).append(new Option(item, item));
+      });
+      $(controlId).val(defVal);
+    },
+    error: function() {
+      log('failed to load ' + controlId + ' from ' + url);
+    }
+  });
+}
+
+function initUpdateForm(){
+  var curUrlParams = new URLSearchParams(window.location.search);
+  $('#target-period').val(curUrlParams.get('period'));
+  initSelector('#target-subsystem', '/upstream/subsystems?json=1', curUrlParams.get('subsystem'))
+  initSelector('#target-manager', '/upstream/managers?json=1', curUrlParams.get('manager'))
+  $("#only-unique").prop("checked", curUrlParams.get('subsystem') == "1");
+
+  $(document).ready(function() {
+    $("#updateButton").click(function(event) {
+      event.preventDefault(); // don't submit the form
+
+      var period = $("#target-period").val();
+      var subsystem = $("#target-subsystem").val();
+      var manager = $("#target-manager").val();
+      var onlyUnique = $("#only-unique").prop("checked") ? "1" : "0";
+
+      var newLocation = new URL(window.location.href);
+      newLocation.searchParams.set("period", period);
+      newLocation.searchParams.set("subsystem", subsystem);
+      newLocation.searchParams.set("manager", manager);
+      newLocation.searchParams.set("unique-only", onlyUnique);
+      window.location.href = newLocation.toString();
+    });
+  });
+}
+
+$(document).ready(initUpdateForm);
+
 // This handler is called when user clicks on the coverage percentage.
 // It downloads the kernel file coverage html block and adjust page to show it.
 // "#file-content-prev" and "#file-content-curr" are the file content <div>s.

pkg/cover/templates/heatmap.html

@@ -138,12 +138,47 @@
       </ul>
     </div>
     <div style="display:inline-block; vertical-align: top">
-      <pre id="file-details-curr"></pre>
+      <div style="display:inline-block">
+        <form>
+          <div style="display:inline-block; vertical-align: top">
+            <label for="target-period">Periods:</label>
+            <br>
+            <label for="target-subsystem">Subsystem:</label>
+            <br>
+            <label for="target-manager">Manager:</label>
+            <br>
+            <label for="only-unique">Only unique:</label>
+          </div>
+          <div style="display:inline-block; vertical-align: top">
+            <select id="target-period">
+              <option value="month">Month</option>
+              <option value="day">Day</option>
+            </select>
+            <br>
+            <select id="target-subsystem">
+              <option value="">*</option>
+            </select>
+            <br>
+            <select id="target-manager">
+              <option value="">*</option>
+            </select>
+            <br>
+            <input type="checkbox" id="only-unique" disabled>
+          </div>
+          <br>
+          <button id="updateButton">Update</button>
+        </form>
+      </div>
+      <div style="display:inline-block; vertical-align: top">
+        <pre style="margin:0" id="file-details-curr"></pre>
+      </div>
       <br>
       <div id="file-content-curr"></div>
     </div>
     <div style="display:inline-block; vertical-align: top">
-      <pre id="file-details-prev"></pre>
+      <div style="display:inline-block; vertical-align: top">
+        <pre style="margin:0" id="file-details-prev"></pre>
+      </div>
       <br>
       <div id="file-content-prev"></div>
     </div>