vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 09:36:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

network page refactor
Some checks failed
Code checks / check-url-paths (push) Has been cancelled
Details
docker / docker_dev (push) Has been cancelled
Details
Deploy MkDocs / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
jokob-sk
2025-07-20 08:31:50 +10:00
parent c90c6b5c90
commit b470b985e9
6 changed files with 90 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front/css/app.css
View File

@@ -16,6 +16,7 @@
--color-green: #00a65a; --color-green: #00a65a;
--color-yellow: #f39c12; --color-yellow: #f39c12;
--color-red: #dd4b39; --color-red: #dd4b39;
--color-gray: #8c8c8c;
} }
.input-group .checkbox .input-group .checkbox
@@ -1729,7 +1730,6 @@ input[readonly] {
width: auto; width: auto;
} }
#hover-box #hover-box
{ {
background-color: #ffffff;; background-color: #ffffff;;
@@ -1773,11 +1773,31 @@ input[readonly] {
right: 0; right: 0;
margin-right: -3px; margin-right: -3px;
} }
/* var(--color-aqua);
--color-aqua: #00c0ef;
--color-blue: #0060df;
--color-green: #00a65a;
--color-yellow: #f39c12;
--color-red: #dd4b39; */
#networkTree .node-inner.node-network-device:hover
{
box-shadow: var(--color-aqua) 0px 0px 20px;
}
#networkTree .node-inner.node-standard-device:hover
{
box-shadow: var(--color-gray) 0px 0px 10px;
}
#networkTree .highlightedNode #networkTree .highlightedNode
{ {
/* border: solid; */ /* border: solid; */
border-color:#3c8dbc; border-color:#3c8dbc;
box-shadow: #3c8dbc 0px 0px 20px;
} }
#networkTree .netStatus-Off-line i, #networkTree .netStatus-Off-line i,
#networkTree .netStatus-Off-line svg #networkTree .netStatus-Off-line svg
{ {

2
front/deviceDetailsEdit.php
View File

@@ -96,7 +96,7 @@
DevDetail_MainInfo_Network_Title: { DevDetail_MainInfo_Network_Title: {
data: ["devParentMAC", "devParentRelType", "devParentPort", "devSSID", "devSite", "devSyncHubNode"], data: ["devParentMAC", "devParentRelType", "devParentPort", "devSSID", "devSite", "devSyncHubNode"],
docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md", docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md",
iconClass: "fa fa-network-wired", iconClass: "fa fa-sitemap fa-rotate-270",
inputGroupClasses: "field-group network-group col-lg-4 col-sm-6 col-xs-12", inputGroupClasses: "field-group network-group col-lg-4 col-sm-6 col-xs-12",
labelClasses: "col-sm-4 col-xs-12 control-label", labelClasses: "col-sm-4 col-xs-12 control-label",
inputClasses: "col-sm-8 col-xs-12 input-group" inputClasses: "col-sm-8 col-xs-12 input-group"

2
front/js/settings_utils.js
View File

@@ -1209,7 +1209,7 @@ if (eventsList.length > 0) {
eventIcon = "fa-square-up-right"; eventIcon = "fa-square-up-right";
break; break;
case "go_to_node": case "go_to_node":
eventIcon = "fa-network-wired"; eventIcon = "fa-sitemap fa-rotate-270";
break; break;
case "run": case "run":
eventIcon = "fa-play"; eventIcon = "fa-play";

119
front/network.php
View File

@@ -80,9 +80,6 @@
// 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 networkDeviceTypes = getSetting("NETWORK_DEVICE_TYPES").replace("[", "").replace("]", "");
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 (
@@ -162,35 +159,55 @@
const badgeHtml = `<a href="${badge.url}" class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</a>`; const badgeHtml = `<a href="${badge.url}" class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</a>`;
const parentId = node.parent_mac.replace(/:/g, '_'); const parentId = node.parent_mac.replace(/:/g, '_');
const paneHtml = ` isRootNode = node.parent_mac == "";
<div class="tab-pane box box-aqua box-body ${i === 0 ? 'active' : ''}" id="${id}">
<h2 class="page-header"><i class="fa fa-server"></i> ${getString('Network_Node')}</h2> const paneHtml = `
<table class="table table-striped"> <div class="tab-pane box box-aqua box-body ${i === 0 ? 'active' : ''}" id="${id}">
<tbody> <h2 class="page-header"><i class="fa fa-server"></i> ${getString('Network_Node')}</h2>
<tr><td><b>${getString('Network_Node')}</b></td><td><a href="./deviceDetails.php?mac=${node.node_mac}" class="anonymize">${node.node_name}</a></td></tr>
<tr><td><b>MAC</b></td><td class="anonymize">${node.node_mac}</td></tr> <div class="mb-3 row">
<tr><td><b>${getString('Device_TableHead_Type')}</b></td><td>${node.node_type}</td></tr> <label class="col-sm-3 col-form-label fw-bold">${getString('Network_Node')}</label>
<tr><td><b>${getString('Network_Table_State')}</b></td><td>${badgeHtml}</td></tr> <div class="col-sm-9">
<tr><td><b>${getString('Network_Parent')}</b></td> <a href="./deviceDetails.php?mac=${node.node_mac}" class="anonymize">${node.node_name}</a>
<td> </div>
<a href="./network.php?mac=${parentId}"> </div>
<b class="anonymize"><span class="mac-to-name" my-data-mac="${node.parent_mac}">${node.parent_mac}</span>
<i class="fa fa-square-up-right"></i></b> <div class="mb-3 row">
</a> <label class="col-sm-3 col-form-label fw-bold">MAC</label>
</td></tr> <div class="col-sm-9 anonymize">${node.node_mac}</div>
</tbody> </div>
</table>
<div class=" box box-aqua box-body" id="connected"> <div class="mb-3 row">
<h3 class="page-header"> <label class="col-sm-3 col-form-label fw-bold">${getString('Device_TableHead_Type')}</label>
<i class="fa fa-sitemap"></i> <div class="col-sm-9">${node.node_type}</div>
${getString('Network_Connected')} </div>
</h3>
<div class="mb-3 row">
<div id="leafs_${id}"> <label class="col-sm-3 col-form-label fw-bold">${getString('Network_Table_State')}</label>
</div> <div class="col-sm-9">${badgeHtml}</div>
</div> </div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label fw-bold">${getString('Network_Parent')}</label>
<div class="col-sm-9">
${isRootNode ? '' : `<a class="anonymize" href="#">`}
<span my-data-mac="${node.parent_mac}" data-mytreemacmain="${node.parent_mac}" onclick="handleNodeClick(this)">
${isRootNode ? getString('Network_Root') : getNameByMacAddress(node.parent_mac)}
</span>
${isRootNode ? '' : `</a>`}
</div>
</div>
<div class="box box-aqua box-body" id="connected">
<h3 class="page-header">
<i class="fa fa-sitemap fa-rotate-270"></i>
${getString('Network_Connected')}
</h3>
<div id="leafs_${id}"></div>
</div>
</div>
`;
</div>`;
$('.tab-content').append(paneHtml); $('.tab-content').append(paneHtml);
loadConnectedDevices(node.node_mac); loadConnectedDevices(node.node_mac);
@@ -305,7 +322,7 @@
<div class="content"> <div class="content">
<div id="unassignedDevices" class="box box-aqua box-body"> <div id="unassignedDevices" class="box box-aqua box-body">
<section> <section>
<h3><i class="fa fa-laptop"></i> ${getString('Network_UnassignedDevices')}</h3> <h3><i class="fa-solid fa-plug-circle-xmark"></i> ${getString('Network_UnassignedDevices')}</h3>
<table id="unassignedDevicesTable" class="table table-striped" width="100%"></table> <table id="unassignedDevicesTable" class="table table-striped" width="100%"></table>
</section> </section>
</div> </div>
@@ -348,8 +365,11 @@
}); });
} }
// -----------------------------------------------------------
// INIT // INIT
// -----------------------------------------------------------
const networkDeviceTypes = getSetting("NETWORK_DEVICE_TYPES").replace("[", "").replace("]", "");
const showArchived = getCache('showArchived') == "true"; const showArchived = getCache('showArchived') == "true";
const showOffline = getCache('showOffline') == "true"; const showOffline = getCache('showOffline') == "true";
@@ -378,7 +398,12 @@
WHEN devAlertDown != 0 AND devPresentLastScan = 0 THEN "Down" WHEN devAlertDown != 0 AND devPresentLastScan = 0 THEN "Down"
WHEN devPresentLastScan = 1 THEN "On-line" WHEN devPresentLastScan = 1 THEN "On-line"
ELSE "Off-line" ELSE "Off-line"
END as devStatus END as devStatus,
CASE
WHEN devType IN (${networkDeviceTypes})
THEN 1
ELSE 0
END as devIsNetworkNodeDynamic
FROM Devices a FROM Devices a
${whereClause} ${whereClause}
`; `;
@@ -500,6 +525,7 @@ function getChildren(node, list, path, visited = [])
parentMac: node.devParentMAC, parentMac: node.devParentMAC,
icon: node.devIcon, icon: node.devIcon,
type: node.devType, type: node.devType,
devIsNetworkNodeDynamic: node.devIsNetworkNodeDynamic,
vendor: node.devVendor, vendor: node.devVendor,
lastseen: node.devLastConnection, lastseen: node.devLastConnection,
firstseen: node.devFirstConnection, firstseen: node.devFirstConnection,
@@ -623,7 +649,7 @@ function initTree(myHierarchy)
return; return;
} }
// handle if only a few nodes // handle canvas and node size if only a few nodes
emSize > 1 ? emSize = 1 : emSize = emSize; emSize > 1 ? emSize = 1 : emSize = emSize;
let nodeHeightPx = emToPx(emSize*1); let nodeHeightPx = emToPx(emSize*1);
@@ -671,12 +697,14 @@ function initTree(myHierarchy)
selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac') selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
highlightedCss = nodeData.data.mac == selectedNodeMac ? highlightedCss = nodeData.data.mac == selectedNodeMac ?
" highlightedNode" : ""; " highlightedNode " : "";
cssNodeType = nodeData.data.devIsNetworkNodeDynamic ?
" node-network-device " : " node-standard-device ";
const badgeConf = getStatusBadgeParts(nodeData.data.presentLastScan, nodeData.data.alertDown, nodeData.data.mac, statusText = '') const badgeConf = getStatusBadgeParts(nodeData.data.presentLastScan, nodeData.data.alertDown, nodeData.data.mac, statusText = '')
return result = `<div return result = `<div
class="node-inner hover-node-info box pointer ${highlightedCss}" class="node-inner hover-node-info box pointer ${highlightedCss} ${cssNodeType}"
style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;" style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;"
onclick="handleNodeClick(this)" onclick="handleNodeClick(this)"
data-mytreemacmain="${nodeData.data.mac}" data-mytreemacmain="${nodeData.data.mac}"
@@ -685,6 +713,7 @@ function initTree(myHierarchy)
data-mac="${nodeData.data.mac}" data-mac="${nodeData.data.mac}"
data-vendor="${nodeData.data.vendor}" data-vendor="${nodeData.data.vendor}"
data-type="${nodeData.data.type}" data-type="${nodeData.data.type}"
data-devIsNetworkNodeDynamic="${nodeData.data.devIsNetworkNodeDynamic}"
data-lastseen="${nodeData.data.lastseen}" data-lastseen="${nodeData.data.lastseen}"
data-firstseen="${nodeData.data.firstseen}" data-firstseen="${nodeData.data.firstseen}"
data-relationship="${nodeData.data.relType}" data-relationship="${nodeData.data.relType}"
@@ -769,22 +798,7 @@ function initTab()
} }
// ---------------------------------------------------------------------------
function initDeviceNamesFromMACs()
{
$('.mac-to-name').each(function() {
var dataMacValue = $(this).attr('my-data-mac');
if(dataMacValue =="" )
{
$(this).html(getString("Network_Root"))
}
else{
$(this).html(getNameByMacAddress(dataMacValue));
}
});
}
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function initSelectedNodeHighlighting() function initSelectedNodeHighlighting()
@@ -835,9 +849,6 @@ function updateLeaf(leafMac, action) {
} }
} }
// init device names where macs are used
initDeviceNamesFromMACs();
// init pop up hover boxes for device details // init pop up hover boxes for device details
initHoverNodeInfo(); initHoverNodeInfo();

