mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
Allow to collapse jobs at /targets
page (#2628)
This commit is contained in:
parent
c79a4db812
commit
245b8a0b37
1017
web/ui/bindata.go
1017
web/ui/bindata.go
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
}
|
||||
|
|
11
web/ui/static/css/targets.css
Normal file
11
web/ui/static/css/targets.css
Normal 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;
|
||||
}
|
38
web/ui/static/js/targets.js
Normal file
38
web/ui/static/js/targets.js
Normal 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);
|
|
@ -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}}="{{$v | html | html}}"{{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}}="{{$v | html | html}}"{{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>
|
||||
|
|
10
web/web.go
10
web/web.go
|
@ -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:
|
||||
|
|
Loading…
Reference in a new issue