js: Append a unique container id to the Window-Id

Generates a semi-random id for containers other than the menu and col1.
This id is then appended to the Window-Id of every request separated by
an underscore: `window-id_container-id`

refs #3609

public/js/icinga/loader.js

@@ -107,7 +107,12 @@
 
             // Ask for a new window id in case we don't already have one
             if (this.icinga.ui.hasWindowId()) {
-                headers['X-Icinga-WindowId'] = this.icinga.ui.getWindowId();
+                var windowId = this.icinga.ui.getWindowId();
+                var containerId = this.icinga.ui.getUniqueContainerId($target);
+                if (containerId) {
+                    windowId = windowId + '_' + containerId;
+                }
+                headers['X-Icinga-WindowId'] = windowId;
             } else {
                 headers['X-Icinga-WindowId'] = 'undefined';
             }

public/js/icinga/ui.js

@@ -196,7 +196,8 @@
                 'data-icinga-url': $col.data('icingaUrl'),
                 'data-icinga-refresh': $col.data('icingaRefresh'),
                 'data-last-update': $col.data('lastUpdate'),
-                'data-icinga-module': $col.data('icingaModule')
+                'data-icinga-module': $col.data('icingaModule'),
+                'data-icinga-container-id': $col.data('icingaContainerId')
               },
               'class': $col.attr('class')
             };
@@ -205,6 +206,7 @@
             $col.removeData('icingaRefresh');
             $col.removeData('lastUpdate');
             $col.removeData('icingaModule');
+            $col.removeData('icingaContainerId');
             $col.removeAttr('class').attr('class', 'container');
             return props;
         },
@@ -216,6 +218,7 @@
             $col.data('icingaRefresh', backup['data']['data-icinga-refresh']);
             $col.data('lastUpdate', backup['data']['data-last-update']);
             $col.data('icingaModule', backup['data']['data-icinga-module']);
+            $col.data('icingaContainerId', backup['data']['data-icinga-container-id']);
         },
 
         triggerWindowResize: function () {
@@ -692,6 +695,29 @@
             this.fixControls();
         },
 
+        getUniqueContainerId: function ($cont) {
+            if (typeof $cont === 'undefined' || !$cont.length) {
+                return null;
+            }
+
+            var containerId = $cont.data('icingaContainerId');
+            if (typeof containerId === 'undefined') {
+                /**
+                 * Only generate an id if it's not for col1 or the menu (which are using the non-suffixed window id).
+                 * This is based on the assumption that the server only knows about the menu and first column
+                 * and therefore does not need to protect its ids. (As the menu is most likely part of the sidebar)
+                 */
+                if ($cont.attr('id') === 'menu' || $cont.attr('id') === 'col1') {
+                    return null;
+                }
+
+                containerId = this.icinga.utils.generateId(6); // Random because the content may move
+                $cont.data('icingaContainerId', containerId);
+            }
+
+            return containerId;
+        },
+
         getWindowId: function () {
             if (! this.hasWindowId()) {
                 return undefined;

public/js/icinga/utils.js

@@ -404,6 +404,37 @@
                 str = padding + str;
             }
             return str;
+        },
+
+        /**
+         * Shuffle a string
+         *
+         * @param   {String}    str     The string to shuffle
+         *
+         * @returns {String}    The shuffled string
+         */
+        shuffleString: function(str) {
+            var a = str.split(""),
+                n = a.length;
+
+            for(var i = n - 1; i > 0; i--) {
+                var j = Math.floor(Math.random() * (i + 1));
+                var tmp = a[i];
+                a[i] = a[j];
+                a[j] = tmp;
+            }
+            return a.join("");
+        },
+
+        /**
+         * Generate an id
+         *
+         * @param   {Number}    len     The desired length of the id
+         *
+         * @returns {String}    The id
+         */
+        generateId: function(len) {
+            return this.shuffleString('abcefghijklmnopqrstuvwxyz').substr(0, len);
         }
     };