feat: add brutalist sparkline graphs for throughput and bandwidth history

ServerSideHannes · ServerSideHannes · commit eb6b847bf63a · 2026-02-13T15:35:29.000+01:00
- RateTracker window extended to 10 min with new history() method
- Canvas sparklines under each throughput card (requests, encrypt, decrypt)
- Full-width bandwidth section with encrypt/decrypt byte rate sparklines
- Retina-aware canvas rendering with devicePixelRatio support
- Green (#3fb950) for encrypt, blue (#58a6ff) for decrypt
diff --git a/s3proxy/admin/collectors.py b/s3proxy/admin/collectors.py
@@ -33,7 +33,7 @@
 class RateTracker:
     """Tracks counter snapshots over a sliding window to compute per-minute rates."""
 
-    def __init__(self, window_seconds: int = 300):
+    def __init__(self, window_seconds: int = 600):
         self._window = window_seconds
         self._snapshots: deque[tuple[float, dict[str, float]]] = deque()
 
@@ -55,8 +55,26 @@ def rate_per_minute(self, key: str) -> float:
         delta = newest_vals.get(key, 0) - oldest_vals.get(key, 0)
         return max(0.0, delta / elapsed * 60)
 
+    def history(self, key: str, max_points: int = 60) -> list[float]:
+        """Return per-minute rate history as a list of floats for sparklines."""
+        if len(self._snapshots) < 2:
+            return []
+        rates: list[float] = []
+        for i in range(1, len(self._snapshots)):
+            prev_ts, prev_vals = self._snapshots[i - 1]
+            curr_ts, curr_vals = self._snapshots[i]
+            elapsed = curr_ts - prev_ts
+            if elapsed < 0.1:
+                continue
+            delta = curr_vals.get(key, 0) - prev_vals.get(key, 0)
+            rates.append(round(max(0.0, delta / elapsed * 60), 1))
+        if len(rates) > max_points:
+            step = len(rates) / max_points
+            rates = [rates[int(i * step)] for i in range(max_points)]
+        return rates
+
 
-_rate_tracker = RateTracker(window_seconds=300)
+_rate_tracker = RateTracker(window_seconds=600)
 
 
 # ---------------------------------------------------------------------------
@@ -178,6 +196,13 @@ def collect_throughput() -> dict:
             "errors_5xx_per_min": round(_rate_tracker.rate_per_minute("errors_5xx"), 1),
             "errors_503_per_min": round(_rate_tracker.rate_per_minute("errors_503"), 1),
         },
+        "history": {
+            "requests_per_min": _rate_tracker.history("requests"),
+            "encrypt_per_min": _rate_tracker.history("encrypt_ops"),
+            "decrypt_per_min": _rate_tracker.history("decrypt_ops"),
+            "bytes_encrypted_per_min": _rate_tracker.history("bytes_encrypted"),
+            "bytes_decrypted_per_min": _rate_tracker.history("bytes_decrypted"),
+        },
     }
 
 
