prometheus/web/ui/templates/alerts.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 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}}