feat(ui): shared |bytes |rate |duration |ago filters and status_class from Settings → Thresholds (#5093)

#5093 "Shared format filters and status_class driven by Settings → Thresholds". - steward/core/formatting.py: human_bytes (binary units), human_rate, human_duration (two largest units), ago (a <time> titled with the absolute UTC time) and status_class(value, kind, thresholds) -> ok/warn/crit/unknown, which raises on a kind the thresholds don't name. - app.py registers them as the bytes, rate, duration and ago filters and the status_class global; threshold_style is now graded by status_class (and caps its weight at 500). - Replaces the copies: docker's _human_bytes/_human_uptime, core alerts' _duration, the host-agent fmt_bps/fmt_bytes macros, the Traefik and UniFi byte-rate arithmetic, the swarm-failures ago macro and two uptime spans. - Tests: a table per helper, and every template compiled against the app's filters, so an unknown filter fails CI rather than a page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-06 14:25:06 -04:00
parent 65411d3ce8
commit bf08169176
17 changed files with 287 additions and 186 deletions
@@ -12,6 +12,7 @@ from sqlalchemy import func, select
 from steward.auth.middleware import require_role
 from steward.models.users import UserRole
 from steward.models.hosts import Host
+from steward.core.formatting import human_bytes, human_duration, seconds_since
 from steward.core.time_range import parse_range, DEFAULT_RANGE
 from . import service as docker_svc
 from .dedup import dedup_by_container_id
@@ -31,37 +32,10 @@ def _error(status: int, code: str, detail: str | None = None):
    return jsonify(body), status


-def _human_bytes(n: int | None) -> str:
-    """Compact binary size string (e.g. '1.4 GiB', '512 MiB', '0 B')."""
-    if n is None:
-        return "—"
-    size = float(n)
-    for unit in ("B", "KiB", "MiB", "GiB", "TiB"):
-        if abs(size) < 1024.0 or unit == "TiB":
-            if unit == "B":
-                return f"{int(size)} {unit}"
-            return f"{size:.1f} {unit}"
-        size /= 1024.0
-    return f"{size:.1f} TiB"
-
-
-def _human_uptime(started_at: datetime | None) -> str | None:
-    """Compact 'how long running' string (e.g. '3d 4h', '5h 12m', '8m')."""
-    if started_at is None:
-        return None
-    if started_at.tzinfo is None:
-        started_at = started_at.replace(tzinfo=timezone.utc)
-    secs = int((datetime.now(timezone.utc) - started_at).total_seconds())
-    if secs < 0:
-        return None
-    d, rem = divmod(secs, 86400)
-    h, rem = divmod(rem, 3600)
-    m, _ = divmod(rem, 60)
-    if d:
-        return f"{d}d {h}h"
-    if h:
-        return f"{h}h {m}m"
-    return f"{m}m"
+def _uptime(started_at: datetime | None) -> str | None:
+    """How long a container has run ('3d 4h'), or None if unknown."""
+    secs = seconds_since(started_at)
+    return None if secs is None or secs < 0 else human_duration(secs)


 def _sparkline(values: list[float], width: int = 80, height: int = 20) -> str:
@@ -148,7 +122,7 @@ async def rows():
            g["containers"].append({
                "container": c,
                "ports": json.loads(c.ports_json) if c.ports_json else [],
-                "uptime": _human_uptime(c.started_at) if c.status == "running" else None,
+                "uptime": _uptime(c.started_at) if c.status == "running" else None,
                "sparkline_cpu": _sparkline(cpu_hist),
                "sparkline_mem": _sparkline(mem_hist),
            })
@@ -339,9 +313,9 @@ async def container_detail(host_id: str, name: str):
        host_id=host_id,
        name=name,
        ports=json.loads(c.ports_json) if c.ports_json else [],
-        uptime=_human_uptime(c.started_at) if c.status == "running" else None,
-        net_rx=_human_bytes(c.net_rx_bytes), net_tx=_human_bytes(c.net_tx_bytes),
-        blk_read=_human_bytes(c.blk_read_bytes), blk_write=_human_bytes(c.blk_write_bytes),
+        uptime=_uptime(c.started_at) if c.status == "running" else None,
+        net_rx=human_bytes(c.net_rx_bytes), net_tx=human_bytes(c.net_tx_bytes),
+        blk_read=human_bytes(c.blk_read_bytes), blk_write=human_bytes(c.blk_write_bytes),
        events=[
            {"event": e.event, "detail": e.detail, "at": e.at,
             "glyph": _EVENT_STYLE.get(e.event, ("•", "var(--text-muted)"))[0],
@@ -494,8 +468,8 @@ async def disk():
    images_by_host: dict[str, list] = {}
    for im in images:
        images_by_host.setdefault(im.host_id, []).append({
-            "repo_tag": im.repo_tag, "size": _human_bytes(im.size),
-            "shared": _human_bytes(im.shared_size), "containers": im.containers,
+            "repo_tag": im.repo_tag, "size": human_bytes(im.size),
+            "shared": human_bytes(im.shared_size), "containers": im.containers,
            "reclaimable": im.containers == 0,
        })

@@ -505,14 +479,14 @@ async def disk():
            "host_name": hosts[s.host_id].name if s.host_id in hosts else s.host_id,
            "summary": {
                "images_total": s.images_total, "images_active": s.images_active,
-                "images_size": _human_bytes(s.images_size),
-                "images_reclaimable": _human_bytes(s.images_reclaimable),
-                "layers_size": _human_bytes(s.layers_size),
+                "images_size": human_bytes(s.images_size),
+                "images_reclaimable": human_bytes(s.images_reclaimable),
+                "layers_size": human_bytes(s.layers_size),
                "containers_count": s.containers_count,
-                "containers_size": _human_bytes(s.containers_size),
+                "containers_size": human_bytes(s.containers_size),
                "volumes_count": s.volumes_count,
-                "volumes_size": _human_bytes(s.volumes_size),
-                "build_cache_size": _human_bytes(s.build_cache_size),
+                "volumes_size": human_bytes(s.volumes_size),
+                "build_cache_size": human_bytes(s.build_cache_size),
            },
            "stopped": stopped_by_host.get(s.host_id, 0),
            "images": images_by_host.get(s.host_id, []),
@@ -4,12 +4,6 @@
    crash_looping, failures_1h, failures_24h and last_error; `style` is
    optional extra CSS for the wrapper. Renders nothing for a healthy service
    with no recent failures. -#}
-{%- macro ago(sec) -%}
-  {%- if sec < 90 -%}{{ sec }}s ago
-  {%- elif sec < 5400 -%}{{ sec // 60 }}m ago
-  {%- elif sec < 172800 -%}{{ sec // 3600 }}h ago
-  {%- else -%}{{ sec // 86400 }}d ago{%- endif -%}
-{%- endmacro -%}
 {%- set e = s.last_error -%}
 {%- if s.crash_looping or s.failures_24h or (e and s.state != 'healthy') %}
 <div style="display:flex;flex-wrap:wrap;align-items:baseline;gap:0.2rem 0.6rem;font-size:0.78rem;color:var(--text-muted);{{ style or '' }}">
@@ -24,7 +18,7 @@
    <span style="color:var(--text);font-family:ui-monospace,monospace;overflow-wrap:anywhere;">{{ e.error or e.message or e.state }}</span>
    {%- if e.exit_code %} · exit {{ e.exit_code }}{% endif %}
    {%- if e.node %} · {{ e.node }}{% endif %}
-    {%- if e.age_s is not none %} · {{ ago(e.age_s) }}{% endif %}
+    {%- if e.age_s is not none %} · {{ e.age_s|duration }} ago{% endif %}
  </span>
  {% endif %}
 </div>
@@ -1,22 +1,5 @@
 {# Current-state fragment for the full-metrics page — polled live via HTMX.
-   Self-contained (defines its own format macros) so each poll re-renders the
-   latest snapshot the server has. #}
-{% macro fmt_bps(v) %}
-{%- if v is none -%}—
-{%- elif v >= 1048576 -%}{{ "%.1f"|format(v / 1048576) }} MB/s
-{%- elif v >= 1024 -%}{{ "%.1f"|format(v / 1024) }} KB/s
-{%- else -%}{{ "%.0f"|format(v) }} B/s
-{%- endif -%}
-{% endmacro %}
-{% macro fmt_bytes(v) %}
-{%- if v is none -%}—
-{%- elif v >= 1125899906842624 -%}{{ "%.1f"|format(v / 1125899906842624) }} PB
-{%- elif v >= 1099511627776 -%}{{ "%.1f"|format(v / 1099511627776) }} TB
-{%- elif v >= 1073741824 -%}{{ "%.1f"|format(v / 1073741824) }} GB
-{%- elif v >= 1048576 -%}{{ "%.0f"|format(v / 1048576) }} MB
-{%- else -%}{{ "%.0f"|format(v / 1024) }} KB
-{%- endif -%}
-{% endmacro %}
+   Each poll re-renders the latest snapshot the server has. #}
 {% macro bar(pct) %}
 {%- set p = pct if pct is not none else 0 -%}
 <div style="height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;border:1px solid var(--border);">
@@ -34,7 +17,7 @@
  {% if reg.arch %}<span><span style="color:var(--text-dim);">Arch</span> {{ reg.arch }}</span>{% endif %}
  {% if reg.agent_version %}<span><span style="color:var(--text-dim);">Agent</span> v{{ reg.agent_version }}</span>{% endif %}
  {% set up = hostlvl.get('uptime_secs') %}
-  {% if up %}<span><span style="color:var(--text-dim);">Uptime</span> {{ (up // 86400)|int }}d {{ ((up % 86400) // 3600)|int }}h</span>{% endif %}
+  {% if up %}<span><span style="color:var(--text-dim);">Uptime</span> {{ up|duration }}</span>{% endif %}
  <span><span style="color:var(--text-dim);">Last seen</span> {{ reg.last_seen_at.strftime("%Y-%m-%d %H:%M:%S") ~ " UTC" if reg.last_seen_at else "never" }}</span>
  {% else %}
  <span>No agent registration found for this host.</span>
@@ -59,7 +42,7 @@
    <span class="stat-val" style="font-size:1.6rem;color:{% if mp is none %}var(--text-dim){% elif mp < 70 %}var(--green){% elif mp < 90 %}var(--yellow){% else %}var(--red){% endif %};">{% if mp is not none %}{{ "%.0f"|format(mp) }}%{% else %}—{% endif %}</span>
    <div style="margin-top:0.5rem;">{{ bar(mp) }}</div>
    <div style="margin-top:0.45rem;font-size:0.72rem;color:var(--text-dim);">
-      avail {{ fmt_bytes(hostlvl.get('mem_available_bytes')) }} · cache {{ fmt_bytes(hostlvl.get('mem_cached_bytes')) }} · swap {{ fmt_bytes(hostlvl.get('swap_used_bytes')) }}
+      avail {{ hostlvl.get('mem_available_bytes')|bytes }} · cache {{ hostlvl.get('mem_cached_bytes')|bytes }} · swap {{ hostlvl.get('swap_used_bytes')|bytes }}
    </div>
  </div>
  <div class="card" style="margin-bottom:0;">
@@ -73,15 +56,15 @@
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.35rem;">Network</div>
    <div style="font-size:0.95rem;font-variant-numeric:tabular-nums;">
-      <div><span style="color:var(--green);">↓</span> {{ fmt_bps(hostlvl.get('net_rx_bps')) }}</div>
-      <div><span style="color:var(--red);">↑</span> {{ fmt_bps(hostlvl.get('net_tx_bps')) }}</div>
+      <div><span style="color:var(--green);">↓</span> {{ hostlvl.get('net_rx_bps')|rate }}</div>
+      <div><span style="color:var(--red);">↑</span> {{ hostlvl.get('net_tx_bps')|rate }}</div>
    </div>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.35rem;">Disk I/O</div>
    <div style="font-size:0.95rem;font-variant-numeric:tabular-nums;">
-      <div><span style="color:var(--text-dim);">rd</span> {{ fmt_bps(hostlvl.get('disk_read_bps')) }}</div>
-      <div><span style="color:var(--text-dim);">wr</span> {{ fmt_bps(hostlvl.get('disk_write_bps')) }}</div>
+      <div><span style="color:var(--text-dim);">rd</span> {{ hostlvl.get('disk_read_bps')|rate }}</div>
+      <div><span style="color:var(--text-dim);">wr</span> {{ hostlvl.get('disk_write_bps')|rate }}</div>
    </div>
  </div>
  {% if hostlvl.get('temp_c_max') is not none %}
@@ -128,7 +111,7 @@
  <div style="margin-bottom:0.6rem;">
    <div style="display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:0.2rem;">
      <span style="font-family:ui-monospace,monospace;">{{ mount }}</span>
-      <span style="color:var(--text-muted);">{{ fmt_bytes(m.get('disk_used_bytes')) }} / {{ fmt_bytes(m.get('disk_total_bytes')) }}{% if m.get('disk_used_pct') is not none %} · {{ "%.0f"|format(m.get('disk_used_pct')) }}%{% endif %}</span>
+      <span style="color:var(--text-muted);">{{ m.get('disk_used_bytes')|bytes }} / {{ m.get('disk_total_bytes')|bytes }}{% if m.get('disk_used_pct') is not none %} · {{ "%.0f"|format(m.get('disk_used_pct')) }}%{% endif %}</span>
    </div>
    {{ bar(m.get('disk_used_pct')) }}
  </div>
@@ -145,7 +128,7 @@
    {% for iface, m in nets.items() %}
    <div style="display:flex;justify-content:space-between;gap:0.75rem;font-size:0.8rem;padding:0.15rem 0;">
      <span style="font-family:ui-monospace,monospace;">{{ iface }}</span>
-      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">↓ {{ fmt_bps(m.get('net_rx_bps')) }} · ↑ {{ fmt_bps(m.get('net_tx_bps')) }}</span>
+      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">↓ {{ m.get('net_rx_bps')|rate }} · ↑ {{ m.get('net_tx_bps')|rate }}</span>
    </div>
    {% endfor %}
  </div>
@@ -156,7 +139,7 @@
    {% for dev, m in disks_io.items() %}
    <div style="display:flex;justify-content:space-between;gap:0.75rem;font-size:0.8rem;padding:0.15rem 0;">
      <span style="font-family:ui-monospace,monospace;">{{ dev }}</span>
-      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">rd {{ fmt_bps(m.get('disk_read_bps')) }} · wr {{ fmt_bps(m.get('disk_write_bps')) }}</span>
+      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">rd {{ m.get('disk_read_bps')|rate }} · wr {{ m.get('disk_write_bps')|rate }}</span>
    </div>
    {% endfor %}
  </div>
@@ -13,21 +13,13 @@
  <div style="line-height:0;height:16px;">{{ svg | safe }}</div>
 </div>
 {% endmacro %}
-{# Human-readable throughput, matching the host-detail page. #}
-{% macro fmt_bps(v) %}
-{%- if v is none -%}—
-{%- elif v >= 1048576 -%}{{ "%.1f"|format(v / 1048576) }} MB/s
-{%- elif v >= 1024 -%}{{ "%.1f"|format(v / 1024) }} KB/s
-{%- else -%}{{ "%.0f"|format(v) }} B/s
-{%- endif -%}
-{% endmacro %}
 {# Two-line down/up (or read/write) throughput cell. #}
 {% macro io_cell(label, down_sym, down_val, up_sym, up_val, title="") %}
 <div style="min-width:80px;flex:0 0 auto;" title="{{ title }}">
  <div style="font-size:0.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.03em;">{{ label }}</div>
  <div style="font-size:0.72rem;font-variant-numeric:tabular-nums;line-height:1.3;">
-    <div>{{ down_sym }} {{ fmt_bps(down_val) }}</div>
-    <div>{{ up_sym }} {{ fmt_bps(up_val) }}</div>
+    <div>{{ down_sym }} {{ down_val|rate }}</div>
+    <div>{{ up_sym }} {{ up_val|rate }}</div>
  </div>
 </div>
 {% endmacro %}
@@ -28,9 +28,8 @@
  {% if global_stat.process_memory_bytes is not none %}
  <span>
    <span style="color:var(--text-muted);">Memory</span>
-    {% set mb = (global_stat.process_memory_bytes / 1048576) %}
    <span style="margin-left:0.4rem;">
-      {% if mb >= 1024 %}{{ "%.1f"|format(mb / 1024) }} GB{% else %}{{ "%.0f"|format(mb) }} MB{% endif %}
+      {{ global_stat.process_memory_bytes|bytes }}
    </span>
  </span>
  {% endif %}
@@ -58,9 +57,7 @@
            <td style="color:var(--text-muted);padding:0.2rem 0;">Bandwidth</td>
            <td style="padding:0.2rem 0.5rem;">
              {% set bps = r.latest.response_bytes_rate %}
-              {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }} MB/s
-              {% elif bps >= 1024 %}{{ "%.1f"|format(bps / 1024) }} KB/s
-              {% else %}{{ "%.0f"|format(bps) }} B/s{% endif %}
+              {{ bps|rate }}
            </td>
            <td style="padding:0.2rem 0;"></td>
        </tr>
@@ -20,8 +20,7 @@
  <span>
    <span style="color:var(--text-muted);">Bytes</span>
    <span style="margin-left:0.4rem;">
-      {% set mb = summary.total_bytes / 1048576 %}
-      {% if mb >= 1024 %}{{ "%.1f"|format(mb / 1024) }} GB{% else %}{{ "%.1f"|format(mb) }} MB{% endif %}
+      {{ summary.total_bytes|bytes }}
    </span>
  </span>

@@ -26,9 +26,7 @@
      <span style="color:var(--text-muted);">bw</span>
      <span style="margin-left:0.3rem;">
        {% set bps = r.latest.response_bytes_rate %}
-        {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }}MB/s
-        {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }}KB/s
-        {% else %}{{ "%.0f"|format(bps) }}B/s{% endif %}
+        {{ bps|rate }}
      </span>
    </span>
    <span title="p95 latency">
@@ -21,10 +21,7 @@
      <tr>
        <td style="padding:0.25rem 0.5rem 0.25rem 0;">{{ cat.cat_name or cat.cat_id }}</td>
        <td style="padding:0.25rem 0.3rem;text-align:right;color:var(--text-muted);font-size:0.78rem;white-space:nowrap;">
-          {% if bytes >= 1073741824 %}{{ "%.1f"|format(bytes / 1073741824) }} GB
-          {% elif bytes >= 1048576 %}{{ "%.1f"|format(bytes / 1048576) }} MB
-          {% elif bytes >= 1024 %}{{ "%.0f"|format(bytes / 1024) }} KB
-          {% else %}{{ bytes }} B{% endif %}
+          {{ bytes|bytes }}
        </td>
        <td style="padding:0.25rem 0;width:4rem;">
          <div style="background:var(--border);border-radius:2px;height:6px;overflow:hidden;">
@@ -50,10 +47,7 @@
        </td>
        <td style="padding:0.25rem 0;text-align:right;font-size:0.78rem;color:var(--text-muted);white-space:nowrap;">
          {% set bytes = c.bytes %}
-          {% if bytes >= 1073741824 %}{{ "%.1f"|format(bytes / 1073741824) }} GB
-          {% elif bytes >= 1048576 %}{{ "%.1f"|format(bytes / 1048576) }} MB
-          {% elif bytes >= 1024 %}{{ "%.0f"|format(bytes / 1024) }} KB
-          {% else %}{{ bytes }} B{% endif %}
+          {{ bytes|bytes }}
        </td>
      </tr>
      {% endfor %}
@@ -29,9 +29,7 @@
    <span style="color:var(--text-muted);">&#8595; RX</span>
    <span style="margin-left:0.3rem;">
      {% set bps = latest_wan.rx_bytes_rate %}
-      {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }} MB/s
-      {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }} KB/s
-      {% else %}{{ "%.0f"|format(bps) }} B/s{% endif %}
+      {{ bps|rate }}
    </span>
    <span style="margin-left:0.3rem;">{{ sparkline_rx | safe }}</span>
  </span>
@@ -39,9 +37,7 @@
    <span style="color:var(--text-muted);">&#8593; TX</span>
    <span style="margin-left:0.3rem;">
      {% set bps = latest_wan.tx_bytes_rate %}
-      {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }} MB/s
-      {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }} KB/s
-      {% else %}{{ "%.0f"|format(bps) }} B/s{% endif %}
+      {{ bps|rate }}
    </span>
    <span style="margin-left:0.3rem;">{{ sparkline_tx | safe }}</span>
  </span>
@@ -49,7 +45,7 @@

  {% if latest_wan.uptime_seconds is not none %}
  <span style="color:var(--text-dim);font-size:0.8rem;">
-    up {{ (latest_wan.uptime_seconds // 3600) }}h {{ ((latest_wan.uptime_seconds % 3600) // 60) }}m
+    up {{ latest_wan.uptime_seconds|duration }}
  </span>
  {% endif %}
 </div>
@@ -96,7 +92,7 @@
      {% if d.state == 1 and d.uptime_seconds %}
      <tr>
        <td colspan="3" style="padding:0 0 0.3rem 1.2rem;color:var(--text-dim);font-size:0.75rem;">
-          up {{ (d.uptime_seconds // 86400) }}d {{ ((d.uptime_seconds % 86400) // 3600) }}h
+          up {{ d.uptime_seconds|duration }}
        </td>
      </tr>
      {% endif %}
@@ -121,13 +117,9 @@
        <td style="text-align:right;padding:0.2rem 0;white-space:nowrap;font-size:0.78rem;">
          {% set rx = c.rx_rate %}{% set tx = c.tx_rate %}
          <span style="color:var(--text-muted);">&#8595;</span>
-          {% if rx >= 1048576 %}{{ "%.1f"|format(rx/1048576) }}M
-          {% elif rx >= 1024 %}{{ "%.0f"|format(rx/1024) }}K
-          {% else %}{{ "%.0f"|format(rx) }}B{% endif %}
+          {{ rx|rate }}
          <span style="color:var(--text-muted);margin-left:0.3rem;">&#8593;</span>
-          {% if tx >= 1048576 %}{{ "%.1f"|format(tx/1048576) }}M
-          {% elif tx >= 1024 %}{{ "%.0f"|format(tx/1024) }}K
-          {% else %}{{ "%.0f"|format(tx) }}B{% endif %}
+          {{ tx|rate }}
        </td>
      </tr>
      {% endfor %}
@@ -37,16 +37,12 @@
    <span>
      <span style="color:var(--text-muted);">&#8595;</span>
      {% set bps = latest_wan.rx_bytes_rate %}
-      {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }}MB/s
-      {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }}KB/s
-      {% else %}{{ "%.0f"|format(bps) }}B/s{% endif %}
+      {{ bps|rate }}
    </span>
    <span>
      <span style="color:var(--text-muted);">&#8593;</span>
      {% set bps = latest_wan.tx_bytes_rate %}
-      {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }}MB/s
-      {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }}KB/s
-      {% else %}{{ "%.0f"|format(bps) }}B/s{% endif %}
+      {{ bps|rate }}
    </span>
    {% endif %}
  </div>
@@ -76,14 +72,10 @@
      {% set total_bps = c.tx_rate + c.rx_rate %}
      <span style="color:var(--text-muted);">&#8595;</span>
      {% set rx = c.rx_rate %}
-      {% if rx >= 1048576 %}{{ "%.1f"|format(rx / 1048576) }}M
-      {% elif rx >= 1024 %}{{ "%.0f"|format(rx / 1024) }}K
-      {% else %}{{ "%.0f"|format(rx) }}B{% endif %}
+      {{ rx|rate }}
      <span style="color:var(--text-muted);margin-left:0.4rem;">&#8593;</span>
      {% set tx = c.tx_rate %}
-      {% if tx >= 1048576 %}{{ "%.1f"|format(tx / 1048576) }}M
-      {% elif tx >= 1024 %}{{ "%.0f"|format(tx / 1024) }}K
-      {% else %}{{ "%.0f"|format(tx) }}B{% endif %}
+      {{ tx|rate }}
    </div>
  </div>
  {% endfor %}