diff --git a/s3proxy/admin/templates.py b/s3proxy/admin/templates.py
@@ -70,6 +70,13 @@
 .spinner{width:8px;height:8px;border:1.5px solid #30363d;border-top-color:#58a6ff;border-radius:50%;display:inline-block}
 .spinner.active{animation:spin 0.6s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
+
+canvas.sparkline{display:block;width:100%;height:24px;margin-top:6px}
+.bw-row{display:flex;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid #21262d}
+.bw-row:last-child{border-bottom:none}
+.bw-label{color:#8b949e;font-size:11px;width:56px;flex-shrink:0}
+canvas.bw-spark{display:block;flex:1;height:32px}
+.bw-val{color:#f0f6fc;font-size:12px;font-weight:500;width:100px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
 </style>
 </head>
 <body>
@@ -93,7 +100,7 @@
 <div class="section-title">Health <span class="section-tag">this pod</span></div>
 <div class="row"><span class="label">Memory</span><span class="value" id="memory">-</span></div>
 <div class="row"><span class="label">In-Flight</span><span class="value" id="in-flight">-</span></div>
-<div class="section-title" style="margin-top:10px;margin-bottom:6px">Errors <span class="section-tag">5 min rate</span></div>
+<div class="section-title" style="margin-top:10px;margin-bottom:6px">Errors <span class="section-tag">10 min rate</span></div>
 <div class="errors-row">
 <span class="err-item">4xx <span class="err-val" id="err-4xx">0</span>/min</span>
 <span class="err-item">5xx <span class="err-val" id="err-5xx">0</span>/min</span>
@@ -102,12 +109,18 @@
 </div>
 
 <div class="section">
-<div class="section-title">Throughput <span class="section-tag">this pod &middot; 5 min rate</span></div>
+<div class="section-title">Throughput <span class="section-tag">this pod &middot; 10 min</span></div>
 <div class="throughput-grid">
-<div class="tp-item"><div class="tp-num" id="tp-req">0</div><div class="tp-unit">/min</div><div class="tp-label">requests</div></div>
-<div class="tp-item"><div class="tp-num" id="tp-enc">0</div><div class="tp-unit">/min &middot; <span id="tp-enc-bytes">0 B</span>/min</div><div class="tp-label">encrypt</div></div>
-<div class="tp-item"><div class="tp-num" id="tp-dec">0</div><div class="tp-unit">/min &middot; <span id="tp-dec-bytes">0 B</span>/min</div><div class="tp-label">decrypt</div></div>
+<div class="tp-item"><div class="tp-num" id="tp-req">0</div><div class="tp-unit">/min</div><div class="tp-label">requests</div><canvas class="sparkline" id="spark-req" height="24"></canvas></div>
+<div class="tp-item"><div class="tp-num" id="tp-enc">0</div><div class="tp-unit">/min &middot; <span id="tp-enc-bytes">0 B</span>/min</div><div class="tp-label">encrypt</div><canvas class="sparkline" id="spark-enc" height="24"></canvas></div>
+<div class="tp-item"><div class="tp-num" id="tp-dec">0</div><div class="tp-unit">/min &middot; <span id="tp-dec-bytes">0 B</span>/min</div><div class="tp-label">decrypt</div><canvas class="sparkline" id="spark-dec" height="24"></canvas></div>
+</div>
 </div>
+
+<div class="section">
+<div class="section-title">Bandwidth <span class="section-tag">this pod &middot; 10 min</span></div>
+<div class="bw-row"><span class="bw-label">encrypt</span><canvas class="bw-spark" id="spark-bw-enc" height="32"></canvas><span class="bw-val" id="bw-enc-val">0 B/min</span></div>
+<div class="bw-row"><span class="bw-label">decrypt</span><canvas class="bw-spark" id="spark-bw-dec" height="32"></canvas><span class="bw-val" id="bw-dec-val">0 B/min</span></div>
 </div>
 
 <div class="section">
@@ -130,6 +143,27 @@
   return Math.floor(s/86400)+'d '+Math.floor((s%86400)/3600)+'h';
 }
 
+function drawSpark(id,data,color){
+  var c=document.getElementById(id);
+  if(!c)return;
+  var dpr=window.devicePixelRatio||1;
+  var w=c.offsetWidth,h=parseInt(c.getAttribute('height'))||24;
+  c.width=w*dpr;c.height=h*dpr;
+  var ctx=c.getContext('2d');
+  ctx.scale(dpr,dpr);
+  if(!data||data.length<2)return;
+  var mx=0;
+  for(var i=0;i<data.length;i++)if(data[i]>mx)mx=data[i];
+  if(!mx)return;
+  var bw=Math.max(1,Math.floor(w/data.length)-1);
+  ctx.fillStyle=color||'#3fb950';
+  for(var i=0;i<data.length;i++){
+    var bh=Math.round((data[i]/mx)*(h-2));
+    if(data[i]>0&&bh<1)bh=1;
+    ctx.fillRect(i*(bw+1),h-bh,bw,bh);
+  }
+}
+
 function updatePods(pods, currentPod){
   var grid=document.getElementById('pods-grid');
   if(!pods||pods.length<=1){grid.innerHTML='';return;}
@@ -176,6 +210,15 @@
   document.getElementById('tp-enc-bytes').textContent=f.bytes_encrypted_per_min||'0 B';
   document.getElementById('tp-dec-bytes').textContent=f.bytes_decrypted_per_min||'0 B';
 
+  var hist=(d.throughput||{}).history||{};
+  drawSpark('spark-req',hist.requests_per_min,'#3fb950');
+  drawSpark('spark-enc',hist.encrypt_per_min,'#3fb950');
+  drawSpark('spark-dec',hist.decrypt_per_min,'#58a6ff');
+  drawSpark('spark-bw-enc',hist.bytes_encrypted_per_min,'#3fb950');
+  drawSpark('spark-bw-dec',hist.bytes_decrypted_per_min,'#58a6ff');
+  document.getElementById('bw-enc-val').textContent=(f.bytes_encrypted_per_min||'0 B')+'/min';
+  document.getElementById('bw-dec-val').textContent=(f.bytes_decrypted_per_min||'0 B')+'/min';
+
   document.getElementById('upload-num').textContent=u.active_count||0;
   document.getElementById('uploads-source').textContent=pod.storage_backend==='In-memory'?'this pod':'cluster \\u00b7 Redis';
   var ut=document.getElementById('uploads-table');
diff --git a/tests/unit/test_admin.py b/tests/unit/test_admin.py
@@ -161,6 +161,7 @@ def test_contains_expected_sections(self, client, admin_credentials):
         assert "S3Proxy Admin" in html
         assert "Health" in html
         assert "Throughput" in html
+        assert "Bandwidth" in html
         assert "Active Uploads" in html
 
     def test_no_sensitive_data_in_html(self, client, admin_credentials, admin_settings):
@@ -288,6 +289,10 @@ def test_throughput_keys(self):
         assert "errors_4xx_per_min" in rates
         assert "errors_5xx_per_min" in rates
         assert "errors_503_per_min" in rates
+        history = result["history"]
+        assert "requests_per_min" in history
+        assert "bytes_encrypted_per_min" in history
+        assert "bytes_decrypted_per_min" in history
 
     def test_format_bytes(self):
         assert _format_bytes(0) == "0 B"
@@ -344,6 +349,35 @@ def test_pruning(self):
         # Old entries beyond window + 10s buffer should be pruned
         assert len(tracker._snapshots) < 50
 
+    def test_history_empty(self):
+        tracker = RateTracker()
+        assert tracker.history("requests") == []
+
+    def test_history_single_snapshot(self):
+        tracker = RateTracker()
+        tracker.record({"requests": 100})
+        assert tracker.history("requests") == []
+
+    def test_history_computation(self):
+        tracker = RateTracker()
+        tracker._snapshots.clear()
+        # 3 snapshots 60s apart: 100→200→400
+        tracker._snapshots.append((1000.0, {"requests": 100}))
+        tracker._snapshots.append((1060.0, {"requests": 200}))
+        tracker._snapshots.append((1120.0, {"requests": 400}))
+        hist = tracker.history("requests")
+        assert len(hist) == 2
+        assert hist[0] == 100.0  # (200-100)/60*60
+        assert hist[1] == 200.0  # (400-200)/60*60
+
+    def test_history_downsampling(self):
+        tracker = RateTracker()
+        tracker._snapshots.clear()
+        for i in range(101):
+            tracker._snapshots.append((1000.0 + i * 3, {"x": float(i * 10)}))
+        hist = tracker.history("x", max_points=20)
+        assert len(hist) == 20
+
 
 # ============================================================================
 # State Store list_keys Tests
