FabledSteward/plugins/snmp/templates/snmp/device.html

{# plugins/snmp/templates/snmp/device.html — one SNMP device (milestone 491):
   what its newest poll found, then a small chart per reading in that
   reading's own unit, on a dated axis. #}
{% extends "base.html" %}
{% from "_macros.html" import crumbs, page_header, status_badge %}
{% block title %}SNMP — {{ device.name }} — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("SNMP", "/plugins/snmp/"), (device.name, "")]) }}{% endblock %}
{% block content %}
{% call page_header(device.name, device.address ~ ((":" ~ device.port) if device.port != 161 else "") ~ " · SNMP v" ~ device.version) %}
  {% for h in ranges %}
  <a href="?hours={{ h }}" class="range-btn{% if hours == h %} active{% endif %}"{% if hours == h %} aria-current="true"{% endif %}>{% if h < 168 %}{{ h }}h{% else %}7d{% endif %}</a>
  {% endfor %}
  {% if session.user_role == 'admin' %}<a href="/plugins/snmp/devices/{{ device.id }}/edit" class="btn btn-sm btn-ghost">Edit</a>{% endif %}
{% endcall %}

<p class="page-verdict">
  {% if device.reach == 'up' %}{{ status_badge('up', 'Answering') }} polled {{ device.polled_at|ago }}
  {% elif device.reach == 'down' %}{{ status_badge('down', 'Not answering') }} <span class="tone-crit">{{ device.says }}</span>
    {% if device.ok_at %}Last answered {{ device.ok_at|ago }}.{% else %}It has never answered.{% endif %}
  {% elif device.reach == 'stale' %}{{ status_badge('stale', 'Not polled') }} {{ device.says }}
  {% else %}{{ status_badge('pending', 'Not polled yet') }} The first poll runs within a minute of saving.{% endif %}
</p>
{% if device.missing %}<p class="field-hint">Not answered by this device: {{ device.missing|join(", ") }}.</p>{% endif %}

{% if charts %}
<div class="node-grid">
  {% for c in charts %}
  <section class="card" aria-labelledby="snmp-chart-{{ loop.index }}" style="margin:0;">
    <div style="display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;">
      <h2 id="snmp-chart-{{ loop.index }}" class="section-title" style="margin:0;">{{ c.name }}</h2>
      <span class="stat-tile-value" style="font-size:1rem;">{{ c.now }}</span>
    </div>
    <div style="position:relative;height:140px;margin-top:0.5rem;">
      <canvas id="snmp-c-{{ loop.index0 }}" role="img" aria-label="{{ c.name }} over the last {{ hours }} hours"></canvas>
    </div>
  </section>
  {% endfor %}
</div>
{% else %}
<div class="card field-hint">This device has no readings chosen{% if session.user_role == 'admin' %}; <a href="/plugins/snmp/devices/{{ device.id }}/edit">Edit</a> to choose some{% endif %}.</div>
{% endif %}

<script>
(function () {
  var charts = {{ charts_json | safe }};
  var hours = {{ hours }};
  var line = stewardColor("--blue");
  function stamp(iso) {
    var d = new Date(iso);
    return hours > 24
      ? d.toLocaleDateString([], { weekday: "short", day: "numeric" }) + " " + d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false })
      : d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
  }
  charts.forEach(function (c, i) {
    var el = document.getElementById("snmp-c-" + i);
    if (!el) return;
    if (c.points.length < 2) {
      el.parentElement.innerHTML = '<p class="field-hint" style="margin:0;">Not enough readings yet for a chart.</p>';
      return;
    }
    new Chart(el.getContext("2d"), {
      type: "line",
      data: { labels: c.points.map(function (p) { return p[0]; }),
              datasets: [{ data: c.points.map(function (p) { return p[1]; }), borderColor: line,
                           backgroundColor: "transparent", borderWidth: 1.5, pointRadius: 0, tension: 0.2 }] },
      options: {
        responsive: true, maintainAspectRatio: false, animation: false,
        interaction: { mode: "index", intersect: false },
        plugins: { legend: { display: false },
                   tooltip: { callbacks: { title: function (items) {
                     return items.length ? new Date(c.points[items[0].dataIndex][0]).toLocaleString([], { hour12: false }) : ""; } } } },
        scales: {
          x: { ticks: { maxTicksLimit: 6, maxRotation: 0, font: { size: 10 },
                        callback: function (v) { return stamp(c.points[v][0]); } }, grid: { display: false } },
          y: { ticks: { font: { size: 10 }, maxTicksLimit: 4 },
               title: { display: !!c.axis, text: c.axis, font: { size: 9 } } }
        }
      }
    });
  });
})();
</script>
{% endblock %}