🌳Network tree improvements

This commit is contained in:
jokob-sk
2024-07-11 19:28:50 +10:00
parent 8e7e0afb1e
commit 3ae0daad3c
4 changed files with 97 additions and 49 deletions

View File

@@ -240,6 +240,7 @@
display: grid; display: grid;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.main-header .logo { .main-header .logo {
width: 100%; width: 100%;
@@ -254,6 +255,15 @@
.main-footer { .main-footer {
margin-left: 0px; 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, .sidebar-open .content-wrapper,

View File

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

View File

@@ -549,7 +549,6 @@
parentNodesCount++ parentNodesCount++
} }
return { return {
name: node.name, name: node.name,
path: path, path: path,
@@ -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) function handleNodeClick(event)
{ {
// console.log(event.target.offsetParent.offsetParent) // console.log(event.target.offsetParent.offsetParent)
@@ -631,14 +630,24 @@
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
var myTree; var myTree;
var visibleTreeArea = $(window).height()-135; var visibleTreeArea = $(window).height()-155;
var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea; var nodeWidth = 160;
var emSize; var emSize;
var nodeHeight; var nodeHeight;
var sizeCoefficient = 1 var sizeCoefficient = 1
function initTree(myHierarchy) 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 == "") if(myHierarchy.type == "")
{ {
@@ -655,7 +664,7 @@
// nodeHeight = ((emSize*100*0.30).toFixed(0)) // nodeHeight = ((emSize*100*0.30).toFixed(0))
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({ myTree = Treeviz.create({
htmlId: "networkTree", htmlId: "networkTree",
@@ -704,7 +713,7 @@
> >
<div class="netNodeText"> <div class="netNodeText">
<strong>${devicePort} ${deviceIcon} <strong>${devicePort} ${deviceIcon}
<span class="spanNetworkTree anonymizeDev">${nodeData.data.name}</span> <span class="spanNetworkTree anonymizeDev" >${nodeData.data.name}</span>
</strong> </strong>
${collapseExpandHtml} ${collapseExpandHtml}
</div> </div>
@@ -719,8 +728,8 @@
secondaryAxisNodeSpacing: 0.3, secondaryAxisNodeSpacing: 0.3,
nodeHeight: nodeHeight.toString(), nodeHeight: nodeHeight.toString(),
marginTop: '5', marginTop: '5',
hasZoom: false, hasZoom: true,
hasPan: false, hasPan: true,
// marginLeft: '15', // marginLeft: '15',
idKey: "id", idKey: "id",
hasFlatData: false, hasFlatData: false,
@@ -730,7 +739,7 @@
relationnalField: "children", relationnalField: "children",
}); });
console.log(myHierarchy)
myTree.refresh(myHierarchy); myTree.refresh(myHierarchy);

View File

@@ -502,7 +502,7 @@ def update_devices_names (db):
recordsToUpdate.append ([newName, device['dev_MAC']]) recordsToUpdate.append ([newName, device['dev_MAC']])
# Print log # 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] ) mylog('verbose', ['[Update Device Name] Names Not Found : ', notFound] )
# update not found devices with (name not found) # update not found devices with (name not found)