2
front/php/templates/header.php
View File

@@ -332,7 +332,7 @@
<!-- Network menu item --> <!-- Network menu item -->
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('network.php') ) ){ echo 'active'; } ?>"> <li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('network.php') ) ){ echo 'active'; } ?>">
<a href="network.php"><i class="fa fa-fw fa-network-wired"></i> <span><?= lang('Navigation_Network');?></span></a> <a href="network.php"><i class="fa fa-fw fa-sitemap fa-rotate-270"></i> <span><?= lang('Navigation_Network');?></span></a>
</li> </li>
<!-- Maintenance menu item --> <!-- Maintenance menu item -->

2
front/systeminfo.php
View File

@@ -151,7 +151,7 @@ echo '<div class="box box-solid">
// Network Hardware ---------------------------------------------------------- // Network Hardware ----------------------------------------------------------
echo '<div class="box box-solid"> echo '<div class="box box-solid">
<div class="box-header"> <div class="box-header">
<h3 class="box-title sysinfo_headline"><i class="fas fa-network-wired"></i> ' . lang('Systeminfo_Network_Hardware') . '</h3> <h3 class="box-title sysinfo_headline"><i class="fa fa-sitemap fa-rotate-270"></i> ' . lang('Systeminfo_Network_Hardware') . '</h3>
</div> </div>
<div class="box-body"> <div class="box-body">
<table id="networkTable" class="table table-bordered table-hover"> <table id="networkTable" class="table table-bordered table-hover">