v0.34.3

src/admin/web/app/runtime.js

@@ -174,6 +174,7 @@ $("reload-certificates").addEventListener("click", async () => {
 $("reset-certificate").addEventListener("click", () => { $("certificate-form").reset(); $("certificate-file-source").value = "managed"; syncCertificateFileSource(); });
 syncCertificateFileSource();
 
+let cacheMixLastCounters = null, cacheMixLastShares = null, cacheMixLastTotal = 0;
 let systemSamples = [], connectionOpenSamples = [], connectionExchangeSamples = [], cacheMemorySamples = [], cacheTransientSamples = [], cacheFillSamples = [], cacheColdQueueSamples = [], cacheColdIoSamples = [], cacheColdStorageSamples = [], cacheHitSamples = [], cacheMissSamples = [], cacheBypassSamples = [], lastCacheCounters = null, lastCacheOutcomeRates = null,
     processCpuSamples = [], processRssSamples = [], networkRxSamples = [], networkTxSamples = [], responseLatencySamples = [], networkInterfaceSamples = new Map(), settingsDirty = new Set();
 const hiddenNetworkInterfaces = (() => {
@@ -330,6 +331,34 @@ function renderNetworkInterfaceCharts(interfaces, appendSample) {
         target.replaceChildren(...children);
     }
 }
+
+function cacheOutcomeMix(deltas) {
+    if (!Array.isArray(deltas) || deltas.length !== 4 ||
+        deltas.some(value => !Number.isFinite(value) || value < 0)) return null;
+    const [requests, hits, misses, bypasses] = deltas;
+    const cacheTotal = hits + misses + bypasses;
+    if (requests <= 0 || cacheTotal > requests) return null;
+    const counts = [hits, misses, bypasses, requests - cacheTotal];
+    return { counts, percentages: counts.map(value => value / requests * 100), requests };
+}
+function renderCacheMix(mix) {
+    const names = ["hit", "miss", "bypass", "other"];
+    names.forEach((name, i) => {
+        const pct = mix ? mix.percentages[i] : 0;
+        $(`cache-mix-${name}`).style.width = `${pct}%`;
+        $(`cache-mix-${name}-percent`).textContent = mix ? `${fmt(pct, 1)}%` : "-";
+    });
+    $("cache-mix-headline").textContent = mix ? `${fmt(mix.percentages[0], 1)}% HIT` : "-";
+    $("cache-mix-caption").textContent = mix
+        ? t("cacheMixSample").replace("{count}", fmt(mix.requests))
+        : t("cacheMixWaiting");
+    $("cache-mix-bar").setAttribute("aria-label", mix
+        ? t("cacheMixAria").replace("{hit}", fmt(mix.counts[0]))
+            .replace("{miss}", fmt(mix.counts[1]))
+            .replace("{bypass}", fmt(mix.counts[2]))
+            .replace("{other}", fmt(mix.counts[3]))
+        : t("cacheMixWaiting"));
+}
 function renderDiagnostics(status, appendSample = true, systemSample = appendSample) {
     const d = status.system || {}, live = status.live_system || d, c = status.cache || {}, m = status.metrics || {};
     $("metric-h3").textContent = fmt(m.http3_requests);
@@ -337,6 +366,14 @@ function renderDiagnostics(status, appendSample = true, systemSample = appendSam
     const cacheEvents = cacheHits !== null && cacheMisses !== null ? cacheHits + cacheMisses : 0;
     $("metric-cache-ratio").textContent = cacheEvents > 0 ? `${fmt(cacheHits / cacheEvents * 100, 1)}%` : "-";
     window.rustProxyExtraOverview?.donut?.("cache-ratio", cacheHits, cacheMisses);
+    if (appendSample) {
+        const counters = [m.requests, c.hits, c.misses, c.bypasses].map(value => value == null ? NaN : Number(value));
+        const delta = rustProxyRateSampling.difference(cacheMixLastCounters, counters,
+            performance.now(), rustProxyRateSampling.cadence("overview_seconds"));
+        cacheMixLastCounters = counters.every(Number.isFinite) ? delta.next : null;
+        cacheMixLastShares = delta.deltas ? cacheOutcomeMix(delta.deltas) : null;
+    }
+    renderCacheMix(cacheMixLastShares);
     if (systemSample) {
         if (d.process_rss_bytes != null) $("metric-rss").textContent = fmtBytes(d.process_rss_bytes);
         $("process-summary").hidden = d.process_threads == null;