Highlight critical utilization on the system page (v0.9.6)

The Current cell of CPU/RAM/disk used turns orange from 80% of the
total and red from 90%. UiFormats.utilizationClass and the mirrored
utilizationClass in gittally.js apply the same thresholds; unavailable
metrics (n/a) are never highlighted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/main/resources/static/gittally.css

@@ -95,6 +95,9 @@ tbody.is-stale { opacity: 0.55; }
 /* system metrics */
 #system-table { min-width: 640px; }
 .num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
+/* critical utilization of the current value: warn from 80% of the total, critical from 90% */
+.metric-warn { background: var(--interrupted-bg); color: var(--interrupted-text); font-weight: 700; }
+.metric-crit { background: var(--failed-bg); color: var(--failed-text); font-weight: 700; }
 th.num { font-family: inherit; font-size: 12px; }
 .meta { margin: 14px 0 0; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
 

src/main/resources/static/gittally.js

@@ -433,6 +433,24 @@ function initCurrentBuilds() {
 
 // ---- system metrics ----------------------------------------------------------
 
+/** The total each utilization metric is compared against for the critical highlighting. */
+const UTILIZATION_TOTALS = { cpuUsed: "cpuCount", ramUsedGib: "ramTotalGib", diskUsedGib: "diskTotalGib" };
+
+/** Same thresholds as UiFormats.utilizationClass: warn from 80% of the total, critical from 90%. */
+function utilizationClass(used, total) {
+    if (used == null || total == null || !(total > 0)) {
+        return "";
+    }
+    const ratio = used / total;
+    if (ratio >= 0.90) {
+        return "metric-crit";
+    }
+    if (ratio >= 0.80) {
+        return "metric-warn";
+    }
+    return "";
+}
+
 /** The metric rows are fixed, so only the cell texts are updated — never rebuilt. */
 function initSystemTable() {
     const table = document.getElementById("system-table");
@@ -454,6 +472,15 @@ function initSystemTable() {
             row.querySelectorAll("[data-field]").forEach((cell) => {
                 cell.textContent = formatMetric(aggregate ? aggregate[cell.dataset.field] : null);
             });
+            const currentCell = row.querySelector('[data-field="current"]');
+            if (currentCell) {
+                const totalField = UTILIZATION_TOTALS[row.dataset.metric];
+                const cssClass = totalField
+                    ? utilizationClass(aggregate ? aggregate.current : null, metrics[totalField])
+                    : "";
+                currentCell.classList.toggle("metric-warn", cssClass === "metric-warn");
+                currentCell.classList.toggle("metric-crit", cssClass === "metric-crit");
+            }
         });
         setText("info-cpu-count", metrics.cpuCount != null ? metrics.cpuCount + " cores" : "n/a");
         setText("info-ram-total", metrics.ramTotalGib != null ? formatMetric(metrics.ramTotalGib) + " GiB" : "n/a");

src/main/resources/templates/system.html

@@ -19,7 +19,7 @@
             <tbody id="system-rows">
             <tr th:each="row : ${metrics.rows}" th:attr="data-metric=${row.key}">
                 <td data-label="Metric" th:text="${row.label}">CPU used (cores)</td>
-                <td class="num" data-label="Current" data-field="current" th:text="${row.current}">0.42</td>
+                <td class="num" data-label="Current" data-field="current" th:classappend="${row.currentClass}" th:text="${row.current}">0.42</td>
                 <td class="num" data-label="Min" data-field="min" th:text="${row.min}">0.10</td>
                 <td class="num" data-label="Max" data-field="max" th:text="${row.max}">3.20</td>
                 <td class="num" data-label="Avg" data-field="avg" th:text="${row.avg}">0.80</td>