karma/assets/templates/silence.html

<script type="application/json" id="silence-form">
<div id="newSilenceAlert" class="alert alert-danger hidden" role="alert"></div>
<form id="newSilenceForm">
  <div>
    <label class="control-label">Alertmanager</label>
    <select class="selectpicker silence-alertmanager-picker"
            data-style="silence-label-select"
            data-icon-base="fa"
            data-tick-icon="fa-check"
            data-width="fit"
            data-select-all-text="<i class='fa fa-check-square-o'></i>"
            data-deselect-all-text="<i class='fa fa-square-o'></i>"
            data-multiple-separator=" "
            <% if (Object.keys(alertmanagers).length > 1) { %>data-actions-box="true"<% } %>
            multiple
            required>
      <% _.each(alertmanagers, function(am) { %>
          <option <% if (_.contains(selectedAlertmanagers, am.name)) { %>selected="selected"<% } %>
                  value="<%= am.uri %>"
                  data-content="<span class='label label-list label-primary'><%- am.name %></span>">
            <%- am.name %>
          </option>
      <% }) %>
    </select>
  </div>

  <label class="control-label">Labels to match</label>
  <table class="table table-condensed silence-label-selects">
    <% if (Object.keys(labels).length > 0) { %>
      <% _.each(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"
                    data-icon-base="fa"
                    data-tick-icon="fa-check"
                    data-width="fit"
                    data-select-all-text="<i class='fa fa-check-square-o'></i>"
                    data-deselect-all-text="<i class='fa fa-square-o'></i>"
                    data-multiple-separator=" "
                    data-selected-text-format="count > 1"
                    <% if (Object.keys(label.value).length > 10) { %>data-live-search="true"<% } %>
                    <% if (Object.keys(label.value).length > 1) { %>data-actions-box="true"<% } %>
                    multiple>
              <% _.each(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-results">
<table class="table">
  <% _.each(alertmanagers, function(alertmanager) { %>
    <tr>
      <td>
        <span class="label label-list label-primary">
          <%- alertmanager.name %>
        </span>
      </td>
      <td class="silence-post-result" data-uri="<%- alertmanager.uri %>">
        <div class="text-center text-muted">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
      </td>
    </tr>
  <% }) %>
</table>
</script>

<script type="application/json" id="silence-form-validation-error">
<p class="text-center">
  <i class="fa fa-exclamation-circle"></i>
  <%- error %>
</p>
</script>

<script type="application/json" id="silence-form-success">
<p class="text-success">
  <i class="fa fa-check-circle"></i>
  <%- silenceID %>
</p>
</script>

<script type="application/json" id="silence-form-error">
<p class="text-danger">
  <i class="fa fa-exclamation-circle"></i>
  <%- error %>
</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-loading">
<div class="silence-result-icon text-center text-muted">
  <i class="fa fa-refresh fa-spin"></i>
</div>
</script>