Add server list and detail views for WireGuard instances

This commit is contained in:
Eduardo Silva
2026-01-25 10:08:36 -03:00
parent 8ab8b995f4
commit 81be188302
5 changed files with 171 additions and 9 deletions

View File

@@ -0,0 +1,71 @@
{% extends "base.html" %}
{% load i18n %}
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<h3 class="profile-username text-center">wg{{ instance.instance_id }}</h3>
<p class="text-muted text-center">{{ instance.name|default:"" }}</p>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>{% trans 'Public Key' %}</b>
<a class="float-right" title="{{ instance.public_key }}">
{{ instance.public_key|truncatechars:16 }}
</a>
</li>
<li class="list-group-item">
<b>{% trans 'Listen Port' %}</b>
<a class="float-right">{{ instance.listen_port }}</a>
</li>
<li class="list-group-item">
<b>{% trans 'Address' %}</b>
<a class="float-right">{{ instance.address }}/{{ instance.netmask }}</a>
</li>
<li class="list-group-item">
<b>{% trans 'Hostname' %}</b>
<a class="float-right">{{ instance.hostname }}</a>
</li>
<li class="list-group-item">
<b>{% trans 'Peers' %}</b>
<a class="float-right">{{ instance.peer_set.count }}</a>
</li>
</ul>
<a href="{% url 'wireguard_manage_instance' %}?uuid={{ instance.uuid }}"
class="btn btn-primary btn-block">
<b>{% trans 'Edit Instance' %}</b>
</a>
<a href="{% url 'wireguard_server_list' %}" class="btn btn-default btn-block">
<b>{% trans 'Back to List' %}</b>
</a>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-md-6">
<div class="card card-primary card-outline">
<div class="card-header">
<h3 class="card-title">{% trans 'Traffic Graph' %}</h3>
<div class="card-tools">
<form method="get" class="form-inline">
<select name="period" class="form-control form-control-sm" onchange="this.form.submit()">
<option value="6h" {% if request.GET.period == '6h' %}selected{% endif %}>6h</option>
<option value="1d" {% if request.GET.period == '1d' %}selected{% endif %}>1d</option>
<option value="7d" {% if request.GET.period == '7d' %}selected{% endif %}>7d</option>
<option value="30d" {% if request.GET.period == '30d' %}selected{% endif %}>1m</option>
<option value="365d" {% if request.GET.period == '365d' %}selected{% endif %}>1y</option>
</select>
</form>
</div>
</div>
<div class="card-body">
<img src="/rrd/graph/?instance={{ instance.uuid }}&period={{ request.GET.period|default:'6h' }}"
class="img-fluid" alt="RRD Graph">
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,70 @@
{% extends "base.html" %}
{% load i18n %}
{% block content %}
<div class="card card-primary card-outline">
<div class="card-header">
<h3 class="card-title">{% trans 'WireGuard Instances' %}</h3>
<div class="card-tools">
<a href="{% url 'wireguard_manage_instance' %}?action=create" class="btn btn-primary btn-sm">
<i class="fas fa-plus"></i> {% trans 'Create Instance' %}
</a>
</div>
</div>
<div class="card-body p-0">
<table class="table table-striped projects">
<thead>
<tr>
<th class="min-width">#</th>
<th>{% trans 'Name' %}</th>
<th>{% trans 'Listen Port' %}</th>
<th>{% trans 'Address' %}</th>
<th class="min-width">{% trans 'Peers' %}</th>
<th class="min-width"></th>
</tr>
</thead>
<tbody>
{% for instance in wireguard_instances %}
<tr>
<td class="min-width">
<a href="{% url 'wireguard_server_detail' %}?uuid={{ instance.uuid }}">
wg{{ instance.instance_id }}
</a>
</td>
<td>
{{ instance }}
</td>
<td>
{{ instance.listen_port }}
</td>
<td>
{{ instance.address }}/{{ instance.netmask }}
</td>
<td class="min-width">
{{ instance.peer_set.count }}
</td>
<td class="min-width">
<a class="btn btn-outline-primary btn-sm"
href="{% url 'wireguard_server_detail' %}?uuid={{ instance.uuid }}">
<i class="fas fa-folder"></i>
</a>
<a class="btn btn-outline-info btn-sm"
href="{% url 'wireguard_manage_instance' %}?uuid={{ instance.uuid }}">
<i class="fas fa-pencil-alt"></i>
</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="6" class="text-center">
{% trans 'No WireGuard instances found.' %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
{% endblock %}