v0.34.3_ht2

src/admin/web/app/runtime.js

@@ -352,9 +352,15 @@ function renderCacheMix(mix, totalRequests) {
         $(`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))
-        : unavailable;
+    const caption = $("cache-mix-caption");
+    const validTotal = Number.isSafeInteger(totalRequests) && totalRequests >= 0;
+    const total = validTotal ? fmt(totalRequests) : "-";
+    const totalLabel = validTotal
+        ? t("cacheMixSample").replace("{count}", total)
+        : t("cacheMixInvalid");
+    caption.textContent = total;
+    caption.setAttribute("title", totalLabel);
+    caption.setAttribute("aria-label", totalLabel);
     $("cache-mix-bar").setAttribute("aria-label", mix
         ? t("cacheMixAria").replace("{hit}", fmt(mix.counts[0]))
             .replace("{miss}", fmt(mix.counts[1]))

src/admin/web/partials/overview-metrics.html

@@ -32,27 +32,24 @@
     </div>
 </article>
 <article class="stat stat-cache-outcomes" data-dashboard-widget="cache_outcomes">
-    <span data-i18n="cacheMixTitle">Cache outcomes</span>
+    <div class="cache-mix-header">
+        <span data-i18n="cacheMixTitle">Cache outcomes</span>
+        <small class="cache-mix-caption" id="cache-mix-caption" aria-label="HTTP requests since service start" title="HTTP requests since service start">-</small>
+    </div>
     <strong id="cache-mix-headline">-</strong>
-    <div class="cache-mix-bar" id="cache-mix-bar" role="img"
-        aria-label="Cumulative HTTP cache outcomes since service start">
+    <div class="cache-mix-bar" id="cache-mix-bar" role="img" aria-label="Cumulative HTTP cache outcomes since service start">
         <span class="cache-mix-hit" id="cache-mix-hit" style="width:0%"></span>
         <span class="cache-mix-miss" id="cache-mix-miss" style="width:0%"></span>
         <span class="cache-mix-bypass" id="cache-mix-bypass" style="width:0%"></span>
         <span class="cache-mix-other" id="cache-mix-other" style="width:0%"></span>
     </div>
     <small class="cache-mix-legend">
-        <span class="cache-mix-hit-key"><i></i>HIT <b><span id="cache-mix-hit-count">-</span><span
-                    class="cache-mix-percent" id="cache-mix-hit-percent">-</span></b></span>
-        <span class="cache-mix-miss-key"><i></i>MISS <b><span id="cache-mix-miss-count">-</span><span
-                    class="cache-mix-percent" id="cache-mix-miss-percent">-</span></b></span>
-        <span class="cache-mix-bypass-key"><i></i>BYPASS <b><span id="cache-mix-bypass-count">-</span><span
-                    class="cache-mix-percent" id="cache-mix-bypass-percent">-</span></b></span>
-        <span class="cache-mix-other-key"><i></i><span data-i18n="cacheMixOther">OTHER</span> <b><span
-                    id="cache-mix-other-count">-</span><span class="cache-mix-percent"
-                    id="cache-mix-other-percent">-</span></b></span>
+        <span class="cache-mix-hit-key"><i></i>HIT <b><span id="cache-mix-hit-count">-</span><span class="cache-mix-percent" id="cache-mix-hit-percent">-</span></b></span>
+        <span class="cache-mix-miss-key"><i></i>MISS <b><span id="cache-mix-miss-count">-</span><span class="cache-mix-percent" id="cache-mix-miss-percent">-</span></b></span>
+        <span class="cache-mix-bypass-key"><i></i>BYPASS <b><span id="cache-mix-bypass-count">-</span><span class="cache-mix-percent" id="cache-mix-bypass-percent">-</span></b></span>
+        <span class="cache-mix-other-key"><i></i><span data-i18n="cacheMixOther">OTHER</span> <b><span id="cache-mix-other-count">-</span><span class="cache-mix-percent"
+                id="cache-mix-other-percent">-</span></b></span>
     </small>
-    <small class="cache-mix-caption" id="cache-mix-caption" data-i18n="cacheMixWaiting">No HTTP requests yet</small>
 </article>
 <article class="stat" data-dashboard-widget="memory"><span data-i18n="processMemory">Process
         memory</span><strong id="metric-rss">-</strong><small id="process-summary">-</small>

src/admin/web/style.css

@@ -12195,6 +12195,39 @@ html[data-dashboard-density] #panel-overview .dashboard-overview-grid>.card.pool
     overflow-wrap: anywhere;
 }
 
+#panel-overview .stat-cache-outcomes .cache-mix-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+}
+
+#panel-overview .stat-cache-outcomes .cache-mix-header>span {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--muted);
+    font-size: 11px;
+}
+
+#panel-overview .stat-cache-outcomes .cache-mix-caption {
+    flex: 0 0 auto;
+    margin-left: auto;
+    color: var(--muted);
+    font: 500 10px/1.35 var(--mono);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    white-space: nowrap;
+}
+
+html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-mix-header>span {
+    font-size: 9px;
+}
+
+html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-mix-caption {
+    font-size: 9px;
+}
+
 #panel-overview .stat-cache-outcomes .cache-mix-bar {
     display: flex;
     width: 100%;
@@ -12281,9 +12314,3 @@ html[data-dashboard-density] #panel-overview .dashboard-overview-grid>.card.pool
     color: var(--muted);
     font: 400 10px var(--mono);
 }
-
-#panel-overview .stat-cache-outcomes .cache-mix-caption {
-    display: block;
-    margin-top: 8px;
-    color: var(--muted);
-}