Support redaction mode.

src/rust/lqos_node_manager/static/circuit_queue.html

@@ -54,7 +54,7 @@
             <div class="col-sm-12 bg-light center-txt">
                 <div class="row">
                     <div class="col-sm-4">
-                        <span id="circuitName" class="bold"></span>
+                        <span id="circuitName" class="bold redact"></span>
                     </div>
                     <div class="col-sm-6">
                         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

src/rust/lqos_node_manager/static/config.html

@@ -63,7 +63,8 @@
 
 <div class="d-flex align-items-start">
     <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-wifi"></i> Network</button>
+        <button class="nav-link active" id="v-pills-display-tab" data-bs-toggle="pill" data-bs-target="#v-pills-display" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-tv"></i> Display</button>
+        <button class="nav-link" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-wifi"></i> Network</button>
         <button class="nav-link" id="v-pills-shaper-tab" data-bs-toggle="pill" data-bs-target="#v-pills-shaper" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-balance-scale"></i> Shaper</button>
         <button class="nav-link" id="v-pills-server-tab" data-bs-toggle="pill" data-bs-target="#v-pills-server" type="button" role="tab" aria-controls="v-pills-server" aria-selected="false"><i class="fa fa-server"></i> Server</button>
         <button class="nav-link" id="v-pills-tuning-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tuning" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-warning"></i> Tuning</button>
@@ -72,7 +73,41 @@
         <button class="nav-link" id="v-pills-users-tab" data-bs-toggle="pill" data-bs-target="#v-pills-users" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-users"></i> LibreQoS Users</button>
     </div>
     <div class="tab-content" id="v-pills-tabContent">
-        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
+        <div class="tab-pane fade show active" id="v-pills-display" role="tabpanel" aria-labelledby="v-pills-display-tab">
+            <h2><i class="fa fa-wifi"></i> Display Settings</h2>
+            <table class="table">
+                <tr>
+                    <td>
+                        <p class="alert alert-info" role="alert">
+                            <i class="fa fa-info"></i> The settings on this tab are per-computer and are stored locally in your browser's "local storage".
+                        </p>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input class="form-check-input" type="checkbox" id="redact">
+                        <label class="form-check-label" for="redact">
+                            Redact Customer Information (screenshot mode)
+                        </label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <select id="colorMode">
+                            <option id="0">Regular Colors</option>
+                            <option id="1">Metaverse Colors</option>
+                        </select>
+                        <label class="form-select-label" for="colorMode">
+                            RTT Color Mode
+                        </label>
+                    </td>
+                </tr>
+                <tr>
+                    <td><a class="btn btn-primary" id="applyDisplay">Apply Changes</a></td>
+                </tr>
+            </table>
+        </div>
+        <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
             <h2><i class="fa fa-wifi"></i> Network Settings</h2>
 
             <table class="table">
