From 3dd04eb5f25fa387e6bf77b9cd4edb1165516c41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sat, 22 Jul 2017 22:31:04 -0700 Subject: [PATCH] Rewrire ui.js as CommonJS, add tests --- assets/static/ui.js | 160 +++++++++++++++++++-------------------- assets/static/ui.test.js | 13 ++++ 2 files changed, 93 insertions(+), 80 deletions(-) create mode 100644 assets/static/ui.test.js diff --git a/assets/static/ui.js b/assets/static/ui.js index 354c3a136..c7a811c6b 100644 --- a/assets/static/ui.js +++ b/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; diff --git a/assets/static/ui.test.js b/assets/static/ui.test.js new file mode 100644 index 000000000..35aa6c16c --- /dev/null +++ b/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(); +});