Add an icon to error messages

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

@@ -84,3 +84,8 @@
   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>