From e7198738a4e8074a2c582952c58e5d555cbc7ffd Mon Sep 17 00:00:00 2001 From: TheWitness Date: Fri, 9 Oct 2026 17:28:48 -0400 Subject: [PATCH 1/2] feature: Syslog Status auto-refresh interval dropdown + refresh glyph 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. Also switch the Status refresh glyphs from the unrendered Font Awesome 4 fa-refresh alias to fa-sync-alt so they show under the bundled Font Awesome 6. --- CHANGELOG.md | 2 ++ css/search.css | 22 +++++++++++++++++++ js/functions.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++- syslog.php | 17 ++++++++++++++- 4 files changed, 95 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04142c5..2fab517 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/css/search.css b/css/search.css index 6b3f7fa..f644c11 100644 --- a/css/search.css +++ b/css/search.css @@ -835,6 +835,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; diff --git a/js/functions.js b/js/functions.js index 0a5786e..ed1e554 100644 --- a/js/functions.js +++ b/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'); + } + }); }); } diff --git a/syslog.php b/syslog.php index 6701073..bab895a 100644 --- a/syslog.php +++ b/syslog.php @@ -944,7 +944,7 @@ function syslog_status_render_card(string $key, bool $expanded = false): string $tools .= ''; } $tools .= ''; - $tools .= ''; + $tools .= ''; $tools .= ''; $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 ''; } print ''; + + // 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 '
'; + print ''; + print ''; + print ''; + print '
'; print ''; print '
'; From c68ca13950a75e5922b1e22740b7a8a43fa2cd64 Mon Sep 17 00:00:00 2001 From: TheWitness Date: Fri, 9 Oct 2026 18:02:16 -0400 Subject: [PATCH 2/2] syslog status: let the add-card toolbar wrap on narrow viewports Address PR review: the toolbar was a non-wrapping flex row, so the auto-refresh group beside the 220px add-card select overflowed horizontally on narrow/mobile widths. flex-wrap lets the refresh group drop to its own row. --- css/search.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/search.css b/css/search.css index f644c11..f6711f0 100644 --- a/css/search.css +++ b/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;