Skip to content

syslog: equal-width severity-legend chips via CSS grid + longest-label seed #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheWitness merged 4 commits into from
Oct 7, 2026
Merged

syslog: equal-width severity-legend chips via CSS grid + longest-label seed #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da8e3df
syslog: equal-width severity-legend chips via CSS grid + longest-labe…
TheWitness Oct 7, 2026
d53f9c3
syslog: short-array syntax for legend items; test sizing follows tran…
TheWitness Oct 7, 2026
6579c01
syslog: escape status-legend chip labels at output
TheWitness Oct 7, 2026
fdf86fd
Merge develop into feature/legend-equal-chips-grid
TheWitness Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

* feature: Add Remote Data Collector processing, rules-sync, and record-storage options to the setup advisor; reject Aria selections whenever any collector option is enabled
* change: Use TEXT for message columns previously limited to VARCHAR(2048), including existing installations
* dev: Size the severity-legend chips to the longest label and lay them out as a CSS grid so every chip stays equal width as the legend wraps (matching the thold/monitor/servcheck/mactrack legends)
* ci: Drop Ruby from the CodeQL language matrix; the plugin ships no Ruby source, so the Ruby database build failed with "no source code seen"
* dev: Move the shared function and database libraries to includes/ and point the entry-point includes, coverage source, and tests at the new path
* feature: Restyle the System Logs and Alert Logs severity legends as rounded, evenly spaced, solid-colour chips that line up with the Thold status legends, with theme-appropriate backgrounds loaded from a per-theme css/<theme>.css file (falling back to a theme-neutral css/legend.css)
Expand Down
6 changes: 2 additions & 4 deletions css/classic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the classic (light surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the dark (dark surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/deepness.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the dark (dark surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/legend.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Theme-neutral Syslog status-legend palette; the fallback loaded by syslog_include_js() when the active theme ships no dedicated css/<theme>.css file. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/midwinter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the midwinter (dark surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/modern.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the modern (light surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/paper-plane.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the paper-plane (dark surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/paw.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the paw (light surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions css/sunrise.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
/* Syslog status-legend palette for the sunrise (dark surface) theme. */

.syslogLegend {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--syslog-chip-min, 8ch), 1fr));
gap: 4px;
width: 100%;
}

.syslogLegend .syslogLegendItem {
flex: 1 1 0;
min-width: var(--syslog-chip-min, max-content);
text-align: center;
white-space: nowrap;
padding: 4px 6px;
Expand Down
6 changes: 2 additions & 4 deletions includes/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -759,7 +759,6 @@ function syslog_syslog_legend(): void {
];

$chip_min = 0;

foreach ($items as $label) {
$chip_min = max($chip_min, mb_strlen($label));
}
Expand All @@ -768,7 +767,7 @@ function syslog_syslog_legend(): void {
print '<div class="syslogLegend" style="--syslog-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';

foreach ($items as $class => $label) {
print '<div class="syslogLegendItem ' . $class . '">' . $label . '</div>';
print '<div class="syslogLegendItem ' . $class . '">' . html_escape($label) . '</div>';
}

print '</div>';
Expand All @@ -795,7 +794,6 @@ function syslog_log_legend(): void {
];

$chip_min = 0;

foreach ($items as $label) {
$chip_min = max($chip_min, mb_strlen($label));
}
Expand All @@ -804,7 +802,7 @@ function syslog_log_legend(): void {
print '<div class="syslogLegend" style="--syslog-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';

foreach ($items as $class => $label) {
print '<div class="syslogLegendItem ' . $class . '">' . $label . '</div>';
print '<div class="syslogLegendItem ' . $class . '">' . html_escape($label) . '</div>';
}

print '</div>';
Expand Down
46 changes: 40 additions & 6 deletions tests/Unit/SyslogLegendTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,20 @@
$output = ob_get_clean();

expect($output)->toContain('<tr class="tableRow"><td>');
expect($output)->toContain('<div class="syslogLegend" style="--syslog-chip-min:');
expect(substr_count($output, 'syslogLegendItem'))->toBe(8);

foreach (['logEmergency' => 'Emergency', 'logCritical' => 'Critical', 'logAlert' => 'Alert',
$items = ['logEmergency' => 'Emergency', 'logCritical' => 'Critical', 'logAlert' => 'Alert',
'logError' => 'Error', 'logWarning' => 'Warning', 'logNotice' => 'Notice',
'logInfo' => 'Info', 'logDebug' => 'Debug'] as $class => $label) {
'logInfo' => 'Info', 'logDebug' => 'Debug'];

$expected = 0;
foreach ($items as $label) {
$expected = max($expected, mb_strlen($label));
}

expect($output)->toContain('<div class="syslogLegend" style="--syslog-chip-min: calc(' . $expected . 'ch + 1.5rem)">');
Comment thread
TheWitness marked this conversation as resolved.
expect(substr_count($output, 'syslogLegendItem'))->toBe(8);

foreach ($items as $class => $label) {
expect($output)->toContain('<div class="syslogLegendItem ' . $class . '">' . $label . '</div>');
}
});
Expand All @@ -58,14 +66,40 @@
syslog_log_legend();
$output = ob_get_clean();

expect($output)->toContain('<div class="syslogLegend" style="--syslog-chip-min:');
$items = ['logAlert' => 'Alert', 'logWarning' => 'Warning', 'logInfo' => 'Informational'];

$expected = 0;
foreach ($items as $label) {
$expected = max($expected, mb_strlen($label));
}

expect($output)->toContain('<div class="syslogLegend" style="--syslog-chip-min: calc(' . $expected . 'ch + 1.5rem)">');
expect(substr_count($output, 'syslogLegendItem'))->toBe(3);

foreach (['logAlert' => 'Alert', 'logWarning' => 'Warning', 'logInfo' => 'Informational'] as $class => $label) {
foreach ($items as $class => $label) {
expect($output)->toContain('<div class="syslogLegendItem ' . $class . '">' . $label . '</div>');
}
});

it('sizes the chips from the translated labels, not the English source', function () {
syslog_load_plugin_source('includes/functions.php');

$long = 'A very long translated error label';

// 'Error' is short in English; its translation is the longest label, so the
// chip minimum must follow the translated (emitted) output, not the source.
test_override('__', function ($text) use ($long) {
return $text === 'Error' ? $long : $text;
});

ob_start();
syslog_syslog_legend();
$output = ob_get_clean();

expect($output)->toContain('--syslog-chip-min: calc(' . mb_strlen($long) . 'ch + 1.5rem)');
expect($output)->toContain('<div class="syslogLegendItem logError">' . $long . '</div>');
});

it('links the theme legend stylesheet when the theme ships one', function () {
syslog_load_plugin_source('includes/functions.php');

Expand Down
Loading