Add simple blur redaction.

src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js

@@ -2,6 +2,7 @@ import {BaseDashlet} from "./base_dashlet";
 import {RttHistogram} from "../graphs/rtt_histo";
 import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
+import {redactCell} from "../helpers/redact";
 
 export class Top10Downloaders extends BaseDashlet {
     constructor(slot) {
@@ -54,6 +55,7 @@ export class Top10Downloaders extends BaseDashlet {
 
                 let ip = document.createElement("td");
                 ip.innerText = r.ip_address;
+                redactCell(ip);
                 row.append(ip);
 
                 let dl = document.createElement("td");

src/rust/lqosd/src/node_manager/js_build/src/dashlets/top_tree_summary.js

@@ -1,6 +1,7 @@
 import {BaseDashlet} from "./base_dashlet";
 import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
+import {redactCell} from "../helpers/redact";
 
 export class TopTreeSummary extends BaseDashlet {
     constructor(slot) {
@@ -42,7 +43,9 @@ export class TopTreeSummary extends BaseDashlet {
             let tbody = document.createElement("tbody");
             msg.data.forEach((r) => {
                 let row = document.createElement("tr");
-                row.appendChild(simpleRow(r[1].name));
+                let name = simpleRow(r[1].name);
+                redactCell(name);
+                row.appendChild(simpleRow(name));
                 row.appendChild(simpleRow(scaleNumber(r[1].current_throughput[0])));
                 row.appendChild(simpleRow(scaleNumber(r[1].current_throughput[1])));
                 t.appendChild(row);

src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_downloaders.js

@@ -2,6 +2,7 @@ import {BaseDashlet} from "./base_dashlet";
 import {RttHistogram} from "../graphs/rtt_histo";
 import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
+import {redactCell} from "../helpers/redact";
 
 export class Worst10Downloaders extends BaseDashlet {
     constructor(slot) {
@@ -54,6 +55,7 @@ export class Worst10Downloaders extends BaseDashlet {
 
                 let ip = document.createElement("td");
                 ip.innerText = r.ip_address;
+                redactCell(ip);
                 row.append(ip);
 
                 let dl = document.createElement("td");

src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_retransmits.js

@@ -2,6 +2,7 @@ import {BaseDashlet} from "./base_dashlet";
 import {RttHistogram} from "../graphs/rtt_histo";
 import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
+import {redactCell} from "../helpers/redact";
 
 export class Worst10Retransmits extends BaseDashlet {
     constructor(slot) {
@@ -54,6 +55,7 @@ export class Worst10Retransmits extends BaseDashlet {
 
                 let ip = document.createElement("td");
                 ip.innerText = r.ip_address;
+                redactCell(ip);
                 row.append(ip);
 
                 let dl = document.createElement("td");

src/rust/lqosd/src/node_manager/js_build/src/helpers/redact.js

@@ -0,0 +1,59 @@
+export function initRedact() {
+    let modeSwitch = document.getElementById("redactSwitch");
+    modeSwitch.checked = isRedacted();
+    modeSwitch.onclick = () => {
+        let modeSwitch = document.getElementById("redactSwitch");
+        if (modeSwitch.checked) {
+            localStorage.setItem("redact", "true");
+        } else {
+            localStorage.setItem("redact", "false");
+        }
+        cssRedact();
+    };
+    cssRedact();
+}
+
+export function redactCell(cell) {
+    cell.classList.add("redactable");
+}
+
+function cssRedact() {
+    if (isRedacted()) {
+        let css = css_getclass(".redactable");
+        css.style.filter = "blur(4px)";
+    } else {
+        let css = css_getclass(".redactable");
+        css.style.filter = "";
+    }
+}
+
+function isRedacted() {
+    let prefs = localStorage.getItem("redact");
+    if (prefs === null) {
+        localStorage.setItem("redact", "false");
+        return false;
+    }
+    if (prefs === "false") {
+        return false;
+    }
+    if (prefs === "true") {
+        return true;
+    }
+}
+
+function cssrules() {
+    var rules = {};
+    for (var i = 0; i < document.styleSheets.length; ++i) {
+        var cssRules = document.styleSheets[i].cssRules;
+        for (var j = 0; j < cssRules.length; ++j)
+            rules[cssRules[j].selectorText] = cssRules[j];
+    }
+    return rules;
+}
+
+function css_getclass(name) {
+    var rules = cssrules();
+    if (!rules.hasOwnProperty(name))
+        throw 'TODO: deal_with_notfound_case';
+    return rules[name];
+}

src/rust/lqosd/src/node_manager/js_build/src/index.js

@@ -1,6 +1,8 @@
 import {Dashboard} from "./dashlets/dashboard";
 import {checkForUpgrades} from "./toasts/version_check";
+import {initRedact} from "./helpers/redact";
 
+initRedact();
 checkForUpgrades("toasts");
 const dashboard = new Dashboard("dashboard");
 dashboard.build();

src/rust/lqosd/src/node_manager/static2/node_manager.css

@@ -78,4 +78,5 @@ body.dark-mode {
     min-width: 500px;
     min-height: 500px;
 }
-.dashEditButton { }
+.dashEditButton { }
+.redactable { }

src/rust/lqosd/src/node_manager/static2/template.html

@@ -80,6 +80,13 @@
                             <label class="form-check-label" for="darkModeSwitch"><i class="fa fa-moon-o"></i> Day/Night</label>
                         </div>
                     </li>
+                    <!-- Redact switch -->
+                    <li class="nav-item">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="redactSwitch">
+                            <label class="form-check-label" for="redactSwitch"><i class="fa fa-user-secret"></i> Redact</label>
+                        </div>
+                    </li>
                     <hr />
                     <!-- User Info -->
                     <li class="nav-item">