karma/assets/templates/alertgroup.html

<script type="application/json" id="alert-group-title">
  <% if (Object.keys(group.labels).length > 0) { %>
    <% var filters = ['@receiver=' + group.receiver] %>
    <% _.each(group.labels, function(label_val, label_key) { filters.push(label_key + '=' + label_val) }) %>
    <% var groupLink = '?q=' + filters.join(',') %>
    <span class="pull-left alert-group-link">
      <a href="<%= groupLink %>" title="Link to this alert group", data-toggle="tooltip" data-placement="top">
        <i class="fa fa-share-square-o"/>
      </a>
    </span>
    <% if (group.alerts.length > 1) { %>
    <span class="badge pull-right">
      <%- group.alerts.length %>
    </span>
    <% } %>
    <div class="panel-title">
      <% if (Object.keys(group.labels).length > 0) { %>
        <% _.each(sortMapByKey(group.labels), function(label) { %>
          <% var attrs = getLabelAttrs(label.key, label.value) %>
          <%= renderTemplate('buttonLabel', {elem: 'div', elemClass: 'label label-list', attrs: attrs, label: label}) %>
        <% }) %>
      <% } else { %>
        <div class="label-list label"></div>
      <% } %>
    </div>
  <% } %>
</script>

<script type="application/json" id="alert-group-annotations">
  <% var hiddenCount = 0 %>
  <% _.each(alert.annotations, function(annotation) { %>
    <% if (annotation.isLink === false) { %>
      <% if (annotation.visible === false) { hiddenCount++ } %>
      <%= renderTemplate('alertAnnotation', {annotation: annotation}) %>
    <% } %>
  <% }) %>
  <% if (hiddenCount) { %>
    <span class="label label-default label-list cursor-pointer"
          data-toggle="toggle-hidden-annotation"
          type="button">
        <i class="fa fa-search-plus" title="Toggle hidden annotations" data-toggle="tooltip" data-placement="top" />
    </span>
  <% } %>
  <% _.each(alert.annotations, function(annotation) { %>
    <% if (annotation.isLink) { %>
      <a class="label label-list label-default"
         href="<%= annotation.value %>"
         target="_blank"
         title="<%= annotation.value %>"
         data-toggle="tooltip"
         data-placement="top">
        <i class="fa fa-external-link"/>
        <%- annotation.name %>
      </a>
    <% } %>
  <% }) %>
</script>

<script type="application/json" id="alert-group-labels">
  <% _.each(sortMapByKey(alert.labels), function(label) { %>
    <% if (group.labels[label.key] == undefined) { %>
      <% var attrs = getLabelAttrs(label.key, label.value) %>
      <%= renderTemplate('buttonLabel', {elem: 'span', attrs: attrs, label: label}) %>
    <% } %>
  <% }) %>
</script>

<script type="application/json" id="alert-group-elements">
  <% var cls_indicator = 'incident-indicator-danger' %>
  <% if (alert.state === "suppressed") { cls_indicator = 'incident-indicator-success' } %>
  <div class="alert-static-elements">
    <% _.each(alert.alertmanager, function(am){ %>
      <% var labelCls = "label-primary" %>
      <% if (am.state === "suppressed") { %>
        <% labelCls = "label-success" %>
      <% } else if (am.state === "unprocessed") { %>
        <% labelCls = "label-default" %>
      <% } %>
      <a class="label label-list <%- labelCls %>"
         href="<%= am.source %>"
         target="_blank"
         title="Go to the alert source"
         data-toggle="tooltip"
         data-placement="top">
         <%- am.name %>
      </a>
    <% }) %>
    <% var attrs = getLabelAttrs("@state", alert.state) %>
    <%= renderTemplate('buttonLabel', {elem: 'span', attrs: attrs, label: {key: '@state', value: alert.state, text: alert.state}}) %>
    <% if (alert.state != "suppressed") { %>
      <% var labels = [] %>
      <% var alertmanagers = [] %>
      <% _.each(sortMapByKey(alert.labels), function(label) { %>
        <% labels.push(label.key + '=' + label.value) %>
      <% }) %>
      <% _.each(alert.alertmanager, function(alertmanager){ %>
        <% alertmanagers.push(alertmanager.name) %>
      <% }) %>
      <% alertmanagers.sort() %>
      <span class="label label-list label-success cursor-pointer"
            type="button"
            data-labels="<%= labels.join(',') %>"
            data-alertmanagers="<%= alertmanagers.join(',') %>"
            data-alertname="<%= alert.labels.alertname %>"
            data-toggle="modal"
            data-target="#silenceModal">
          <i class="fa fa-bell-slash" title="Silence this alert" data-toggle="tooltip" data-placement="top" />
      </span>
    <% } %>
    <% var attrs = getLabelAttrs("@receiver", alert.receiver) %>
    <%= renderTemplate('buttonLabel', {elem: 'span', attrs: attrs, label: {key: '@receiver', value: alert.receiver, text: alert.receiver}}) %>
    <a class="label label-list label-default label-age label-ts"
       data-toggle="tooltip"
       data-placement="top"
       data-ts="<%= alert.startsAt %>">
       <span class="label-ts-span">
        <%- alert.startsAt %>
       </span>
       <div class="incident-indicator hidden <%= cls_indicator %>">
       </div>
    </a>
  </div>
