From 05d96b772c59f385b3a0f959350c990c39b85d8f Mon Sep 17 00:00:00 2001
From: TheWitness <thewitness@cacti.net>
Date: Sat, 10 Oct 2026 17:08:40 -0400
Subject: [PATCH] fix(hmib): scale Device Dashboard host picker via AJAX
 callback; stop header hover reflow

- Device picker: replace the <select> that materialized every Host MIB host as an <option> with a Cacti drop_callback (select2 AJAX) that searches devices server-side through the existing ?action=ajax_hosts endpoint. Installs with 60k+ hosts no longer render tens of thousands of options into the page. The endpoint drops the 'Any' entry (a dashboard always targets one device).
- Card header hover reflow: the drag handle and tool buttons used border:0, so an inherited button:hover border reflowed the header. Reserve a transparent 1px border with box-sizing:border-box, keep border-color transparent on hover/focus, and give the card header a min-height (same fix landed in plugin_syslog/plugin_intropage).
---
 CHANGELOG.md         |  2 ++
 css/hmib.css         | 11 +++++++++--
 hmib.php             | 46 +++++++++++++++++++++++++++++---------------
 locales/po/cacti.pot |  6 +++++-
 4 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88dbb0d..348775e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ChangeLog
 
 --- develop ---
+* issue: Make the per-device Dashboard device picker an AJAX callback (a Cacti drop_callback that searches Host MIB devices server-side via ?action=ajax_hosts) instead of rendering every host as an <option>, so installs with tens of thousands of devices no longer bloat the page
+* issue: Stop the per-device Dashboard card header from resizing when hovering the drag handle or header tool buttons (reserve a transparent 1px border with box-sizing and give the header a min-height)
 * issue: Fix 'Uncaught TypeError: runCollector(): Argument #2 ($lastrun) must be of type float, null given' in the poller when a collector's *_lastrun/*_freq setting has never been written (e.g. a task's first run); runCollector() now accepts null and normalizes it
 * issue: Fix the per-device Dashboard Storage, Per-Processor Load, Hardware and Installed Software cards rendering empty because they filtered on 'present = 1' while the underlying Storage/Hardware/Inventory tabs never did, and add a Process Use History card
 * feature: Add a per-device Dashboard that drills into a single host with a draggable, add/remove card grid (CPU/memory/swap gauges, per-processor load, storage, top processes, hardware, installed software, logins and system information); card order, expanded state, the selected device and the auto-refresh interval persist per user, and a dashboard glyph on the Devices tab opens a stateful Dashboard tab that remembers the last host opened
diff --git a/css/hmib.css b/css/hmib.css
index ebc4a41..c5e1075 100644
--- a/css/hmib.css
+++ b/css/hmib.css
@@ -191,6 +191,7 @@
 	align-items: center;
 	gap: 8px;
 	padding: 7px 10px;
+	min-height: 34px;
 	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
 	background: color-mix(in srgb, currentColor 8%, transparent);
 }
