Skip to content

Improve: label each figure on a small System Summary tile #127

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
SandObserver merged 1 commit into from
Aug 18, 2026
Merged

Improve: label each figure on a small System Summary tile #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@

### Added

- System Summary can read its figures from a host running Glances or Beszel, or

Check warning on line 12 in CHANGELOG.md

View workflow job for this annotation

GitHub Actions / test 

entry is 178 characters; keep it to one line: "System Summary can read its figures from a host running G..."

Check warning on line 12 in CHANGELOG.md

View workflow job for this annotation

GitHub Actions / test 

writes to the reader; state the fact about the software: "System Summary can read its figures from a host running G..."
from the Unraid API. The network row's throughput follows the same source, on
an interface you pick.

### Changed

- Small System Summary tiles now label each figure, as the medium size does.

- The Stats widget is now two widgets, System Summary and Disk Health. Existing
tiles are converted on the next load.

Expand Down
22 changes: 16 additions & 6 deletions ui/widgets/system-summary/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,12 @@
justify-content: space-evenly; }
.widget.size-medium { flex-direction: row; }

/* Small: stacked value rows matching medium left column style */
.slot-row { display: flex; align-items: center; flex: 1; min-height: 0; }
/* Small: stacked rows, each a label above its value */
.slot-row { display: flex; flex-direction: column; justify-content: center;
flex: 1; min-height: 0; gap: 1px; }
.slot-row .chart-lbl { margin-bottom: 0; }
.slot-row .v { font-size: clamp(15px, 5.6cqw, 23px); }
.slot-row .disk-num { font-size: clamp(13px, 4.4cqw, 19px); }

/* Medium: left column (values) + right column (charts) */
.col-left { display: flex; flex-direction: column; justify-content: space-evenly;
Expand Down Expand Up @@ -205,9 +209,14 @@
return d;
}

/* slot.type comes from config, which can arrive by import, so an unknown type
falls back to its own text and every use escapes it. */
const SLOT_LABELS = { cpu:'CPU', ram:'RAM', temp:'TEMP', disk:'DISK', iowait:'IO WAIT', procs:'PROCS' };
const slotLabel = slot => SLOT_LABELS[slot.type] || String(slot.type || '').toUpperCase();

function mkChartEl(slot, i) {
const d = document.createElement('div'); d.className = 'chart-section';
const lbl = { cpu:'CPU', ram:'RAM', temp:'TEMP', disk:'DISK', iowait:'IO WAIT', procs:'PROCS' }[slot.type] || slot.type.toUpperCase();
const lbl = slotLabel(slot);
/* slot.type comes from config, which can arrive by import. html`` escapes
it. */
if (slot.type === 'disk') {
Expand Down Expand Up @@ -244,19 +253,20 @@

function mkSmallRow(slot, i) {
const d = document.createElement('div'); d.className = 'slot-row';
const lbl = html`<div class="chart-lbl">${slotLabel(slot)}</div>`;
if (slot.type === 'disk') {
/* Disk: show used/total in cyan like medium left column */
setHtml(d, html`<div class="disk-line">
setHtml(d, html`${lbl}<div class="disk-line">
<span class="disk-num" id="small-disk-used-${i}">—</span><span class="disk-unit">GB</span>
<span class="disk-sep">/</span>
<span class="disk-num" id="small-disk-total-${i}">—</span><span class="disk-unit">GB</span>
</div>`);
} else if (slot.type === 'iowait' || slot.type === 'procs') {
const unit = slot.type === 'iowait' ? '%' : '';
setHtml(d, html`<div class="v" id="small-${i}" style="color:var(--sc${i}, #0091FF)">—${unit}</div>`);
setHtml(d, html`${lbl}<div class="v" id="small-${i}" style="color:var(--sc${i}, #0091FF)">—${unit}</div>`);
} else {
const unit = slot.type === 'temp' ? '°' : '%';
setHtml(d, html`<div class="v c-${slot.type}" id="small-${i}">—${unit}</div>`);
setHtml(d, html`${lbl}<div class="v c-${slot.type}" id="small-${i}">—${unit}</div>`);
}
return d;
}
Expand Down