karma/assets/static/ui.js

/* globals Alerts, Autocomplete, Filters, Summary, Templates, Unsee */

/* exported UI */
var UI = (function() {

    // 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);
            });
        });
        $("#labelModal").on("hidden.bs.modal", function() {
            var modal = $(this);
            modal.find(".modal-title").children().remove();
            modal.find(".modal-body").children().remove();
            Unsee.WaitForNextReload();
        });
    };

    // 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);
        });
    };

    // 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"
            });
        });
    };

    var setupAlertGroupUI = function(elem) {
        setupGroupLinkHover(elem);
        setupGroupTooltips(elem);
    };

    var init = function() {
        setupModal();
    };

    return {
        Init: init,
        SetupAlertGroupUI: setupAlertGroupUI,
        SetupTooltips: setupGroupTooltips
    };

})();