From ea62db3c2f98db8fae295821f3b2d2e5e33f7d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sat, 5 Aug 2017 19:24:54 -0700 Subject: [PATCH 1/8] Save filters usage history to local storage and provide a dropdown menu to access it This allows to quickly select recently used filters from a dropdown. It also shows default (configured by unsee admin) filter and the saved one (saved by the user to a cookie) --- assets/static/__mocks__/templatesMock.js | 1 + assets/static/base.css | 15 ++++- assets/static/filters.js | 79 +++++++++++++++++++++++- assets/static/templates.js | 6 +- assets/templates/history.html | 33 ++++++++++ assets/templates/index.html | 8 +++ 6 files changed, 139 insertions(+), 3 deletions(-) create mode 100644 assets/templates/history.html diff --git a/assets/static/__mocks__/templatesMock.js b/assets/static/__mocks__/templatesMock.js index 72aa4f95a..6aa69656f 100644 --- a/assets/static/__mocks__/templatesMock.js +++ b/assets/static/__mocks__/templatesMock.js @@ -9,6 +9,7 @@ function loadTemplates() { "modal.html", "silence.html", "summary.html", + "history.html", ]; templateFiles.forEach(function(filename){ var templatePath = path.join(__dirname, "../../templates/", filename); diff --git a/assets/static/base.css b/assets/static/base.css index 5721cc432..3b81a4af2 100644 --- a/assets/static/base.css +++ b/assets/static/base.css @@ -141,7 +141,7 @@ span.label-ts-span { /* make filter input take all the space it can */ div.filterbar { - width: 950px; + width: 905px; } div.filterbar > .input-group-addon.input-sm { width: 10px; @@ -186,12 +186,14 @@ div.bootstrap-tagsinput > .twitter-typeahead > input.tt-input { /* menus uses links with icons instead of buttons, fix focus color so the link doesn't stay colored after clicking */ +#history:focus, #help:focus, #settings:focus, #refresh:focus { color: #fff; } +#history:hover, #help:hover, #settings:hover, #refresh:hover { @@ -498,3 +500,14 @@ a[aria-expanded=false] .fa-chevron-down { .alert-static-elements { margin-bottom: 4px; } + +.transparent { + opacity: 0; +} + +li.history-menu > a.history-menu-item { + padding-left: 10px; + padding-right: 4px; + padding-top: 2px; + padding-bottom: 6px; +} diff --git a/assets/static/filters.js b/assets/static/filters.js index 9fe8e5cea..5009b2dea 100644 --- a/assets/static/filters.js +++ b/assets/static/filters.js @@ -13,11 +13,15 @@ require("./bootstrap-tagsinput.less"); const autocomplete = require("./autocomplete"); const unsee = require("./unsee"); const querystring = require("./querystring"); +const templates = require("./templates"); var selectors = { filter: "#filter", - icon: "#filter-icon" + icon: "#filter-icon", + historyMenu: "#historyMenu" }; +var appendsEnabled = true; +const historyKey = "filterHistory"; function addBadge(text) { $.each($("span.tag"), function(i, tag) { @@ -64,12 +68,65 @@ function setPause() { $(selectors.icon).removeClass("fa-circle-o-notch fa-spin fa-search").addClass("fa-pause"); } +function renderHistory() { + const storage = window.localStorage; + + var historicFilters = []; + + const currentFilterText = getFilters().join(","); + + const history = storage.getItem(historyKey); + if (history) { + historicFilters = history.split("\n"); + } + + var historyMenuHTML = templates.renderTemplate("historyMenu", { + activeFilter: currentFilterText, + defaultFilter: $(selectors.filter).data("default-filter"), + savedFilter: Cookies.get("defaultFilter.v2"), + filters: historicFilters + }); + $(selectors.historyMenu).html(historyMenuHTML); +} + +function appendFilterToHistory(text) { + // require non empty text and enabled appends + if (!text || !appendsEnabled) return false; + + const storage = window.localStorage; + + // final filter list we'll save to storage + var filterList = [ text ]; + + // get current history list from storage and append it to our final list + // of filters, but avoid duplicates + const history = storage.getItem(historyKey); + if (history) { + const historyArr = history.split("\n"); + for (var i = 0; i < historyArr.length; i++) { + var h = historyArr[i]; + if (filterList.indexOf(h) < 0) { + filterList.push(h); + } + } + } + + // truncate the history to up to 11 elements + filterList = filterList.slice(0, 11); + + storage.setItem(historyKey, filterList.join("\n")); +} + function setFilters() { setUpdating(); // update location so it's easy to share it querystring.update("q", getFilters().join(",")); + // append filter to the history and render it + appendFilterToHistory(getFilters().join(",")); + renderHistory(); + // reload alerts unsee.triggerReload(); } @@ -141,6 +198,26 @@ function init() { $("body").css("padding-top", $(".navbar").height()); }); + renderHistory(); + $(selectors.historyMenu).on("click", "a.history-menu-item", function(event) { + var elem = $(event.target).parents("li.history-menu"); + const historyArr = elem.find(".rawFilter").text().trim().split(","); + // we need to add filters one by one, this would reload alerts on every + // add() so let's pause reloads and resume once we're done with updating + // filters + unsee.pause(); + // disable history appends as it would record each new filter in the + // history + appendsEnabled = false; + $(selectors.filter).tagsinput("removeAll"); + for (var i = 0; i < historyArr.length; i++) { + $(selectors.filter).tagsinput("add", historyArr[i]); + } + // enable everything again + appendsEnabled = true; + unsee.resume(); + }); + } exports.init = init; diff --git a/assets/static/templates.js b/assets/static/templates.js index c2e8f605a..2035ed6cb 100644 --- a/assets/static/templates.js +++ b/assets/static/templates.js @@ -45,7 +45,11 @@ var templates = {}, alertGroupLabels: "#alert-group-labels", alertGroupElements: "#alert-group-elements", alertGroupSilence: "#alert-group-silence", - alertGroupLabelMap: "#alert-group-label-map" + alertGroupLabelMap: "#alert-group-label-map", + + // history dropdown + historyMenu: "#history-menu", + historyMenuItem: "#history-menu-item" }; function getConfig() { diff --git a/assets/templates/history.html b/assets/templates/history.html new file mode 100644 index 000000000..3881cfc8c --- /dev/null +++ b/assets/templates/history.html @@ -0,0 +1,33 @@ + + + diff --git a/assets/templates/index.html b/assets/templates/index.html index 5c600fe72..b2eb79523 100644 --- a/assets/templates/index.html +++ b/assets/templates/index.html @@ -47,6 +47,13 @@