mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1017
web/ui/bindata.go
View file

File diff suppressed because one or more lines are too long

6
web/ui/static/css/prometheus.css
View file

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

11
web/ui/static/css/targets.css Normal file
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;
}

38
web/ui/static/js/targets.js Normal file
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);

109
web/ui/templates/targets.html
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"}} {{define "content"}}
<div class="container-fluid"> <div class="container-fluid">
<h2 id="targets">Targets</h2> <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 }} {{range $job, $pool := .TargetPools }}
<thead> {{$healthy := numHealthy $pool}}
<tr><th colspan="5" class="job_header"><a id="job-{{$job}}" href="#job-{{$job}}">{{$job}}</a></th></tr> {{$total := len $pool}}
<tr> <tr class="job_header{{if lt $healthy $total}} danger{{end}}">
<th>Endpoint</th> <td colspan="5">
<th>State</th> <i class="icon-chevron-up"></i><a id="job-{{$job}}" href="#job-{{$job}}">{{$job}} ({{$healthy}}/{{$total}} up)</a>
<th>Labels</th> </td>
<th>Last Scrape</th> </tr>
<th>Error</th> <tr class = "job_details">
</tr> <td>
</thead> <table class="table table-condensed table-bordered table-striped table-hover">
<tbody> <thead>
{{range $pool}} <tr>
<tr> <th>Endpoint</th>
<td> <th>State</th>
<a href="{{.URL | globalURL}}">{{.URL.Scheme}}://{{.URL.Host}}{{.URL.Path}}</a><br> <th>Labels</th>
{{range $label, $values := .URL.Query }} <th>Last Scrape</th>
{{range $i, $value := $values}} <th>Error</th>
<span class="label label-primary">{{$label}}="{{$value}}"</span> </tr>
{{end}} </thead>
{{end}} <tbody>
</td> {{range $pool}}
<td> <tr>
<span class="alert alert-{{ .Health | healthToClass }} state_indicator text-uppercase"> <td>
{{.Health}} <a href="{{.URL | globalURL}}">{{.URL.Scheme}}://{{.URL.Host}}{{.URL.Path}}</a><br>
</span> {{range $label, $values := .URL.Query }}
</td> {{range $i, $value := $values}}
<td> <span class="label label-primary">{{$label}}="{{$value}}"</span>
<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}}"> {{end}}
{{$labels := stripLabels .Labels "job"}} {{end}}
{{range $label, $value := $labels}} </td>
<span class="label label-primary">{{$label}}="{{$value}}"</span> <td>
{{else}} <span class="alert alert-{{ .Health | healthToClass }} state_indicator text-uppercase">
<span class="label label-default">none</span> {{.Health}}
{{end}} </span>
</span> </td>
</td> <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}}">
{{if .LastScrape.IsZero}}Never{{else}}{{since .LastScrape}} ago{{end}} {{$labels := stripLabels .Labels "job"}}
</td> {{range $label, $value := $labels}}
<td> <span class="label label-primary">{{$label}}="{{$value}}"</span>
{{if .LastError}} {{else}}
<span class="alert alert-danger state_indicator">{{.LastError}}</span> <span class="label label-default">none</span>
{{end}} {{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> </td>
</tr> </tr>
{{end}}
</tbody>
{{end}} {{end}}
</table> </table>
</div> </div>

10
web/web.go
View file

@ -520,6 +520,16 @@ func tmplFuncs(consolesPath string, opts *Options) template_text.FuncMap {
} }
return u 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 { "healthToClass": func(th retrieval.TargetHealth) string {
switch th { switch th {
case retrieval.HealthUnknown: case retrieval.HealthUnknown: