Tree view supports max-depth support, persisted in the browser.

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

@@ -4,6 +4,8 @@ import {subscribeWS} from "./pubsub/ws";
 
 var tree = null;
 var parent = 0;
+var maxDepth = 1;
+var subscribed = false;
 
 // This runs first and builds the initial structure on the page
 function getInitialTree() {
@@ -40,9 +42,11 @@ function getInitialTree() {
             if (node.immediate_parent !== null && node.immediate_parent === parent) {
                 let row = buildRow(i);
                 tbody.appendChild(row);
+                if (maxDepth > 1) {
                     iterateChildren(i, tbody, 1);
                 }
             }
+        }
         treeTable.appendChild(tbody);
 
         // Clear and apply
@@ -50,7 +54,10 @@ function getInitialTree() {
         clearDiv(target)
         target.appendChild(treeTable);
 
+        if (!subscribed) {
             subscribeWS(["NetworkTree"], onMessage);
+            subscribed = true;
+        }
     });
 }
 
@@ -83,10 +90,12 @@ function iterateChildren(idx, tBody, depth) {
         if (node.immediate_parent !== null && node.immediate_parent === tree[idx][0]) {
             let row = buildRow(i, depth);
             tBody.appendChild(row);
+            if (depth < maxDepth-1) {
                 iterateChildren(i, tBody, depth + 1);
             }
         }
     }
+}
 
 function buildRow(i, depth=0) {
     let node = tree[i][1];
@@ -298,4 +307,15 @@ if (params.parent !== null) {
     parent = 0;
 }
 
+if (localStorage.getItem("treeMaxDepth") !== null) {
+    maxDepth = parseInt(localStorage.getItem("treeMaxDepth"));
+    $("#maxDepth").val(maxDepth);
+}
+
+$("#maxDepth").on("change", function() {
+    maxDepth = parseInt($(this).val());
+    localStorage.setItem("treeMaxDepth", maxDepth);
+    getInitialTree();
+});
+
 getInitialTree();

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

@@ -19,6 +19,10 @@
             </tr>
         </table>
     </div>
+    <div class="col-2">
+        <label for="maxDepth">Max Depth:</label>
+        <input type="number" id="maxDepth" class="form-control" value="2" min="1" max="10">
+    </div>
 </div>
 <div class="row">
     <div class="col-12" id="tree">