{% extends layout %}{% import 'ui/kit.html' as kit %}{% import 'ui/broker/_icons.html' as icons %}{% import 'ui/broker/_fmt.html' as fmt %}
{% block title %}amebo - overview{% endblock %}
{% block content %}{% include 'ui/broker/_css.html' %}
<div class="section-head pin">
  <div><h2>Engine health</h2><p class="sub">Throughput, delivery outcomes, latency, wire I/O and spell activity over the last hour. Live.</p></div>
  <button class="btn" onclick="dj.get('/', '#view')">Refresh</button>
</div>
<div class="cards">
  {{ kit.stat('kpi-published', k.published, 'published') }}
  {{ kit.stat('kpi-delivered', k.delivered, 'delivered', 'ok') }}
  {{ kit.stat('kpi-pending', k.pending, 'pending') }}
  {{ kit.stat('kpi-retrying', k.retrying, 'retrying') }}
  {{ kit.stat('kpi-failed', k.failed, 'failed', 'bad') }}
  {{ kit.stat('kpi-rate', fmt.rate(k.attempts_ok, k.attempts), 'success rate') }}
  {{ kit.stat('kpi-p95', (k.p95 ~ ' ms') if k.attempts else '-', 'p95 latency') }}
  {{ kit.stat('kpi-due', k.due, 'due now') }}
</div>
<div class="grid charts">
  {{ kit.chart_panel('Event flow', 'published vs delivered / min', 'ch-flow') }}
  {{ kit.chart_panel('Delivery outcomes', 'webhook attempts / min', 'ch-outcomes') }}
  {{ kit.chart_panel('Delivery latency', 'attempt round-trip, ms', 'ch-latency') }}
</div>
<div class="grid charts">
  {{ kit.chart_panel('Webhook responses', 'all attempts by response class', 'ch-status') }}
  {{ kit.chart_panel('Top actions', 'events by action, delivered overlaid', 'ch-actions') }}
  {{ kit.chart_panel('Wire I/O', 'webhook bytes out / in per min', 'ch-io') }}
</div>
<div class="grid two-wide">
  {{ kit.chart_panel('Spell runs', 'wand executions / min', 'ch-spells') }}
  <div class="panel" style="padding:0"><h3 style="padding:18px 18px 0">Needs attention</h3><div class="table-wrap attn" style="border:none">
  {%- if not attention %}
    <div class="empty">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="m9 12 2 2 4-4"/></svg>
      <p>No failed deliveries - all healthy</p>
    </div>
  {%- else %}
    <table class="data">
      <thead><tr><th>gist</th><th>action</th><th>subscriber</th><th>last response</th><th>attempts</th><th></th></tr></thead>
      <tbody>{% for g in attention %}
        <tr><td class="mono">{{ g.id }}</td><td class="fw">{{ g.action }}</td><td>{{ g.subscriber }}</td><td>{{ g.code|code_pill }} <span class="mono dim">{{ g.snippet }}</span></td><td>{{ g.attempts }}</td>
          <td class="right"><button class="icon-btn sm" title="Requeue delivery" onclick="dashBulkOne('gists','/dash/gists/requeue-many','{{ g.id }}')">{{ icons.requeue() }}</button></td></tr>
      {% endfor %}</tbody>
    </table>
  {%- endif %}
  </div></div>
</div>
<div class="panel" style="padding:0;margin-top:20px"><h3 style="padding:18px 18px 0">Subscriber health</h3><div class="table-wrap" style="border:none">
{%- if not subs %}<div class="empty">No delivery attempts yet.</div>
{%- else %}
  <table class="data">
    <thead><tr><th>subscriber</th><th>attempts</th><th>delivered</th><th>failed</th><th>success</th><th>avg latency</th><th>last status</th><th>last attempt</th></tr></thead>
    <tbody>{% for s in subs %}
      <tr><td class="fw">{{ s.subscriber }}</td><td>{{ s.attempts }}</td><td>{{ s.okn }}</td><td>{{ s.failedn }}</td><td>{{ fmt.rate(s.okn, s.attempts) }}</td><td>{{ s.avgms }} ms</td><td>{{ s.last_status|code_pill }}</td><td class="dim">{{ s.last_ts|ago }}</td></tr>
    {% endfor %}</tbody>
  </table>
{%- endif %}
</div></div>
<script>window.AmeboCharts && window.AmeboCharts.boot()</script>
{% endblock %}