diff --git a/front/css/app.css b/front/css/app.css
index e5bb5dd4..f5e26c52 100755
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -1489,7 +1489,7 @@ input[readonly] {
}
#tableDevicesBox td svg, #tableDevicesBox td i{
- height: 1.5em !important;
+ height: 1em !important;
}
#TileCards .tile .inner
@@ -1649,6 +1649,23 @@ input[readonly] {
pointer-events: none;
}
+.custom-badge a
+{
+ color: #fff !important;
+ font-size: 14px;
+}
+.custom-badge
+{
+ border: 1px solid #aaa;
+ border-radius: 4px;
+ border-style: solid;
+ margin-right: 5px;
+ margin-top: 5px;
+ padding: 0 5px;
+ font-size: 14px;
+ display: inline-block;
+}
+
#deviceDetailsEdit .form-control
{
min-height: 42px;
diff --git a/front/devices.php b/front/devices.php
index 68135483..d54b7e11 100755
--- a/front/devices.php
+++ b/front/devices.php
@@ -503,36 +503,36 @@ function collectFilters() {
function mapColumnIndexToFieldName(index, tableColumnVisible) {
// the order is important, don't change it!
const columnNames = [
- "devName",
- "devOwner",
- "devType",
- "devIcon",
- "devFavorite",
- "devGroup",
- "devFirstConnection",
- "devLastConnection",
- "devLastIP",
- "devIsRandomMac", // resolved on the fly
- "devStatus", // resolved on the fly
- "devMac",
- "devIpLong", //formatIPlong(device.devLastIP) || "", // IP orderable
- "rowid",
- "devParentMAC",
- "devParentChildrenCount", // resolved on the fly
- "devLocation",
- "devVendor",
- "devParentPort",
- "devGUID",
- "devSyncHubNode",
- "devSite",
- "devSSID",
- "devSourcePlugin",
- "devPresentLastScan",
- "devAlertDown",
- "devCustomProps",
- "devFQDN",
- "devParentRelType",
- "devReqNicsOnline"
+ "devName", // 0
+ "devOwner", // 1
+ "devType", // 2
+ "devIcon", // 3
+ "devFavorite", // 4
+ "devGroup", // 5
+ "devFirstConnection", // 6
+ "devLastConnection", // 7
+ "devLastIP", // 8
+ "devIsRandomMac", // 9 resolved on the fly
+ "devStatus", // 10 resolved on the fly
+ "devMac", // 11
+ "devIpLong", // 12 formatIPlong(device.devLastIP) || "", // IP orderable
+ "rowid", // 13
+ "devParentMAC", // 14
+ "devParentChildrenCount", // 15 resolved on the fly
+ "devLocation", // 16
+ "devVendor", // 17
+ "devParentPort", // 18
+ "devGUID", // 19
+ "devSyncHubNode", // 20
+ "devSite", // 21
+ "devSSID", // 22
+ "devSourcePlugin", // 23
+ "devPresentLastScan", // 24
+ "devAlertDown", // 25
+ "devCustomProps", // 26
+ "devFQDN", // 27
+ "devParentRelType", // 28
+ "devReqNicsOnline" // 29
];
// console.log("OrderBy: " + columnNames[tableColumnOrder[index]]);
@@ -899,6 +899,28 @@ function initializeDatatable (status) {
}
} },
+ // Parent Mac
+ {targets: [mapIndx(14)],
+ 'createdCell': function (td, cellData, rowData, row, col) {
+ if (!cellData) {
+ $(td).html('');
+ return;
+ }
+
+ const data = {
+ id: cellData, // MAC address
+ text: cellData // Optional display text (you could use a name or something else)
+ };
+
+ spanWrap = $(``)
+
+ $(td).html(spanWrap);
+
+ const chipHtml = renderDeviceLink(data, spanWrap, true); // pass the td as container
+
+ $(spanWrap).append(chipHtml);
+ }
+ },
// Status color
{targets: [mapIndx(10)],
'createdCell': function (td, cellData, rowData, row, col) {
diff --git a/front/js/ui_components.js b/front/js/ui_components.js
index 116bfd90..795f5e47 100755
--- a/front/js/ui_components.js
+++ b/front/js/ui_components.js
@@ -715,45 +715,7 @@ function initSelect2() {
{
var selectEl = $(this).select2({
templateSelection: function (data, container) {
- if (!data.id) return data.text; // default for placeholder etc.
-
- const device = getDevDataByMac(data.id);
-
- const badge = getStatusBadgeParts(
- device.devPresentLastScan,
- device.devAlertDown,
- device.devMac
- )
-
- $(container).addClass(badge.cssClass);
-
- // Custom HTML
- const html = $(`
-
-
- ${atob(device.devIcon)}
- ${data.text}
-
- (${badge.iconHtml})
-
-
- `);
-
- return html;
+ return $(renderDeviceLink(data, container));
},
escapeMarkup: function (m) {
return m; // Allow HTML
@@ -817,6 +779,48 @@ function initSelect2() {
}
}
+// ------------------------------------------
+// Render a device link with hover-over functionality
+function renderDeviceLink(data, container, useName=false) {
+ if (!data.id) return data.text; // default placeholder etc.
+
+ const device = getDevDataByMac(data.id);
+
+ const badge = getStatusBadgeParts(
+ device.devPresentLastScan,
+ device.devAlertDown,
+ device.devMac
+ );
+
+ $(container).addClass(badge.cssClass);
+
+ return `
+
+
+ ${atob(device.devIcon)}
+ ${useName ? device.devName : data.text}
+
+ (${badge.iconHtml})
+
+
+
+ `;
+}
+
+
// ------------------------------------------
// Display device info on hover (attach only once)
function initHoverNodeInfo() {
diff --git a/front/systeminfoNetwork.php b/front/systeminfoNetwork.php
index 0702bdc8..6056e457 100755
--- a/front/systeminfoNetwork.php
+++ b/front/systeminfoNetwork.php
@@ -264,8 +264,6 @@ function fetchUsedIps(callback) {
function renderAvailableIpsTable(allIps, usedIps) {
const availableIps = allIps.filter(row => !usedIps.includes(row.ip));
- console.log(allIps);
- console.log(usedIps);
console.log(availableIps);
$('#availableIpsTable').DataTable({