prometheus/web/ui/templates/alerts.html
Michał 040425b0eb filtering alerts by state and display count of alerts in each state (#5758)
* local storage selectedTab on targets tab was renamed

Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com>

* added filters when displaying alerts

Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com>

* function was simplified

Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com>

* fixed rebase

Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com>

* minor rename

Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com>

* Active -> Pending

Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com>
2019-10-29 11:09:52 +01:00

95 lines
3.7 KiB
HTML

{{define "head"}}
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/alerts.css?v={{ buildVersion }}">
<script src="{{ pathPrefix }}/static/js/alerts.js?v={{ buildVersion }}"></script>
{{end}}
{{define "content"}}
<div class="container-fluid">
<h1>Alerts</h1>
<div id="alertFilters" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> Inactive ({{ .Counts.Inactive }})
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> Pending ({{ .Counts.Pending }})
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> Firing ({{ .Counts.Firing }})
</label>
</br>
</div>
<div class="show-annotations">
<i class="glyphicon glyphicon-unchecked"></i>
<button type="button" class="show-annotations" title="show annotations">Show annotations</button>
</div>
<table id="alertsTable" class="table table-bordered table-collapsed">
<tbody>
{{$alertStateToRowClass := .AlertStateToRowClass}}
{{range .Groups}}
<tr>
<td style="padding: 2px">
{{.File}} > {{.Name}}
</td>
</tr>
{{range .AlertingRules}}
{{$activeAlerts := .ActiveAlerts}}
<tr class="alert alert-{{index $alertStateToRowClass .State}} alert_header">
<td><i class="icon-chevron-down"></i> <b>{{.Name}}</b> ({{len $activeAlerts}} active)</td>
</tr>
<tr class="alert_details">
<td>
<div>
<pre style="display:block; padding:9.5px; font-size:13px; color:#333; word-break:break-all; background-color:#f5f5f5; border:1px solid #ccc; border-radius:4px;" ><code>{{.HTMLSnippet pathPrefix}}</code></pre>
</div>
{{if $activeAlerts}}
<table class="table table-bordered table-hover table-sm alert_elements_table">
<tr class="">
<th>Labels</th>
<th>State</th>
<th>Active Since</th>
<th>Value</th>
</tr>
{{range $activeAlerts}}
<tr>
<td>
{{range $label, $value := .Labels.Map}}
<span class="badge badge-primary">{{$label}}="{{$value}}"</span>
{{end}}
</td>
<td><span class="alert alert-{{ .State | alertStateToClass }} state_indicator text-uppercase">{{.State}}</span></td>
<td>{{.ActiveAt.UTC}}</td>
<td>{{.Value}}</td>
</tr>
{{ if .Annotations.Map}}
<tr style="display:none" class="alert_annotations">
<th colspan="4">Annotations</th>
</tr>
<tr style="display:none" class="alert_annotations">
<td colspan="4">
<dl>
{{range $label, $value := .Annotations.Map}}
<dt>{{$label}}</dt>
<dd>{{$value}}</dd>
{{end}}
</dl>
</td>
</tr>
{{end}}
{{end}}
</table>
{{end}}
</td>
</tr>
{{end}}
{{else}}
<tr>
<td>
No alerting rules defined
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{end}}