mirror of
https://github.com/prymitive/karma
synced 2026-05-09 03:36:44 +00:00
c6288d27a2
This adds silence ID to the list of rendered silence elements, clicking on it will allow to copy it to the clipboard. Fixes #203
333 lines
13 KiB
HTML
333 lines
13 KiB
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 cursor-pointer click-to-copy"
|
|
title="Click to copy this silence ID to clipboard"
|
|
data-toggle="tooltip"
|
|
data-placement="top"
|
|
data-clipboard-text="<%- silence.id %>">
|
|
<%- silence.id %>
|
|
</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>
|