</script>

<script type="application/json" id="alert-group-silence">
  <% _.each(alert.alertmanager, function(am) { %>
    <% _.each(am.silences, function(silence) { %>
      <div class="silence-block well">
        <button type="button"
                class="close silence-delete"
                title="Delete this silence"
                data-toggle="tooltip"
                data-placement="top"
                data-alertmanager-uri="<%- am.uri %>"
                data-silence-id="<%- silence.id %>">
          <span class="fa fa-trash-o"></span>
        </button>
        <blockquote class="silence-comment">
          <% if (silence.jiraURL) { %>
            <a href="<%= silence.jiraURL %>" target="_blank">
              <i class="fa fa-external-link"/>
              <%- silence.comment %>
            </a>
          <% } else { %>
            <%- silence.comment %>
          <% } %>
          <br/>
          <% if (alert.alertmanager.length > 1) { %>
            <div class="label label-list label-primary">
              <%- am.name %>
            </div>
          <% } %>
          <div class="label label-list label-default label-age label-ts cursor-help"
             data-toggle="tooltip"
             data-placement="top"
             data-ts="<%= silence.startsAt %>">
             Started
             <span class="label-ts-span">
              <%- silence.startsAt %>
             </span>
          </div>
          <div class="label label-list label-default label-age label-ts cursor-help"
             data-toggle="tooltip"
             data-placement="top"
             data-ts="<%= silence.endsAt %>">
             Ends
             <span class="label-ts-span">
              <%- silence.endsAt %>
             </span>
          </div>
          <% _.each(silence.matchers, function(matcher) { %>
            <div class="label label-list label-success">
              <% var matcherOperator = "=" %>
              <% if (matcher.isRegex) { %>
                <% matcherOperator = "=~" %>
              <% } %>
              <%- matcher.name %><%- matcherOperator %><%- matcher.value %>
            </div>
          <% }) %>
          <footer>
            <cite>
              <abbr>
                <%- silence.createdBy %>
              </abbr>
            </cite>
          </footer>
        </blockquote>
      </div>
    <% }) %>
  <% }) %>
</script>

<script type="application/json" id="alert-group-label-map">
  <% var labelArr = [] %>
  <% _.each(labelMap, function(label, text) { %>
    <% labelArr.push({text: text, key: label.key, value: label.value, hits: label.hits}) %>
  <% }) %>
  <% labelArr.sort(function(a, b) { %>
    <% if (a.hits < b.hits) return 1 %>
    <% if (a.hits > b.hits) return -1 %>
    <% if (a.text > b.text) return 1 %>
    <% if (a.text < b.text) return -1 %>
    <% return 0 %>
  <% }) %>

  <div class="panel-body incident-group-separator">
    <div class="incident-group">
      <% var skippedLabel = '+' + skipped %>
      <% if (skipped == 1) { %>
        <% skippedLabel += " alert" %>
      <% } else { %>
        <% skippedLabel += " alerts" %>
      <% } %>
      <div class="incident-group">
        <span class="badge">
          <%- skippedLabel %>
        </span>
        <% var rendered = 0 %>
        <!--
        can't use underscore each() here as it doesn't support breaking the loop
        with 'return false', use jquery method
        -->
        <% $.each(labelArr, function(i, label) { %>
          <% if (rendered > 8 && labelArr.length > 10) { %>
            <span class="label label-list label-default">
              <% var skippedCount = labelArr.length - rendered %>
              <% if (skippedCount == 1) { %>
                +<%- skippedCount %> label
              <% } else { %>
                +<%- skippedCount %> labels
              <% } %>
            </span>
            <% return false %>
          <% } else { %>
            <% rendered++ %>
            <% var attrs = getLabelAttrs(label.key, label.value) %>
            <% if (label.hits > 1) { %>
              <div class="label-trim-group">
                <%= renderTemplate('buttonLabel', {elem: 'span', elemClass: 'label label-trim-tag', attrs: attrs, label: label}) %>
                <span class="label label-default label-trim-count">
                  <%- label.hits %>
                </span>
              </div>
            <% } else { %>
              <%= renderTemplate('buttonLabel', {elem: 'span', attrs: attrs, label: label}) %>
            <% } %>
          <% } %>
        <% }) %>
      </div>
    </div>
  </div>
