Show correct label colors in the silence form

When the silence form is rendered we make a new alerts.json request to pull all instances of the alert being silenced and populate select boxes, so that user can silence not only currently displayed alerts, but all firing ones. When we do that only alerts displayed (matching filters) are colored properly because only those had color data in the global state, so some instances in those select boxes will be missing color data. To fix this merge global color data (from filtered alerts) with colors for alerts we collected, so when rendering happens we have color data for all instances.

assets/static/colors.js

@@ -13,6 +13,10 @@ var Colors = (function() {
         colors = colorData;
     };
 
+    var merge = function(colorData) {
+        $.extend(colors, colorData);
+    };
+
     var getClass = function(key, value) {
         var label = key + ": " + value;
         if (key == "alertname") {
@@ -47,6 +51,7 @@ var Colors = (function() {
 
     return {
         Update: update,
+        Merge: merge,
         Get: getStyle,
         GetClass: getClass,
         GetStaticLabels: getStaticLabels,

assets/static/silence.js

@@ -1,6 +1,6 @@
 /* globals moment */     // moment.js
 
-/* globals Alerts, Templates, Unsee, UI */
+/* globals Alerts, Colors, Templates, Unsee, UI */
 
 /* exported Silence */
 var Silence = (function() {
@@ -191,6 +191,8 @@ var Silence = (function() {
                     );
                 },
                 success: function(data) {
+                    // add colors from the response to global color set
+                    Colors.Merge(data.colors);
                     var modal = $("#silenceModal");
                     var labels = {};
                     var alertmanagers = {};