From b470b985e9e7bcf430ab17eff4a123249e9046cb Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Sun, 20 Jul 2025 08:31:50 +1000 Subject: [PATCH] network page refactor --- front/css/app.css | 22 +++++- front/deviceDetailsEdit.php | 2 +- front/js/settings_utils.js | 2 +- front/network.php | 119 ++++++++++++++++++--------------- front/php/templates/header.php | 2 +- front/systeminfo.php | 2 +- 6 files changed, 90 insertions(+), 59 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index 97d5df3b..61ceee5d 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -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 { diff --git a/front/deviceDetailsEdit.php b/front/deviceDetailsEdit.php index 860abd8c..a3ebf405 100755 --- a/front/deviceDetailsEdit.php +++ b/front/deviceDetailsEdit.php @@ -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" diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js index ec1caae4..118ed2ba 100755 --- a/front/js/settings_utils.js +++ b/front/js/settings_utils.js @@ -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"; diff --git a/front/network.php b/front/network.php index 9ba65479..17c9b46b 100755 --- a/front/network.php +++ b/front/network.php @@ -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 = `${badge.iconHtml} ${badge.status}`; const parentId = node.parent_mac.replace(/:/g, '_'); - const paneHtml = ` -
-

${getString('Network_Node')}

- - - - - - - - - -
${getString('Network_Node')}${node.node_name}
MAC${node.node_mac}
${getString('Device_TableHead_Type')}${node.node_type}
${getString('Network_Table_State')}${badgeHtml}
${getString('Network_Parent')} - - ${node.parent_mac} - - -
-
-

- - ${getString('Network_Connected')} -

- -
-
-
+ isRootNode = node.parent_mac == ""; + + const paneHtml = ` +
+

${getString('Network_Node')}

+ +
+ +
+ ${node.node_name} +
+
+ +
+ +
${node.node_mac}
+
+ +
+ +
${node.node_type}
+
+ +
+ +
${badgeHtml}
+
+ +
+ +
+ ${isRootNode ? '' : ``} + + ${isRootNode ? getString('Network_Root') : getNameByMacAddress(node.parent_mac)} + + ${isRootNode ? '' : ``} +
+
+ +
+

+ + ${getString('Network_Connected')} +

+
+
+
+ `; -
`; $('.tab-content').append(paneHtml); loadConnectedDevices(node.node_mac); @@ -305,7 +322,7 @@
-

${getString('Network_UnassignedDevices')}

+

${getString('Network_UnassignedDevices')}

@@ -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 = `
  • - +
    • diff --git a/front/systeminfo.php b/front/systeminfo.php index 5c71fdb4..096dd57e 100755 --- a/front/systeminfo.php +++ b/front/systeminfo.php @@ -151,7 +151,7 @@ echo '
    // Network Hardware ---------------------------------------------------------- echo '
    -

    ' . lang('Systeminfo_Network_Hardware') . '

    +

    ' . lang('Systeminfo_Network_Hardware') . '