{% extends layout %}{% import 'ui/kit.html' as kit %}{% import 'ui/broker/_fmt.html' as fmt %}
{% block title %}amebo - event{% endblock %}
{% block content %}{% include 'ui/broker/_css.html' %}
{%- if o is none %}
<div class="section-head"><div><div class="crumb"><a class="crumb-link" onclick="dj.get('/events', '#view', {push:true})">Events</a><span class="crumb-sep">/</span><span>{{ event_id }}</span></div><h2>Event not found</h2><p class="sub">No event exists under that id (it may have been purged).</p></div><button class="btn" onclick="dj.get('/events', '#view', {push:true})">&larr; All events</button></div>
{%- else %}
{%- set undelivered = o.inflight + o.failed %}
{%- set publisher = o.publisher or 'api' %}
{%- set self_url = fmt.js('/events/' ~ (o.event|urlencode)) %}
<div class="section-head pin">
  <div>
    <div class="crumb"><a class="crumb-link" onclick="dj.get('/events', '#view', {push:true})">Events</a><span class="crumb-sep">/</span><span>{{ o.event }}</span></div>
    <h2>{{ o.event }} <span class="pill {{ o.status_cls }}">{{ o.status }}</span></h2>
    <p class="sub">{{ o.action }} &middot; published {{ o.ts|ago }} by {{ publisher }}</p>
  </div>
  <div class="drawer-actions" style="margin:0">
    {%- if undelivered > 0 %}<button class="btn" onclick="var f=new FormData();f.append('event',{{ fmt.js(o.event) }});dj.send('/dash/events/redeliver',{method:'POST',target:'#view',body:f})">Redeliver {{ undelivered }} undelivered</button>{% endif %}
    <button class="btn" onclick="dj.get({{ self_url }}, '#view')">Refresh</button>
    <button class="btn" onclick="dj.get('/events', '#view', {push:true})">&larr; All events</button>
  </div>
</div>
{{ fmt.flash(message, tone) }}
<div class="cards">
  <div class="card"><div class="stat-n">{{ o.fanout }}</div><div class="stat-l">fan-out</div></div>
  <div class="card"><div class="stat-n ok">{{ o.delivered }}</div><div class="stat-l">delivered</div></div>
  <div class="card"><div class="stat-n">{{ o.inflight }}</div><div class="stat-l">in flight</div></div>
  <div class="card"><div class="stat-n {{ 'bad' if o.failed > 0 else '' }}">{{ o.failed }}</div><div class="stat-l">failed</div></div>
  <div class="card"><div class="stat-n">{{ o.attempts }}</div><div class="stat-l">attempts</div></div>
  <div class="card"><div class="stat-n">{{ (o.avg_ms ~ ' ms') if o.attempts > 0 else '-' }}</div><div class="stat-l">avg latency</div></div>
  <div class="card"><div class="stat-n">{% if o.e2e == 0 %}under 1 s{% elif o.e2e > 0 %}{{ o.e2e }} s{% else %}-{% endif %}</div><div class="stat-l">end to end</div></div>
  <div class="card"><div class="stat-n">{{ o.size|nbytes }}</div><div class="stat-l">payload</div></div>
</div>
<div class="grid two-wide" style="margin-bottom:20px">
  <div class="panel">
    <h3>Payload <span class="panel-sub">as persisted (after redactions)</span></h3>
    <div id="ev-ide" class="ide" style="height:260px">{{ o.payload|pretty_json }}</div>
    <h3 style="margin-top:16px">Provenance</h3>
    {{ kit.kv([('Event', o.event), ('Action', o.action), ('Deduper', o.deduper), ('Publisher', publisher), ('Published', o.ts|when), ('Payload size', o.size|nbytes), ('Metadata', o.metadata or '{}'), ('Wizard', ('processed (' ~ o.spells ~ ' runs)') if o.spelled else 'queued')]) }}
  </div>
  <div class="panel" style="padding:0"><h3 style="padding:18px 18px 0">Lifecycle timeline <span class="panel-sub">reception, spells, every delivery attempt</span></h3><div class="table-wrap attn" style="border:none">
  {%- if not timeline %}<div class="empty">No lifecycle activity recorded.</div>
  {%- else %}
    <table class="data">
      <thead><tr><th>when</th><th>stage</th><th>detail</th></tr></thead>
      <tbody>{% for t in timeline %}
        {%- if t.kind == 'publish' %}
        <tr><td class="dim nowrap">{{ t.ts|ago }}</td><td><span class="pill mut">published</span></td><td>by <b>{{ t.who }}</b> &middot; {{ t.n|nbytes }} payload accepted, validated and fanned out</td></tr>
        {%- elif t.kind == 'spell' %}
        <tr><td class="dim nowrap">{{ t.ts|ago }}</td><td><span class="pill {{ t.cls }}">spell {{ t.st }}</span></td><td><b>{{ t.who }}</b> <span class="mono dim">{{ t.detail }}</span></td></tr>
        {%- else %}
        <tr><td class="dim nowrap">{{ t.ts|ago }}</td><td>{{ t.code|code_pill }}</td><td>attempt {{ t.n }} to <b>{{ t.who }}</b> &middot; {{ t.ms }} ms &middot; <span class="mono dim">{{ t.detail }}</span></td></tr>
        {%- endif %}
      {% endfor %}</tbody>
    </table>
  {%- endif %}
  </div></div>