@@ -388,6 +423,7 @@
         let lqosd_config = null;
 
         function start() {
+            display();
             colorReloadButton();
             updateHostCounts();
             $.get("/api/admin_check", (is_admin) => {
@@ -434,7 +470,6 @@
                         lqosd_config = data;
                         $.get("/api/list_nics", (data) => {
                             nics = data;
-                            console.log(nics);
                             fillNicList("nicCore", python_config.isp_interface);
                             fillNicList("nicInternet", python_config.internet_interface);
 
@@ -576,6 +611,28 @@
             return html;
         }
 
+        function display() {
+            let colorPreference = window.localStorage.getItem("colorPreference");
+            if (colorPreference == null) {
+                window.localStorage.setItem("colorPreference", 0);
+                colorPreference = 0;
+            }
+            $("#colorMode option[id='" + colorPreference + "']").attr("selected", true);
+            let redact = window.localStorage.getItem("redact");
+            if (redact == null) {
+                window.localStorage.setItem("redact", false);
+                redact = false;
+            }
+            if (redact == "false") redact = false;
+            $("#redact").prop('checked', redact);
+            $("#applyDisplay").on('click', () => {
+                let colorPreference = $("#colorMode").find('option:selected').attr('id');
+                window.localStorage.setItem("colorPreference", colorPreference);
+                let redact = $("#redact").prop('checked');
+                window.localStorage.setItem("redact", redact);
+            });
+        }
+
         $(document).ready(start);
     </script>
 

src/rust/lqos_node_manager/static/lqos.css

@@ -11,3 +11,4 @@
 .mbot4 { margin-bottom: 4px; }
 .mbot8 { margin-bottom: 8px; }
 .row220 { height: 220px; }
+.redact { font-display: unset; }

src/rust/lqos_node_manager/static/lqos.js

@@ -1,5 +1,3 @@
-var colorPreference = 0;
-
 function metaverse_color_ramp(n) {
     if (n <= 9) {
         return "#32b08c";
@@ -25,6 +23,11 @@ function regular_color_ramp(n) {
 }
 
 function color_ramp(n) {
+    let colorPreference = window.localStorage.getItem("colorPreference");
+    if (colorPreference == null) {
+        window.localStorage.setItem("colorPreference", 0);
+        colorPreference = 0;
+    }
     if (colorPreference == 0) {
         return regular_color_ramp(n);
     } else {
@@ -32,18 +35,6 @@ function color_ramp(n) {
     }
 }
 
-function bindColorToggle() {
-    $("#toggleColors").on('click', () => {
-        if (colorPreference == 0) {
-            colorPreference = 1;
-            $("#toggleColors").text("(metaverse colors)");
-        } else {
-            colorPreference = 0;
-            $("#toggleColors").text("(regular colors)");
-        }
-    });
-}
-
 function deleteAllCookies() {
     const cookies = document.cookie.split(";");
 
@@ -56,6 +47,23 @@ function deleteAllCookies() {
     window.location.reload();
 }
 
+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];
+}
+
 function updateHostCounts() {
     $.get("/api/host_counts", (hc) => {
         $("#shapedCount").text(hc[0]);
@@ -70,7 +78,7 @@ function updateHostCounts() {
             html = "<a class='nav-link' onclick='deleteAllCookies();'><i class='fa fa-user'></i> Logout " + un + "</a>";
         }
         $("#currentLogin").html(html);
-    })
+    });    
 }
 
 function colorReloadButton() {
@@ -89,7 +97,21 @@ function colorReloadButton() {
         } else {
             $("#btnReload").addClass('btn-secondary');
         }
-    })
+    });
+
+    // Redaction
+    let redact = localStorage.getItem("redact");
+    if (redact == null) {
+        localStorage.setItem("redact", false);
+        redact = false;
+    }
+    if (redact == "false") {
+        refact = false;
+    }
+    if (redact) {
+        console.log("Redacting");
+        css_getclass(".redact").style.filter = "blur(4px)";
+    }
 }
 
 function scaleNumber(n) {

src/rust/lqos_node_manager/static/main.html

@@ -136,7 +136,7 @@
         <div class="col-sm-6">
             <div class="card bg-light">
                 <div class="card-body">
-                    <h5 class="card-title"><i class='fa fa-arrow-down'></i> Top 10 Downloaders <a href="#" id="toggleColors" style="font-size: 8pt;">(Regular colors)</a></h5>
+                    <h5 class="card-title"><i class='fa fa-arrow-down'></i> Top 10 Downloaders</h5>
                     <div id="top10dl"></div>
                 </div>
             </div>
@@ -260,7 +260,7 @@
                 let color = color_ramp(tt[i].median_tcp_rtt);
                 html += "<tr style='background-color: " + color + "'>";
                 if (tt[i].circuit_id != "") {
-                    html += "<td><a href='/circuit_queue?id=" + encodeURI(tt[i].circuit_id)  + "'>" + tt[i].ip_address + "</td>";
+                    html += "<td><a class='redact' href='/circuit_queue?id=" + encodeURI(tt[i].circuit_id)  + "'>" + tt[i].ip_address + "</td>";
                 } else {
                     html += "<td>" + tt[i].ip_address + "</td>";
                 }
@@ -319,7 +319,6 @@
             updateWorst10();
             updateHistogram();
             updateHostCounts();
-            bindColorToggle();
             updateThroughputQuantile();
 
             $("#startTest").on('click', () => {

src/rust/lqos_node_manager/static/shaped.html

@@ -97,10 +97,10 @@
             let html = "";
             for (let i=0; i<devices.length; i++) {
                 html += "<tr>";
-                html += "<td><a href='/circuit_queue?id=" + encodeURI(devices[i].circuit_id) + "'>" + devices[i].circuit_id + ": " +devices[i].circuit_name + "</a></td>";
-                html += "<td>" + devices[i].device_id + ": " + devices[i].device_name + "</td>";
+                html += "<td><a class='redact' href='/circuit_queue?id=" + encodeURI(devices[i].circuit_id) + "'>" + devices[i].circuit_id + ": " +devices[i].circuit_name + "</a></td>";
+                html += "<td class='redact'>" + devices[i].device_id + ": " + devices[i].device_name + "</td>";
                 html += "<td>" + devices[i].download_min_mbps + "/" + devices[i].upload_max_mbps + "</td>";
-                html += "<td style='font-size: 8pt'>";
+                html += "<td style='font-size: 8pt' class='redact'>";
                 for (let j=0; j<devices[i].ipv4.length; j++) {
                     html += devices[i].ipv4[j][0] + "/" + devices[i].ipv4[j][1] + "<br />";
                 }