@@ -203,8 +204,10 @@
 
 .hmibDashCardDrag {
 	flex: 0 0 auto;
+	box-sizing: border-box;
 	padding: 2px 5px;
-	border: 0;
+	/* reserve a transparent border so an inherited button:hover border cannot reflow the header */
+	border: 1px solid transparent;
 	border-radius: 4px;
 	background: transparent;
 	color: color-mix(in srgb, currentColor 50%, transparent);
@@ -216,6 +219,7 @@
 .hmibDashCardDrag:hover,
 .hmibDashCardDrag:focus-visible {
 	color: currentColor;
+	border-color: transparent;
 	background: color-mix(in srgb, currentColor 12%, transparent);
 	outline: none;
 }
@@ -244,8 +248,10 @@
 }
 
 .hmibDashCardTool {
+	box-sizing: border-box;
 	padding: 2px 5px;
-	border: 0;
+	/* reserve a transparent border so an inherited button:hover border cannot reflow the header */
+	border: 1px solid transparent;
 	border-radius: 4px;
 	background: transparent;
 	color: color-mix(in srgb, currentColor 50%, transparent);
@@ -257,6 +263,7 @@
 .hmibDashCardTool:hover,
 .hmibDashCardTool:focus-visible {
 	color: currentColor;
+	border-color: transparent;
 	background: color-mix(in srgb, currentColor 12%, transparent);
 	outline: none;
 }
diff --git a/hmib.php b/hmib.php
index c49cf8a..e3da9ee 100644
--- a/hmib.php
+++ b/hmib.php
@@ -28,7 +28,9 @@
 set_default_action('summary');
 
 if (get_request_var('action') == 'ajax_hosts') {
-	get_allowed_ajax_hosts(true, false, 'h.id IN (SELECT host_id FROM plugin_hmib_hrSystem)');
+	// Serves the dashboard's device drop_callback; no 'Any'/'None' entries since a
+	// dashboard always targets one real Host MIB device.
+	get_allowed_ajax_hosts(false, false, 'h.id IN (SELECT host_id FROM plugin_hmib_hrSystem)');
 	exit;
 }
 
@@ -4684,23 +4686,37 @@ function hmib_dashboard(): void {
 		$page_refresh_interval = [0 => __('No Refresh', 'hmib'), 30 => __('30 Seconds', 'hmib'), 60 => __('1 Minute', 'hmib'), 300 => __('5 Minutes', 'hmib')];
 	}
 
-	print '<div class="hmibDashToolbar">';
-	print '<label class="hmibDashToolbarLabel" for="hmib_dashboard_host">' . __esc('Device', 'hmib') . '</label>';
-	print '<select id="hmib_dashboard_host" class="hmibDashHost">';
+	// Device picker: a Cacti drop_callback (select2 AJAX) that searches Host MIB
+	// devices server-side via ?action=ajax_hosts, so installs with tens of
+	// thousands of hosts never materialize the full option list in the DOM.
+	$host_name = db_fetch_cell_prepared('SELECT description FROM host WHERE id = ?', [$host_id]);
+
+	form_start('hmib.php', 'hmib_dashboard_device_form');
+
+	html_start_box('', '100%', '', '3', 'center', '');
+
+	draw_edit_form([
+		'config' => ['no_form_tag' => true],
+		'fields' => [
+			'hmib_dashboard_host' => [
+				'method'        => 'drop_callback',
+				'action'        => 'ajax_hosts',
+				'id'            => $host_id,
+				'sql'           => 'SELECT ' . db_qstr($host_id) . ' AS id, ' . db_qstr((string) $host_name) . ' AS name',
+				'friendly_name' => __('Device', 'hmib'),
+				'description'   => __('Search Host MIB devices as you type to open that device\'s dashboard.', 'hmib'),
+				'value'         => $host_id,
+				'size'          => 40,
+				'max_length'    => 64
+			]
+		]
+	]);
 
-	$hosts = db_fetch_assoc("SELECT host.id, host.description
-		FROM plugin_hmib_hrSystem AS hrs
-		INNER JOIN host ON host.id = hrs.host_id
-		WHERE host.description != ''
-		ORDER BY host.description");
+	html_end_box(false);
 
-	if (cacti_sizeof($hosts)) {
-		foreach ($hosts as $host) {
-			print '<option value="' . (int) $host['id'] . '"' . ((int) $host['id'] === $host_id ? ' selected' : '') . '>' . html_escape($host['description']) . '</option>';
-		}
-	}
+	form_end();
 
-	print '</select>';
+	print '<div class="hmibDashToolbar">';
 
 	print '<label class="hmibDashToolbarLabel" for="hmib_dashboard_add">' . __esc('Add card', 'hmib') . '</label>';
 	print '<select id="hmib_dashboard_add" class="hmibDashAdd"><option value="">' . __esc('Add a card…', 'hmib') . '</option>';
diff --git a/locales/po/cacti.pot b/locales/po/cacti.pot
index 393cc92..0aea7f1 100644
--- a/locales/po/cacti.pot
+++ b/locales/po/cacti.pot
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Cacti\n"
 "Report-Msgid-Bugs-To: developers@cacti.net\n"
-"POT-Creation-Date: 2026-10-10 09:47-0400\n"
+"POT-Creation-Date: 2026-10-10 17:07-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: Cacti Developers <developers@cacti.net>\n"
 "Language-Team: Cacti Developers <developers@cacti.net>\n"
@@ -777,6 +777,10 @@ msgstr ""
 msgid "No Refresh"
 msgstr ""
 
+#: hmib.php
+msgid "Search Host MIB devices as you type to open that device's dashboard."
+msgstr ""
+
 #: hmib.php
 msgid "Add card"
 msgstr ""