{{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 class="show-annotations"> <i class="glyphicon glyphicon-unchecked"></i> <button type="button" class="show-annotations" title="show annotations">Show annotations</button> </div> <table class="table table-bordered table-collapsed"> <tbody> {{$alertStateToRowClass := .AlertStateToRowClass}} {{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> {{else}} <tr> <td> No alerting rules defined </td> </tr> {{end}} </tbody> </table> </div> {{end}}