{#- Telemetry components, ported from the Dragon resources/*.dr helpers. Import WITH CONTEXT
    (they use `h`, the view helpers):  {% import 'ui/telemetry/_t.html' as t with context %}

    JS strings: values interpolated into onclick handlers go through js() (JSON, every quote
    and angle bracket \u-escaped, then HTML-escaped for the attribute) or h.enc() (percent
    encoding), never raw, so a hostile service or metric name cannot break out. -#}

{% import 'ui/kit.html' as kit %}

{% macro js(value) %}{{ value|tojson|forceescape }}{% endmacro %}

{% macro css() %}<link rel="stylesheet" href="/public/ui/telemetry.css">{% endmacro %}

{% macro check_svg() %}<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>{% endmacro %}

{#- The time range control. `params` are the other query parameters to carry along. -#}
{% macro rng(target, cur, params={}) %}
<div class="rng" title="Time range">
  {%- for w in h.WINDOWS %}
  <button class="{{ 'rng-b active' if w.key == cur else 'rng-b' }}" onclick="dj.get('{{ h.url(target, w=w.key, **params) }}', '#view', {push:true})">{{ w.label }}</button>
  {%- endfor %}
</div>
{% endmacro %}

{% macro opt(value, label, cur) %}<option value="{{ value }}"{{ ' selected' if value == cur else '' }}>{{ label }}</option>{% endmacro %}

{% macro service_options(seen, cur) %}
{{ opt('', 'Every service', cur) }}
{%- for s in seen %}{{ opt(s.service, s.service, cur) }}{% endfor %}
{% endmacro %}

{% macro hstat(value, label, tone='') %}<div class="hstat"><div class="hstat-n {{ tone }}">{{ value }}</div><div class="hstat-l">{{ label }}</div></div>{% endmacro %}

{% macro chip(label, value) %}<span class="chip"><span class="chip-k">{{ label }}</span>{{ value }}</span>{% endmacro %}

{% macro pctl(label, value, note) %}<div class="pctl-cell"><div class="pctl-l">{{ label }}</div><div class="pctl-v">{{ value }}</div><div class="pctl-n">{{ note }}</div></div>{% endmacro %}

{% macro card(n, label, tone, blurb) %}
<div class="kcard">
  <div class="kcard-h"><span class="kcard-l">{{ label }}</span></div>
  <div class="kcard-b"><div class="kcard-v"><span class="kcard-n {{ tone }}">{{ n }}</span></div></div>
  <div class="kcard-f"><span class="kcard-cmp">{{ blurb }}</span></div>
</div>
{% endmacro %}

{% macro spark(vals, tone='') %}
{%- set p = h.spark(vals) -%}
{%- if not p.line -%}<svg class="kspark" viewBox="0 0 140 34" aria-hidden="true"></svg>
{%- else -%}
<svg class="kspark {{ tone }}" viewBox="0 0 140 34" preserveAspectRatio="none" aria-hidden="true">
  <polygon points="{{ p.area }}" class="kspark-fill"/>
  <polyline points="{{ p.line }}" fill="none" class="kspark-line" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
{%- endif -%}
{% endmacro %}

{% macro kpi(label, value, unit, d, vals, tone, note) %}
<div class="kcard">
  <div class="kcard-h"><span class="kcard-l">{{ label }}</span><span class="kcard-note">{{ note }}</span></div>
  <div class="kcard-b">
    <div class="kcard-v"><span class="kcard-n {{ tone }}">{{ value }}</span><span class="kcard-u">{{ unit }}</span></div>
    {{ spark(vals, tone) }}
  </div>
  <div class="kcard-f">
    {%- set tri %}<svg class="kdelta-i" viewBox="0 0 10 10" aria-hidden="true"><path d="M5 1 9 8H1z"/></svg>{% endset -%}
    {%- if d[1] == 'up' %}<span class="kdelta good">{{ tri }}{{ d[0] }}</span>
    {%- elif d[1] == 'down' %}<span class="kdelta bad">{{ tri }}{{ d[0] }}</span>
    {%- else %}<span class="kdelta">{{ d[0] }}</span>{% endif %}<span class="kcard-cmp">vs previous window</span></div>
</div>
{% endmacro %}

{#- The six golden-signal cards both APM pages share. `last` is (label, value, delta, note). -#}
{% macro kpis(now_s, prev_s, points, w, last) %}
{%- set counts = points|map(attribute='count')|list -%}
{%- set errs = points|map(attribute='errors')|list -%}
{%- set p95s = points|map(attribute='p95_us')|list -%}
{%- set p99s = points|map(attribute='p99_us')|list -%}
{%- set err_ppm = h.ppm(now_s.errors, now_s.count) -%}
{%- set prev_ppm = h.ppm(prev_s.errors, prev_s.count) -%}
{%- set err_tone = 'bad' if err_ppm >= 10000 else '' -%}
<div class="kcards">
  {{ kpi('Throughput', now_s.count, 'spans', h.delta(now_s.count, prev_s.count, True), counts, '', w.label) }}
  {{ kpi('Error rate', h.rate(now_s.errors, now_s.count), '', h.delta(err_ppm, prev_ppm, False), errs, err_tone, now_s.errors ~ ' errors') }}
  {{ kpi('p50 latency', h.dur(now_s.p50_us), '', h.delta(now_s.p50_us, prev_s.p50_us, False), p95s, '', 'median') }}
  {{ kpi('p95 latency', h.dur(now_s.p95_us), '', h.delta(now_s.p95_us, prev_s.p95_us, False), p95s, '', 'slowest 5%') }}
  {{ kpi('p99 latency', h.dur(now_s.p99_us), '', h.delta(now_s.p99_us, prev_s.p99_us, False), p99s, '', 'slowest 1%') }}
  {{ kpi(last[0], last[1], last[4], last[2], (p99s if last[5] else counts), '', last[3]) }}
</div>
{% endmacro %}

{% macro health(points) %}
<div class="panel tight">
  <div class="hstrip-h">
    <h3 style="margin:0">Health <span class="panel-sub">error rate per bucket across the window</span></h3>
    <div class="hstrip-k">
      <span class="hs-key"><i class="hs-cell ok"></i>clean</span>
      <span class="hs-key"><i class="hs-cell warn"></i>under 1%</span>
      <span class="hs-key"><i class="hs-cell bad"></i>1% or more</span>
      <span class="hs-key"><i class="hs-cell none"></i>no traffic</span>
    </div>
  </div>
  <div class="hstrip">{% for cls, title in h.health_cells(points) %}<span class="{{ cls }}" title="{{ title }}"></span>{% endfor %}</div>
  {%- set ax = h.axis(points) %}
  <div class="hstrip-ax"><span>{{ ax[0] }}</span><span>{{ ax[1] }}</span><span>{{ ax[2] }}</span></div>
</div>
{% endmacro %}

{% macro apm_charts(w, service) %}
<div class="grid charts" data-apm data-window="{{ w.key }}" data-service="{{ service }}">
  {{ kit.chart_panel('Throughput', 'spans per bucket', 'ch-apm-tput') }}
  {{ kit.chart_panel('Latency', 'p50, p95 and p99', 'ch-apm-lat') }}
  {{ kit.chart_panel('Errors', 'error rate and count', 'ch-apm-err') }}
</div>
{% endmacro %}

{% macro err_cell(errors, count) %}
{%- if errors == 0 %}<span class="dim">0.00%</span>
{%- else %}<span class="{{ 'bad' if h.ppm(errors, count) >= 10000 else 'warn' }}">{{ h.rate(errors, count) }}</span> <span class="dim">{{ errors }}</span>{% endif %}
{% endmacro %}

{% macro app_cell(app) %}{% if not app %}<span class="pill warn">unclaimed</span>{% else %}<span>{{ app }}</span>{% endif %}{% endmacro %}

{% macro trace_err(n) %}{% if n == 0 %}<span class="dim">0</span>{% else %}<span class="bad fw">{{ n }}</span>{% endif %}{% endmacro %}

{% macro dbar(v, mx, err) %}<span class="{{ 'tbar err' if err else 'tbar' }}"><i style="width:{{ h.bar_pct(v, mx) }}%"></i></span><span class="tbar-t mono">{{ h.dur(v) }}</span>{% endmacro %}

{% macro trace_table(rows, show_service) %}
{%- if not rows %}
<div class="empty">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h13"/><path d="M6 12h11"/><path d="M9 18h9"/></svg>
  <p>No traces in the live index</p>
  <p class="hint">The explorer lists the root spans retained in this window. Errors, slow spans and traces carrying an amebo event are always retained; a specific trace stays readable by id.</p>
</div>
{%- else %}
{%- set mx = [1] + rows|map(attribute='duration_us')|list %}
{%- set mx = mx|max %}
<table class="data">
  <thead><tr>
    <th>trace</th><th>root span</th>{% if show_service %}<th>service</th>{% endif %}<th>route</th>
    <th class="right">spans</th><th class="right">errors</th><th>duration</th><th class="right">when</th>
  </tr></thead>
  <tbody>
  {%- for r in rows %}
    <tr class="rowlink" onclick="dj.get('/traces/{{ h.enc(r.trace_id) }}', '#view', {push:true})">
      <td class="mono dim">{{ r.trace_id[:16] }}</td>
      <td class="fw">{{ r.name }}</td>
      {%- if show_service %}<td>{{ r.service }}</td>{% endif %}
      <td class="mono">{{ r.route }}</td>
      <td class="right">{{ r.spans }}</td>
      <td class="right">{{ trace_err(r.errors) }}</td>
      <td class="tbar-cell">{{ dbar(r.duration_us, mx, r.error) }}</td>
      <td class="right dim">{{ r.ts|ago }}</td>
    </tr>
  {%- endfor %}
  </tbody>
</table>
{%- endif %}
{% endmacro %}

{#- The waterfall. `cap` bounds the inline rows on a page that is not the trace page. -#}
{% macro waterfall(v, cap=0) %}
{%- if not v.found %}
<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="M12 8v5"/><path d="M12 16h.01"/></svg>
  <p>No retained spans for this trace</p>
  <p class="hint">Traces are sampled: errors and slow spans are always kept, the rest at the configured sample rate.</p>
</div>
{%- else %}
{%- set shown = v.nodes[:cap] if cap > 0 else v.nodes %}
<div class="wf">
  <div class="wf-head">
    <div class="wf-name-head">span</div>
    <div class="wf-track-head"><div class="wf-ruler">{% for left, label in h.ticks(v.duration_us) %}<span class="wf-tick" style="left:{{ left }}%">{{ label }}</span>{% endfor %}</div></div>
  </div>
  <div class="wf-rows">
  {%- for n in shown %}
    <div class="wf-row" data-span="{{ n.span_id }}" onclick="dj.get('/dash/traces/{{ h.enc(v.trace_id) }}/spans/{{ h.enc(n.span_id) }}', '#drawer')">
      <div class="wf-name">
        {% for _ in range(n.depth) %}<span class="wf-guide"></span>{% endfor %}
        <span class="wf-op {{ h.op_class(n.op) }}">{{ n.op }}</span>
        <span class="wf-title">{{ n.name }}</span>
        <span class="wf-sub">{{ h.span_detail(n) }}</span>
      </div>
      <div class="wf-track">
        <div class="{{ h.span_class(n) }}" style="left:{{ n.offset_pct }}%;width:{{ n.width_pct }}%">
          <div class="wf-bar"></div>
          <span class="wf-dur">{{ h.dur(n.duration_us) }}</span>
        </div>
      </div>
    </div>
  {%- endfor %}
  </div>
  {%- if v.nodes|length > shown|length %}<div class="wf-more">{{ v.nodes|length - shown|length }} more spans in the full trace</div>{% endif %}
</div>
{%- endif %}
{% endmacro %}

{% macro logrow(l, chip=False) %}
<div class="logrow{{ ' hastrace' if chip and l.trace_id else '' }}" onclick="dj.get('/dash/logs/line?id={{ h.enc(l.id) }}', '#drawer')">
  <span class="log-ts mono">{{ h.clock_ms(l.ts_us) }}</span>
  <span class="log-sev {{ h.sev_class(l.severity) }}">{{ l.severity }}</span>
  <span class="log-svc">{{ l.service }}</span>
  <span class="log-body mono">{{ l.body }}</span>
  {%- if chip and l.trace_id %}
  <span class="log-trace" title="Open the trace this line came from" onclick="event.stopPropagation();dj.get('/traces/{{ h.enc(l.trace_id) }}', '#view', {push:true})">{{ l.trace_id[:8] }}</span>
  {%- endif %}
</div>
{% endmacro %}

{#- Every log line a trace emitted, oldest first. -#}
{% macro trace_logs(lines) %}
{%- if not lines %}
<div class="panel tight">
  <h3>Logs <span class="panel-sub">nothing correlated</span></h3>
  <p class="hint">No log line carries this trace id. Emit logs through an OpenTelemetry SDK inside an active span, or send `trace_id` on POST /v1/logs, and they appear here automatically.</p>
</div>
{%- else %}
<div class="panel tight nopad">
  <h3 class="panel-pad">Logs <span class="panel-sub">{{ lines|length }} lines this trace emitted, oldest first</span></h3>
  <div class="logstream">{% for l in lines %}{{ logrow(l) }}{% endfor %}</div>
</div>
{%- endif %}
{% endmacro %}

{% macro level_pill(level) %}<span class="pill {{ 'bad' if level in ('fatal', 'error') else 'warn' if level == 'warning' else 'mut' }}">{{ level }}</span>{% endmacro %}

{% macro status_pill(status) %}
{%- if status == 'resolved' %}<span class="pill ok">resolved</span>
{%- elif status == 'ignored' %}<span class="pill mut">ignored</span>
{%- elif status == 'regressed' %}<span class="pill bad">regressed</span>
{%- else %}<span class="pill warn">ongoing</span>{% endif %}
{% endmacro %}

{% macro prio(priority) %}
{%- set bars = h.prio_bars(priority) -%}
<span class="prio {{ priority }}" title="{{ priority }} priority">{% for i in range(1, 4) %}<i class="{{ 'on' if i <= bars else '' }}"></i>{% endfor %}<span class="prio-t">{{ priority }}</span></span>
{%- endmacro %}

{% macro trend(vals) %}
{%- if not vals %}<span class="dim">-</span>
{%- else %}<svg class="trend" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true">{% for x, y, w, hh in h.trend(vals) %}<rect x="{{ x }}" y="{{ y }}" width="{{ w }}" height="{{ hh }}"></rect>{% endfor %}</svg>{% endif %}
{% endmacro %}

{% macro assignee(who) %}
{%- if not who %}<span class="avatar none" title="unassigned">?</span>
{%- else %}<span class="avatar" title="{{ who }}">{{ who[:1]|upper }}</span>{% endif %}
{% endmacro %}

{% macro empty(message, hint='') %}
<div class="empty">{{ check_svg() }}<p>{{ message }}</p>{% if hint %}<p class="hint">{{ hint }}</p>{% endif %}</div>
{% endmacro %}

{% macro attrs_table(m) %}
<table class="attrs"><tbody>{% for k in m|sort %}<tr><td class="attr-k mono">{{ k }}</td><td class="attr-v mono">{{ m[k] }}</td></tr>{% endfor %}</tbody></table>
{% endmacro %}