Allow to collapse jobs at /targets page (#2628)

This commit is contained in:
Roman Khavronenko 2017-08-09 18:10:30 +03:00 committed by Björn Rabenstein
parent c79a4db812
commit 245b8a0b37
6 changed files with 591 additions and 600 deletions

File diff suppressed because one or more lines are too long

View file

@ -4,12 +4,6 @@ body {
padding-bottom: 20px;
}
th.job_header {
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.state_indicator {
padding: 0 4px 0 4px;
}

View file

@ -0,0 +1,11 @@
tr.job_header {
font-size: 20px;
padding-top: 10px;
font-weight: bold;
padding-bottom: 10px;
cursor: pointer;
}
tr.job_details > td{
padding: 0 !important;
}

View file

@ -0,0 +1,38 @@
function toggle(obj, state){
var icon = $(obj).find("i");
if (icon.length === 0 ) {
return;
}
if (state === true) {
icon.removeClass("icon-chevron-down").addClass("icon-chevron-up");
} else {
icon.removeClass("icon-chevron-up").addClass("icon-chevron-down");
}
$(obj).next().toggle(state);
}
function init() {
$(".job_header").click(function() {
var job = $(this).find("a").attr("id"),
expanderIcon = $(this).find("i.icon-chevron-down");
if (expanderIcon.length !== 0) {
localStorage.setItem(job, false);
toggle(this, true);
} else {
localStorage.setItem(job, true);
toggle(this, false);
}
});
$(".job_header a").each(function(i, obj) {
var selector = $(obj).attr("id");
if (localStorage.getItem(selector) === "true") {
toggle($(this).parents(".job_header"), false);
}
});
}
$(init);

View file

@ -1,57 +1,72 @@
{{define "head"}}<!-- nix -->{{end}}
{{define "head"}}
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/targets.css?v={{ buildVersion }}">
<script src="{{ pathPrefix }}/static/js/targets.js?v={{ buildVersion }}"></script>
{{end}}
{{define "content"}}
<div class="container-fluid">
<h2 id="targets">Targets</h2>
<table class="table table-condensed table-bordered table-striped table-hover">
<table class="table table-condensed table-bordered table-hover">
{{range $job, $pool := .TargetPools }}
<thead>
<tr><th colspan="5" class="job_header"><a id="job-{{$job}}" href="#job-{{$job}}">{{$job}}</a></th></tr>
<tr>
<th>Endpoint</th>
<th>State</th>
<th>Labels</th>
<th>Last Scrape</th>
<th>Error</th>
</tr>
</thead>
<tbody>
{{range $pool}}
<tr>
<td>
<a href="{{.URL | globalURL}}">{{.URL.Scheme}}://{{.URL.Host}}{{.URL.Path}}</a><br>
{{range $label, $values := .URL.Query }}
{{range $i, $value := $values}}
<span class="label label-primary">{{$label}}="{{$value}}"</span>
{{end}}
{{end}}
</td>
<td>
<span class="alert alert-{{ .Health | healthToClass }} state_indicator text-uppercase">
{{.Health}}
</span>
</td>
<td>
<span class="cursor-pointer" data-toggle="tooltip" title="" data-html=true data-original-title="<b>Before relabeling:</b>{{range $k, $v := .DiscoveredLabels}}<br>{{$k | html | html}}=&quot;{{$v | html | html}}&quot;{{end}}">
{{$labels := stripLabels .Labels "job"}}
{{range $label, $value := $labels}}
<span class="label label-primary">{{$label}}="{{$value}}"</span>
{{else}}
<span class="label label-default">none</span>
{{end}}
</span>
</td>
<td>
{{if .LastScrape.IsZero}}Never{{else}}{{since .LastScrape}} ago{{end}}
</td>
<td>
{{if .LastError}}
<span class="alert alert-danger state_indicator">{{.LastError}}</span>
{{end}}
{{$healthy := numHealthy $pool}}
{{$total := len $pool}}
<tr class="job_header{{if lt $healthy $total}} danger{{end}}">
<td colspan="5">
<i class="icon-chevron-up"></i><a id="job-{{$job}}" href="#job-{{$job}}">{{$job}} ({{$healthy}}/{{$total}} up)</a>
</td>
</tr>
<tr class = "job_details">
<td>
<table class="table table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th>Endpoint</th>
<th>State</th>
<th>Labels</th>
<th>Last Scrape</th>
<th>Error</th>
</tr>
</thead>
<tbody>
{{range $pool}}
<tr>
<td>
<a href="{{.URL | globalURL}}">{{.URL.Scheme}}://{{.URL.Host}}{{.URL.Path}}</a><br>
{{range $label, $values := .URL.Query }}
{{range $i, $value := $values}}
<span class="label label-primary">{{$label}}="{{$value}}"</span>
{{end}}
{{end}}
</td>
<td>
<span class="alert alert-{{ .Health | healthToClass }} state_indicator text-uppercase">
{{.Health}}
</span>
</td>
<td>
<span class="cursor-pointer" data-toggle="tooltip" title="" data-html=true data-original-title="<b>Before relabeling:</b>{{range $k, $v := .DiscoveredLabels}}<br>{{$k | html | html}}=&quot;{{$v | html | html}}&quot;{{end}}">
{{$labels := stripLabels .Labels "job"}}
{{range $label, $value := $labels}}
<span class="label label-primary">{{$label}}="{{$value}}"</span>
{{else}}
<span class="label label-default">none</span>
{{end}}
</span>
</td>
<td>
{{if .LastScrape.IsZero}}Never{{else}}{{since .LastScrape}} ago{{end}}
</td>
<td>
{{if .LastError}}
<span class="alert alert-danger state_indicator">{{.LastError}}</span>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
</td>
</tr>
{{end}}
</tbody>
{{end}}
</table>
</div>

View file

@ -520,6 +520,16 @@ func tmplFuncs(consolesPath string, opts *Options) template_text.FuncMap {
}
return u
},
"numHealthy": func(pool []*retrieval.Target) int {
alive := len(pool)
for _, p := range pool {
if p.Health() != retrieval.HealthGood {
alive--
}
}
return alive
},
"healthToClass": func(th retrieval.TargetHealth) string {
switch th {
case retrieval.HealthUnknown: