{% extends "base.html" %}
{% block title %}Monitors{% endblock %}
{% block content %}
{% from '_limit.html' import limit, paused, locked %}
{{ limit(stats.total, plan.monitors, 'monitors', 'New monitors will be refused until you upgrade or remove some.') }}
<div class="hdr">
  <div><h1>Monitors</h1><p class="sub" style="margin:0">{{ plan.name }} plan · {{ stats.total }}/{{ plan.monitors }} monitors{% if ws_plan_key == 'free' %} · <a href="/app/billing">Upgrade</a>{% endif %}</p></div>
  <div class="actions"><a class="btn sm" href="/app/reports/export?sections=monitors,checks">Export</a>{% if user.can_edit %}<a class="btn primary" href="/app/monitors/new">+ New monitor</a>{% endif %}</div>
</div>
{% set tiles = ui.dashboard.tiles if ui else ['uptime','up','down','alerts'] %}
{% if tiles %}<div class="grid g4" style="margin-bottom:20px">
  {% for t in tiles %}
  {% if t == 'uptime' %}<div class="stat"><div class="k">Uptime · 24h</div><div class="v" style="color:{% if stats.uptime_24h is not none and stats.uptime_24h < 99 %}var(--warn){% else %}var(--ok){% endif %}">{{ stats.uptime_24h if stats.uptime_24h is not none else '—' }}{% if stats.uptime_24h is not none %}%{% endif %}</div><div class="t">{{ stats.checks_24h }} checks</div></div>
  {% elif t == 'up' %}<div class="stat"><div class="k">Up</div><div class="v" style="color:var(--ok)">{{ stats.up }}</div><div class="t">{{ stats.paused }} paused</div></div>
  {% elif t == 'down' %}<div class="stat"><div class="k">Down</div><div class="v" style="color:{% if stats.down %}var(--err){% else %}var(--text){% endif %}">{{ stats.down }}</div><div class="t">{{ open_incidents|length }} open incident{% if open_incidents|length != 1 %}s{% endif %}</div></div>
  {% elif t == 'alerts' %}<div class="stat"><div class="k">Alerts · 24h</div><div class="v">{{ stats.alerts_24h }}</div><div class="t"><a href="/app/incidents">Incident log</a></div></div>
  {% elif t == 'servers' %}<div class="stat"><div class="k">Servers</div><div class="v">{{ nav_counts.servers_total if nav_counts.servers_total is defined else '—' }}</div><div class="t">{% if nav_counts.servers_off %}<span class="err">{{ nav_counts.servers_off }} offline</span>{% else %}<a href="/app/servers">all online</a>{% endif %}</div></div>
  {% elif t == 'incidents' %}<div class="stat"><div class="k">Open incidents</div><div class="v" style="color:{% if open_incidents %}var(--err){% else %}var(--text){% endif %}">{{ open_incidents|length }}</div><div class="t"><a href="/app/incidents">Incidents</a></div></div>
  {% endif %}{% endfor %}
</div>{% endif %}
{% if open_incidents %}
<div class="flash err"><b>{{ open_incidents|length }} open incident{% if open_incidents|length != 1 %}s{% endif %}:</b> {% for i in open_incidents %}<a href="/app/incidents/{{ i.id }}" style="color:inherit;text-decoration:underline">{{ i.title }}</a> ({{ fmt_duration(i.duration_seconds) }}{% if i.acknowledged_at %}, acknowledged{% endif %}){% if not loop.last %} · {% endif %}{% endfor %}</div>
{% endif %}
{% if not all_monitors %}
<div class="panel empty">
  <h2>No monitors yet</h2><p>Add your website for uptime, an API flow with assertions, a heartbeat for your nightly backup, your domain and DNS, or a page you want to watch for changes.</p>
  {% if user.can_edit %}<div class="actions" style="justify-content:center"><a class="btn primary" href="/app/monitors/new?mode=uptime">Monitor a website</a><a class="btn" href="/app/monitors/new?mode=api">Check an API</a><a class="btn" href="/app/monitors/new?mode=heartbeat">Add a heartbeat</a><a class="btn" href="/app/monitors/new?mode=domain">Watch a domain</a></div>{% endif %}
</div>
{% else %}
<form method="get" class="actions" style="margin-bottom:14px">
  <input type="text" name="q" value="{{ q }}" placeholder="Search name or URL" style="width:240px">
  <select name="kind" style="width:auto"><option value="">All types</option>{% for k, v in modes.items() %}<option value="{{ k }}" {% if kind == k %}selected{% endif %}>{{ v[0] }}</option>{% endfor %}</select>
  <select name="state" style="width:auto"><option value="">Any state</option><option value="down" {% if state == 'down' %}selected{% endif %}>Down</option><option value="up" {% if state == 'up' %}selected{% endif %}>Up</option><option value="paused" {% if state == 'paused' %}selected{% endif %}>Paused</option></select>
  {% if all_tags %}<select name="tag" style="width:auto"><option value="">Any tag</option>{% for t in all_tags %}<option value="{{ t }}" {% if tag == t %}selected{% endif %}>{{ t }}</option>{% endfor %}</select>{% endif %}
  <button class="btn sm">Filter</button>{% if q or tag or state or kind %}<a class="btn ghost sm" href="/app">Clear</a>{% endif %}
  <span class="small muted" style="margin-left:auto">{{ monitors|length }} shown</span>
