{% extends 'silk/base/base.html' %}
{% load silk_assets %}
{% load silk_filters %}

{% block pagetitle %}Silky - Summary{% endblock %}

{% block js %}
    <script src="{% silk_asset 'silk/lib/htmx.min.js' %}" defer></script>
{% endblock %}

{% block data %}
<div class="req-head">
    <div>
        <h1>Summary</h1>
        <p class="sub">Health of {{ endpoints|length }} endpoint{{ endpoints|length|pluralize }} over {{ stats.count|num }} recorded request{{ stats.count|pluralize }}{% if capped %} (the newest {{ stats.count|num }}){% endif %}.</p>
    </div>
    <form method="post" action="{% url 'silk:summary' %}" class="chipset" aria-label="Time range">
        {% csrf_token %}
        <button type="submit" name="clear_filters" value="1" class="chip" aria-pressed="{% if not active_preset %}true{% else %}false{% endif %}">All time</button>
        {% for p in time_presets %}
        <button type="submit" name="time_preset" value="{{ p.key }}" class="chip" aria-pressed="{% if active_preset == p.seconds %}true{% else %}false{% endif %}">{{ p.label }}</button>
        {% endfor %}
    </form>
</div>

{% if not has_data %}
<div class="empty"><p><strong>No requests recorded{% if active_preset %} in this range{% endif %}.</strong></p><p class="muted">Make a request to your app and it will appear here.</p></div>
{% else %}
<div class="stats">
    <div class="stat"><div class="stat__label">Requests</div><div class="stat__value">{{ stats.count|num }}</div></div>
    <div class="stat"><div class="stat__label">p50</div><div class="stat__value">{{ stats.p50|dur_num }}<small>{{ stats.p50|dur_unit }}</small></div></div>
    <div class="stat"><div class="stat__label">p95</div><div class="stat__value">{{ stats.p95|dur_num }}<small>{{ stats.p95|dur_unit }}</small></div></div>
    <div class="stat"><div class="stat__label">5xx rate</div><div class="stat__value{% if stats.error_rate >= 5 %} is-bad{% endif %}">{{ stats.error_rate|floatformat:"1" }}<small>%</small></div><div class="stat__sub">{{ stats.errors|num }} server errors</div></div>
    <div class="stat"><div class="stat__label">Avg queries</div><div class="stat__value">{{ stats.avg_queries|floatformat:"1" }}</div><div class="stat__sub">per request</div></div>
    <div class="stat"><div class="stat__label">N+1 suspects</div><div class="stat__value">{{ stats.n1|num }}</div><div class="stat__sub">requests</div></div>
</div>

<div class="cols">
    <div class="card chartcard" data-chart="sum-latency">
        <div class="chartcard__head"><div class="card__title">Latency over time</div><button type="button" class="chartcard__toggle" data-chart-toggle>Hide</button></div>
        <div class="chartcard__body">
        {% if latency %}
        <div class="chartbox">
            <div class="chart__y">{% for t in latency.ticks %}<span style="top:{{ t.pct|floatformat:'1' }}%">{{ t.label|dur }}</span>{% endfor %}</div>
            <svg class="chart" viewBox="0 0 600 200" preserveAspectRatio="none" role="img" aria-label="p50 and p95 latency over time">
                <g class="chart__grid">{% for y in latency.grid %}<line x1="0" x2="600" y1="{{ y }}" y2="{{ y }}"/>{% endfor %}</g>
                <path class="chart__area" d="{{ latency.area }}"/>
                <path class="chart__p95" d="{{ latency.p95 }}"/>
                <path class="chart__p50" d="{{ latency.p50 }}"/>
            </svg>
        </div>
        <div class="legend"><span class="lg lg--p95">p95</span><span class="lg lg--p50">p50</span><span class="muted">oldest → newest, {{ latency.requests|num }} requests in {{ latency.buckets }} buckets</span></div>
        {% else %}<p class="muted">Not enough requests to plot.</p>{% endif %}
        </div>
    </div>
    <div class="card">
        <div class="card__title">Fix these first</div>
        <p class="note">Endpoints where the most total time goes: slow multiplied by busy.</p>
        {% for e in focus %}
        <a class="focus" href="{% url 'silk:requests' %}?view={{ e.key|urlencode }}">
            <span class="focus__rank">{{ forloop.counter }}</span>
            <span class="focus__main"><code>{{ e.key }}</code>
                <span class="focus__why">{% for kind, text in e.reasons %}<span class="why why--{{ kind }}">{{ text }}</span>{% empty %}<span class="muted small">no single cause stands out</span>{% endfor %}</span></span>
            <span class="focus__share">{{ e.share|floatformat:"0" }}%<small>of all time</small></span>
        </a>
        {% endfor %}
        <div class="card__title" style="margin-top:16px">Status codes</div>
        <div class="stack">{% for s in status %}{% if s.count %}<i class="st-{{ s.digit }}" style="flex:{{ s.count }}" title="{{ s.digit }}xx: {{ s.count }}"></i>{% endif %}{% endfor %}</div>
        <div class="legend">{% for s in status %}<span class="lg lg--st{{ s.digit }}">{{ s.digit }}xx {{ s.count }}</span>{% endfor %}</div>
    </div>
</div>

{% include 'silk/inclusion/summary_where.html' %}

<div class="tablewrap">
    <table class="reqs">
        <thead><tr>
            <th>Endpoint</th><th class="num c-90">Requests</th><th class="num c-90">p50</th><th class="num c-90">p95</th>
            <th class="num c-120">Avg queries</th><th class="num c-80">5xx</th><th class="num c-140">Time share</th><th class="c-90">Trend</th>
        </tr></thead>
        <tbody>
        {% for e in endpoints %}
        <tr>
            <td class="c-path-cell"><a class="row-link path" href="{% url 'silk:requests' %}?view={{ e.key|urlencode }}">{{ e.key }}</a>{% if e.n1 %} <span class="flag">N+1</span>{% endif %}</td>
            <td class="num mono">{{ e.count|num }}</td>
            <td class="num mono">{{ e.p50|dur }}</td>
            <td class="num mono{% if e.p95 >= thresholds.slow_ms %} is-bad{% endif %}">{{ e.p95|dur }}</td>
            <td class="num mono">{{ e.avg_q|floatformat:"1" }}</td>
            <td class="num mono{% if e.err >= 5 %} is-bad{% endif %}">{% if e.err %}{{ e.err|floatformat:"0" }}%{% else %}0{% endif %}</td>
            <td class="num"><div class="share"><span class="share__bar"><i style="width:{{ e.share|floatformat:'1' }}%"></i></span><span class="mono">{{ e.share|floatformat:"1" }}%</span></div></td>
            <td>{% if e.spark %}<svg class="mini" viewBox="0 0 60 18" preserveAspectRatio="none" aria-hidden="true"><path d="{{ e.spark }}"/></svg>{% endif %}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}