Rewrire ui.js as CommonJS, add tests

assets/static/ui.js

@@ -1,87 +1,87 @@
-/* globals Alerts, Autocomplete, Filters, Summary, Templates, Unsee */
+const $ = require("jquery");
 
-/* exported UI */
-var UI = (function() {
+const alerts = require("./alerts");
+const autocomplete = require("./autocomplete");
+const filters = require("./filters");
+const summary = require("./summary");
+const templates = require("./templates");
+const unsee = require("./unsee");
 
-    // when user click on any alert label modal popup with a list of possible
-    // filter will show, this function is used to setup that modal
-    var setupModal = function() {
-        $("#labelModal").on("show.bs.modal", function(event) {
-            Unsee.Pause();
-            var modal = $(this);
-            var label = $(event.relatedTarget);
-            var labelKey = label.data("label-key");
-            var labelVal = label.data("label-val");
-            var attrs = Alerts.GetLabelAttrs(labelKey, labelVal);
-            var counter = Summary.Get(labelKey, labelVal);
-            modal.find(".modal-title").html(
-                Templates.Render("modalTitle", {
-                    attrs: attrs,
-                    counter: counter
-                })
-            );
-            var hints = Autocomplete.GenerateHints(labelKey, labelVal);
-            modal.find(".modal-body").html(
-                Templates.Render("modalBody", {hints: hints})
-            );
-            $(".modal-table").on("click", ".modal-button-filter", function(elem) {
-                var filter = $(elem.target).data("filter-append-value");
-                $("#labelModal").modal("hide");
-                Filters.AddFilter(filter);
-            });
+// when user click on any alert label modal popup with a list of possible
+// filter will show, this function is used to setup that modal
+function setupModal() {
+    $("#labelModal").on("show.bs.modal", function(event) {
+        unsee.pause();
+        var modal = $(this);
+        var label = $(event.relatedTarget);
+        var labelKey = label.data("label-key");
+        var labelVal = label.data("label-val");
+        var attrs = alerts.getLabelAttrs(labelKey, labelVal);
+        var counter = summary.getCount(labelKey, labelVal);
+        modal.find(".modal-title").html(
+            templates.renderTemplate("modalTitle", {
+                attrs: attrs,
+                counter: counter
+            })
+        );
+        var hints = autocomplete.generateHints(labelKey, labelVal);
+        modal.find(".modal-body").html(
+            templates.renderTemplate("modalBody", {hints: hints})
+        );
+        $(".modal-table").on("click", ".modal-button-filter", function(elem) {
+            var filter = $(elem.target).data("filter-append-value");
+            $("#labelModal").modal("hide");
+            filters.addFilter(filter);
         });
-        $("#labelModal").on("hidden.bs.modal", function() {
-            var modal = $(this);
-            modal.find(".modal-title").children().remove();
-            modal.find(".modal-body").children().remove();
-            Unsee.WaitForNextReload();
+    });
+    $("#labelModal").on("hidden.bs.modal", function() {
+        var modal = $(this);
+        modal.find(".modal-title").children().remove();
+        modal.find(".modal-body").children().remove();
+        unsee.resume();
+    });
+}
+
+// each alert group have a link generated for it, but we hide it until
+// user hovers over that group so it doesn"t trash the UI
+function setupGroupLinkHover(elem) {
+    $(elem).on("mouseenter", function() {
+        $(this).find(".alert-group-link > a").finish().animate({
+            opacity: 100
+        }, 200);
+    });
+    $(elem).on("mouseleave", function() {
+        $(this).find(".alert-group-link > a").finish().animate({
+            opacity: 0
+        }, 200);
+    });
+}
+
+// find all elements inside alert group panel that will use tooltips
+// and setup those
+function setupGroupTooltips(groupElem) {
+    $.each(groupElem.find("[data-toggle=tooltip]"), function(i, elem) {
+        $(elem).tooltip({
+            animation: false, // slows down tooltip removal
+            delay: {
+                show: 500,
+                hide: 0
+            },
+            title: $(elem).attr("title") || $(elem).data("ts-title"),
+            trigger: "hover"
         });
-    };
+    });
+}
 
-    // each alert group have a link generated for it, but we hide it until
-    // user hovers over that group so it doesn"t trash the UI
-    var setupGroupLinkHover = function(elem) {
-        $(elem).on("mouseenter", function() {
-            $(this).find(".alert-group-link > a").finish().animate({
-                opacity: 100
-            }, 200);
-        });
-        $(elem).on("mouseleave", function() {
-            $(this).find(".alert-group-link > a").finish().animate({
-                opacity: 0
-            }, 200);
-        });
-    };
+function setupAlertGroupUI(elem) {
+    setupGroupLinkHover(elem);
+    setupGroupTooltips(elem);
+}
 
-    // find all elements inside alert group panel that will use tooltips
-    // and setup those
-    var setupGroupTooltips = function(groupElem) {
-        $.each(groupElem.find("[data-toggle=tooltip]"), function(i, elem) {
-            $(elem).tooltip({
-                animation: false, // slows down tooltip removal
-                delay: {
-                    show: 500,
-                    hide: 0
-                },
-                title: $(elem).attr("title") || $(elem).data("ts-title"),
-                trigger: "hover"
-            });
-        });
-    };
+function init() {
+    setupModal();
+}
 
-    var setupAlertGroupUI = function(elem) {
-        setupGroupLinkHover(elem);
-        setupGroupTooltips(elem);
-    };
-
-    var init = function() {
-        setupModal();
-    };
-
-    return {
-        Init: init,
-        SetupAlertGroupUI: setupAlertGroupUI,
-        SetupTooltips: setupGroupTooltips
-    };
-
-})();
+exports.init = init;
+exports.setupAlertGroupUI = setupAlertGroupUI;
+exports.setupGroupTooltips = setupGroupTooltips;

assets/static/ui.test.js

@@ -0,0 +1,13 @@
+const ui = require("./ui");
+
+test("ui init()", () => {
+    ui.init();
+});
+
+test("ui setupAlertGroupUI()", () => {
+    ui.setupAlertGroupUI();
+});
+
+test("ui setupGroupTooltips()", () => {
+    ui.setupGroupTooltips();
+});