Fixes #6127 : Add Collapse All button (#6957)

The collapse all option as suggested in the corresponding issue
has been implemented in this PR.

Signed-off-by: Deepjyoti Mondal <djmdeveloper060796@gmail.com>

web/ui/static/css/targets.css

@@ -8,7 +8,13 @@ h2.danger a {
     color: rgb(242, 65, 65);
 }
 
-div#showTargets .btn {
+.options-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+}
+
+.options-container .btn {
     border-radius: 0px;
     margin-top: 10px;
     margin-bottom: 15px;

web/ui/static/js/targets.js

@@ -20,6 +20,8 @@ function showUnhealthy(_, container) {
   if (isHealthy) { $(container).hide(); }
 }
 
+var allCollapsed = false;
+
 function init() {
   if ($("#unhealthy-targets").length) {
     if (!localStorage.selectedTargetsTab || localStorage.selectedTargetsTab == "all-targets") {
@@ -45,6 +47,41 @@ function init() {
     }
   });
 
+  $(".collapse-all").click(function() {
+
+    // locally store state of allCollapsed
+    previousAllCollapsed = allCollapsed;
+
+    // conditionally change the text of the button
+    if (allCollapsed == false) {
+      $(this).html("Expand All");
+      allCollapsed = true;
+    } else {
+      $(this).html("Collapse All");
+      allCollapsed = false;
+    }
+
+    $("button.targets").each(function(_, thisButton) {
+      const tableTitle = $(thisButton).closest("h2").find("a").attr("id");
+
+      if (previousAllCollapsed == false) {
+
+        // collapse all the jobs
+        if ($(this).hasClass("expanded-table")) {
+          localStorage.setItem(tableTitle, "collapsed");
+          toggleJobTable($(thisButton), false);
+        }
+      } else {
+
+        // expand all the jobs
+        if ($(this).hasClass("collapsed-table")) {
+          localStorage.setItem(tableTitle, "expanded");
+          toggleJobTable($(this), true);
+        }
+      }
+    });
+  });
+
   $(".job_header a").each(function (_, link) {
     const cachedTableState = localStorage.getItem($(link).attr("id"));
     if (cachedTableState === "collapsed") {

web/ui/templates/targets.html

@@ -7,15 +7,18 @@
 {{define "content"}}
   <div class="container-fluid">
     <h1>Targets</h1>
-    <div id="showTargets" class="btn-group btn-group-toggle" data-toggle="buttons">
-      <label class="btn btn-primary">
-        <input type="radio" name="targets" id="all-targets" autocomplete="off" checked> All
-      </label>
-      <label class="btn btn-primary">
-        <input type="radio" name="targets" id="unhealthy-targets" autocomplete="off"> Unhealthy
-      </label>
-      <br />
-  </div>
+    <div class="options-container">
+      <div id="showTargets" class="btn-group btn-group-toggle" data-toggle="buttons">
+        <label class="btn btn-primary">
+          <input type="radio" name="targets" id="all-targets" autocomplete="off" checked> All
+        </label>
+        <label class="btn btn-primary">
+          <input type="radio" name="targets" id="unhealthy-targets" autocomplete="off"> Unhealthy
+        </label>
+        <br />
+      </div>
+      <button type="button" class="collapse-all btn btn-primary">Collapse All</button>
+    </div>
 
     {{- range $job, $pool := .TargetPools}}
     {{- $healthy := numHealthy $pool}}