hover-box in devices lists

front/css/app.css

@@ -1542,14 +1542,11 @@ input[readonly] {
     display: none;
 }
 
-
-
 #panDetails #NEWDEV_devCustomProps_label
 {
     display: none;
 }
 
-
 #deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice a
 {
     color: #bec5cb;

front/devices.php

@@ -776,17 +776,33 @@ function initializeDatatable (status) {
 
       // Device Name and FQDN
       {targets: [mapIndx(0), mapIndx(27)],
-        'createdCell': function (td, cellData, rowData, row, col) {      
-            
+        'createdCell': function (td, cellData, rowData, row, col) {    
+                      
             // console.log(cellData)      
-            $(td).html ('<b class="anonymizeDev"><a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
+            $(td).html (
+              `<b class="anonymizeDev hover-node-info"
+                  data-name="${cellData}"
+                  data-ip="${rowData[mapIndx(8)]}"
+                  data-mac="${rowData[mapIndx(11)]}"
+                  data-vendor="${rowData[mapIndx(17)]}"
+                  data-firstseen="${rowData[mapIndx(6)]}"
+                  data-lastseen="${rowData[mapIndx(7)]}"
+                  data-relationship="${rowData[mapIndx(28)]}"
+                  data-status="${rowData[mapIndx(10)]}"
+                  data-present="${rowData[mapIndx(24)]}"
+                  data-alert="${rowData[mapIndx(25)]}"
+                  data-icon="${rowData[mapIndx(3)]}"
+              >
+                <a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="">
+                ${cellData}
+                </a>
+              </b>`
+            );
       } },
 
       // Connected Devices       
       {targets: [mapIndx(15)],
-        'createdCell': function (td, cellData, rowData, row, col) {   
-
-                
+        'createdCell': function (td, cellData, rowData, row, col) {                   
           // check if this is a network device
           if(getSetting("NETWORK_DEVICE_TYPES").includes(`'${rowData[mapIndx(2)]}'`)   )
           {
@@ -965,7 +981,7 @@ function initializeDatatable (status) {
               }, debounceTime);
           });
 
-          
+          initHoverNodeInfo(); 
           hideSpinner();
           
     },

front/js/ui_components.js

@@ -693,6 +693,7 @@ function initSelect2() {
                           data-mac="${device.devMac}"
                           data-vendor="${device.devVendor}"
                           data-lastseen="${device.devLastConnection}"
+                          data-firstseen="${device.devFirstConnection}"
                           data-relationship="${device.devParentRelType}"
                           data-status="${device.devStatus}"
                           data-present="${device.devPresentLastScan}"
@@ -821,6 +822,7 @@ function initHoverNodeInfo() {
       const mac = $el.data('mac') || 'N/A';
       const vendor = $el.data('vendor') || 'Unknown';
       const lastseen = $el.data('lastseen') || 'Unknown';
+      const firstseen = $el.data('firstseen') || 'Unknown';
       const relationship = $el.data('relationship') || 'Unknown';
       const badge = getStatusBadgeParts( $el.data('present'),  $el.data('alert'), $el.data('mac'))
       const status =`<span class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</span>`
@@ -842,6 +844,9 @@ function initHoverNodeInfo() {
         <div class="line">  
           <b>Vendor:</b> <span>${vendor}</span><br>
         </div>
+        <div class="line">  
+          <b>First seen:</b> <span>${firstseen}</span><br>
+        </div>
         <div class="line">  
           <b>Last seen:</b> <span>${lastseen}</span><br>
         </div>

front/network.php

@@ -592,6 +592,7 @@ function getChildren(node, list, path, visited = [])
         type: node.devType,
         vendor: node.devVendor,
         lastseen: node.devLastConnection,
+        firstseen: node.devFirstConnection,
         ip: node.devLastIP,
         status: node.devStatus,
         presentLastScan: node.devPresentLastScan,
@@ -775,6 +776,7 @@ function initTree(myHierarchy)
                             data-mac="${nodeData.data.mac}"
                             data-vendor="${nodeData.data.vendor}"
                             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}"