diff --git a/front/css/app.css b/front/css/app.css index 14625ac0..8314789c 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1716,11 +1716,34 @@ input[readonly] { width: auto; } + #hover-box { background-color: #ffffff;; } +#hover-box .iconPreview +{ + padding: 0px; + display: flex; +} + +#hover-box .devName +{ + font-size: larger; + display: contents; +} + +#hover-box b +{ + float: left; +} + +#hover-box span +{ + float: right; +} + #networkTree .netCollapse { position: absolute; diff --git a/front/js/ui_components.js b/front/js/ui_components.js index 417da88b..ed754e66 100755 --- a/front/js/ui_components.js +++ b/front/js/ui_components.js @@ -418,9 +418,14 @@ function goToNetworkNode(mac) // ----------------------------------------------------------------------------- // Go to the device -function goToDevice(mac) -{ - window.location.href = './deviceDetails.php?mac=' + mac; +function goToDevice(mac, newtab = false) { + const url = './deviceDetails.php?mac=' + encodeURIComponent(mac); + + if (newtab) { + window.open(url, '_blank'); + } else { + window.location.href = url; + } } @@ -828,6 +833,7 @@ function initHoverNodeInfo() { }); } + // check if handlers already attached to prevent flickering if (initHoverNodeInfo._handlersAttached) return; initHoverNodeInfo._handlersAttached = true; @@ -838,22 +844,30 @@ function initHoverNodeInfo() { const $el = $(this); lastTarget = this; + // use timeout to prevent a quick hover and exit toi flash a card when navigating to a target node with your mouse clearTimeout(hoverTimeout); hoverTimeout = setTimeout(() => { if (lastTarget !== this) return; + const icon = $el.data('icon'); const name = $el.data('name') || 'Unknown'; const ip = $el.data('ip') || 'N/A'; const mac = $el.data('mac') || 'N/A'; const vendor = $el.data('vendor') || 'Unknown'; + const lastseen = $el.data('lastseen') || 'Unknown'; const relationship = $el.data('relationship') || 'Unknown'; + const badge = getStatusBadgeParts( $el.data('present'), $el.data('alert'), $el.data('mac')) + const status =`${badge.iconHtml} ${badge.status}` const html = ` - ${name}
- IP: ${ip}
- MAC: ${mac}
- Vendor: ${vendor}
+
${atob(icon)}
${name}
+
+ Status: ${status}
+ IP: ${ip}
+ MAC: ${mac}
+ Vendor: ${vendor}
+ Last seen: ${lastseen}
Relationship: ${relationship} `; diff --git a/front/network.php b/front/network.php index 9260f6cd..b2796f6c 100755 --- a/front/network.php +++ b/front/network.php @@ -583,8 +583,11 @@ function getChildren(node, list, path, visited = []) icon: node.devIcon, type: node.devType, vendor: node.devVendor, + lastseen: node.devLastConnection, ip: node.devLastIP, status: node.devStatus, + presentLastScan: node.devPresentLastScan, + alertDown: node.devAlertDown, hasChildren: children.length > 0 || hiddenMacs.includes(node.devMac), relType: node.devParentRelType, hiddenChildren: hiddenMacs.includes(node.devMac), @@ -642,6 +645,7 @@ function handleNodeClick(el) { const targetTabMAC = $(el).attr("data-mytreemacmain"); + // handle network node var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`); if (targetTab.length) { @@ -652,6 +656,10 @@ function handleNodeClick(el) $('html, body').animate({ scrollTop: targetTab.offset().top - 50 }, 500); // Adjust the duration as needed + } else + { + // handle regular device - open in new tab + goToDevice($(el).data("mac"), true) } } @@ -684,7 +692,7 @@ function initTree(myHierarchy) emSize = pxToEm((treeAreaHeight/(leafNodesCount)).toFixed(2)); - let screenWidthEm = pxToEm($('.networkTable').width()); + let screenWidthEm = pxToEm($('.networkTable').width()-15); // init the drawing area size $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${emToPx(screenWidthEm)}px`) @@ -751,7 +759,7 @@ function initTree(myHierarchy) statusCss = ` netStatus-${nodeData.data.status}`; return result = `
${devicePort} ${deviceIcon} @@ -777,7 +790,8 @@ function initTree(myHierarchy) isHorizontal : true, hasZoom: true, hasPan: true, - marginLeft: '15', + marginLeft: '10', + marginRight: '10', idKey: "mac", hasFlatData: false, relationnalField: "children", diff --git a/server/scan/device_handling.py b/server/scan/device_handling.py index a633efd6..ee9d14fc 100755 --- a/server/scan/device_handling.py +++ b/server/scan/device_handling.py @@ -56,8 +56,7 @@ def update_devices_data_from_scan (db): mylog('debug', '[Update Devices] 1 Last Connection') sql.execute(f"""UPDATE Devices SET devLastConnection = '{startTime}', devPresentLastScan = 1 - WHERE devPresentLastScan = 0 - AND EXISTS (SELECT 1 FROM CurrentScan + WHERE EXISTS (SELECT 1 FROM CurrentScan WHERE devMac = cur_MAC) """) # Clean no active devices