mirror of
https://github.com/prymitive/karma
synced 2026-05-11 03:46:48 +00:00
b1873963df
If user clicks on a silence button we make AJAX call to the /alerts.json endpoint to get all instances of given alert so we can allow user to select from all labels used. But it's possible that this alert will be resolved by the time user clicks on it, when this happens we simply list no labels, which might be confusing, show a message so user knows what happened.
225 lines
7.9 KiB
HTML
225 lines
7.9 KiB
HTML
<script type="application/json" id="silence-form">
|
|
<div id="newSilenceAlert" class="alert alert-danger hidden" role="alert"></div>
|
|
<form id="newSilenceForm">
|
|
<label class="control-label">Labels to match</label>
|
|
<table class="table table-condensed silence-label-selects">
|
|
<% if (Object.keys(labels).length > 0) { %>
|
|
<% _.each(Alerts.SortMapByKey(labels), function(label) { %>
|
|
<tr>
|
|
<td align="center">
|
|
<span class="badge select-label-badge" title="Click to select / deselect all values" data-toggle="tooltip">
|
|
<%- Object.keys(label.value).length %>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<select class="selectpicker silence-label-picker"
|
|
data-label-key="<%= label.key %>"
|
|
data-style="silence-label-select"
|
|
<% if (Object.keys(label.value).length > 10) { %>data-live-search="true"<% } %>
|
|
<% if (Object.keys(label.value).length > 1) { %>data-actions-box="true"<% } %>
|
|
multiple>
|
|
<% _.each(Alerts.SortMapByKey(label.value), function(label_val) { %>
|
|
<option <% if (label_val.value.selected) { %>selected="selected"<% } %>
|
|
value="<%= label_val.key %>"
|
|
data-content="<span class='<%= label_val.value.attrs.class %>' style='<%= label_val.value.attrs.style %>'><%- label_val.value.attrs.text %></span>">
|
|
<%- label_val.value.attrs.text %>
|
|
</option>
|
|
<% }) %>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<% }) %>
|
|
<% } else { %>
|
|
<tr>
|
|
<td align="center" class="text-muted">
|
|
<i class="fa fa-info-circle"></i>
|
|
No labels to match on, all alerts are already resolved.
|
|
</td>
|
|
</tr>
|
|
<% } %>
|
|
</table>
|
|
|
|
<div>
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation">
|
|
<a href="#startsAtTab" aria-controls="startsAtTab" role="tab" data-toggle="tab">
|
|
Starts <span id="silence-start-description"></span>
|
|
</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#endsAtTab" aria-controls="endsAtTab" role="tab" data-toggle="tab">
|
|
Ends <span id="silence-end-description"></span>
|
|
</a>
|
|
</li>
|
|
<li role="presentation" class="active">
|
|
<a href="#duration" aria-controls="duration" role="tab" data-toggle="tab">
|
|
Duration
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane fade" id="startsAtTab">
|
|
<div id="startsAt" class="datetime-picker"></div>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane fade" id="endsAtTab">
|
|
<div id="endsAt" class="datetime-picker"></div>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane active fade in" id="duration">
|
|
<table class="table-condensed silence-duration-table">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a href="#" class="btn silence-duration-btn" data-duration-action="increment" data-duration-unit="days" data-duration-step="1">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
</td>
|
|
<td></td>
|
|
<td class="silence-separator"></td>
|
|
<td>
|
|
<a href="#" class="btn silence-duration-btn" data-duration-action="increment" data-duration-unit="hours" data-duration-step="1">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
</td>
|
|
<td></td>
|
|
<td class="silence-separator"></td>
|
|
<td>
|
|
<a href="#" class="btn silence-duration-btn" data-duration-action="increment" data-duration-unit="minutes" data-duration-step="5">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="silence-duration-days" class="text-center silence-duration-text">0</div>
|
|
</td>
|
|
<td class="silence-duration-label">
|
|
<span class="text-center text-muted">days</span>
|
|
</td>
|
|
<td class="silence-separator"></td>
|
|
<td>
|
|
<div id="silence-duration-hours" class="text-center silence-duration-text">0</div>
|
|
</td>
|
|
<td class="silence-duration-label">
|
|
<span class="text-center text-muted">hours</span>
|
|
</td>
|
|
<td class="silence-separator"></td>
|
|
<td>
|
|
<div id="silence-duration-minutes" class="text-center silence-duration-text">0</div>
|
|
</td>
|
|
<td class="silence-duration-label">
|
|
<span class="text-center text-muted">minutes</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a href="#" class="btn silence-duration-btn" data-duration-action="decrement" data-duration-unit="days" data-duration-step="1">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</a>
|
|
</td>
|
|
<td></td>
|
|
<td class="silence-separator"></td>
|
|
<td>
|
|
<a href="#" class="btn silence-duration-btn" data-duration-action="decrement" data-duration-unit="hours" data-duration-step="1">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</a>
|
|
</td>
|
|
<td></td>
|
|
<td class="silence-separator"></td>
|
|
<td>
|
|
<a href="#" class="btn silence-duration-btn" data-duration-action="decrement" data-duration-unit="minutes" data-duration-step="5">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</a>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<i class="fa fa-envelope"></i>
|
|
</span>
|
|
<input type="email"
|
|
class="form-control"
|
|
id="createdBy"
|
|
placeholder="Email"
|
|
name="createdBy"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<i class="fa fa-comment"></i>
|
|
</span>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="comment"
|
|
placeholder="Comment"
|
|
name="comment"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="separator">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<a class="text-muted icon-as-button" data-toggle="collapse" href="#silenceJSON" aria-expanded="false" aria-controls="silenceJSON">
|
|
<i class="fa fa-chevron-right"></i>
|
|
<i class="fa fa-chevron-down"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<button id="silenceSubmit" type="submit" class="btn btn-success">
|
|
<i class="fa fa-floppy-o"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="collapse" id="silenceJSON">
|
|
<pre id="silenceJSONBlob"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</script>
|
|
|
|
<script type="application/json" id="silence-form-success">
|
|
<div class="silence-result-icon text-center text-success">
|
|
<i class="fa fa-check-circle"></i>
|
|
</div>
|
|
<p class="text-center">
|
|
Silence ID: <span class="text-success"><%- silenceID %></span>
|
|
</p>
|
|
</script>
|
|
|
|
<script type="application/json" id="silence-form-fatal">
|
|
<div class="silence-result-icon text-center text-danger">
|
|
<i class="fa fa-exclamation-circle"></i>
|
|
</div>
|
|
<p class="text-center">
|
|
New silence form rendering failed.
|
|
</p>
|
|
<p class="text-center">
|
|
<%- error %>
|
|
</p>
|
|
</script>
|
|
|
|
<script type="application/json" id="silence-form-error">
|
|
<i class="fa fa-exclamation-circle"></i>
|
|
<%- error %>
|
|
</script>
|
|
|
|
<script type="application/json" id="silence-form-loading">
|
|
<div class="silence-result-icon text-center text-muted">
|
|
<i class="fa fa-refresh fa-spin"></i>
|
|
</div>
|
|
</script>
|