Merge pull request #68 from cloudflare/silence-form-tweaks

Silence form tweaks

assets/static/templates.js

@@ -22,6 +22,7 @@ var Templates = (function(params) {
           // modal popup with silence form
           silenceForm: '#silence-form',
           silenceFormSuccess: '#silence-form-success',
+          silenceFormError: '#silence-form-error',
 
           // label button
           buttonLabel: '#label-button-filter',

assets/static/ui.js

@@ -154,7 +154,8 @@ var UI = (function(params) {
             });
 
             if (payload["matchers"].length == 0) {
-                $("#newSilenceAlert").html("Select at least on label").removeClass("hidden");
+                var errContent = Templates.Render("silenceFormError", {error: "Select at least on label"});
+                $("#newSilenceAlert").html(errContent).removeClass("hidden");
                 return false;
             }
 
@@ -179,7 +180,8 @@ var UI = (function(params) {
                       }
                   }
 
-                  $("#newSilenceAlert").html(err).removeClass("hidden");
+                  var errContent = Templates.Render("silenceFormError", {error: err});
+                  $("#newSilenceAlert").html(errContent).removeClass("hidden");
               },
               success: function(data, textStatus, xhr) {
                   if (data["status"] == "success") {
@@ -189,7 +191,8 @@ var UI = (function(params) {
                     }));
                   } else {
                     var err = "Invalid response from Alertmanager API: " + JSON.stringify(data);
-                    $("#newSilenceAlert").html(err).removeClass("hidden");
+                    var errContent = Templates.Render("silenceFormError", {error: err});
+                    $("#newSilenceAlert").html(errContent).removeClass("hidden");
                   }
               },
               dataType: "json"

assets/templates/silence.html

@@ -3,46 +3,47 @@
 <form id="newSilenceForm">
   <label class="control-label">Labels to match</label>
   <% _.each(labels, function(label) { %>
-    <div class="checkbox label-checkbox">
-    <label>
-      <input type="checkbox"
-             checked="checked"
-             name="<%= label.key %>=<%= label.value %>">
-      <div class="label-list label <%= label.attrs.class %>" style="<%= label.attrs.style %>">
-        <%- label.attrs.text %>
-      </div>
-    </label>
-  </div>
+    <div>
+      <label>
+        <input type="checkbox"
+               checked="checked"
+               name="<%= label.key %>=<%= label.value %>">
+        <span class="<%= label.attrs.class %>" style="<%= label.attrs.style %>">
+          <%- label.attrs.text %>
+        </span>
+      </label>
+    </div>
   <% }) %>
 
   <hr class="separator">
 
-  <label class="control-label">Duration</label>
   <div class="row">
     <div class="col-sm-6">
+      <label class="control-label">Starts at</label>
       <div class="input-group date">
+        <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>
-        <span class="input-group-addon">
-          <i class="fa fa-calendar"></i>
-        </span>
       </div>
     </div>
     <div class="col-sm-6">
+      <label class="control-label">Ends at</label>
       <div class="input-group date">
+        <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(4, 'hours').format("YYYY-MM-DD HH:mm:ss") %>"
                name="endsAt"
                required>
-         <span class="input-group-addon">
-           <i class="fa fa-calendar"></i>
-         </span>
       </div>
     </div>
   </div>
@@ -50,23 +51,31 @@
   <hr class="separator">
 
   <div class="form-group">
-    <label for="createdBy" class="control-label">Email</label>
-    <input type="email"
-           class="form-control"
-           id="createdBy"
-           placeholder="Email"
-           name="createdBy"
-           required>
+    <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">
-    <label for="comment" class="control-label">Comment</label>
-    <input type="text"
-           class="form-control"
-           id="comment"
-           placeholder="Comment"
-           name="comment"
-           required>
+    <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">
@@ -82,6 +91,11 @@
   <i class="fa fa-check-circle"></i>
 </div>
 <p class="text-center">
-  Silence ID: <span class="text-success"><%= silenceID %></span>
+  Silence ID: <span class="text-success"><%- silenceID %></span>
 </p>
 </script>
+
+<script type="application/json" id="silence-form-error">
+<i class="fa fa-exclamation-circle"></i>
+<%- error %>
+</script>