From c8ad79efdc2a96214f3ee3ef92d04163182fe87c Mon Sep 17 00:00:00 2001
From: Deepjyoti Mondal <djmdeveloper060796@gmail.com>
Date: Mon, 7 Sep 2020 20:24:54 +0530
Subject: [PATCH] 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 +++++++-
 web/ui/static/js/targets.js   | 37 +++++++++++++++++++++++++++++++++++
 web/ui/templates/targets.html | 21 +++++++++++---------
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/web/ui/static/css/targets.css b/web/ui/static/css/targets.css
index b20d39e91..c18f48616 100644
--- a/web/ui/static/css/targets.css
+++ b/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;
diff --git a/web/ui/static/js/targets.js b/web/ui/static/js/targets.js
index 1e4d6a234..0159bec6a 100644
--- a/web/ui/static/js/targets.js
+++ b/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") {
diff --git a/web/ui/templates/targets.html b/web/ui/templates/targets.html
index 813f858f7..07e1dcd40 100644
--- a/web/ui/templates/targets.html
+++ b/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}}