{% extends layout %}{% import 'ui/kit.html' as kit %}
{% import 'ui/telemetry/_t.html' as t with context %}
{% block title %}Metrics · amebo{% endblock %}
{% block content %}
{{ t.css() }}
{%- set total_series = names|sum(attribute='series') %}
<div class="section-head pin">
  <div>
    <h2>Metrics</h2>
    <p class="sub">Counters, gauges and histograms over OTLP, carrying the same resource attributes as traces and logs, so a metric is filterable by the same service, version and pod as everything else.</p>
  </div>
  {{ t.rng('/metrics/browse', w.key, {'s': service, 'm': metric}) }}
</div>
<div class="kcards">
  <div class="kcard"><div class="kcard-h"><span class="kcard-l">Metrics</span><span class="kcard-note">{{ w.label }}</span></div>
    <div class="kcard-b"><div class="kcard-v"><span class="kcard-n">{{ names|length }}</span></div></div>
    <div class="kcard-f"><span class="kcard-cmp">reporting in this window</span></div></div>
  <div class="kcard"><div class="kcard-h"><span class="kcard-l">Series</span></div>
    <div class="kcard-b"><div class="kcard-v"><span class="kcard-n {{ 'bad' if total_series >= 2000 else '' }}">{{ total_series }}</span></div></div>
    <div class="kcard-f"><span class="kcard-cmp">distinct attribute sets, the cardinality bill</span></div></div>
  <div class="kcard"><div class="kcard-h"><span class="kcard-l">Services</span></div>
    <div class="kcard-b"><div class="kcard-v"><span class="kcard-n">{{ seen|length }}</span></div></div>
    <div class="kcard-f"><span class="kcard-cmp">reporting telemetry</span></div></div>
</div>
{%- if not metric %}
<div class="panel tight"><h3>Pick a metric <span class="panel-sub">from the catalog below</span></h3>
  <p class="hint">amebo folds every data point into a per-minute bucket keyed by service, metric and attribute set, so the write rate is bounded by cardinality rather than by how often you export.</p></div>
{%- else %}
<div class="panel tight">
  <h3>{{ metric }} <span class="panel-sub">{{ service }} &middot; {{ kind }}{% if unit %} &middot; {{ unit }}{% endif %}</span></h3>
  {%- set n = points|length %}
  {%- if n < 2 %}
  <div class="empty"><p>{{ 'Pick a service for this metric from the catalog below.' if not service else 'Not enough data in this window.' }}</p></div>
  {%- else %}
  {%- set vals = points|map(attribute='value')|list %}
  {%- set lo = vals|min %}{% set hi = vals|max %}{% set span = (hi - lo) if hi > lo else 1.0 %}
  {%- set ns = namespace(pts=[]) %}
  {%- for p in points %}{% set ns.pts = ns.pts + [((loop.index0 * 1000) // (n - 1)) ~ ',' ~ (220 - (((p.value - lo) / span) * 200)|int)] %}{% endfor %}
  {%- set line = ns.pts|join(' ') %}
  <div class="mchart">
    <div class="mchart-scale"><span>{{ h.fmt(hi) }}</span><span>{{ h.fmt(lo) }}</span></div>
    <svg viewBox="0 0 1000 240" preserveAspectRatio="none" class="mchart-svg">
      <polygon points="0,230 {{ line }} 1000,230" class="mchart-fill"/>
      <polyline points="{{ line }}" class="mchart-line" fill="none" stroke-width="3" stroke-linejoin="round"/>
    </svg>
  </div>
  <div class="hstrip-ax"><span>{{ h.clock(points[0].ts) }}</span><span>{{ h.clock(points[n // 2].ts) }}</span><span>{{ h.clock(points[n - 1].ts) }}</span></div>
  {%- endif %}
</div>
{%- endif %}
<div class="toolbar">
  <select class="select" style="width:220px" onchange="dj.get('/metrics/browse?w={{ w.key }}&s=' + encodeURIComponent(this.value), '#view', {push:true})">
    {{ t.service_options(seen, service) }}
  </select>
  <div class="grow"></div>
  <span class="dim">{{ names|length }} metrics</span>
</div>
<div class="table-wrap">
{%- if not names %}
  <div class="empty">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 3v18h18"/><path d="m7 14 3-4 3 3 5-7"/></svg>
    <p>No metrics in this window</p>
    <p class="hint">Point an OpenTelemetry metrics exporter at POST /v1/metrics with the same api key traces and logs use.</p>
  </div>
{%- else %}
  <table class="data">
    <thead><tr><th>metric</th><th>service</th><th>kind</th><th>unit</th><th>trend</th><th class="right">series</th></tr></thead>
    <tbody>
    {%- for m in names %}
      <tr class="rowlink {{ 'sel' if m.metric == metric and m.service == service else '' }}"
          onclick="dj.get('{{ h.url('/metrics/browse', w=w.key, s=m.service, m=m.metric) }}', '#view', {push:true})">
        <td class="fw mono">{{ m.metric }}</td>
        <td>{{ m.service }}</td>
        <td><span class="ichip">{{ 'counter' if m.kind == 'sum' else 'histogram' if m.kind == 'histogram' else 'gauge' }}</span></td>
        <td class="dim">{{ m.unit or '-' }}</td>
        <td class="mspark-cell">{% set pts = h.fspark(m.spark) %}{% if pts %}<svg class="mspark" viewBox="0 0 120 24" preserveAspectRatio="none" aria-hidden="true"><polyline points="{{ pts }}" fill="none" stroke-width="1.5" stroke-linejoin="round"/></svg>{% else %}<span class="dim">-</span>{% endif %}</td>
        <td class="right">{% if m.series >= 500 %}<span class="bad fw">{{ m.series }}</span>{% elif m.series >= 100 %}<span class="warn fw">{{ m.series }}</span>{% else %}<span>{{ m.series }}</span>{% endif %}</td>
      </tr>
    {%- endfor %}
    </tbody>
  </table>
{%- endif %}
</div>
{%- if srows|length > 1 %}
<div class="panel nopad" style="margin-top:20px">
  <h3 class="panel-pad">Series <span class="panel-sub">one row per attribute set on this metric</span></h3>
  <div class="table-wrap" style="border:none">
    <table class="data">
      <thead><tr><th>attributes</th><th class="right">points</th><th class="right">last</th></tr></thead>
      <tbody>
      {%- for r in srows %}
        <tr><td class="mono">{{ r.skey or 'no attributes' }}</td>
            <td class="right">{{ r.count }}</td>
            <td class="right mono">{{ h.fmt(r.last, unit) }}</td></tr>
      {%- endfor %}
      </tbody>
    </table>
  </div>
</div>
{%- endif %}
{% endblock %}