0.36.4

src/admin/web/transform-panel.js

@@ -103,7 +103,7 @@
     function renderReasons(counters) {
         const entries = Object.entries(counters?.reasons || {}).sort((a, b) => b[1] - a[1]);
         const target = $("transform-reason-list"); target.replaceChildren(...entries.map(([key, count]) => {
-            const tag = el("span", `${key}: ${number(count)}`, "cache-reason"); tag.title = key; return tag;
+            const tag = el("span", undefined, "cache-reason-line"); tag.append(el("span", key, "cache-reason-name"), el("b", number(count), "cache-reason-count")); tag.title = key; return tag;
         }));
         $("transform-reasons-empty").hidden = entries.length > 0;
         $("tp-skip-top").textContent = entries.length ? entries.slice(0, 2).map(([key, count]) => `${key}: ${number(count)}`).join(" · ") : t("transformNoSkipsShort");
@@ -113,16 +113,12 @@
         const rows = (data?.metrics?.scopes || []).filter(row => wanted === "*" || row.vhost === wanted);
         $("transform-vhost-rows").replaceChildren(...rows.map(row => {
             const tr = el("tr");
-            for (const value of [
-                row.vhost,
-                number(row.applied),
-                number(row.cache_hits),
-                number(row.skipped),
-                number(row.errors),
-                fmtBytes(row.saved_bytes || 0),
-                percent(row),
-                averageMs(row)
-            ]) tr.append(el("td", value));
+            tr.append(el("td", row.vhost, "transform-vhost-name"));
+            for (const value of [number(row.applied), number(row.cache_hits), number(row.skipped)]) tr.append(el("td", value));
+            tr.append(el("td", number(row.errors), Number(row.errors) > 0 ? "transform-errors-nonzero" : "transform-zero"), el("td", fmtBytes(row.saved_bytes || 0)));
+            const original = Number(row.original_bytes) || 0, share = original > 0 ? Math.max(0, Math.min(100, (Number(row.saved_bytes) || 0) / original * 100)) : 0;
+            const reduction = el("td", undefined, "cache-ratio-cell"), meter = el("span", undefined, "cache-ratio-meter"), fill = el("i"); fill.style.width = `${share}%`; meter.append(fill); reduction.append(el("span", percent(row), "cache-ratio-value"), meter);
+            tr.append(reduction, el("td", averageMs(row)));
             return tr;
         }));
         $("transform-vhosts-empty").hidden = rows.length > 0;