From 1d1cf5595b30f5dfdc98a60c13fceb2639f80f31 Mon Sep 17 00:00:00 2001 From: Xaver Maierhofer Date: Wed, 22 Jun 2016 03:15:53 +0200 Subject: [PATCH] [TASK] Update node and link infobox with latest json - Includes a cache-breaker variable for stats images --- README.md | 11 ++++++----- config.json | 4 ++-- lib/infobox/link.js | 6 ++++-- lib/infobox/main.js | 24 ++++++++++++++++++++---- lib/infobox/node.js | 3 ++- lib/main.js | 1 + lib/map.js | 8 ++++---- lib/router.js | 21 +++++++++++++-------- 8 files changed, 52 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 3c0142d..93916ef 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ ### Main differences to https://github.com/ffnord/meshviewer #### Some features are maybe merged +- Updates selected node or list (incl. image stats cache-breaker) - not only overview tables - Formatted Code - Grunt inline for some css and js - less requests - Icon font with only needed icons @@ -121,7 +122,7 @@ This option allows to show node statistics depending on following case-sensitive - `caption` is shown, if `thumbnail` is not present (no thumbnail in infobox) To insert current node-id in either `href`, `thumbnail` or `caption` -you can use the case-sensitive template string `{NODE_ID}`. +you can use the case-sensitive template string `{NODE_ID}`, `{NODE_NAME}` and `{TIME}` as cache-breaker. Examples for `nodeInfos`: @@ -129,12 +130,12 @@ Examples for `nodeInfos`: { "name": "Clientstatistik", "href": "stats/dashboard/db/node-byid?var-nodeid={NODE_ID}", - "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=1&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}", + "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=1&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&var-host={NODE_NAME}&_t={TIME}", "caption": "Knoten {NODE_ID}" }, { "name": "Uptime", "href": "stats/dashboard/db/node-byid?var-nodeid={NODE_ID}", - "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=2&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}", + "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=2&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&_t={TIME}", "caption": "Knoten {NODE_ID}" } ] @@ -174,11 +175,11 @@ This option allows to show link statistics depending on the following case-sensi - `caption` is shown, if `thumbnail` is not present (no thumbnail in infobox) To insert the source or target node-id in either `href`, `thumbnail` or `caption` -you can use the case-sensitive template strings `{SOURCE}` and `{TARGET}`. +you can use the case-sensitive template strings `{SOURCE}`, `{TARGET}` and `{TIME}` as cache-breaker. "linkInfos": [ { "href": "stats/dashboard/db/links?var-source={SOURCE}&var-target={TARGET}", - "thumbnail": "stats/render/dashboard-solo/db/links?panelId=1&fullscreen&theme=light&width=800&height=600&var-source={SOURCE}&var-target={TARGET}" + "thumbnail": "stats/render/dashboard-solo/db/links?panelId=1&fullscreen&theme=light&width=800&height=600&var-source={SOURCE}&var-target={TARGET}&_t={TIME}" } ] diff --git a/config.json b/config.json index 15f15eb..0a7ee0a 100644 --- a/config.json +++ b/config.json @@ -5,13 +5,13 @@ { "name": "Clientstatistik", "href": "https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/", - "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=1&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light", + "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=1&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light&_t={TIME}", "caption": "Knoten {NODE_ID} - weiteren Statistiken" }, { "name": "Trafficstatistik", "href": "https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/", - "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=2&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light", + "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=2&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light&_t={TIME}", "caption": "Knoten {NODE_ID} - weiteren Statistiken" } ], diff --git a/lib/infobox/link.js b/lib/infobox/link.js index 4a5b5e0..dc3cd1b 100644 --- a/lib/infobox/link.js +++ b/lib/infobox/link.js @@ -1,10 +1,11 @@ define(["helper"], function (helper) { "use strict"; - function showStatImg(o, source, target) { + function showStatImg(o, source, target, time) { var subst = {}; subst["{SOURCE}"] = source; subst["{TARGET}"] = target; + subst["{TIME}"] = time; return helper.showStat(o, subst); } @@ -46,11 +47,12 @@ define(["helper"], function (helper) { if (config.linkInfos) { var source = d.source.node_id; var target = d.target.node_id; + var time = d.target.node.lastseen.format("DDMMYYYYHmmss"); config.linkInfos.forEach(function (linkInfo) { var h4 = document.createElement("h4"); h4.textContent = linkInfo.name; el.appendChild(h4); - el.appendChild(showStatImg(linkInfo, source, target)); + el.appendChild(showStatImg(linkInfo, source, target, time)); }); } }; diff --git a/lib/infobox/main.js b/lib/infobox/main.js index d9e485b..5db0991 100644 --- a/lib/infobox/main.js +++ b/lib/infobox/main.js @@ -32,15 +32,31 @@ define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Nod el.appendChild(closeButton); } + function clear() { + var closeButton = el.firstChild; + while (el.firstChild) { + el.removeChild(el.firstChild); + } + el.appendChild(closeButton); + } + self.resetView = destroy; - self.gotoNode = function (d) { - create(); + self.gotoNode = function (d, update) { + if (update !== true) { + create(); + } else { + clear(); + } Node(config, el, router, d); }; - self.gotoLink = function (d) { - create(); + self.gotoLink = function (d, update) { + if (update !== true) { + create(); + } else { + clear(); + } Link(config, el, router, d); }; diff --git a/lib/infobox/node.js b/lib/infobox/node.js index 32f01d3..4ead611 100644 --- a/lib/infobox/node.js +++ b/lib/infobox/node.js @@ -237,6 +237,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"], var subst = {}; subst["{NODE_ID}"] = d.nodeinfo.node_id ? d.nodeinfo.node_id : "unknown"; subst["{NODE_NAME}"] = d.nodeinfo.hostname ? d.nodeinfo.hostname.replace(/[^a-z0-9\-]/ig, "_") : "unknown"; + subst["{TIME}"] = d.lastseen.format("DDMMYYYYHmmss"); return helper.showStat(o, subst); } @@ -344,7 +345,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"], } else { td2.textContent = d.id; } - + tr.appendChild(td2); var td3 = document.createElement("td"); diff --git a/lib/main.js b/lib/main.js index 7105397..fb319b7 100644 --- a/lib/main.js +++ b/lib/main.js @@ -181,6 +181,7 @@ define(["moment", "router", "leaflet", "gui", "helper", "moment.de"], update().then(function (d) { gui.setData(d); router.setData(d); + router.update(); }); }, 60000); }) diff --git a/lib/map.js b/lib/map.js index 386458e..0afdee8 100644 --- a/lib/map.js +++ b/lib/map.js @@ -452,16 +452,16 @@ define(["map/clientlayer", "map/labelslayer", updateView(); }; - self.gotoNode = function (d) { + self.gotoNode = function (d, update) { disableTracking(); highlight = {type: "node", o: d}; - updateView(); + updateView(update); }; - self.gotoLink = function (d) { + self.gotoLink = function (d, update) { disableTracking(); highlight = {type: "link", o: d}; - updateView(); + updateView(update); }; self.gotoLocation = function () { diff --git a/lib/router.js b/lib/router.js index 7c9fc4a..849ad8e 100644 --- a/lib/router.js +++ b/lib/router.js @@ -45,25 +45,25 @@ define(["helper"], function (helper) { } } - function gotoNode(d) { + function gotoNode(d, update) { if (!d) { return false; } targets.forEach(function (t) { - t.gotoNode(d); + t.gotoNode(d, update); }); return true; } - function gotoLink(d) { + function gotoLink(d, update) { if (!d) { return false; } targets.forEach(function (t) { - t.gotoLink(d); + t.gotoLink(d, update); }); return true; @@ -84,7 +84,7 @@ define(["helper"], function (helper) { return true; } - function loadState(s) { + function loadState(s, update) { if (!s) { return false; } @@ -100,7 +100,7 @@ define(["helper"], function (helper) { s.slice(2).split(";").forEach(function (d) { var args = d.split(":"); - if (args[0] === "v" && args[1] in views) { + if (update !== true && args[0] === "v" && args[1] in views) { currentView = args[1]; views[args[1]](); } @@ -111,7 +111,7 @@ define(["helper"], function (helper) { id = args[1]; if (id in objects.nodes) { currentObject = {node: objects.nodes[id]}; - gotoNode(objects.nodes[id]); + gotoNode(objects.nodes[id], update); targetSet = true; } } @@ -120,7 +120,7 @@ define(["helper"], function (helper) { id = args[1]; if (id in objects.links) { currentObject = {link: objects.links[id]}; - gotoLink(objects.links[id]); + gotoLink(objects.links[id], update); targetSet = true; } } @@ -225,6 +225,11 @@ define(["helper"], function (helper) { data.graph.links.forEach(function (d) { objects.links[d.id] = d; }); + + }; + + self.update = function () { + loadState(window.location.hash, true); }; return self;