Syslog Status: auto-refresh interval dropdown + refresh glyph

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 --- develop ---
 
+* feature: Add an auto-refresh interval dropdown and a manual refresh glyph to the Syslog Status toolbar (mirroring the intropage refresh concept); the interval persists through the page's auto-reload and the refresh glyphs spin while their cards reload
+* bug: Show the Syslog Status card refresh glyph again by using Font Awesome's fa-sync-alt (the bundled Font Awesome 6 no longer renders the Font Awesome 4 fa-refresh alias)
 * change: Repaint the Syslog Status card headers with the active theme's native html_start_box title bar (sampled from the live cactiTableTitle at runtime) instead of a flat surface tint so they match Cacti on every theme, widen the card grid from 6 to 8 columns, drop the card corner radius, and give each header one of four translucent severity overlays - a neutral grey "no severity" default plus intropage's good / warning / error palette (#94b36b / #ff8f1e / #cc0000)
 * feature: Manage the Syslog Status cards like intropage panels: per-card header tools show more / show less (only for cards that support it), open the card in a large dialog, refresh its data in place, or remove it; an "Add card" catalogue lists any cards not on the page and injects them back on demand, and the whole layout (which cards are present, their order and expanded state) is saved per-user in a single settings_user row
 * feature: Let users drag the Syslog Status cards by a header handle to reorder them; the chosen order is saved per-user in the settings_user table and restored on the next visit

css/search.css

@@ -813,6 +813,7 @@
 /* "Add card" toolbar above the grid. */
 .syslogStatusToolbar {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 	margin: 10px 4px 0;
@@ -835,6 +836,28 @@
 	font-size: 12px;
 }
 
+/* Auto-refresh interval + manual refresh, pushed to the right of the toolbar. */
+.syslogStatusRefresh {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-left: auto;
+}
+
+.syslogStatusRefreshInterval {
+	box-sizing: border-box;
+	padding: 4px 8px;
+	border: 1px solid var(--search-border, #cbd8d1);
+	border-radius: 7px;
+	background: var(--search-card, #fff);
+	color: var(--search-text, #23362f);
+	font-size: 12px;
+}
+
+.syslogStatusRefreshNow {
+	font-size: 14px;
+}
+
 /* Per-card header tools: show more/less, maximize, refresh, remove. */
 .syslogStatusCardTools {
 	flex: 0 0 auto;

js/functions.js

@@ -471,6 +471,22 @@ function initSyslogStatus() {
 				}
 			});
 		}
+
+		// Changing the interval reloads the page so Cacti's page refresh picks up the
+		// new value; it persists in the session for subsequent auto-reloads.
+		var interval = document.getElementById('syslog_status_refresh');
+		if (interval) {
+			$(interval).off('change.syslogstatus').on('change.syslogstatus', function() {
+				window.location = 'syslog.php?tab=status&refresh=' + encodeURIComponent(this.value);
+			});
+		}
+
+		var refreshNow = document.getElementById('syslog_status_refresh_now');
+		if (refreshNow) {
+			$(refreshNow).off('click.syslogstatus').on('click.syslogstatus', function() {
+				syslogStatusRefreshAll(grid, this);
+			});
+		}
 	});
 }
 
@@ -591,20 +607,58 @@ function syslogStatusRemoveCard(grid, card) {
 }
 
 /** Re-fetch a single card's HTML and swap it in place, keeping expanded state. */
