github
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
pull/7023/head
Deepjyoti Mondal 2020-09-07 20:24:54 +05:30 committed by GitHub
parent 5ea6bdca1f
commit c8ad79efdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/ui/static/css/targets.css
View File

@ -8,7 +8,13 @@ h2.danger a {
color: rgb(242, 65, 65); 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; border-radius: 0px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 15px; margin-bottom: 15px;

37
web/ui/static/js/targets.js
View File

@ -20,6 +20,8 @@ function showUnhealthy(_, container) {
if (isHealthy) { $(container).hide(); } if (isHealthy) { $(container).hide(); }
} }
var allCollapsed = false;
function init() { function init() {
if ($("#unhealthy-targets").length) { if ($("#unhealthy-targets").length) {
if (!localStorage.selectedTargetsTab || localStorage.selectedTargetsTab == "all-targets") { 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) { $(".job_header a").each(function (_, link) {
const cachedTableState = localStorage.getItem($(link).attr("id")); const cachedTableState = localStorage.getItem($(link).attr("id"));
if (cachedTableState === "collapsed") { if (cachedTableState === "collapsed") {

21
web/ui/templates/targets.html
View File

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