{% extends layout %}{% import 'ui/kit.html' as kit %}
{% block title %}amebo - thresholds{% endblock %}
{% block content %}
<link rel="stylesheet" href="/public/ui/automate.css">
<div class="section-head pin">
  <div>
    <h2>Thresholds</h2>
    <p class="sub">A crossed threshold is published as an ordinary amebo event, so alert delivery is the same signed, retried, dead-letterable path as every other webhook. There is no second delivery system to operate.</p>
  </div>
  <div class="hstats">
    <div class="hstat"><div class="hstat-n">{{ rules|length }}</div><div class="hstat-l">rules</div></div>
    <div class="hstat"><div class="hstat-n {{ 'bad' if breaching > 0 else 'ok' }}">{{ breaching }}</div><div class="hstat-l">breaching</div></div>
    <div class="hstat"><div class="hstat-n">{{ nsubs }}</div><div class="hstat-l">subscribers</div></div>
  </div>
</div>

{% if flash %}{{ kit.flash(flash, tone) }}{% endif %}

<div class="panel tight">
  <h3>How to receive these <span class="panel-sub">no new concepts</span></h3>
  <div class="corr-empty">
    <p>Subscribe an application to <code>{{ breached_action }}</code> the way you subscribe to anything else:</p>
    <pre class="codeblk">POST /v1/subscriptions
x-amebo-application: your-app
x-amebo-signature: &lt;hmac-sha256 of the body with your secret&gt;

{"subscription": "pagerduty-alerts",
 "application": "your-app",
 "action": "{{ breached_action }}",
 "handler": "/hooks/amebo-alerts",
 "max_retries": 5}</pre>
    <p>You then get everything the broker already does: a signed envelope, exponential backoff, dead-lettering when it is out of retries, and replay. An alert that never reached your pager is a row you can find on the Deliveries page, not a silence. Subscribe to <code>{{ recovered_action }}</code> for the all-clear.</p>
  </div>
</div>

{% if principal and principal.superadmin %}
<div class="panel tight">
  <h3>New threshold</h3>
  <form onsubmit="amebeRuleCreate(this); return false">
    <div class="rule-form">
      <div class="field"><label>Name</label><input name="name" placeholder="claims p99 over 1s" required></div>
      <div class="field"><label>Service</label><input name="service" list="svc-list" placeholder="claims-api" required><datalist id="svc-list">{% for s in services %}<option value="{{ s }}">{{ s }}</option>{% endfor %}</datalist></div>
      <div class="field"><label>Route</label><input name="route" placeholder="all routes"></div>
      <div class="field"><label>Metric</label><select name="metric">
        <option value="p99_ms">p99 latency (ms)</option>
        <option value="p95_ms">p95 latency (ms)</option>
        <option value="p50_ms">p50 latency (ms)</option>
        <option value="max_ms">slowest span (ms)</option>
        <option value="error_rate_ppm">error rate (ppm)</option>
        <option value="throughput">throughput (spans)</option>
      </select></div>
      <div class="field"><label>Condition</label><select name="comparator">
        <option value="above">above</option><option value="below">below</option>
      </select></div>
      <div class="field"><label>Threshold</label><input name="threshold" type="number" min="0" value="500" required></div>
      <div class="field"><label>Window</label><select name="window_secs">
        <option value="300">5 minutes</option><option value="900">15 minutes</option>
        <option value="3600">1 hour</option>
      </select></div>
      <div class="field"><label>Minimum spans</label><input name="min_count" type="number" min="0" value="20"></div>
    </div>
    <p class="hint">Minimum spans stops a rule firing on nothing: two requests can put p99 at ten seconds, and that is arithmetic rather than an incident. A rule fires once when it starts breaching and once when it recovers, never once per evaluation.</p>
    <div class="form-actions"><button class="btn btn-primary" type="submit">Create threshold</button></div>
  </form>
</div>
{% endif %}

<div class="panel nopad">
  <h3 class="panel-pad">Rules</h3>
  <div class="table-wrap" style="border:none">
  {%- if not rules %}
    <div class="empty">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
      <p>No thresholds yet</p>
      <p class="hint">A threshold publishes an ordinary amebo event when it is crossed, so any application can subscribe to it with POST /v1/subscriptions and get a signed, retried, dead-letterable webhook.</p>
    </div>
  {%- else %}
    <table class="data">
      <thead><tr>
        <th>rule</th><th>watching</th><th>condition</th><th>window</th>
        <th class="right">current</th><th>state</th><th class="right">changed</th><th></th>
      </tr></thead>
      <tbody>{% for r in rules %}
        <tr data-rule="{{ r.rule }}">
          <td class="fw">{{ r.name }}</td>
          <td>{{ r.service }}<span class="dim">{{ ' ' ~ r.route if r.route else ' (all routes)' }}</span></td>
          <td>{{ r.metric_label }} {{ r.comparator }} {{ r.threshold_text }}</td>
          <td class="dim">{{ r.window_text }}</td>
          <td class="right mono">{{ r.value_text }}</td>
          <td>{% if not r.enabled %}<span class="pill mut">paused</span>{% elif r.state == 'breached' %}<span class="pill bad">breaching</span>{% else %}<span class="pill ok">ok</span>{% endif %}</td>
          <td class="right dim">{{ r.last_change|ago }}</td>
          <td class="right nowrap">{% if principal and principal.superadmin %}
            <button class="btn btn-sm" onclick="amebeRule('{{ r.rule }}','toggle')">{{ 'Resume' if not r.enabled else 'Pause' }}</button>
            <button class="btn btn-sm btn-ghost" onclick="if(confirm('Delete this threshold?'))amebeRule('{{ r.rule }}','delete')">Delete</button>
          {% endif %}</td>
        </tr>{% endfor %}
      </tbody>
    </table>
  {%- endif %}
  </div>
</div>

<div class="panel nopad" style="margin-top:20px">
  <h3 class="panel-pad">Recent breaches <span class="panel-sub">these are events; click one for its full delivery timeline</span></h3>
  <div class="table-wrap" style="border:none">
  {%- if not breaches %}
    <div class="empty"><p>No threshold has been crossed.</p></div>
  {%- else %}
    <table class="data">
      <thead><tr><th>what happened</th><th>action</th><th class="right">delivered</th><th class="right">when</th></tr></thead>
      <tbody>{% for b in breaches %}
        <tr class="rowlink" onclick="dj.get('/events/' + encodeURIComponent('{{ b.event }}'), '#view', {push:true})">
          <td>{{ b.summary }}<div class="iculprit mono">{{ b.event }}</div></td>
          <td>{% if b.action == recovered_action %}<span class="pill ok">recovered</span>{% else %}<span class="pill bad">breached</span>{% endif %}</td>
          <td class="right">{{ b.delivered }} <span class="dim">of {{ b.fanout }}</span></td>
          <td class="right dim">{{ b.ts|ago }}</td>
        </tr>{% endfor %}
      </tbody>
    </table>
  {%- endif %}
  </div>
</div>

<script>
  window.amebeRule = function(rule, what){ var f = new FormData();
    dj.send('/dash/alerts/' + rule + '/' + what, { method:'POST', target:'#view', body:f }); };
  window.amebeRuleCreate = function(form){ dj.send('/dash/alerts', { method:'POST', target:'#view', body:new FormData(form) }); };
</script>
{% endblock %}