[TASK] Add node.owner filter; auto-select nodes tab for filter URLs

lib/gui.ts

@@ -107,7 +107,7 @@ export const Gui = function (language: ReturnType<typeof Language>) {
   let title = Title();
 
   let header = Container("header");
-  let infobox = Infobox(sidebar, linkScale);
+  let infobox = Infobox(sidebar, linkScale, fanout);
   let tabs = Tabs();
   let overview = Container();
   let legend = Legend(language);
@@ -146,6 +146,12 @@ export const Gui = function (language: ReturnType<typeof Language>) {
   tabs.add("sidebar.stats", statistics);
   tabs.add("sidebar.about", about);
 
+  // If filters are present in the URL, switch to the "nodes" tab on load
+  let urlParams = router.getParams();
+  if (Object.keys(urlParams).length > 0) {
+    tabs.select("node.nodes");
+  }
+
   router.addTarget(title);
   router.addTarget(infobox);
 

lib/infobox/main.ts

@@ -5,9 +5,13 @@ import { location } from "./location.js";
 import { Link as LinkData, Node as NodeData, NodeId } from "../utils/node.js";
 import { Sidebar } from "../sidebar.js";
 import { TargetLocation } from "../utils/router.js";
-import { ObjectsLinksAndNodes } from "../datadistributor.js";
+import { DataDistributor, ObjectsLinksAndNodes } from "../datadistributor.js";
 
-export const Main = function (sidebar: ReturnType<typeof Sidebar>, linkScale: (t: any) => any) {
+export const Main = function (
+  sidebar: ReturnType<typeof Sidebar>,
+  linkScale: (t: any) => any,
+  filterManager?: ReturnType<typeof DataDistributor>,
+) {
   const self = {
     resetView: undefined,
     gotoNode: undefined,
@@ -55,7 +59,7 @@ export const Main = function (sidebar: ReturnType<typeof Sidebar>, linkScale: (t
 
   self.gotoNode = function gotoNode(nodeData: NodeData, nodeDict: { [k: NodeId]: NodeData }) {
     create();
-    node = Node(el, nodeData, linkScale, nodeDict);
+    node = Node(el, nodeData, linkScale, nodeDict, filterManager);
     node.render();
   };
 

lib/infobox/node.ts

@@ -5,6 +5,8 @@ import { SortTable } from "../sorttable.js";
 import * as helper from "../utils/helper.js";
 import nodef, { Neighbour, Node as NodeData, NodeId } from "../utils/node.js";
 import { NodeInfo } from "../config_default.js";
+import { DataDistributor } from "../datadistributor.js";
+import { GenericNodeFilter } from "../filters/genericnode.js";
 
 const patch = init([classModule, propsModule, styleModule, eventListenersModule]);
 
@@ -43,7 +45,13 @@ function showDevicePictures(pictures: string, device: NodeData) {
   return helper.showDevicePicture(pictures, subst);
 }
 
-export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any, nodeDict: { [k: NodeId]: NodeData }) {
+export function Node(
+  el: HTMLElement,
+  node: NodeData,
+  linkScale: (t: any) => any,
+  nodeDict: { [k: NodeId]: NodeData },
+  filterManager?: ReturnType<typeof DataDistributor>,
+) {
   let config = window.config;
   let router = window.router;
 
@@ -218,7 +226,29 @@ export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any
 
       if (field) {
         if (typeof field !== "object") {
-          field = h("td", field);
+          if (row.value === "owner" && filterManager) {
+            let ownerValue = String(field);
+            let filter = GenericNodeFilter("node.owner", ["owner"], ownerValue, undefined);
+            field = h("td", [
+              h(
+                "a",
+                {
+                  style: { cursor: "pointer" },
+                  on: {
+                    click: function () {
+                      filterManager.addFilter(filter);
+                      router.fullUrl();
+                      let nodesTab = document.querySelector('.tabs li[data-tab="node.nodes"]') as HTMLLIElement;
+                      if (nodesTab) nodesTab.click();
+                    },
+                  },
+                },
+                ownerValue,
+              ),
+            ]);
+          } else {
+            field = h("td", field);
+          }
         }
         attributeTable.children.push(h("tr", [row.name !== undefined ? h("th", _.t(row.name)) : null, field]));
       }

lib/proportions.ts

@@ -79,6 +79,9 @@ const statusFieldMapping: Record<string, MappingEntry> = {
       return d;
     },
   },
+  "node.owner": {
+    keys: ["owner"],
+  },
 };
 
 const patch = init([classModule, propsModule, styleModule, eventListenersModule]);
@@ -258,6 +261,7 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
     processMapping("node.selectedGatewayIPv4");
     processMapping("node.selectedGatewayIPv6");
     processMapping("node.domain");
+    processMapping("node.owner");
 
     if (!appliedUrlFilters) {
       applyFiltersFromHash();
@@ -304,6 +308,7 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
     self.renderSingle(el, "node.selectedGatewayIPv4");
     self.renderSingle(el, "node.selectedGatewayIPv6");
     self.renderSingle(el, "node.domain");
+    self.renderSingle(el, "node.owner");
 
     if (config.globalInfos) {
       let images = document.createElement("div");

lib/tabs.ts

@@ -5,6 +5,7 @@ export const Tabs = function () {
   const self = {
     add: undefined,
     render: undefined,
+    select: undefined,
   };
 
   let tabs = document.createElement("ul");
@@ -39,6 +40,7 @@ export const Tabs = function () {
   self.add = function add(title: string, child: CanRender) {
     let li = document.createElement("li");
     li.textContent = _.t(title);
+    li.setAttribute("data-tab", title);
     li.onclick = switchTab;
     // @ts-ignore
     li.child = child;
@@ -58,6 +60,16 @@ export const Tabs = function () {
     }
   };
 
+  self.select = function select(title: string) {
+    for (let i = 0; i < tabs.children.length; i++) {
+      let li = tabs.children[i] as HTMLLIElement;
+      if (li.getAttribute("data-tab") === title) {
+        gotoTab(li);
+        return;
+      }
+    }
+  };
+
   self.render = function render(el: HTMLElement) {
     el.appendChild(tabs);
     el.appendChild(container);

lib/utils/node.ts

@@ -42,6 +42,7 @@ export interface Node {
   node_id: NodeId;
   hostname: string;
   domain?: string;
+  owner?: string;
   firstseen: Moment;
   lastseen: Moment;
   is_online: boolean;

public/locale/cz.json

@@ -21,6 +21,7 @@
     "visible": "Visible on the map",
     "update": "Automatický update",
     "domain": "Domain",
+    "owner": "Kontakt",
     "gateway": "Brána",
     "coordinates": "Souřadnice",
     "contact": "Kontakt",

public/locale/de.json

@@ -21,6 +21,7 @@
     "visible": "Auf der Karte sichtbar",
     "update": "Auto-Update",
     "domain": "Domain",
+    "owner": "Kontakt",
     "gateway": "Gateway",
     "coordinates": "Koordinaten",
     "contact": "Kontakt",

public/locale/en.json

@@ -21,6 +21,7 @@
     "visible": "Visible on the map",
     "update": "Auto update",
     "domain": "Domain",
+    "owner": "Contact",
     "gateway": "Gateway",
     "coordinates": "Coordinates",
     "contact": "Contact",

public/locale/fr.json

@@ -21,6 +21,7 @@
     "visible": "Visible sur la carte",
     "update": "Mise à jour automatique",
     "domain": "Domain",
+    "owner": "Contact",
     "gateway": "Passerelle",
     "coordinates": "Coordonnées",
     "contact": "Contact",

public/locale/ru.json

@@ -21,6 +21,7 @@
     "visible": "Видно на карте",
     "update": "Автообновление",
     "domain": "Сайт",
+    "owner": "Контакты",
     "gateway": "Шлюз",
     "coordinates": "Координаты",
     "contact": "Контакты",

public/locale/tr.json

@@ -21,6 +21,7 @@
     "visible": "Harita üzerinde görünür",
     "update": "Otomatik güncelleme",
     "domain": "Domain",
+    "owner": "İlişki",
     "gateway": "Geçit",
     "coordinates": "Koordinatlar",
     "contact": "İlişki",