vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-06 17:15:38 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

FE: more defensive network topology hierarchy check #1308

Browse Source 
Signed-off-by: jokob-sk <jokob.sk@gmail.com>
This commit is contained in:
jokob-sk
2025-11-30 10:27:23 +11:00
parent 9634e4e0f7
commit 74677f940e
1 changed files with 202 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
front/network.php
View File

@@ -1,26 +1,26 @@
<?php <?php
require 'php/templates/header.php'; require 'php/templates/header.php';
require 'php/templates/modals.php'; require 'php/templates/modals.php';
?> ?>
<script> <script>
// show spinning icon // show spinning icon
showSpinner() showSpinner()
</script> </script>
<!-- Page ------------------------------------------------------------------ --> <!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper"> <div class="content-wrapper">
<span class="helpIcon"> <span class="helpIcon">
<a target="_blank" href="https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md"> <a target="_blank" href="https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md">
<i class="fa fa-circle-question"></i> <i class="fa fa-circle-question"></i>
</a> </a>
</span> </span>
<div id="toggleFilters" class=""> <div id="toggleFilters" class="">
<div class="checkbox icheck col-xs-12"> <div class="checkbox icheck col-xs-12">
<label> <label>
<input type="checkbox" name="showOffline" checked> <input type="checkbox" name="showOffline" checked>
<div style="margin-left: 10px; display: inline-block; vertical-align: top;"> <div style="margin-left: 10px; display: inline-block; vertical-align: top;">
<?= lang('Network_ShowOffline');?> <?= lang('Network_ShowOffline');?>
<span id="showOfflineNumber"> <span id="showOfflineNumber">
<!-- placeholder --> <!-- placeholder -->
@@ -31,14 +31,14 @@
<div class="checkbox icheck col-xs-12"> <div class="checkbox icheck col-xs-12">
<label> <label>
<input type="checkbox" name="showArchived"> <input type="checkbox" name="showArchived">
<div style="margin-left: 10px; display: inline-block; vertical-align: top;"> <div style="margin-left: 10px; display: inline-block; vertical-align: top;">
<?= lang('Network_ShowArchived');?> <?= lang('Network_ShowArchived');?>
<span id="showArchivedNumber"> <span id="showArchivedNumber">
<!-- placeholder --> <!-- placeholder -->
</span> </span>
</div> </div>
</label> </label>
</div> </div>
</div> </div>
<div id="networkTree" class="drag"> <div id="networkTree" class="drag">
@@ -55,8 +55,8 @@
</div> </div>
<div class="tab-content"> <div class="tab-content">
<!-- Placeholder --> <!-- Placeholder -->
</div> </div>
</section> </section>
<section id="unassigned-devices-wrapper"> <section id="unassigned-devices-wrapper">
<!-- Placeholder --> <!-- Placeholder -->
</section> </section>
@@ -69,7 +69,7 @@
require 'php/templates/footer.php'; require 'php/templates/footer.php';
?> ?>
<script src="lib/treeviz/bundle.js"></script> <script src="lib/treeviz/bundle.js"></script>
<script defer> <script defer>
@@ -78,12 +78,12 @@
// Create Top level tabs (List of network devices), explanation of the terminology below: // Create Top level tabs (List of network devices), explanation of the terminology below:
// //
// Switch 1 (node) // Switch 1 (node)
// /(p1) \ (p2) <----- port numbers // /(p1) \ (p2) <----- port numbers
// / \ // / \
// Smart TV (leaf) Switch 2 (node (for the PC) and leaf (for Switch 1)) // Smart TV (leaf) Switch 2 (node (for the PC) and leaf (for Switch 1))
// \ // \
// PC (leaf) <------- leafs are not included in this SQL query // PC (leaf) <------- leafs are not included in this SQL query
const rawSql = ` const rawSql = `
SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac, node_icon, node_alert SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac, node_icon, node_alert
FROM ( FROM (
@@ -120,7 +120,7 @@
const portLabel = node.node_ports_count ? ` (${node.node_ports_count})` : ''; const portLabel = node.node_ports_count ? ` (${node.node_ports_count})` : '';
const icon = atob(node.node_icon); const icon = atob(node.node_icon);
const id = node.node_mac.replace(/:/g, '_'); const id = node.node_mac.replace(/:/g, '_');
html += ` html += `
<li class="networkNodeTabHeaders ${i === 0 ? 'active' : ''}"> <li class="networkNodeTabHeaders ${i === 0 ? 'active' : ''}">
@@ -137,13 +137,13 @@
renderNetworkTabContent(nodes); renderNetworkTabContent(nodes);
// init selected (first) tab // init selected (first) tab
initTab(); initTab();
// init selected node highlighting // init selected node highlighting
initSelectedNodeHighlighting() initSelectedNodeHighlighting()
// Register events on tab change // Register events on tab change
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initSelectedNodeHighlighting() initSelectedNodeHighlighting()
}); });
} }
@@ -205,10 +205,10 @@
<hr/> <hr/>
<div class="box box-aqua box-body" id="connected"> <div class="box box-aqua box-body" id="connected">
<h5> <h5>
<i class="fa fa-sitemap fa-rotate-270"></i> <i class="fa fa-sitemap fa-rotate-270"></i>
${getString('Network_Connected')} ${getString('Network_Connected')}
</h5> </h5>
<div id="leafs_${id}" class="table-responsive"></div> <div id="leafs_${id}" class="table-responsive"></div>
</div> </div>
</div> </div>
@@ -234,9 +234,9 @@
return; return;
} }
$container.html(wrapperHtml); $container.html(wrapperHtml);
const $table = $(`#${tableId}`); const $table = $(`#${tableId}`);
const columns = [ const columns = [
@@ -298,7 +298,7 @@
title: getString('Device_TableHead_Vendor'), title: getString('Device_TableHead_Vendor'),
data: 'devVendor', data: 'devVendor',
width: '20%' width: '20%'
} }
].filter(Boolean); ].filter(Boolean);
@@ -356,7 +356,7 @@
function loadConnectedDevices(node_mac) { function loadConnectedDevices(node_mac) {
const sql = ` const sql = `
SELECT devName, devMac, devLastIP, devVendor, devPresentLastScan, devAlertDown, devParentPort, SELECT devName, devMac, devLastIP, devVendor, devPresentLastScan, devAlertDown, devParentPort,
CASE CASE
WHEN devIsNew = 1 THEN 'New' WHEN devIsNew = 1 THEN 'New'
WHEN devPresentLastScan = 1 THEN 'On-line' WHEN devPresentLastScan = 1 THEN 'On-line'
WHEN devPresentLastScan = 0 AND devAlertDown != 0 THEN 'Down' WHEN devPresentLastScan = 0 AND devAlertDown != 0 THEN 'Down'
@@ -371,7 +371,7 @@
const wrapperHtml = ` const wrapperHtml = `
<table class="table table-bordered table-striped node-leafs-table " id="table_leafs_${id}" data-node-mac="${node_mac}"> <table class="table table-bordered table-striped node-leafs-table " id="table_leafs_${id}" data-node-mac="${node_mac}">
</table>`; </table>`;
loadDeviceTable({ loadDeviceTable({
@@ -414,12 +414,12 @@
$.get(apiUrl, function (data) { $.get(apiUrl, function (data) {
console.log(data); console.log(data);
const parsed = JSON.parse(data); const parsed = JSON.parse(data);
const allDevices = parsed; const allDevices = parsed;
console.log(allDevices); console.log(allDevices);
if (!allDevices || allDevices.length === 0) { if (!allDevices || allDevices.length === 0) {
showModalOK(getString('Gen_Warning'), getString('Network_NoDevices')); showModalOK(getString('Gen_Warning'), getString('Network_NoDevices'));
@@ -439,7 +439,7 @@
{ {
$('#showArchivedNumber').text(`(${archivedCount})`); $('#showArchivedNumber').text(`(${archivedCount})`);
} }
if(offlineCount > 0) if(offlineCount > 0)
{ {
$('#showOfflineNumber').text(`(${offlineCount})`); $('#showOfflineNumber').text(`(${offlineCount})`);
@@ -501,7 +501,7 @@ var visibleNodesCount = 0;
var parentNodesCount = 0; var parentNodesCount = 0;
var hiddenMacs = []; // hidden children var hiddenMacs = []; // hidden children
var hiddenChildren = []; var hiddenChildren = [];
var deviceListGlobal = null; var deviceListGlobal = null;
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Recursively get children nodes and build a tree // Recursively get children nodes and build a tree
@@ -521,7 +521,7 @@ function getChildren(node, list, path, visited = [])
// Loop through all items to find children of the current node // Loop through all items to find children of the current node
for (var i in list) { for (var i in list) {
if (list[i].devParentMAC.toLowerCase() == node.devMac.toLowerCase() && !hiddenMacs.includes(list[i].devParentMAC)) { if (list[i].devParentMAC.toLowerCase() == node.devMac.toLowerCase() && !hiddenMacs.includes(list[i].devParentMAC)) {
visibleNodesCount++; visibleNodesCount++;
@@ -537,7 +537,7 @@ function getChildren(node, list, path, visited = [])
parentNodesCount++; parentNodesCount++;
} }
return { return {
name: node.devName, name: node.devName,
path: path, path: path,
mac: node.devMac, mac: node.devMac,
@@ -562,19 +562,32 @@ function getChildren(node, list, path, visited = [])
}; };
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function getHierarchy() function getHierarchy()
{ {
let internetNode = null;
for(i in deviceListGlobal) for(i in deviceListGlobal)
{ {
if(deviceListGlobal[i].devMac == 'Internet') if(deviceListGlobal[i].devMac == 'Internet')
{ {
return (getChildren(deviceListGlobal[i], deviceListGlobal, '')) internetNode = deviceListGlobal[i];
return (getChildren(internetNode, deviceListGlobal, ''))
break; break;
} }
} }
if (!internetNode) {
showModalOk(
getString('Network_Configuration_Error'),
getString('Network_Root_Not_Configured')
);
console.error("getHierarchy(): Internet node not found");
return null;
}
} }
//--------------------------------------------------------------------------- //---------------------------------------------------------------------------
function toggleSubTree(parentMac, treePath) function toggleSubTree(parentMac, treePath)
{ {
@@ -593,33 +606,33 @@ function toggleSubTree(parentMac, treePath)
myTree.refresh(updatedTree); myTree.refresh(updatedTree);
// re-attach any onclick events // re-attach any onclick events
attachTreeEvents(); attachTreeEvents();
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function attachTreeEvents() function attachTreeEvents()
{ {
// toggle subtree functionality // toggle subtree functionality
$("div[data-mytreemac]").each(function(){ $("div[data-mytreemac]").each(function(){
$(this).attr('onclick', 'toggleSubTree("'+$(this).attr('data-mytreemac')+'","'+ $(this).attr('data-mytreepath')+'")') $(this).attr('onclick', 'toggleSubTree("'+$(this).attr('data-mytreemac')+'","'+ $(this).attr('data-mytreepath')+'")')
}); });
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Handle network node click - select correct tab in the bottom table // Handle network node click - select correct tab in the bottom table
function handleNodeClick(el) function handleNodeClick(el)
{ {
isNetworkDevice = $(el).data("devisnetworknodedynamic") == 1; isNetworkDevice = $(el).data("devisnetworknodedynamic") == 1;
targetTabMAC = "" targetTabMAC = ""
thisDevMac= $(el).data("mac"); thisDevMac= $(el).data("mac");
if (isNetworkDevice == false) if (isNetworkDevice == false)
{ {
targetTabMAC = $(el).data("parentmac"); targetTabMAC = $(el).data("parentmac");
} else } else
{ {
targetTabMAC = thisDevMac; targetTabMAC = thisDevMac;
} }
var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`); var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`);
@@ -628,8 +641,8 @@ function handleNodeClick(el)
// Simulate a click event on the target tab // Simulate a click event on the target tab
targetTab.click(); targetTab.click();
} }
if (isNetworkDevice) { if (isNetworkDevice) {
// Smooth scroll to the tab content // Smooth scroll to the tab content
@@ -639,7 +652,7 @@ function handleNodeClick(el)
} else { } else {
$("tr.selected").removeClass("selected"); $("tr.selected").removeClass("selected");
$(`tr[data-mac="${thisDevMac}"]`).addClass("selected"); $(`tr[data-mac="${thisDevMac}"]`).addClass("selected");
const tableId = "table_leafs_" + targetTabMAC.replace(/:/g, '_'); const tableId = "table_leafs_" + targetTabMAC.replace(/:/g, '_');
const $table = $(`#${tableId}`).DataTable(); const $table = $(`#${tableId}`).DataTable();
@@ -669,10 +682,8 @@ function handleNodeClick(el)
} }
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
var myTree; var myTree;
var emSize; var emSize;
var nodeHeight; var nodeHeight;
// var sizeCoefficient = 1.4 // var sizeCoefficient = 1.4
@@ -689,140 +700,139 @@ function emToPx(em, element) {
function initTree(myHierarchy) function initTree(myHierarchy)
{ {
// calculate the drawing area based on teh tree width and available screen size if(myHierarchy && myHierarchy.type !== "")
let baseFontSize = parseFloat($('html').css('font-size'));
let treeAreaHeight = ($(window).height() - 155); ;
// calculate the font size of the leaf nodes to fit everything into the tree area
leafNodesCount == 0 ? 1 : leafNodesCount;
emSize = pxToEm((treeAreaHeight/(leafNodesCount)).toFixed(2));
let screenWidthEm = pxToEm($('.networkTable').width()-15);
// init the drawing area size
$("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${emToPx(screenWidthEm)}px`)
if(myHierarchy.type == "")
{ {
showModalOk(getString('Network_Configuration_Error'), getString('Network_Root_Not_Configured')) // calculate the drawing area based on the tree width and available screen size
let baseFontSize = parseFloat($('html').css('font-size'));
return; let treeAreaHeight = ($(window).height() - 155); ;
// calculate the font size of the leaf nodes to fit everything into the tree area
leafNodesCount == 0 ? 1 : leafNodesCount;
emSize = pxToEm((treeAreaHeight/(leafNodesCount)).toFixed(2));
let screenWidthEm = pxToEm($('.networkTable').width()-15);
// init the drawing area size
$("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${emToPx(screenWidthEm)}px`)
// handle canvas and node size if only a few nodes
emSize > 1 ? emSize = 1 : emSize = emSize;
let nodeHeightPx = emToPx(emSize*1);
let nodeWidthPx = emToPx(screenWidthEm / (parentNodesCount));
// handle if only a few nodes
nodeWidthPx > 160 ? nodeWidthPx = 160 : nodeWidthPx = nodeWidthPx;
console.log(Treeviz);
myTree = Treeviz.create({
htmlId: "networkTree",
renderNode: nodeData => {
(!emptyArr.includes(nodeData.data.port )) ? port = nodeData.data.port : port = "";
(port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
portHtml = (port == "" || port == 0 || port == 'None' ) ? " &nbsp " : port;
// Build HTML for individual nodes in the network diagram
deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?
`<div class="netIcon">
${atob(nodeData.data.icon)}
</div>` : "";
devicePort = `<div class="netPort"
style="width:${emSize}em;height:${emSize}em">
${portHtml}</div>
<div class="portBckgIcon"
style="margin-left:-${emSize*0.7}em;">
${portBckgIcon}
</div>`;
collapseExpandIcon = nodeData.data.hiddenChildren ?
"square-plus" : "square-minus";
// generate +/- icon if node has children nodes
collapseExpandHtml = nodeData.data.hasChildren ?
`<div class="netCollapse"
style="font-size:${nodeHeightPx/2}px;top:${Math.floor(nodeHeightPx / 4)}px"
data-mytreepath="${nodeData.data.path}"
data-mytreemac="${nodeData.data.mac}">
<i class="fa fa-${collapseExpandIcon} pointer"></i>
</div>` : "";
selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
highlightedCss = nodeData.data.mac == selectedNodeMac ?
" highlightedNode " : "";
cssNodeType = nodeData.data.devIsNetworkNodeDynamic ?
" node-network-device " : " node-standard-device ";
networkHardwareIcon = nodeData.data.devIsNetworkNodeDynamic ? `<span class="network-hw-icon">
<i class="fa-solid fa-hard-drive"></i>
</span>` : "";
const badgeConf = getStatusBadgeParts(nodeData.data.presentLastScan, nodeData.data.alertDown, nodeData.data.mac, statusText = '')
return result = `<div
class="node-inner hover-node-info box pointer ${highlightedCss} ${cssNodeType}"
style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;"
onclick="handleNodeClick(this)"
data-mac="${nodeData.data.mac}"
data-parentMac="${nodeData.data.parentMac}"
data-name="${nodeData.data.name}"
data-ip="${nodeData.data.ip}"
data-mac="${nodeData.data.mac}"
data-vendor="${nodeData.data.vendor}"
data-type="${nodeData.data.type}"
data-devIsNetworkNodeDynamic="${nodeData.data.devIsNetworkNodeDynamic}"
data-lastseen="${nodeData.data.lastseen}"
data-firstseen="${nodeData.data.firstseen}"
data-relationship="${nodeData.data.relType}"
data-status="${nodeData.data.status}"
data-present="${nodeData.data.presentLastScan}"
data-alert="${nodeData.data.alertDown}"
data-icon="${nodeData.data.icon}"
>
<div class="netNodeText">
<strong><span>${devicePort} <span class="${badgeConf.cssText}">${deviceIcon}</span></span>
<span class="spanNetworkTree anonymizeDev" style="width:${nodeWidthPx-50}px">${nodeData.data.name}</span>
${networkHardwareIcon}
</strong>
</div>
</div>
${collapseExpandHtml}`;
},
mainAxisNodeSpacing: 'auto',
// secondaryAxisNodeSpacing: 0.3,
nodeHeight: nodeHeightPx,
nodeWidth: nodeWidthPx,
marginTop: '5',
isHorizontal : true,
hasZoom: true,
hasPan: true,
marginLeft: '10',
marginRight: '10',
idKey: "mac",
hasFlatData: false,
relationnalField: "children",
linkWidth: (nodeData) => 2,
linkColor: (nodeData) => {
relConf = getRelationshipConf(nodeData.data.relType)
return relConf.color;
}
// onNodeClick: (nodeData) => handleNodeClick(nodeData),
});
console.log(deviceListGlobal);
myTree.refresh(myHierarchy);
// hide spinning icon
hideSpinner()
} else
{
console.error("getHierarchy() not returning expected result");
} }
// handle canvas and node size if only a few nodes
emSize > 1 ? emSize = 1 : emSize = emSize;
let nodeHeightPx = emToPx(emSize*1);
let nodeWidthPx = emToPx(screenWidthEm / (parentNodesCount));
// handle if only a few nodes
nodeWidthPx > 160 ? nodeWidthPx = 160 : nodeWidthPx = nodeWidthPx;
console.log(Treeviz);
myTree = Treeviz.create({
htmlId: "networkTree",
renderNode: nodeData => {
(!emptyArr.includes(nodeData.data.port )) ? port = nodeData.data.port : port = "";
(port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
portHtml = (port == "" || port == 0 || port == 'None' ) ? " &nbsp " : port;
// Build HTML for individual nodes in the network diagram
deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?
`<div class="netIcon">
${atob(nodeData.data.icon)}
</div>` : "";
devicePort = `<div class="netPort"
style="width:${emSize}em;height:${emSize}em">
${portHtml}</div>
<div class="portBckgIcon"
style="margin-left:-${emSize*0.7}em;">
${portBckgIcon}
</div>`;
collapseExpandIcon = nodeData.data.hiddenChildren ?
"square-plus" : "square-minus";
// generate +/- icon if node has children nodes
collapseExpandHtml = nodeData.data.hasChildren ?
`<div class="netCollapse"
style="font-size:${nodeHeightPx/2}px;top:${Math.floor(nodeHeightPx / 4)}px"
data-mytreepath="${nodeData.data.path}"
data-mytreemac="${nodeData.data.mac}">
<i class="fa fa-${collapseExpandIcon} pointer"></i>
</div>` : "";
selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
highlightedCss = nodeData.data.mac == selectedNodeMac ?
" highlightedNode " : "";
cssNodeType = nodeData.data.devIsNetworkNodeDynamic ?
" node-network-device " : " node-standard-device ";
networkHardwareIcon = nodeData.data.devIsNetworkNodeDynamic ? `<span class="network-hw-icon">
<i class="fa-solid fa-hard-drive"></i>
</span>` : "";
const badgeConf = getStatusBadgeParts(nodeData.data.presentLastScan, nodeData.data.alertDown, nodeData.data.mac, statusText = '')
return result = `<div
class="node-inner hover-node-info box pointer ${highlightedCss} ${cssNodeType}"
style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;"
onclick="handleNodeClick(this)"
data-mac="${nodeData.data.mac}"
data-parentMac="${nodeData.data.parentMac}"
data-name="${nodeData.data.name}"
data-ip="${nodeData.data.ip}"
data-mac="${nodeData.data.mac}"
data-vendor="${nodeData.data.vendor}"
data-type="${nodeData.data.type}"
data-devIsNetworkNodeDynamic="${nodeData.data.devIsNetworkNodeDynamic}"
data-lastseen="${nodeData.data.lastseen}"
data-firstseen="${nodeData.data.firstseen}"
data-relationship="${nodeData.data.relType}"
data-status="${nodeData.data.status}"
data-present="${nodeData.data.presentLastScan}"
data-alert="${nodeData.data.alertDown}"
data-icon="${nodeData.data.icon}"
>
<div class="netNodeText">
<strong><span>${devicePort} <span class="${badgeConf.cssText}">${deviceIcon}</span></span>
<span class="spanNetworkTree anonymizeDev" style="width:${nodeWidthPx-50}px">${nodeData.data.name}</span>
${networkHardwareIcon}
</strong>
</div>
</div>
${collapseExpandHtml}`;
},
mainAxisNodeSpacing: 'auto',
// secondaryAxisNodeSpacing: 0.3,
nodeHeight: nodeHeightPx,
nodeWidth: nodeWidthPx,
marginTop: '5',
isHorizontal : true,
hasZoom: true,
hasPan: true,
marginLeft: '10',
marginRight: '10',
idKey: "mac",
hasFlatData: false,
relationnalField: "children",
linkWidth: (nodeData) => 2,
linkColor: (nodeData) => {
relConf = getRelationshipConf(nodeData.data.relType)
return relConf.color;
}
// onNodeClick: (nodeData) => handleNodeClick(nodeData),
});
console.log(deviceListGlobal);
myTree.refresh(myHierarchy);
// hide spinning icon
hideSpinner()
} }
@@ -839,11 +849,11 @@ function initTab()
selectedTab = "Internet_id" selectedTab = "Internet_id"
// the #target from the url // the #target from the url
target = getQueryString('mac') target = getQueryString('mac')
// update cookie if target specified // update cookie if target specified
if(target != "") if(target != "")
{ {
setCache(key, target.replaceAll(":","_")+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior setCache(key, target.replaceAll(":","_")+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
} }
@@ -860,12 +870,12 @@ function initTab()
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
setCache(key, $(e.target).attr('id')) setCache(key, $(e.target).attr('id'))
}); });
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function initSelectedNodeHighlighting() function initSelectedNodeHighlighting()
{ {
var currentNodeMac = $(".networkNodeTabHeaders.active a").data("mytabmac"); var currentNodeMac = $(".networkNodeTabHeaders.active a").data("mytabmac");
@@ -882,7 +892,7 @@ function initSelectedNodeHighlighting()
newSelNode = $("#networkTree div[data-mac='"+currentNodeMac+"']")[0] newSelNode = $("#networkTree div[data-mac='"+currentNodeMac+"']")[0]
console.log(newSelNode) console.log(newSelNode)
$(newSelNode).attr('class', $(newSelNode).attr('class') + ' highlightedNode') $(newSelNode).attr('class', $(newSelNode).attr('class') + ' highlightedNode')
} }
@@ -913,7 +923,7 @@ function updateLeaf(leafMac, action) {
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// showing icons or device names in tabs depending on available screen size // showing icons or device names in tabs depending on available screen size
function checkTabsOverflow() { function checkTabsOverflow() {
const $ul = $('.nav-tabs'); const $ul = $('.nav-tabs');
const $lis = $ul.find('li'); const $lis = $ul.find('li');