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">
  <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">
            <%- 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>

  <hr class="separator">

  <div class="row">
    <div class="col-sm-6">
      <label class="control-label">Starts at</label>
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-calendar"></i>
        </span>
        <input type="datetime"
               class="form-control datetime-picker"
               id="startsAt"
               value="<%= moment().format("YYYY-MM-DD HH:mm:ss") %>"
               name="startsAt"
               required>
      </div>
    </div>
    <div class="col-sm-6">
      <label class="control-label">Ends at</label>
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-calendar"></i>
        </span>
        <input type="datetime"
               class="form-control datetime-picker"
               id="endsAt"
               value="<%= moment().add(1, 'hours').format("YYYY-MM-DD HH:mm:ss") %>"
               name="endsAt"
               required>
      </div>
    </div>
  </div>

  <hr class="separator">

  <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">

  <a class="text-muted" 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 class="collapse" id="silenceJSON">
    <p class="text-muted">
    </p>
    <pre id="silenceJSONBlob"></pre>
  </div>

  <div class="text-center">
    <button id="silenceSubmit" type="submit" class="btn btn-success">Create</button>
  </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>