</script>

<script type="application/json" id="alert-group">
  <div class="incident" id="<%= group.id %>" data-hash="<%= group.hash %>">
    <% var cls_panel = 'panel-default' %>
    <% if (group.stateCount.active > 0) { %>
      <% cls_panel = 'panel-danger' %>
    <% } else if (group.stateCount.suppressed > 0) { %>
      <% cls_panel = 'panel-success' %>
    <% } %>
    <div class="panel <%= cls_panel %>">
      <div class="panel-heading text-center">
        <%= renderTemplate('alertGroupTitle', {group: group}) %>
      </div>
      <% var labelMap = {} %>
      <% var skipped = 0 %>
      <% _.each(group.alerts, function(alert, i) { %>
        <% if (i > alertLimit - 1) { %>
          <% skipped++ %>
          <% _.each(alert.labels, function(label_val, label_key) { %>
            <% var text = label_key + ': ' + label_val %>
            <% if (group.labels[label_key] == undefined) { %>
              <% if (labelMap[text] == undefined) { labelMap[text] = {key: label_key, value: label_val, hits: 0} } %>
              <% labelMap[text].hits++ %>
            <% } %>
          <% }) %>
          <% var stateText = '@state: ' + alert.state %>
          <% if (labelMap[stateText] == undefined) { labelMap[stateText] = {key: '@state', value: alert.state, hits: 0} } %>
          <% labelMap[stateText].hits++ %>
        <% } else { %>
          <% var cls_body = '' %>
          <% if (i < group.alerts.length - 1) { cls_body = 'incident-group-separator' } %>
          <div class="panel-body <%= cls_body %>">
            <div class="incident-group">
              <%= renderTemplate('alertGroupAnnotations', {alert: alert}) %>
              <%= renderTemplate('alertGroupLabels', {alert: alert, group: group}) %>
              <%= renderTemplate('alertGroupElements', {alert: alert}) %>
              <%= renderTemplate('alertGroupSilence', {alert: alert}) %>
            </div>
          </div>
        <% } %>
      <% }) %>
      <% if (!$.isEmptyObject(labelMap)) { %>
        <%= renderTemplate('alertGroupLabelMap', {labelMap: labelMap, skipped: skipped}) %>
      <% } %>
    </div>
  </div>
</script>

<script type="application/json" id="label-button-filter">
  <% if (elemClass == undefined) { var elemClass = '' } %>
  <% if (attrs == undefined) { var attrs = {class: '', style: ''} } %>
  <<%= elem %> class="<%= elemClass %> <%= attrs.class %>"
        style="<%= attrs.style %>"
        type="button"
        data-label-type="filter"
        data-label-key="<%= label.key %>"
        data-label-val="<%= label.value %>"
        data-toggle="modal"
        data-target="#labelModal">
    <%- label.text %>
  </<%= elem %>>
</script>

<script type="application/json" id="alert-annotation">
<% var cls = "" %>
<% if (annotation.visible === false) { %>
  <% cls = "hidden hidden-annotation" %>
<% } %>
<div class="well well-sm annotation-well <%- cls %>">
  <i class="fa fa-info-circle text-muted" title="<%- annotation.name %>" data-toggle="tooltip" data-placement="top"/>
  <%= linkify(_.escape(annotation.value)) %>
</div>
</script>