</div>
{%- if not traces %}
<div class="panel tight">
  <h3>Consuming trace <span class="panel-sub">not linked yet</span></h3>
  <div class="corr-empty">
    <p>No trace is linked to this event. amebo links them from either end:</p>
    <ul class="corr-how">
      <li><b>Producer side.</b> An instrumented publisher sends W3C <code>traceparent</code> on <code>POST /v1/events</code>, so the event is born inside the publisher's trace.</li>
      <li><b>Consumer side.</b> The consuming service sets <code>amebo.event_id</code> on the span that handles the webhook, so the trace names the event it processed.</li>
    </ul>
  </div>
</div>
{%- else %}
<div class="panel tight nopad">
  <h3 class="panel-pad">Consuming trace <span class="panel-sub">the work this event caused</span></h3>
  {%- for tr in traces %}
  {%- set open_trace = fmt.js('/traces/' ~ (tr.trace_id|urlencode)) %}
  {%- if not tr.found %}
  <div class="corr-head">
    <div><span class="mono">{{ tr.trace_id }}</span> <span class="ev-link-src">{{ tr.source }}</span></div>
    <div class="dim">not retained (sampled out)</div>
  </div>
  {%- else %}
  <div class="corr-head">
    <div class="corr-id">
      <a class="corr-open" onclick="dj.get({{ open_trace }}, '#view', {push:true})">{{ tr.root_name }}</a>
      <div class="corr-meta"><span class="mono">{{ tr.trace_id }}</span> &middot; {{ tr.root_service }} &middot; linked by the {{ tr.source }}</div>
    </div>
    <div class="hstats">
      <div class="hstat"><div class="hstat-n">{{ tr.duration_ms|ms }}</div><div class="hstat-l">duration</div></div>
      <div class="hstat"><div class="hstat-n">{{ tr.span_count }}</div><div class="hstat-l">spans</div></div>
      <div class="hstat"><div class="hstat-n {{ 'bad' if tr.errors else '' }}">{{ tr.errors }}</div><div class="hstat-l">errors</div></div>
    </div>
  </div>
  <div class="amebo-wf">
    {%- for s in tr.spans %}
    <div class="amebo-wf-row"><span class="amebo-wf-name"><span class="dim">{{ s.service }}</span> {{ s.name }}</span>
      <span class="amebo-wf-track"><span class="amebo-wf-bar{{ ' bad' if s.error else '' }}" style="left:{{ s.left }}%;width:{{ s.width }}%"></span></span>
      <span class="amebo-wf-dur mono dim">{{ (s.duration / 1000)|ms }}</span></div>
    {%- endfor %}
  </div>
  <div class="corr-foot"><a class="corr-open" onclick="dj.get({{ open_trace }}, '#view', {push:true})">Open the full trace</a></div>
  {%- endif %}
  {%- endfor %}
</div>
{%- endif %}
<div class="panel" style="padding:0"><h3 style="padding:18px 18px 0">Deliveries by subscriber</h3><div id="ev-subs" class="table-wrap" style="border:none">{% with message='' %}{% include 'ui/broker/_ev_subs.html' %}{% endwith %}</div></div>
<script>(function(){ var el=document.getElementById('ev-ide'); if(!el||!window.ace) return; var ed=ace.edit('ev-ide'); ed.session.setMode('ace/mode/json');
  var dark=window.dgDark?dgDark():false;
  ed.setTheme(dark?'ace/theme/one_dark':'ace/theme/chrome');
  ed.setOptions({readOnly:true,fontSize:13,showPrintMargin:false,wrap:true,tabSize:2,useWorker:false}); ed.clearSelection(); window.__ace.push(ed); })();</script>
{%- endif %}
{% endblock %}