add filters to url search params

Author: maurerle

lib/datadistributor.ts

@@ -32,6 +32,13 @@ export interface Filter {
   run(data: any): Boolean;
 }
 
+export interface GenericFilter extends Filter {
+  getNegate(): boolean;
+  getName(): string;
+  getValue(): string;
+  setNegate(negate: boolean): void;
+}
+
 export type FilterMethod = (node: Node) => boolean;
 
 export const DataDistributor = function () {

lib/filters/genericnode.ts

@@ -1,20 +1,21 @@
 import * as helper from "../utils/helper.js";
-import { Filter } from "../datadistributor.js";
+import { GenericFilter } from "../datadistributor.js";
 import { CanRender } from "../container.js";
 import { Node } from "../utils/node.js";
+import { _ } from "../utils/language.js";
 
 export const GenericNodeFilter = function (
   name: string,
   keys: string[],
   value: string,
   nodeValueModifier: (a: any) => string,
-): Filter & CanRender {
+): GenericFilter & CanRender {
   let negate = false;
   let refresh: () => any;
 
   let label = document.createElement("label");
   let strong = document.createElement("strong");
-  label.textContent = name + ": ";
+  label.textContent = _.t(name) + ": ";
   label.appendChild(strong);
 
   function run(node: Node) {
@@ -56,14 +57,34 @@ export const GenericNodeFilter = function (
     };
   }
 
+  function setNegate(n: boolean) {
+    negate = n;
+  }
+
   function getKey() {
     return value.concat(name);
   }
 
+  function getName() {
+    return name;
+  }
+
+  function getValue() {
+    return value;
+  }
+
+  function getNegate() {
+    return negate;
+  }
+
   return {
     run,
     setRefresh,
     render,
     getKey,
+    getNegate,
+    getName,
+    getValue,
+    setNegate,
   };
 };

lib/proportions.ts

@@ -1,7 +1,7 @@
 import * as d3Interpolate from "d3-interpolate";
 import { Moment } from "moment";
 import { classModule, eventListenersModule, h, init, propsModule, styleModule, VNode } from "snabbdom";
-import { DataDistributor, Filter, ObjectsLinksAndNodes } from "./datadistributor.js";
+import { DataDistributor, Filter, GenericFilter, ObjectsLinksAndNodes } from "./datadistributor.js";
 import { GenericNodeFilter } from "./filters/genericnode.js";
 import * as helper from "./utils/helper.js";
 import { _ } from "./utils/language.js";
@@ -13,6 +13,81 @@ type TableNode = {
   vnode?: VNode;
 };
 
+const statusFieldMapping = {
+  "node.status": {
+    keys: ["is_online"],
+    modifier: function (d: any) {
+      return d ? "online" : "offline";
+    },
+  },
+  "node.firmware": {
+    keys: ["firmware", "release"],
+  },
+  "node.baseversion": {
+    keys: ["firmware", "base"],
+  },
+  "node.deprecationStatus": {
+    keys: ["model"],
+    modifier: function (d: any) {
+      if (window.config.deprecated && d && window.config.deprecated.includes(d)) return _.t("deprecation");
+      if (window.config.eol && d && window.config.eol.includes(d)) return _.t("eol");
+      return _.t("no");
+    },
+  },
+  "node.hardware": {
+    keys: ["model"],
+  },
+  "node.visible": {
+    keys: ["location"],
+    modifier: function (d: any) {
+      return d && d.longitude && d.latitude ? _.t("yes") : _.t("no");
+    },
+  },
+  "node.update": {
+    keys: ["autoupdater"],
+    modifier: function (d: any) {
+      if (d.enabled) {
+        return d.branch;
+      }
+      return _.t("node.deactivated");
+    },
+  },
+  "node.selectedGatewayIPv4": {
+    keys: ["gateway"],
+    modifier: function (nodeid: string | null, data: ObjectsLinksAndNodes) {
+      let gateway = data.nodeDict[nodeid];
+      if (gateway) {
+        return gateway.hostname;
+      }
+      return null;
+    },
+  },
+  "node.selectedGatewayIPv6": {
+    keys: ["gateway6"],
+    modifier: function (nodeid: string | null, data: ObjectsLinksAndNodes) {
+      let gateway = data.nodeDict[nodeid];
+      if (gateway) {
+        return gateway.hostname;
+      }
+      return null;
+    },
+  },
+  "node.domain": {
+    keys: ["domain"],
+    modifier: function (d: any) {
+      if (window.config.domainNames) {
+        window.config.domainNames.some(function (t) {
+          if (d === t.domain) {
+            d = t.name;
+            return true;
+          }
+        });
+      }
+      return d;
+    },
+  },
+};
+
 const patch = init([classModule, propsModule, styleModule, eventListenersModule]);
 
 export const Proportions = function (filterManager: ReturnType<typeof DataDistributor>) {
@@ -26,6 +101,14 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
   let time: Moment;
 
   let tables: Record<string, TableNode> = {};
+  // flag set while we apply filters programmatically from the URL hash
+  let appliedUrlFilters = false;
+  let applyingFilter = false;
+
+  function normalizeKey(s: string | null | undefined) {
+    if (!s) return "";
+    return String(s).replace(/\s+/g, " ").trim();
+  }
 
   function count(nodes: Node[], key: string[], f?: (k: any) => any) {
     let dict = {};
@@ -56,6 +139,35 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
     };
   }
 
+  // Watch filter changes and sync the URL accordingly (but ignore when we are
+  // programmatically applying filters from the hash).
+  filterManager.watchFilters({
+    filtersChanged: function (filters: GenericFilter[]) {
+      const params: { [param: string]: string[] } = {};
+
+      filters.forEach(function (f) {
+        if (!f.getKey) return;
+
+        const name = f.getName();
+        const value = f.getValue();
+        const negate = f.getNegate();
+
+        // Prefix with "!" when negated
+        const encoded = negate ? `!${value}` : value;
+
+        if (!params[name]) {
+          params[name] = [encoded];
+        } else {
+          params[name].push(encoded);
+        }
+      });
+
+      if (appliedUrlFilters) {
+        window.router.setParams(params);
+      }
+    },
+  });
+
   function fillTable(name: string, table: TableNode | undefined, data: any[][]): TableNode {
     let tableNode: TableNode = table ?? {
       element: document.createElement("table"),
@@ -72,7 +184,10 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
     let items = data.map(function (data) {
       let v = data[1] / max;
 
-      let filter = GenericNodeFilter(_.t(name), data[2], data[0], data[3]);
+      let keys = data[2];
+      let value = data[0];
+      let modifierFunction = data[3];
+      let filter = GenericNodeFilter(name, keys, value, modifierFunction);
 
       let a = h("a", { on: { click: addFilter(filter) } }, data[0]);
 
@@ -220,8 +335,46 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
         return b[1] - a[1];
       }),
     );
+
+    if (!appliedUrlFilters) {
+      applyFiltersFromHash();
+    }
   };
 
+  function applyFiltersFromHash() {
+    const params = window.router.getParams();
+    const keys = Object.keys(params);
+    appliedUrlFilters = true;
+    if (keys.length === 0) return;
+
+    applyingFilter = true;
+    try {
+      for (const [param, values] of Object.entries(params)) {
+        if (!statusFieldMapping[param]) {
+          console.warn("unknown_filter_param", param);
+          continue; // continue instead of return to process other params
+        }
+
+        const mapping = statusFieldMapping[param];
+
+        values.forEach(function (encodedValue) {
+          const negate = encodedValue.startsWith("!");
+          if (negate) {
+            encodedValue = encodedValue.slice(1);
+          }
+
+          let filter = GenericNodeFilter(param, mapping.keys, normalizeKey(encodedValue), mapping.modifier);
+          if (negate) {
+            filter.setNegate(true);
+          }
+          filterManager.addFilter(filter);
+        });
+      }
+    } finally {
+      applyingFilter = false;
+    }
+  }
+
   self.render = function render(el: HTMLElement) {
     self.renderSingle(el, "node.status", tables.status.element);
     self.renderSingle(el, "node.firmware", tables.firmware.element);

lib/utils/router.ts

@@ -106,7 +106,7 @@ export class Router extends Navigo {
 
     if (lang && lang !== this.state.lang && lang === this.language.getLocale(lang)) {
       console.debug("Language change reload");
-      location.hash = "/" + match.url;
+      location.hash = "/" + match.hashString;
       location.reload();
     }
 
@@ -146,7 +146,7 @@ export class Router extends Navigo {
     )
       .on(
         // lang, viewValue, node, link, zoom, lat, lon
-        /^\/?(\w{2})?\/?(map|graph)?\/?([a-f\d]{12})?([a-f\d\-]{25})?\/?(?:(\d+)\/(-?[\d.]+)\/(-?[\d.]+))?$/,
+        /^\/?(\w{2})?\/?(map|graph)?\/?([a-f\d]{12})?([a-f\d\-]{25})?\/?(?:(\d+)\/(-?[\d.]+)\/(-?[\d.]+))?(?:\?.*)?$/,
         (match?: Match) => {
           this.customRoute(match);
         },
@@ -206,6 +206,51 @@ export class Router extends Navigo {
     return null;
   }
 
+  // Parse query-like params from the location.hash (everything after '?')
+  getParams(): { [param: string]: string[] } {
+    const hash = location.hash || "";
+    const [, queryString] = hash.split("?");
+    const out: { [param: string]: string[] } = {};
+
+    if (!queryString) {
+      return out;
+    }
+
+    const params = new URLSearchParams(queryString);
+
+    params.forEach(function (value, key) {
+      // value can be something like "v1,!v2"
+      const parts = value.split(",").filter(Boolean);
+
+      if (!out[key]) {
+        out[key] = parts;
+      } else {
+        out[key] = out[key].concat(parts);
+      }
+    });
+
+    return out;
+  }
+
+  // Replace params portion in the current hash with provided params object.
+  // If params is empty, the query portion will be removed.
+  setParams(params: { [param: string]: string[] }) {
+    const hash = location.hash || "";
+    const base = hash.split("?")[0] || "";
+    const keys = Object.keys(params || {});
+    if (!keys.length) {
+      location.hash = base;
+      return;
+    }
+    const qs = new URLSearchParams();
+    keys.forEach(function (k) {
+      // Join multiple values for same key with ","
+      // e.g. map?node.firmware=v1,!v2
+      qs.set(k, params[k].join(","));
+    });
+    location.hash = base + "?" + qs.toString();
+  }
+
   addTarget(target: Target) {
     this.targets.push(target);
   }