-function syslogStatusRefreshCard(grid, card) {
+function syslogStatusRefreshCard(grid, card, done) {
+	var icon = card.querySelector('.syslogStatusCardTool[data-tool="refresh"] .fa');
+	if (icon) {
+		icon.classList.add('fa-spin');
+	}
+	var settle = function() {
+		if (icon) {
+			icon.classList.remove('fa-spin');
+		}
+		if (done) {
+			done();
+		}
+	};
 	var expanded = card.classList.contains('syslogStatusCardExpanded') ? '1' : '0';
 	$.post('syslog.php', {action: 'status_card', tab: 'status', card: card.dataset.card, expanded: expanded, __csrf_magic: csrfMagicToken}, null, 'json').done(function(data) {
 		// The card may have been removed or already replaced while we waited.
 		if (!data || !data.html || !card.parentNode) {
+			settle();
 			return;
 		}
 		var fresh = syslogStatusParseCard(data.html);
 		if (!fresh) {
+			settle();
 			return;
 		}
 		card.parentNode.replaceChild(fresh, card);
 		applySyslogTheme(grid);
 		syslogStatusBindCard(grid, fresh);
+		if (done) {
+			done();
+		}
+	}).fail(settle);
+}
+
+/** Refresh every card on the page, spinning the toolbar glyph until all land. */
+function syslogStatusRefreshAll(grid, button) {
+	var icon = button ? button.querySelector('.fa') : null;
+	var cards = Array.prototype.slice.call(grid.querySelectorAll('.syslogStatusCard'));
+	var pending = cards.length;
+	if (!pending) {
+		return;
+	}
+	if (icon) {
+		icon.classList.add('fa-spin');
+	}
+	cards.forEach(function(card) {
+		syslogStatusRefreshCard(grid, card, function() {
+			pending--;
+			if (pending <= 0 && icon) {
+				icon.classList.remove('fa-spin');
+			}
+		});
 	});
 }
 

syslog.php

@@ -944,7 +944,7 @@ function syslog_status_render_card(string $key, bool $expanded = false): string
 		$tools .= '<button type="button" class="syslogStatusCardTool" data-tool="collapse" aria-label="' . __esc('Show less', 'syslog') . '" title="' . __esc('Show less', 'syslog') . '"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>';
 	}
 	$tools .= '<button type="button" class="syslogStatusCardTool" data-tool="maximize" aria-label="' . __esc('Open in a dialog', 'syslog') . '" title="' . __esc('Open in a dialog', 'syslog') . '"><i class="fa fa-window-maximize" aria-hidden="true"></i></button>';
-	$tools .= '<button type="button" class="syslogStatusCardTool" data-tool="refresh" aria-label="' . __esc('Refresh', 'syslog') . '" title="' . __esc('Refresh', 'syslog') . '"><i class="fa fa-refresh" aria-hidden="true"></i></button>';
+	$tools .= '<button type="button" class="syslogStatusCardTool" data-tool="refresh" aria-label="' . __esc('Refresh', 'syslog') . '" title="' . __esc('Refresh', 'syslog') . '"><i class="fa fa-sync-alt" aria-hidden="true"></i></button>';
 	$tools .= '<button type="button" class="syslogStatusCardTool" data-tool="remove" aria-label="' . __esc('Remove from page', 'syslog') . '" title="' . __esc('Remove from page', 'syslog') . '"><i class="fa fa-times" aria-hidden="true"></i></button>';
 
 	$classes = 'syslogStatusCard syslogStatusSpan' . (int) $def['span'];
@@ -1076,6 +1076,8 @@ function syslog_status_card_ajax(): string {
  * @return void
  */
 function syslog_status(): void {
+	global $page_refresh_interval;
+
 	$layout = syslog_status_layout();
 	$meta   = syslog_status_card_meta();
 	$absent = array_values(array_diff(syslog_status_available_cards(), $layout['order']));
@@ -1089,6 +1091,19 @@ function syslog_status(): void {
 		print '<option value="' . html_escape($key) . '">' . html_escape($meta[$key]['title']) . '</option>';
 	}
 	print '</select>';
+
+	// Auto-refresh interval picker plus a manual refresh, mirroring the log view's
+	// header refresh.  The interval persists through the page's auto-reload.
+	$current_refresh = get_request_var('refresh');
+	print '<div class="syslogStatusRefresh">';
+	print '<label class="syslogStatusToolbarLabel" for="syslog_status_refresh">' . __esc('Refresh', 'syslog') . '</label>';
+	print '<select id="syslog_status_refresh" class="syslogStatusRefreshInterval">';
+	foreach ($page_refresh_interval as $seconds => $display_text) {
+		print '<option value="' . (int) $seconds . '"' . ($current_refresh == $seconds ? ' selected' : '') . '>' . html_escape($display_text) . '</option>';
+	}
+	print '</select>';
+	print '<button type="button" id="syslog_status_refresh_now" class="syslogStatusCardTool syslogStatusRefreshNow" aria-label="' . __esc('Refresh', 'syslog') . '" title="' . __esc('Refresh', 'syslog') . '"><i class="fa fa-sync-alt" aria-hidden="true"></i></button>';
+	print '</div>';
 	print '</div>';
 
 	print '<div id="syslog_status" class="syslogStatusGrid">';