feat(snmp): Devices widget gives a verdict, status in words and readable key readings (#5255)

#5255 "SNMP — Devices: status in words and key readings".

- Verdict first: "All N devices answering", "ups: no reply since 14m ago",
  "N of M devices not answering", or "N not polled yet".
- Devices that stopped answering come first, then those never polled, then
  the rest.
- One header row: Device / Readings / Polled.
- The name is the link; the separate "detail →" is gone.
- The hollow dot is replaced by words: "no data yet", or "no reply since …;
  readings are from then".
- Key readings: the first two in config order, gauges ahead of counters.
  Units come from the label suffix: _centisecs as a duration, _pct, _dV as
  volts, _octets as bytes total.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

plugins/snmp/templates/snmp/widget.html

@@ -1,51 +1,37 @@
-{# plugins/snmp/templates/snmp/widget.html #}
-{% if devices %}
-{% for device in devices %}
-<div class="ping-row" style="align-items:flex-start;flex-direction:column;gap:0.3rem;padding:0.4rem 0;">
-  <div style="display:flex;align-items:center;gap:0.6rem;width:100%;">
-    <span style="font-size:0.82rem;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
-      {{ device.name }}
-    </span>
-    {% if device.reach == 'up' %}
-    <span style="font-size:0.7rem;" class="tone-ok" title="Reachable · read {{ device.at.strftime('%H:%M UTC') }}">&#9679;</span>
-    {% elif device.reach == 'stale' %}
-    <span style="font-size:0.7rem;" class="tone-warn">no answer since {{ device.at|ago }}</span>
-    {% else %}
-    <span style="font-size:0.7rem;color:var(--text-dim);">&#9675;</span>
-    {% endif %}
-    <a href="/plugins/snmp/device/{{ device.name }}" style="font-size:0.72rem;color:var(--text-muted);">detail →</a>
-  </div>
-  {% if device.readings %}
-  <div style="display:flex;flex-wrap:wrap;gap:0.5rem 1rem;padding-left:0.1rem;">
-    {% for oid_cfg in device.oids[:4] %}
-    {% set label = oid_cfg.label if oid_cfg.label else oid_cfg.oid %}
-    {% set val = device.readings.get(label) %}
-    {% if val is not none %}
-    <span style="font-size:0.78rem;font-variant-numeric:tabular-nums;">
-      <span style="color:var(--text-muted);">{{ label }}</span>
-      <span style="margin-left:0.25rem;">
-        {% if val >= 1000000 %}{{ "%.1f"|format(val / 1000000) }}M
-        {% elif val >= 1000 %}{{ "%.0f"|format(val / 1000) }}K
-        {% else %}{{ "%.4g"|format(val) }}{% endif %}
-      </span>
-    </span>
-    {% endif %}
-    {% endfor %}
-    {% if device.oids|length > 4 %}
-    <span style="font-size:0.72rem;color:var(--text-dim);">+{{ device.oids|length - 4 }} more</span>
-    {% endif %}
-  </div>
-  {% endif %}
-</div>
-{% if not loop.last %}
-<div style="height:1px;background:var(--border);margin:0.1rem 0;"></div>
-{% endif %}
-{% endfor %}
-{% if total > devices|length %}
-<div style="color:var(--text-dim);font-size:0.75rem;padding:0.25rem 0;">
-  +{{ total - devices|length }} more — <a href="/plugins/snmp/">view all →</a>
-</div>
-{% endif %}
+{# plugins/snmp/templates/snmp/widget.html — the dashboard SNMP widget (#5255):
+   a verdict, devices that stopped answering first with since when, then the
+   rest, each with its status in words and its key readings, named and with
+   units. The device name links to its page. #}
+{% from "_macros.html" import status_dot %}
+{% if not total %}
+<div class="w-verdict" style="color:var(--text-muted);">No SNMP devices configured.</div>
 {% else %}
-<p class="empty" style="padding:0.5rem 0;font-size:0.85rem;">No SNMP devices configured.</p>
+{% set stale = devices | selectattr("reach", "equalto", "stale") | list %}
+<div class="w-verdict {{ 'tone-crit' if counts.stale else ('tone-warn' if counts.pending else 'tone-ok') }}">
+  {%- if counts.stale == 1 and stale %}{{ stale[0].name }}: no reply since {{ stale[0].at|ago }}.
+  {%- elif counts.stale %}{{ counts.stale }} of {{ total }} devices not answering.
+  {%- elif counts.pending %}{{ counts.pending }} not polled yet, {{ counts.up }} answering.
+  {%- else %}All {{ total }} device{{ 's' if total != 1 }} answering.{% endif -%}
+</div>
+<table class="w-table">
+  <colgroup><col style="width:40%"><col><col class="w-wide-only" style="width:6rem"></colgroup>
+  <thead><tr><th>Device</th><th>Readings</th><th class="w-wide-only">Polled</th></tr></thead>
+  <tbody>
+  {% for d in devices %}
+  <tr>
+    <td class="w-name" title="{{ d.name }}">
+      {{- status_dot('down' if d.reach == 'stale' else ('pending' if d.reach == 'pending' else 'up')) -}}
+      {% if session.user_id %}<a href="/plugins/snmp/device/{{ d.name }}">{{ d.name }}</a>{% else %}{{ d.name }}{% endif %}
+      {%- if d.reach == 'stale' %}<span class="w-sub tone-crit">no reply since {{ d.at|ago }}; readings are from then</span>
+      {%- elif d.reach == 'pending' %}<span class="w-sub">no data yet</span>{% endif %}
+    </td>
+    <td title="{% for n, v in d.key %}{{ n }} {{ v }}{% if not loop.last %} · {% endif %}{% endfor %}">
+      {%- for n, v in d.key %}<span style="color:var(--text-muted);">{{ n }}</span> {{ v }}{% if not loop.last %} · {% endif %}{% else %}—{% endfor -%}
+    </td>
+    <td class="w-wide-only">{% if d.at %}{{ d.at|ago }}{% else %}—{% endif %}</td>
+  </tr>
+  {% endfor %}
+  </tbody>
+</table>
+{% if more %}<div class="w-more">+{{ more }} more{% if session.user_id %} · <a href="/plugins/snmp/">all devices</a>{% endif %}</div>{% endif %}
 {% endif %}