infosave2007
257edb8226
- Added a new PHP script for collecting server metrics every 30 seconds. - Created a ServerMonitoring class to handle metrics collection for CPU, RAM, Disk, and Network. - Introduced database tables for storing server and client metrics. - Updated server view template to display real-time metrics using Chart.js. - Added translations for monitoring UI elements. - Created a new monitoring template for detailed server metrics visualization. - Implemented client speed tracking and display in the monitoring UI.
318 lines
13 KiB
Twig
318 lines
13 KiB
Twig
{% extends "layout.twig" %}
|
|
{% block title %}{{ client.name }}{% endblock %}
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold mb-6">{{ client.name }}</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-white rounded shadow p-6">
|
|
<h3 class="font-bold mb-4">{{ t('clients.configuration') }}</h3>
|
|
<dl class="space-y-2 mb-4">
|
|
<div><dt class="text-sm text-gray-600">{{ t('common.ip_address') }}</dt><dd>{{ client.client_ip }}</dd></div>
|
|
<div><dt class="text-sm text-gray-600">{{ t('common.status') }}</dt>
|
|
<dd>
|
|
{% if client.status == 'active' %}
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">{{ t('status.active') }}</span>
|
|
{% else %}
|
|
<span class="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">{{ t('status.disabled') }}</span>
|
|
{% endif %}
|
|
</dd>
|
|
</div>
|
|
<div><dt class="text-sm text-gray-600">{{ t('common.created') }}</dt><dd>{{ client.created_at }}</dd></div>
|
|
</dl>
|
|
<div class="flex gap-2">
|
|
<a href="/clients/{{ client.id }}/download" class="gradient-bg text-white px-4 py-2 rounded">
|
|
<i class="fas fa-download"></i> Download Config
|
|
</a>
|
|
{% if client.status == 'active' %}
|
|
<form method="POST" action="/clients/{{ client.id }}/revoke" style="display:inline;">
|
|
<button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded" onclick="return confirm('Revoke access for this client?')">
|
|
<i class="fas fa-ban"></i> Revoke
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<form method="POST" action="/clients/{{ client.id }}/restore" style="display:inline;">
|
|
<button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
|
|
<i class="fas fa-check"></i> Restore
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded shadow p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="font-bold">{{ t('clients.traffic_stats') }}</h3>
|
|
<button onclick="syncStats({{ client.id }})" class="text-purple-600 hover:text-purple-800 text-sm">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<dl class="space-y-2" id="stats">
|
|
<div><dt class="text-sm text-gray-600">{{ t('common.uploaded') }}</dt><dd id="stat-sent">{{ (client.bytes_sent|default(0) / 1048576)|number_format(2) }} MB</dd></div>
|
|
<div><dt class="text-sm text-gray-600">{{ t('common.downloaded') }}</dt><dd id="stat-received">{{ (client.bytes_received|default(0) / 1048576)|number_format(2) }} MB</dd></div>
|
|
<div><dt class="text-sm text-gray-600">{{ t('common.total') }}</dt><dd id="stat-total">{{ ((client.bytes_sent|default(0) + client.bytes_received|default(0)) / 1048576)|number_format(2) }} MB</dd></div>
|
|
<div><dt class="text-sm text-gray-600">{{ t('clients.last_handshake') }}</dt>
|
|
<dd id="stat-last-seen">
|
|
{% if client.last_handshake %}
|
|
{{ client.last_handshake }}
|
|
{% else %}
|
|
<span class="text-gray-400">Never connected</span>
|
|
{% endif %}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-white rounded shadow p-6">
|
|
<h3 class="font-bold mb-4">{{ t('clients.expiration') }}</h3>
|
|
<form onsubmit="updateExpiration(event, {{ client.id }})" class="space-y-3">
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">{{ t('clients.expiration') }}</label>
|
|
<select id="expirationSelect" class="w-full px-3 py-2 border rounded mb-2" onchange="toggleExpirationEdit()">
|
|
<option value="" selected disabled>-- Select from list --</option>
|
|
<option value="never">{{ t('clients.never_expires') }}</option>
|
|
<option value="7">7 {{ t('common.days') }}</option>
|
|
<option value="30">30 {{ t('common.days') }}</option>
|
|
<option value="60">60 {{ t('common.days') }}</option>
|
|
<option value="90">90 {{ t('common.days') }}</option>
|
|
<option value="180">180 {{ t('common.days') }}</option>
|
|
<option value="365">365 {{ t('common.days') }}</option>
|
|
<option value="custom">{{ t('clients.custom_seconds') }}</option>
|
|
</select>
|
|
<input type="number" id="expirationSeconds" class="w-full px-3 py-2 border rounded" placeholder="{{ t('clients.enter_seconds') }}" style="display:none;" min="1">
|
|
</div>
|
|
<div class="p-3 bg-blue-50 border border-blue-200 rounded">
|
|
<div class="text-xs text-blue-600 font-semibold mb-1">CURRENT VALUE:</div>
|
|
<div class="text-sm text-blue-900 font-medium" id="currentExpiration">
|
|
{% if client.expires_at %}
|
|
{% set expires_ts = client.expires_at|date('U') %}
|
|
{% set now_ts = "now"|date('U') %}
|
|
{% set diff_days = ((expires_ts - now_ts) / 86400)|round %}
|
|
{{ client.expires_at|date('Y-m-d H:i:s') }} ({{ diff_days }} {{ t('common.days') }})
|
|
{% else %}
|
|
{{ t('clients.never_expires') }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="gradient-bg text-white px-4 py-2 rounded w-full">
|
|
<i class="fas fa-save"></i> {{ t('form.update') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="bg-white rounded shadow p-6">
|
|
<h3 class="font-bold mb-4">{{ t('clients.traffic_limit') }}</h3>
|
|
<form onsubmit="updateTrafficLimit(event, {{ client.id }})" class="space-y-3">
|
|
<div>
|
|
<label class="block text-sm text-gray-600 mb-1">{{ t('clients.traffic_limit') }}</label>
|
|
<select id="trafficSelect" class="w-full px-3 py-2 border rounded mb-2" onchange="toggleTrafficEdit()">
|
|
<option value="" selected disabled>-- Select from list --</option>
|
|
<option value="unlimited">{{ t('clients.unlimited') }}</option>
|
|
<option value="1">1 GB</option>
|
|
<option value="5">5 GB</option>
|
|
<option value="10">10 GB</option>
|
|
<option value="25">25 GB</option>
|
|
<option value="50">50 GB</option>
|
|
<option value="100">100 GB</option>
|
|
<option value="250">250 GB</option>
|
|
<option value="500">500 GB</option>
|
|
<option value="1000">1000 GB (1 TB)</option>
|
|
<option value="custom">{{ t('clients.custom_mb') }}</option>
|
|
</select>
|
|
<input type="number" id="trafficMegabytes" class="w-full px-3 py-2 border rounded" placeholder="{{ t('clients.enter_megabytes') }}" style="display:none;" min="1">
|
|
</div>
|
|
<div class="p-3 bg-blue-50 border border-blue-200 rounded">
|
|
<div class="text-xs text-blue-600 font-semibold mb-1">CURRENT VALUE:</div>
|
|
<div class="text-sm text-blue-900 font-medium" id="currentTrafficLimit">
|
|
{% if client.traffic_limit %}
|
|
{% set limit_gb = (client.traffic_limit / 1073741824)|number_format(2) %}
|
|
{% set total_traffic = (client.bytes_sent|default(0) + client.bytes_received|default(0)) %}
|
|
{% set used_gb = (total_traffic / 1073741824)|number_format(2) %}
|
|
{{ limit_gb }} GB (used: {{ used_gb }} GB)
|
|
{% else %}
|
|
{{ t('clients.unlimited') }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="gradient-bg text-white px-4 py-2 rounded w-full">
|
|
<i class="fas fa-save"></i> {{ t('form.update') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if client.qr_code %}
|
|
<div class="bg-white rounded shadow p-6 text-center">
|
|
<h3 class="font-bold mb-4">QR Code</h3>
|
|
<img src="{{ client.qr_code }}" alt="QR Code" class="mx-auto" style="max-width: 300px; width: 100%; height: auto;">
|
|
<p class="text-sm text-gray-600 mt-2">Scan with Amnezia VPN app</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function toggleExpirationEdit() {
|
|
const select = document.getElementById('expirationSelect');
|
|
const input = document.getElementById('expirationSeconds');
|
|
if (select.value === 'custom') {
|
|
input.style.display = 'block';
|
|
input.required = true;
|
|
input.focus();
|
|
} else {
|
|
input.style.display = 'none';
|
|
input.required = false;
|
|
input.value = '';
|
|
}
|
|
}
|
|
|
|
function toggleTrafficEdit() {
|
|
const select = document.getElementById('trafficSelect');
|
|
const input = document.getElementById('trafficMegabytes');
|
|
if (select.value === 'custom') {
|
|
input.style.display = 'block';
|
|
input.required = true;
|
|
input.focus();
|
|
} else {
|
|
input.style.display = 'none';
|
|
input.required = false;
|
|
input.value = '';
|
|
}
|
|
}
|
|
|
|
async function updateExpiration(event, clientId) {
|
|
event.preventDefault();
|
|
|
|
const select = document.getElementById('expirationSelect');
|
|
const customInput = document.getElementById('expirationSeconds');
|
|
|
|
let expiresAt = null;
|
|
let displayText = '{{ t("clients.never_expires") }}';
|
|
|
|
if (select.value === 'custom' && customInput.value) {
|
|
// Convert seconds to timestamp
|
|
const seconds = parseInt(customInput.value);
|
|
const date = new Date(Date.now() + seconds * 1000);
|
|
expiresAt = date.toISOString().slice(0, 19).replace('T', ' ');
|
|
const days = Math.round(seconds / 86400);
|
|
displayText = `${expiresAt} (${days} {{ t("common.days") }})`;
|
|
} else if (select.value === 'never') {
|
|
// Set to unlimited
|
|
expiresAt = null;
|
|
displayText = '{{ t("clients.never_expires") }}';
|
|
} else if (select.value && select.value !== 'custom' && select.value !== '') {
|
|
// Convert days to timestamp
|
|
const days = parseInt(select.value);
|
|
const date = new Date(Date.now() + days * 86400 * 1000);
|
|
expiresAt = date.toISOString().slice(0, 19).replace('T', ' ');
|
|
displayText = `${expiresAt} (${days} {{ t("common.days") }})`;
|
|
} else {
|
|
alert('Please select an option');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/clients/${clientId}/set-expiration`, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ expires_at: expiresAt })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success !== false) {
|
|
alert('Expiration updated successfully');
|
|
document.getElementById('currentExpiration').textContent = displayText;
|
|
// Reset form
|
|
select.value = '';
|
|
customInput.value = '';
|
|
customInput.style.display = 'none';
|
|
} else {
|
|
alert('Error: ' + (data.error || 'Unknown error'));
|
|
}
|
|
} catch (error) {
|
|
alert('Error: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function updateTrafficLimit(event, clientId) {
|
|
event.preventDefault();
|
|
|
|
const select = document.getElementById('trafficSelect');
|
|
const customInput = document.getElementById('trafficMegabytes');
|
|
|
|
let limitBytes = null;
|
|
let displayText = '{{ t("clients.unlimited") }}';
|
|
|
|
if (select.value === 'custom' && customInput.value) {
|
|
// Convert MB to bytes
|
|
limitBytes = parseInt(customInput.value) * 1048576;
|
|
const limitGb = (limitBytes / 1073741824).toFixed(2);
|
|
displayText = `${limitGb} GB`;
|
|
} else if (select.value === 'unlimited') {
|
|
// Set to unlimited
|
|
limitBytes = null;
|
|
displayText = '{{ t("clients.unlimited") }}';
|
|
} else if (select.value && select.value !== 'custom' && select.value !== '') {
|
|
// Convert GB to bytes
|
|
limitBytes = parseFloat(select.value) * 1073741824;
|
|
displayText = `${parseFloat(select.value).toFixed(2)} GB`;
|
|
} else {
|
|
alert('Please select an option');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/clients/${clientId}/set-traffic-limit`, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ limit_bytes: limitBytes })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success !== false) {
|
|
alert('Traffic limit updated successfully');
|
|
// Reload page to show updated traffic info
|
|
window.location.reload();
|
|
} else {
|
|
alert('Error: ' + (data.error || 'Unknown error'));
|
|
}
|
|
} catch (error) {
|
|
alert('Error: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function syncStats(clientId) {
|
|
try {
|
|
const response = await fetch(`/clients/${clientId}/sync-stats`, {
|
|
method: 'POST'
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.stats) {
|
|
// Update stats display
|
|
document.getElementById('stat-sent').textContent = data.stats.sent;
|
|
document.getElementById('stat-received').textContent = data.stats.received;
|
|
document.getElementById('stat-total').textContent = data.stats.total;
|
|
document.getElementById('stat-last-seen').innerHTML = data.stats.is_online
|
|
? '<span class="text-green-600"><i class="fas fa-circle text-xs"></i> ' + data.stats.last_seen + '</span>'
|
|
: data.stats.last_seen;
|
|
} else {
|
|
alert('Failed to sync stats: ' + (data.error || 'Unknown error'));
|
|
}
|
|
} catch (error) {
|
|
alert('Error: ' + error.message);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|