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 3 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-yellow: #f39c12;
--color-red: #dd4b39;
--color-gray: #8c8c8c;
}
.input-group .checkbox
@@ -1729,7 +1730,6 @@ input[readonly] {
width: auto;
}
#hover-box
{
background-color: #ffffff;;
@@ -1773,11 +1773,31 @@ input[readonly] {
right: 0;
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
{
/* border: solid; */
border-color:#3c8dbc;
box-shadow: #3c8dbc 0px 0px 20px;
}
#networkTree .netStatus-Off-line i,
#networkTree .netStatus-Off-line svg
{

2
front/deviceDetailsEdit.php
View File

@@ -96,7 +96,7 @@
DevDetail_MainInfo_Network_Title: {
data: ["devParentMAC", "devParentRelType", "devParentPort", "devSSID", "devSite", "devSyncHubNode"],
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",
labelClasses: "col-sm-4 col-xs-12 control-label",
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";
break;
case "go_to_node":
eventIcon = "fa-network-wired";
eventIcon = "fa-sitemap fa-rotate-270";
break;
case "run":
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))
// \
// PC (leaf) <------- leafs are not included in this SQL query
const networkDeviceTypes = getSetting("NETWORK_DEVICE_TYPES").replace("[", "").replace("]", "");
const rawSql = `
SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac, node_icon, node_alert
FROM (
@@ -162,35 +159,55 @@
const badgeHtml = `<a href="${badge.url}" class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</a>`;
const parentId = node.parent_mac.replace(/:/g, '_');
const paneHtml = `
<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>
<table class="table table-striped">
<tbody>
<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>
<tr><td><b>${getString('Device_TableHead_Type')}</b></td><td>${node.node_type}</td></tr>
<tr><td><b>${getString('Network_Table_State')}</b></td><td>${badgeHtml}</td></tr>
<tr><td><b>${getString('Network_Parent')}</b></td>
<td>
<a href="./network.php?mac=${parentId}">
<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>
</a>
</td></tr>
</tbody>
</table>
<div class=" box box-aqua box-body" id="connected">
<h3 class="page-header">
<i class="fa fa-sitemap"></i>
${getString('Network_Connected')}
</h3>
<div id="leafs_${id}">
</div>
</div>
isRootNode = node.parent_mac == "";
const paneHtml = `
<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>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label fw-bold">${getString('Network_Node')}</label>
<div class="col-sm-9">
<a href="./deviceDetails.php?mac=${node.node_mac}" class="anonymize">${node.node_name}</a>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label fw-bold">MAC</label>
<div class="col-sm-9 anonymize">${node.node_mac}</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label fw-bold">${getString('Device_TableHead_Type')}</label>
<div class="col-sm-9">${node.node_type}</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label fw-bold">${getString('Network_Table_State')}</label>
<div class="col-sm-9">${badgeHtml}</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);
loadConnectedDevices(node.node_mac);
@@ -305,7 +322,7 @@
<div class="content">
<div id="unassignedDevices" class="box box-aqua box-body">
<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>
</section>
</div>
@@ -348,8 +365,11 @@
});
}
// -----------------------------------------------------------
// INIT
// -----------------------------------------------------------
const networkDeviceTypes = getSetting("NETWORK_DEVICE_TYPES").replace("[", "").replace("]", "");
const showArchived = getCache('showArchived') == "true";
const showOffline = getCache('showOffline') == "true";
@@ -378,7 +398,12 @@
WHEN devAlertDown != 0 AND devPresentLastScan = 0 THEN "Down"
WHEN devPresentLastScan = 1 THEN "On-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
${whereClause}
`;
@@ -500,6 +525,7 @@ function getChildren(node, list, path, visited = [])
parentMac: node.devParentMAC,
icon: node.devIcon,
type: node.devType,
devIsNetworkNodeDynamic: node.devIsNetworkNodeDynamic,
vendor: node.devVendor,
lastseen: node.devLastConnection,
firstseen: node.devFirstConnection,
@@ -623,7 +649,7 @@ function initTree(myHierarchy)
return;
}
// handle if only a few nodes
// handle canvas and node size if only a few nodes
emSize > 1 ? emSize = 1 : emSize = emSize;
let nodeHeightPx = emToPx(emSize*1);
@@ -671,12 +697,14 @@ function initTree(myHierarchy)
selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
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 = '')
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;"
onclick="handleNodeClick(this)"
data-mytreemacmain="${nodeData.data.mac}"
@@ -685,6 +713,7 @@ function initTree(myHierarchy)
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}"
@@ -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()
@@ -835,9 +849,6 @@ function updateLeaf(leafMac, action) {
}
}
// init device names where macs are used
initDeviceNamesFromMACs();
// init pop up hover boxes for device details
initHoverNodeInfo();

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

@@ -332,7 +332,7 @@
<!-- Network menu item -->
<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>
<!-- Maintenance menu item -->

2
front/systeminfo.php
View File

@@ -151,7 +151,7 @@ echo '<div class="box box-solid">
// Network Hardware ----------------------------------------------------------
echo '<div class="box box-solid">
<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 class="box-body">
<table id="networkTable" class="table table-bordered table-hover">