{{define "head"}} <link type="text/css" rel="stylesheet" href="/static/css/alerts.css"> <script src="/static/js/alerts.js"></script> {{end}} {{define "content"}} <div class="container-fluid"> <h2>Alerts</h2> <table class="table table-bordered table-collapsed"> <tbody> {{$alertStateToRowClass := .AlertStateToRowClass}} {{range .AlertingRules}} {{$activeAlerts := .ActiveAlerts}} <tr class="{{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 class="alert_description"> <span class="label alert_rule">{{.HTMLSnippet}}</span> <a href="#" class="silence_children_link">Silence All Children…</a> </div> {{if $activeAlerts}} <table class="table table-bordered table-hover table-condensed alert_elements_table"> <tr class=""> <th>Labels</th> <th>State</th> <th>Active Since</th> <th>Value</th> <th>Silence</th> </tr> {{range $activeAlerts}} <tr class="{{index $alertStateToRowClass .State}}"> <td>{{.Labels}}</td> <td>{{.State}}</td> <td>{{.ActiveSince}}</td> <td>{{.Value}}</td> <td><a href="#" class="silence_alert_link">Silence…</button><td> </tr> {{end}} </table> {{end}} </td> </tr> {{end}} </tbody> </table> </div> {{end}}