62 lines
2.5 KiB
HTML
62 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Stats{% endblock %}
|
|
{% block content %}
|
|
<h1>Stats</h1>
|
|
{% if not sinks %}
|
|
<p class="muted">No connections yet. Patch a source into a sink on the Patch page first.</p>
|
|
{% else %}
|
|
<div class="filter-row">
|
|
<label>Connection
|
|
<select id="sink-select">
|
|
{% for s in sinks %}
|
|
<option value="{{ s.id }}">#{{ s.id }} {% if s.label %}{{ s.label }} - {% endif %}{% if s.type == 'public_sink' %}public {{ s.host or '0.0.0.0' }}{% elif s.type == 'tunnel_sink' %}{{ s.client or 'target' }} {{ s.iface or '?' }}{% else %}{{ s.client or '?' }} {{ s.host or '127.0.0.1' }}{% endif %}:{{ s.port }}/{{ s.proto }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<div class="segmented" role="group" aria-label="Time range" id="range-group">
|
|
{% for r in ['1h', '24h', '7d', '30d', '1y', 'all'] %}
|
|
<button type="button" data-range="{{ r }}" class="{{ 'selected' if r == '24h' }}">{{ r }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tiles">
|
|
<div class="tile"><div class="tile-value" id="t-in">-</div><div class="tile-label">In now (towards source)</div></div>
|
|
<div class="tile"><div class="tile-value" id="t-out">-</div><div class="tile-label">Out now (back to peer)</div></div>
|
|
<div class="tile"><div class="tile-value" id="t-active">-</div><div class="tile-label">Open connections</div></div>
|
|
<div class="tile"><div class="tile-value" id="t-total">-</div><div class="tile-label">Transferred in selected range</div></div>
|
|
</div>
|
|
|
|
<section class="card chart-card" id="chart-rate">
|
|
<div class="chart-head">
|
|
<h2>Throughput</h2>
|
|
<div class="legend">
|
|
<span class="key"><span class="swatch-line s1"></span>In</span>
|
|
<span class="key"><span class="swatch-line s2"></span>Out</span>
|
|
</div>
|
|
</div>
|
|
<div class="chart" data-kind="rate"></div>
|
|
</section>
|
|
|
|
<section class="card chart-card" id="chart-conns">
|
|
<div class="chart-head"><h2>New connections</h2></div>
|
|
<div class="chart" data-kind="conns"></div>
|
|
</section>
|
|
|
|
<details class="card">
|
|
<summary>Table view</summary>
|
|
<div class="table-wrap">
|
|
<table class="grid" id="stats-table">
|
|
<thead><tr><th>Time</th><th class="num">In</th><th class="num">Out</th><th class="num">Connections</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
<div id="chart-tooltip" class="tooltip" hidden></div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='common.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='stats.js') }}"></script>
|
|
{% endblock %}
|