389 lines
14 KiB
JavaScript
389 lines
14 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
// ── State ────────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
const state = {
|
||
|
|
interfaces: [], // latest data from /api/interfaces
|
||
|
|
pending: [], // interface names with pending config
|
||
|
|
configModal: null, // name of interface being configured
|
||
|
|
nat: null, // {installed, interfaces} from /api/nat
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── API helpers ──────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
async function api(method, path, body) {
|
||
|
|
const opts = {
|
||
|
|
method,
|
||
|
|
headers: body ? { 'Content-Type': 'application/json' } : {},
|
||
|
|
body: body ? JSON.stringify(body) : undefined,
|
||
|
|
};
|
||
|
|
const res = await fetch(path, opts);
|
||
|
|
const json = await res.json();
|
||
|
|
if (!res.ok || !json.success) {
|
||
|
|
throw new Error(json.error || `HTTP ${res.status}`);
|
||
|
|
}
|
||
|
|
return json.data;
|
||
|
|
}
|
||
|
|
|
||
|
|
const get = (path) => api('GET', path);
|
||
|
|
const post = (path, body) => api('POST', path, body);
|
||
|
|
const del = (path) => api('DELETE', path);
|
||
|
|
|
||
|
|
// ── Format helpers ───────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function fmtBytes(n) {
|
||
|
|
if (n === undefined || n === null) return '—';
|
||
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||
|
|
let i = 0;
|
||
|
|
let v = Number(n);
|
||
|
|
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
|
||
|
|
return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function stateClass(s) {
|
||
|
|
if (s === 'up') return 'up';
|
||
|
|
if (s === 'down') return 'down';
|
||
|
|
return 'unknown';
|
||
|
|
}
|
||
|
|
|
||
|
|
function modeLabel(m) {
|
||
|
|
return { dhcp: 'DHCP', static: 'Static', loopback: 'Loopback', manual: 'Manual' }[m] || (m || '?');
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Render ───────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function renderAll() {
|
||
|
|
const grid = document.getElementById('ifaceGrid');
|
||
|
|
grid.innerHTML = '';
|
||
|
|
|
||
|
|
state.interfaces.forEach(iface => {
|
||
|
|
grid.appendChild(buildCard(iface));
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('loading').classList.add('hidden');
|
||
|
|
grid.classList.remove('hidden');
|
||
|
|
|
||
|
|
renderPendingBanner();
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildCard(iface) {
|
||
|
|
const hasPending = state.pending.includes(iface.name);
|
||
|
|
const sc = stateClass(iface.state);
|
||
|
|
|
||
|
|
const card = document.createElement('div');
|
||
|
|
card.className = 'iface-card' + (hasPending ? ' has-pending' : '');
|
||
|
|
card.dataset.name = iface.name;
|
||
|
|
|
||
|
|
const ipv6lines = (iface.ipv6 || []).map(a =>
|
||
|
|
`<div class="info-row"><span class="info-label">IPv6</span><span class="info-val">${a}</span></div>`
|
||
|
|
).join('');
|
||
|
|
|
||
|
|
card.innerHTML = `
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="card-name">
|
||
|
|
<span class="state-dot ${sc}"></span>
|
||
|
|
<span>${iface.name}</span>
|
||
|
|
${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;gap:6px;align-items:center">
|
||
|
|
<span class="mode-badge ${iface.mode || 'unknown'}">${modeLabel(iface.mode)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-info">
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">Статус</span>
|
||
|
|
<span class="info-val">${iface.state || 'unknown'}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">IPv4</span>
|
||
|
|
<span class="info-val">${iface.ipv4
|
||
|
|
? iface.ipv4 + (iface.ipv4_mask ? ' / ' + iface.ipv4_mask : '')
|
||
|
|
: '<span class="none">—</span>'}</span>
|
||
|
|
</div>
|
||
|
|
${ipv6lines || `<div class="info-row"><span class="info-label">IPv6</span><span class="info-val none">—</span></div>`}
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">Шлюз</span>
|
||
|
|
<span class="info-val">${iface.gateway || '<span class="none">—</span>'}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="traffic-row">
|
||
|
|
<div class="traffic-item">
|
||
|
|
<span class="traffic-label">RX</span>
|
||
|
|
<span class="traffic-val">${fmtBytes(iface.rx_bytes)}</span>
|
||
|
|
</div>
|
||
|
|
<div class="traffic-item">
|
||
|
|
<span class="traffic-label">TX</span>
|
||
|
|
<span class="traffic-val">${fmtBytes(iface.tx_bytes)}</span>
|
||
|
|
</div>
|
||
|
|
<div class="traffic-item">
|
||
|
|
<span class="traffic-label">Пакеты</span>
|
||
|
|
<span class="traffic-val">${iface.rx_packets ?? 0} / ${iface.tx_packets ?? 0}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-actions">
|
||
|
|
<button class="btn btn-success btn-sm" data-action="up" data-iface="${iface.name}">ON</button>
|
||
|
|
<button class="btn btn-danger btn-sm" data-action="down" data-iface="${iface.name}">OFF</button>
|
||
|
|
<button class="btn btn-ghost btn-sm" data-action="restart" data-iface="${iface.name}">RESTART</button>
|
||
|
|
<button class="btn btn-primary btn-sm" data-action="config" data-iface="${iface.name}" style="margin-left:auto">CONFIG</button>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
return card;
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderPendingBanner() {
|
||
|
|
const banner = document.getElementById('pendingBanner');
|
||
|
|
const list = document.getElementById('pendingList');
|
||
|
|
if (state.pending.length > 0) {
|
||
|
|
list.textContent = state.pending.join(', ');
|
||
|
|
banner.classList.remove('hidden');
|
||
|
|
} else {
|
||
|
|
banner.classList.add('hidden');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Data loading ─────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
async function loadAll() {
|
||
|
|
try {
|
||
|
|
const [ifaces, pending] = await Promise.all([
|
||
|
|
get('/api/interfaces'),
|
||
|
|
get('/api/pending'),
|
||
|
|
]);
|
||
|
|
state.interfaces = ifaces || [];
|
||
|
|
state.pending = pending || [];
|
||
|
|
renderAll();
|
||
|
|
} catch (e) {
|
||
|
|
showToast('Ошибка загрузки: ' + e.message, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Interface actions ─────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
async function doAction(name, action) {
|
||
|
|
const btn = document.querySelector(`[data-action="${action}"][data-iface="${name}"]`);
|
||
|
|
if (btn) { btn.disabled = true; btn.textContent = '...'; }
|
||
|
|
|
||
|
|
try {
|
||
|
|
await post(`/api/interfaces/${name}/${action}`);
|
||
|
|
showToast(`${name}: ${action} выполнено`, 'success');
|
||
|
|
await loadAll();
|
||
|
|
} catch (e) {
|
||
|
|
showToast(`${name} ${action}: ${e.message}`, 'error');
|
||
|
|
} finally {
|
||
|
|
if (btn) btn.disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Config modal ──────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
async function openConfig(name) {
|
||
|
|
state.configModal = name;
|
||
|
|
document.getElementById('modalTitle').textContent = `Настройка: ${name}`;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const [{ config, pending }, natData] = await Promise.all([
|
||
|
|
get(`/api/config/${name}`),
|
||
|
|
get('/api/nat').catch(() => null),
|
||
|
|
]);
|
||
|
|
if (natData) state.nat = natData;
|
||
|
|
fillForm(config, pending, name);
|
||
|
|
document.getElementById('modal').classList.remove('hidden');
|
||
|
|
} catch (e) {
|
||
|
|
showToast('Ошибка загрузки конфига: ' + e.message, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function fillForm(cfg, pending, name) {
|
||
|
|
document.getElementById('cfgAuto').checked = !!cfg.auto;
|
||
|
|
document.getElementById('cfgAddress').value = cfg.address || '';
|
||
|
|
document.getElementById('cfgNetmask').value = cfg.netmask || '';
|
||
|
|
document.getElementById('cfgGateway').value = cfg.gateway || '';
|
||
|
|
document.getElementById('cfgDNS').value = (cfg.dns || []).join(' ');
|
||
|
|
|
||
|
|
const mode = cfg.mode === 'static' ? 'static' : 'dhcp';
|
||
|
|
setMode(mode);
|
||
|
|
|
||
|
|
// Mark pending visually
|
||
|
|
const title = document.getElementById('modalTitle');
|
||
|
|
if (pending) {
|
||
|
|
title.textContent = `Настройка: ${state.configModal} (несохранённые изменения)`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// NAT section — show for all non-loopback interfaces
|
||
|
|
const natSection = document.getElementById('natSection');
|
||
|
|
const natNotInstalled = document.getElementById('natNotInstalled');
|
||
|
|
const cfgNAT = document.getElementById('cfgNAT');
|
||
|
|
|
||
|
|
if (cfg.mode === 'loopback' || name === 'lo') {
|
||
|
|
natSection.classList.add('hidden');
|
||
|
|
} else {
|
||
|
|
natSection.classList.remove('hidden');
|
||
|
|
const natInstalled = state.nat?.installed !== false;
|
||
|
|
cfgNAT.disabled = !natInstalled;
|
||
|
|
natNotInstalled.classList.toggle('hidden', natInstalled);
|
||
|
|
cfgNAT.checked = !!(state.nat?.interfaces || []).includes(name);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setMode(mode) {
|
||
|
|
document.querySelectorAll('.seg-btn').forEach(b => {
|
||
|
|
b.classList.toggle('active', b.dataset.mode === mode);
|
||
|
|
});
|
||
|
|
document.getElementById('staticFields').classList.toggle('hidden', mode !== 'static');
|
||
|
|
}
|
||
|
|
|
||
|
|
function currentMode() {
|
||
|
|
return document.querySelector('.seg-btn.active')?.dataset.mode ?? 'dhcp';
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
document.getElementById('modal').classList.add('hidden');
|
||
|
|
document.getElementById('configForm').reset();
|
||
|
|
state.configModal = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function saveConfig() {
|
||
|
|
const name = state.configModal;
|
||
|
|
if (!name) return;
|
||
|
|
|
||
|
|
const mode = currentMode();
|
||
|
|
const cfg = {
|
||
|
|
name,
|
||
|
|
auto: document.getElementById('cfgAuto').checked,
|
||
|
|
mode,
|
||
|
|
address: document.getElementById('cfgAddress').value.trim(),
|
||
|
|
netmask: document.getElementById('cfgNetmask').value.trim(),
|
||
|
|
gateway: document.getElementById('cfgGateway').value.trim(),
|
||
|
|
dns: document.getElementById('cfgDNS').value.trim().split(/\s+/).filter(Boolean),
|
||
|
|
extra: {},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Basic validation for static
|
||
|
|
if (mode === 'static' && !cfg.address) {
|
||
|
|
showToast('Укажите IP-адрес', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
await post(`/api/config/${name}`, cfg);
|
||
|
|
|
||
|
|
// Save NAT setting if section is visible
|
||
|
|
const natSection = document.getElementById('natSection');
|
||
|
|
if (!natSection.classList.contains('hidden') && state.nat?.installed !== false) {
|
||
|
|
const natEnabled = document.getElementById('cfgNAT').checked;
|
||
|
|
const current = state.nat?.interfaces || [];
|
||
|
|
const updated = natEnabled
|
||
|
|
? [...new Set([...current, name])]
|
||
|
|
: current.filter(i => i !== name);
|
||
|
|
await post('/api/nat', { interfaces: updated });
|
||
|
|
if (state.nat) state.nat.interfaces = updated;
|
||
|
|
}
|
||
|
|
|
||
|
|
showToast(`${name}: настройки сохранены (ожидают применения)`, 'info');
|
||
|
|
closeModal();
|
||
|
|
await loadAll();
|
||
|
|
} catch (e) {
|
||
|
|
showToast('Ошибка сохранения: ' + e.message, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Apply / discard ───────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
async function applyAll() {
|
||
|
|
const btn = document.getElementById('applyBtn');
|
||
|
|
btn.disabled = true;
|
||
|
|
btn.textContent = 'Применяю...';
|
||
|
|
try {
|
||
|
|
await post('/api/apply');
|
||
|
|
showToast('Настройки применены', 'success');
|
||
|
|
await loadAll();
|
||
|
|
} catch (e) {
|
||
|
|
showToast('Ошибка применения: ' + e.message, 'error');
|
||
|
|
} finally {
|
||
|
|
btn.disabled = false;
|
||
|
|
btn.textContent = 'Применить';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function discardAll() {
|
||
|
|
for (const name of [...state.pending]) {
|
||
|
|
try { await del(`/api/config/${name}`); } catch (_) {}
|
||
|
|
}
|
||
|
|
state.pending = [];
|
||
|
|
renderPendingBanner();
|
||
|
|
renderAll();
|
||
|
|
showToast('Изменения отменены', 'info');
|
||
|
|
await loadAll();
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Toast ─────────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
let toastTimer;
|
||
|
|
function showToast(msg, type = 'info') {
|
||
|
|
const t = document.getElementById('toast');
|
||
|
|
t.textContent = msg;
|
||
|
|
t.className = `toast ${type}`;
|
||
|
|
t.classList.remove('hidden');
|
||
|
|
clearTimeout(toastTimer);
|
||
|
|
toastTimer = setTimeout(() => t.classList.add('hidden'), 3500);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Event wiring ──────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
document.getElementById('refreshBtn').addEventListener('click', loadAll);
|
||
|
|
|
||
|
|
document.getElementById('applyBtn').addEventListener('click', applyAll);
|
||
|
|
document.getElementById('discardAllBtn').addEventListener('click', discardAll);
|
||
|
|
|
||
|
|
// Card action buttons (delegated)
|
||
|
|
document.getElementById('ifaceGrid').addEventListener('click', e => {
|
||
|
|
const btn = e.target.closest('[data-action]');
|
||
|
|
if (!btn) return;
|
||
|
|
const { action, iface } = btn.dataset;
|
||
|
|
if (action === 'config') {
|
||
|
|
openConfig(iface);
|
||
|
|
} else {
|
||
|
|
doAction(iface, action);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Modal close
|
||
|
|
document.getElementById('closeModal').addEventListener('click', closeModal);
|
||
|
|
document.getElementById('cancelConfigBtn').addEventListener('click', closeModal);
|
||
|
|
document.getElementById('modalBackdrop').addEventListener('click', closeModal);
|
||
|
|
document.addEventListener('keydown', e => {
|
||
|
|
if (e.key === 'Escape') closeModal();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Mode switcher
|
||
|
|
document.getElementById('modeSwitch').addEventListener('click', e => {
|
||
|
|
const btn = e.target.closest('.seg-btn');
|
||
|
|
if (btn) setMode(btn.dataset.mode);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Save config
|
||
|
|
document.getElementById('saveConfigBtn').addEventListener('click', saveConfig);
|
||
|
|
document.getElementById('configForm').addEventListener('submit', e => {
|
||
|
|
e.preventDefault();
|
||
|
|
saveConfig();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Auto-refresh every 10 seconds
|
||
|
|
setInterval(loadAll, 10000);
|
||
|
|
|
||
|
|
// ── Init ──────────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
// Try to get hostname
|
||
|
|
try {
|
||
|
|
const res = await fetch('/api/interfaces');
|
||
|
|
// hostname from Location header or just skip
|
||
|
|
} catch (_) {}
|
||
|
|
|
||
|
|
await loadAll();
|
||
|
|
})();
|