mirror of
https://github.com/prymitive/karma
synced 2026-05-09 03:36:44 +00:00
216 lines
7.6 KiB
HTML
216 lines
7.6 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">
|
|
<% _.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>
|
|
<% }) %>
|
|
</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>
|