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

@@ -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);

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;
+}

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;

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() {

assets/templates/history.html

@@ -0,0 +1,33 @@
+<script type="application/json" id="history-menu">
+<% if (filters.length) { %>
+  <% _.each(filters, function(filter) { %>
+    <% if (filter !== activeFilter) { %>
+      <%= renderTemplate("historyMenuItem", {filter: filter, icon: "fa fa-circle-o transparent"}) %>
+    <% } %>
+  <% }) %>
+<% } %>
+
+<% if (defaultFilter) { %>
+  <%= renderTemplate("historyMenuItem", {filter: defaultFilter, icon: "fa fa-home"}) %>
+<% } %>
+
+<% if (savedFilter) { %>
+  <%= renderTemplate("historyMenuItem", {filter: savedFilter, icon: "fa fa-floppy-o"}) %>
+<% } %>
+</script>
+
+<script type="application/json" id="history-menu-item">
+<li class="history-menu">
+  <a class="cursor-pointer history-menu-item">
+    <span class="rawFilter hidden">
+      <%- filter %>
+    </span>
+    <i class="<%- icon %>"></i>
+    <% _.each(filter.split(","), function(filterItem) { %>
+      <span class="label-list label label-info">
+        <%- filterItem %>
+      </span>
+    <% }) %>
+  </a>
+</li>
+</script>

assets/templates/index.html

@@ -47,6 +47,13 @@
                     </div>
                 </form>
                 <ul class="nav navbar-nav navbar-right">
+                    <li class="dropdown">
+                      <a href="#" id="history" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
+                          title="Filter history" data-toggle="tooltip" data-placement="auto">
+                          <i id="historyList" class="fa fa-history"></i>
+                      </a>
+                      <ul class="dropdown-menu" id="historyMenu"></ul>
+                    </li>
                     <li>
                         <a href="{{ .WebPrefix }}help" id="help" role="button" title="Filter documentation" data-toggle="tooltip" data-placement="auto">
                             <i class="fa fa-question-circle"></i>
@@ -177,3 +184,4 @@
 {{ template "templates/errors.html" }}
 {{ template "templates/modal.html" }}
 {{ template "templates/silence.html" }}
+{{ template "templates/history.html" }}