Unverified Commit c8ad79ef by Deepjyoti Mondal Committed by GitHub

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: 's avatarDeepjyoti Mondal <djmdeveloper060796@gmail.com>
parent 5ea6bdca
......@@ -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;
......
......@@ -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") {
......
......@@ -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}}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment