🌳Network tree improvements

front/css/app.css

@@ -240,6 +240,7 @@
     display: grid;
 }
 
+
 @media (max-width: 767px) {
     .main-header .logo {
         width: 100%;
@@ -254,6 +255,15 @@
     .main-footer {
         margin-left: 0px;
     }
+    .fixed .content-wrapper, .fixed .right-side {
+        padding-top: 50px;
+    }
+    .main-sidebar {
+        padding-top: 50px;
+    }
+    .content-header {
+        display: none;
+    }
 }
 
 .sidebar-open .content-wrapper,

front/js/settings_utils.js

@@ -379,55 +379,84 @@ function initListInteractionOptions(element) {
 // -------------------------------------------------------------------
 // Function to filter rows based on input text
 function filterRows(inputText) {
+
+  // open everything if input text is empty
   if (!inputText) {
     inputText = "";
-  }
 
-  $(".panel").each(function () {
-    var $panel = $(this);
-    var $panelHeader = $panel.find('.panel-heading');
-    var $panelBody = $panel.find('.panel-collapse');
+    $(".panel").each(function () {
+      var $panel = $(this);
+      var $panelHeader = $panel.find('.panel-heading');
+      var $panelBody = $panel.find('.panel-collapse');
 
-    var anyVisible = false; // Flag to check if any row is visible
+      $panel.show() 
+      $panelHeader.show() 
+      $panelBody.collapse('show');
 
-    $panelBody.find(".table_row:not(.docs)").each(function () {
-      var $row = $(this);
+      $panelBody.find(".table_row:not(.docs)").each(function () {
+        var $row = $(this)
+        var rowId = $row.attr("id");
+        var isMetadataRow = rowId && rowId.endsWith("__metadata");
+        if (!isMetadataRow) {
+          $row.show()
+        }        
+      });
+      
+    });
+    
+  } else{
+    // filter
 
-      // Check if the row ID ends with "__metadata"
-      var rowId = $row.attr("id");
-      var isMetadataRow = rowId && rowId.endsWith("__metadata");
-
-      // Always hide metadata rows
-      if (isMetadataRow) {
-        $row.hide();
-        return; // Skip further processing for metadata rows
-      }
-
-      var description = $row.find(".setting_description").text().toLowerCase();
-      var codeName = $row.find(".setting_name code").text().toLowerCase();
-
-      if (
-        description.includes(inputText.toLowerCase()) ||
-        codeName.includes(inputText.toLowerCase())
-      ) {
-        $row.show();
-        anyVisible = true; // Set the flag to true if at least one row is visible
+    $(".panel").each(function () {
+      var $panel = $(this);
+      var $panelHeader = $panel.find('.panel-heading');
+      var $panelBody = $panel.find('.panel-collapse');
+  
+      var anyVisible = false; // Flag to check if any row is visible
+  
+      $panelBody.find(".table_row:not(.docs)").each(function () {
+        var $row = $(this);
+  
+        // Check if the row ID ends with "__metadata"
+        var rowId = $row.attr("id");
+        var isMetadataRow = rowId && rowId.endsWith("__metadata");
+  
+        // Always hide metadata rows
+        if (isMetadataRow) {
+          $row.hide();
+          return; // Skip further processing for metadata rows
+        }
+  
+        var description = $row.find(".setting_description").text().toLowerCase();
+        var codeName = $row.find(".setting_name code").text().toLowerCase();
+  
+        if (
+          description.includes(inputText.toLowerCase()) ||
+          codeName.includes(inputText.toLowerCase())
+        ) {
+          $row.show();
+          anyVisible = true; // Set the flag to true if at least one row is visible
+        } else {
+          $row.hide();
+        }
+      });
+  
+      // Determine whether to hide or show the panel based on visibility of rows
+      if (anyVisible) {
+        $panelBody.collapse('show'); // Ensure the panel body is shown if there are visible rows
+        $panelHeader.show(); // Show the panel header
+        $panel.show(); // Show the entire panel if there are visible rows
       } else {
-        $row.hide();
+        $panelBody.collapse('hide'); // Hide the panel body if no rows are visible
+        $panelHeader.hide(); // Hide the panel header if no rows are visible
+        $panel.hide(); // Hide the entire panel if no rows are visible
       }
     });
 
-    // Determine whether to hide or show the panel based on visibility of rows
-    if (anyVisible) {
-      $panelBody.collapse('show'); // Ensure the panel body is shown if there are visible rows
-      $panelHeader.show(); // Show the panel header
-      $panel.show(); // Show the entire panel if there are visible rows
-    } else {
-      $panelBody.collapse('hide'); // Hide the panel body if no rows are visible
-      $panelHeader.hide(); // Hide the panel header if no rows are visible
-      $panel.hide(); // Hide the entire panel if no rows are visible
-    }
-  });
+
+  }
+
+  
 }
 
 

front/network.php

@@ -548,7 +548,6 @@
     {
       parentNodesCount++
     }  
-
     
     return { 
       name: node.name,      
@@ -616,7 +615,7 @@
   }
 
   // --------------------------------------------------------------------------- 
-  // Handle network node click - select correct tab in teh bottom table
+  // Handle network node click - select correct tab in the bottom table
   function handleNodeClick(event)
   {
     // console.log(event.target.offsetParent.offsetParent)
@@ -631,14 +630,24 @@
 
   // --------------------------------------------------------------------------- 
   var myTree;
-  var visibleTreeArea = $(window).height()-135;
-  var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
+  var visibleTreeArea = $(window).height()-155;
+  var nodeWidth = 160;
   var emSize;
   var nodeHeight;
   var sizeCoefficient = 1
 
   function initTree(myHierarchy)
   {
+    console.log(myHierarchy)
+
+    // calculate the drawing area based on teh tree width and available screen size
+    var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
+    let screenWidth = $('.content-header').width();
+    let treeWidth = (nodeWidth + 20) *  parentNodesCount;
+    let treeAreaWidth  =  screenWidth < treeWidth ? treeWidth : screenWidth;
+
+    // init the drawing area size
+    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${treeAreaWidth}px`)
 
     if(myHierarchy.type == "")
     {
@@ -655,7 +664,7 @@
     // nodeHeight = ((emSize*100*0.30).toFixed(0))
     nodeHeight = ((emSize*100*0.30).toFixed(0))
 
-    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${$('.content-header').width()}px`)
+    
 
     myTree = Treeviz.create({
       htmlId: "networkTree",
@@ -704,7 +713,7 @@
                           >
                             <div class="netNodeText">
                               <strong>${devicePort}  ${deviceIcon}
-                                <span class="spanNetworkTree anonymizeDev">${nodeData.data.name}</span>
+                                <span class="spanNetworkTree anonymizeDev" >${nodeData.data.name}</span>
                               </strong>
                               ${collapseExpandHtml}
                             </div>
@@ -719,8 +728,8 @@
       secondaryAxisNodeSpacing: 0.3,
       nodeHeight: nodeHeight.toString(),
       marginTop: '5',
-      hasZoom: false,
-      hasPan: false,
+      hasZoom: true,
+      hasPan: true,
       // marginLeft: '15',
       idKey: "id",
       hasFlatData: false,
@@ -730,7 +739,7 @@
         relationnalField: "children",
       });
       
-      console.log(myHierarchy)
+
 
       myTree.refresh(myHierarchy);
 

server/device.py

@@ -502,7 +502,7 @@ def update_devices_names (db):
             recordsToUpdate.append ([newName, device['dev_MAC']])
 
     # Print log            
-    mylog('verbose', ['[Update Device Name] Names Found (DiG/NSLOOKUP/Pholus): ', len(recordsToUpdate), " (",foundDig,"/",foundNsLookup,"/",foundPholus ,")"] )                 
+    mylog('verbose', ['[Update Device Name] Names Found (DiG/NSLOOKUP/NBTSCAN/Pholus): ', len(recordsToUpdate), " (",foundDig,"/",foundNsLookup,"/",foundNbtLookup,"/", foundPholus ,")"] )                 
     mylog('verbose', ['[Update Device Name] Names Not Found         : ', notFound] )    
      
     # update not found devices with (name not found)