</form>
<div class="panel tight tbl">
<table>
{% set cols = ui.dashboard.columns if ui else ['type','status','bars','interval','last_check','detail'] %}
<thead><tr><th style="width:36%">Monitor</th>{% if 'status' in cols %}<th>Status</th>{% endif %}{% if 'bars' in cols %}<th>30 days</th>{% endif %}{% if 'interval' in cols %}<th>Interval</th>{% endif %}{% if 'last_check' in cols %}<th>Last check</th>{% endif %}{% if 'detail' in cols %}<th>Detail</th>{% endif %}</tr></thead>
<tbody>
{% for m in monitors %}
<tr{% if m.paused_by_plan %} style="opacity:.6"{% endif %}>
  <td><a href="/app/monitors/{{ m.id }}"><b>{{ m.name }}</b></a> {{ paused(m.paused_by_plan, 'monitors') }} {% if 'type' in cols %}<span class="pill" title="{{ modes[m.mode][1] if m.mode in modes }}">{{ modes[m.mode][0] if m.mode in modes else m.mode }}</span>{% endif %}{% for t in m.tags or [] %}<span class="tag">{{ t }}</span>{% endfor %}
    <div class="small dim mono" style="max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{% if m.mode == 'heartbeat' %}{% if m.schedule_cron %}{{ m.schedule_cron }} ({{ m.schedule_tz }}){% else %}every {{ m.period_minutes }} min{% endif %} · last ping {{ m.last_ping_at|timeago }}{% elif m.mode == 'flow' %}{{ (m.steps or [])|length }} steps · {{ m.url }}{% else %}{{ m.url }}{% endif %}</div></td>
  {% if 'status' in cols %}<td>
    {% if not m.active %}<span class="dot"></span><span class="muted">paused</span>
    {% elif m.is_up is none %}<span class="dot"></span><span class="muted">pending</span>
    {% elif m.is_up %}<span class="dot ok"></span>up{% if m.last_latency_ms is not none and m.mode != 'domain' %} <span class="dim small">· {{ m.last_latency_ms }} ms</span>{% endif %}{% if m.slow_count >= 3 %} <span class="pill warn">slow</span>{% endif %}
    {% else %}<span class="dot err"></span><span class="err">down</span>{% endif %}
    {% if m.last_error and m.is_up is not false %}<div class="small dim" style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ m.last_error }}">{{ m.last_error[:70] }}</div>{% endif %}
  </td>{% endif %}
  {% if 'bars' in cols %}<td><div class="mini" title="Daily uptime, last 30 days">{% for b in bars.get(m.id, []) %}<i class="{{ b }}"></i>{% endfor %}</div></td>{% endif %}
  {% if 'interval' in cols %}<td class="small">{% if m.mode == 'heartbeat' %}—{% else %}{{ m.interval_minutes|interval }}{% endif %}</td>{% endif %}
  {% if 'last_check' in cols %}<td class="small">{{ m.last_checked_at|timeago }}</td>{% endif %}
  {% if 'detail' in cols %}<td class="small">
    {% if m.mode == 'price' %}<b>{{ m.last_value if m.last_value is not none else '—' }}</b>{% if m.change_count %} <span class="dim">({{ m.change_count }} changes)</span>{% endif %}
    {% elif m.mode in ('text','keyword') %}{{ m.last_changed_at|timeago }}{% if m.change_count %} <span class="dim">({{ m.change_count }})</span>{% endif %}
    {% elif m.mode == 'domain' %}{% if m.domain_expires_at %}expires {{ m.domain_expires_at|dt }}{% else %}<span class="dim">DNS watched</span>{% endif %}
    {% elif m.security_scan %}<span class="pill {% if m.security_scan.grade in ('A+','A') %}ok{% elif m.security_scan.grade == 'B' %}info{% elif m.security_scan.grade == 'C' %}warn{% else %}err{% endif %}" title="Security grade">{{ m.security_scan.grade }}</span>{% if m.ssl_expires_at %} <span class="dim">SSL {{ m.ssl_expires_at|dt }}</span>{% endif %}
    {% elif m.ssl_expires_at %}<span class="dim">SSL {{ m.ssl_expires_at|dt }}</span>
    {% elif m.mode == 'dependency' %}<span class="dim">{{ m.last_indicator or '—' }}</span>
    {% else %}—{% endif %}
  </td>{% endif %}
</tr>
{% endfor %}
{% if not monitors %}<tr><td colspan="6" class="muted" style="text-align:center;padding:30px">Nothing matches that filter.</td></tr>{% endif %}
</tbody></table></div>
{% endif %}

{% if alerts and (not ui or ui.dashboard.show_recent_alerts) %}
<h2 style="margin-top:30px">Recent alerts</h2>
<div class="panel tight tbl"><table>
<thead><tr><th>When</th><th>Event</th><th>Alert</th><th>Delivery</th></tr></thead><tbody>
{% for a in alerts %}
<tr><td class="small muted" style="white-space:nowrap">{{ a.created_at|timeago }}</td><td><span class="pill {% if a.kind in ('down','ssl','error','domain','dns','security','escalation','health','dependency') %}err{% elif a.kind == 'up' %}ok{% elif a.kind == 'slow' %}warn{% else %}brand{% endif %}">{{ a.kind }}</span></td>
<td>{% if a.monitor_id %}<a href="/app/monitors/{{ a.monitor_id }}">{{ a.title }}</a>{% elif a.server_id %}<a href="/app/servers/{{ a.server_id }}">{{ a.title }}</a>{% else %}{{ a.title }}{% endif %}</td>
<td class="small">{% for k, v in a.delivery.items() %}<span class="pill {% if v == 'sent' %}ok{% elif k in ('muted','maintenance') %}warn{% else %}err{% endif %}" title="{{ v }}">{{ k.split(':')[0] }}</span> {% endfor %}</td></tr>
{% endfor %}
</tbody></table></div>
{% endif %}
{% endblock %}