maeneko/forgetting
1
0
Fork 0
Code Issues Actions Packages Projects Releases 17 Wiki Activity

Panel redesign, per-server I1 masking, node minimum version 0.5.0, installer output
ci / check (push) Successful in 23m54s
Details

Browse Source 
- UI: settings tab with sections (server, API keys, Prometheus, audit, migrate,
  about); server settings moved there; master keys table rework (menu, chips,
  version, compact phone cards); three-state node version chip
- I1: random per-server template (DNS / QUIC Initial / STUN) kept in users.db,
  GET/POST /api/masking, change from the master keys banner
- Hub rejects nodes older than 0.5.0 (close 4026), /ui/nodes reports outdated
- install.sh: spinner for long commands (full output in the log), step progress
  bar, cards; installs older than 0.5.0 require a full reinstall with data reset
- Bump to Beta 0.5.0
This commit is contained in:
maeneko
2026-10-29 22:59:09 +03:00
parent c7d1333125
commit 5b29993d5d
57 changed files with 3154 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
awg-ui/mock-server.ts
+102 -30
View File
@@ -15,7 +15,7 @@ const now = () => Math.floor(Date.now() / 1000);
const rnd = (n: number) => Math.floor(Math.random() * n);
const b64 = (n: number) => crypto.randomBytes(n).toString("base64");
const GEN = "3.1";
const MOCK_VERSION = "0.3.3";
const MOCK_VERSION = "0.5.0";
// ── пользователи (vpn://) ──
interface U { name: string; ip: string; pub_key: string; vpn_key: string; key_gen: string; online: boolean; lastHandshake: number; rx: number; tx: number }
@@ -37,9 +37,10 @@ const srv = (q: express.Request) => { const n = Number(q.headers["x-server-id"])
const U_ = (q: express.Request) => usersOf[srv(q)];
interface MNode { id: number; name: string; ip: string; gen: string; online: boolean; pending: boolean; version: string | null }
const mnodes: MNode[] = [
{ id: 1, name: "Frankfurt", ip: "198.51.100.4", gen: "2", online: true, pending: false, version: "0.3.2" }, // отстаёт от панели
{ id: 1, name: "Frankfurt", ip: "198.51.100.4", gen: "2", online: true, pending: false, version: "0.5.0" },
{ id: 2, name: "Tokyo", ip: "", gen: "2", online: false, pending: true, version: null },
{ id: 3, name: "Amsterdam", ip: "192.0.2.10", gen: "3.1", online: true, pending: false, version: null }, // старый агент: версию не шлёт
{ id: 3, name: "Amsterdam", ip: "192.0.2.10", gen: "3.1", online: false, pending: false, version: "0.4.5" }, // старше 0.5.0: хаб не подключает
{ id: 4, name: "Helsinki", ip: "192.0.2.44", gen: "3.1", online: true, pending: false, version: "0.5.1" }, // новее панели — жёлтый чип
];
let nodeId = 3;
const joinStr = (id: number) => "awgjoin://" + Buffer.from(JSON.stringify({ v: 1, h: "localhost", p: 8443, pin: crypto.randomBytes(32).toString("base64url"), n: id, s: crypto.randomBytes(16).toString("base64url") })).toString("base64url");
@@ -53,8 +54,8 @@ interface Dev { id: number; device_id: string; device_name: string; platform: st
interface MK { id: number; uuid: string; label: string; device_limit: number; created_at: number; secret: Buffer; devs: Dev[]; servers: number[]; deleting?: number[] }
let mkId = 1, devId = 1;
const dev = (name: string, platform: string, online: boolean, version = "0.6.5"): Dev => ({ id: devId++, device_id: crypto.randomUUID(), device_name: name, platform, version, created_at: now() - 86400, last_seen: now() - rnd(900), rekey_requested: false, online, lastHandshake: now() - rnd(300), rx: rnd(9e8), tx: rnd(3e8) });
const masters: MK[] = [{ id: mkId++, uuid: crypto.randomUUID(), label: "Семья", device_limit: 3, created_at: now() - 86400 * 2, secret: crypto.randomBytes(16), devs: [dev("MacBook Ивана", "macOS", true), dev("Windows-ПК", "Windows", false, "0.6.2")], servers: [0, 1] },
{ id: mkId++, uuid: crypto.randomUUID(), label: "Офис", device_limit: 5, created_at: now() - 86400, secret: crypto.randomBytes(16), devs: [], servers: [0] },
const masters: MK[] = [{ id: mkId++, uuid: crypto.randomUUID(), label: "Семья", device_limit: 2, created_at: now() - 86400 * 2, secret: crypto.randomBytes(16), devs: [dev("MacBook Ивана", "macOS", true), dev("Windows-ПК", "Windows", false, "0.6.2")], servers: [0, 1, 2] }, // все места заняты; Tokyo (2) ещё не получил устройства
{ id: mkId++, uuid: crypto.randomUUID(), label: "Офис", device_limit: 5, created_at: now() - 86400, secret: crypto.randomBytes(16), devs: [], servers: [0, 1] }, // «все серверы»
{ id: mkId++, uuid: crypto.randomUUID(), label: "Друзья", device_limit: 3, created_at: now() - 3600, secret: crypto.randomBytes(16), devs: [], servers: [1] }];
const signPub = crypto.randomBytes(32);
const mkOut = (m: MK) => ({ id: m.id, uuid: m.uuid, label: m.label, device_limit: m.device_limit, devices: m.devs.length, servers: m.servers, created_at: m.created_at, ...(m.deleting ? { deleting: m.deleting } : {}) });
@@ -75,9 +76,17 @@ app.get("/health", (q, r) => {
});
// ── серверы ──
// Как MinNodeVersion в хабе: ноду старше хаб не подключает (в моке она просто offline + outdated)
const MIN_NODE = "0.5.0";
const cmpVer = (a: string, b: string) => {
const pa = a.split("-")[0].split(".").map(Number), pb = b.split("-")[0].split(".").map(Number);
for (let i = 0; i < Math.max(pa.length, pb.length); i++) { const d = (pa[i] || 0) - (pb[i] || 0); if (d) return d; }
return 0;
};
const nodeView = () => [
{ id: 0, name: "VPN (mock)", local: true, online: true, pending: false, last_seen: null, version: MOCK_VERSION, health: { server: "VPN (mock)", ip: "203.0.113.7", gen: GEN, peers: users.length, awg_up: true, module: "3.0.1", tools: "1.0.0" } },
...mnodes.map(n => ({ id: n.id, name: n.name, local: false, online: n.online, pending: n.pending, last_seen: n.online ? now() - 5 : null, version: n.version,
outdated: !n.pending && (!n.version || cmpVer(n.version, MIN_NODE) < 0),
health: n.online ? { server: n.name, ip: n.ip, gen: n.gen, peers: (usersOf[n.id] ?? []).length, awg_up: true, module: "3.0.1", tools: "1.0.0" } : null })),
];
app.get("/ui/nodes", (_q, r) => r.json({ hub: true, local: true, version: MOCK_VERSION, nodes: nodeView() }));
@@ -106,23 +115,46 @@ const MON_LOGS = {
install: ["1/4 установка пакета prometheus", "Reading package lists…", "Setting up prometheus (2.45.0)…", "2/4 токен и конфиг", "3/4 слушаем только 127.0.0.1:9090, хранение 31d", "4/4 запуск", "✓ Prometheus работает на 127.0.0.1:9090, метрики панели скрейпятся каждые 15 с."],
remove: ["1/3 остановка сервиса", "2/3 токен", "3/3 удаление пакета и накопленных данных", "Removing prometheus (2.45.0)…", "Purging configuration files…", "✓ Prometheus удалён вместе с накопленными графиками."],
};
let monJob: { action: "install" | "remove"; start: number } | null = null;
// Как internal/ui/monitor.go: Prometheus у панели один. target — чей awg-ctrl ставит и удаляет его:
// где он уже стоит; если нигде — свой (панель + VPN) или ?server= (панель без VPN, MOCK_ROLE=core).
// Ход операции у каждого сервера свой (его awg-ctrl). Ставить можно, только если awg-ctrl сервера
// на связи и новый: Tokyo без связи, у Amsterdam старый агент (/api/monitor/job → 404) — у них
// can_install: false и команда вручную; у Frankfurt осталась неудачная прошлая установка.
type MonJob = { action: "install" | "remove"; start: number; lines?: string[]; exit?: number };
const monJobs: Record<number, MonJob> = {
1: { action: "install", start: now() * 1000 - 86400e3, exit: 100, lines: ["1/4 установка пакета prometheus", "Reading package lists…",
"E: Could not get lock /var/lib/dpkg/lock-frontend. It is held by process 1873 (unattended-upgr)", "E: Unable to acquire the dpkg frontend lock, is another process using it?"] },
};
let monReady = false;
let monHost = 0; // где стоит (для панели без VPN — нода; у панели с VPN всегда 0, «этот сервер»)
const monHostOf = (id: number) => ({ id, name: nodeView().find(n => n.id === id)?.name ?? `#${id}` });
const MON_MS = 6000;
const monRunning = () => !!monJob && Date.now() - monJob.start < MON_MS;
app.get("/ui/monitor", (_q, r) => {
if (monJob && !monRunning()) monReady = monJob.action === "install";
let job = null;
if (monJob) {
const lines = MON_LOGS[monJob.action];
const n = monRunning() ? Math.max(1, Math.floor(((Date.now() - monJob.start) / MON_MS) * lines.length)) : lines.length;
job = { action: monJob.action, running: monRunning(), exit: monRunning() ? null : 0, log: lines.slice(0, n).join("\n") };
const monRunning = (j?: MonJob) => !!j && j.exit === undefined && Date.now() - j.start < MON_MS;
const monTarget = (q: express.Request) => monReady || !MOCK_CORE ? monHost : Number(q.query.server ?? 0);
const monCan = (id: number) => { const n = mnodes.find(x => x.id === id); return !n || (n.online && n.version !== null); };
app.get("/ui/monitor", (q, r) => {
const target = monTarget(q), can = monCan(target), mj = monJobs[target];
if (mj && mj.exit === undefined && !monRunning(mj)) { // операция дошла до конца
mj.exit = 0;
monReady = mj.action === "install";
if (monReady) monHost = target;
}
// MOCK_ROLE=core/retire — панель без VPN: Prometheus на ноде #0 (сервер, с которого она переехала)
r.json({ ready: monReady, can_install: true, command: "awg-ctrl monitor install", host: MOCK_CORE ? { id: 0, name: "VPN" } : null, job });
let job = null;
if (can && mj) {
const lines = mj.lines ?? MON_LOGS[mj.action];
const n = monRunning(mj) ? Math.max(1, Math.floor(((Date.now() - mj.start) / MON_MS) * lines.length)) : lines.length;
job = { action: mj.action, running: monRunning(mj), exit: monRunning(mj) ? null : mj.exit ?? 0, log: lines.slice(0, n).join("\n") };
}
r.json({ ready: monReady, can_install: can, command: "awg-ctrl monitor install", host: MOCK_CORE ? monHostOf(target) : null, job });
});
for (const action of ["install", "remove"] as const) {
app.post(`/ui/monitor/${action}`, (_q, r) => { if (!monRunning()) monJob = { action, start: Date.now() }; r.status(202).json({ running: true, action }); });
app.post(`/ui/monitor/${action}`, (q, r) => {
const target = monTarget(q), n = mnodes.find(x => x.id === target);
if (n && !n.online) return r.status(502).json({ error: "awg-ctrl недоступен" });
if (n && n.version === null) return r.status(501).json({ error: "awg-ctrl старой версии не умеет этого: обновите сервер или выполните команду вручную" });
if (!monRunning(monJobs[target])) monJobs[target] = { action, start: Date.now() };
r.status(202).json({ running: true, action });
});
}
// Перенос панели (internal/ui/migrate.go). Мок — standalone: переносить можно, принимать нельзя;
// MOCK_ROLE=core — наоборот (код «принимается» через 10 с, ещё через 10 с — «перезапуск»);
@@ -183,19 +215,38 @@ app.get("/ui/monitor/overview", (q, r) => {
const cpu = pts((_, t) => 38 + 22 * wave(t, per * 0.8, 2) + 12 * wave(t, per / 5) + rnd(6));
const mem = pts((_, t) => 54 + 6 * wave(t, per * 3) + rnd(2));
const scale = (a: [number, number][], k: number) => a.map(([t, v]) => [t, v * k] as [number, number]);
// Один сервер — тот, что выбран в сервер-баре (?server=<id>): ядро (0) или нода
const id = Number(q.query.server ?? 0);
const k = id === 0 ? 0.7 : 0.3;
const down1 = scale(down, k), up1 = scale(up, k);
const used = (a: [number, number][]) => a.reduce((n, [, v]) => n + v, 0) * step / 8; // бит/с × с → байты
if (id === 3) return r.json({ range: q.query.range ?? "1h", step, from, to, servers: [], total: { down: [], up: [], online: [], heavy: [], drops: [], cpu: [], mem: [] } });
r.json({ range: q.query.range ?? "1h", step, from, to,
servers: [{ id, name: id === 0 ? "VPN (mock)" : "Frankfurt", ok: true, down: down1.at(-1)![1], up: up1.at(-1)![1], online: id === 0 ? 7 : 3,
heavy: id === 0 ? heavy.at(-1)![1] : 0, congested: id === 0 && heavy.at(-1)![1] > 0,
cpu: id === 0 ? cpu.at(-1)![1] : cpu.at(-1)![1] * 0.5, mem: id === 0 ? mem.at(-1)![1] : 31, cores: id === 0 ? 4 : 2, mem_total: (id === 0 ? 4 : 2) * 2 ** 30,
used_down: used(down1), used_up: used(up1) }],
total: { down: down1, up: up1, online: scale(online, k), heavy: id === 0 ? heavy : scale(heavy, 0), drops: id === 0 ? drops : scale(drops, 0),
cpu: id === 0 ? cpu : scale(cpu, 0.5), mem: id === 0 ? mem : scale(mem, 0.55) } });
// Ряды одного сервера: ядро (0) — основная нагрузка, нода Frankfurt (1) — поменьше
const one = (id: number) => {
const k = id === 0 ? 0.7 : 0.3;
const d = scale(down, k), u = scale(up, k);
return {
row: { id, name: id === 0 ? "VPN (mock)" : "Frankfurt", ok: true, down: d.at(-1)![1], up: u.at(-1)![1], online: id === 0 ? 7 : 3,
heavy: id === 0 ? heavy.at(-1)![1] : 0, congested: id === 0 && heavy.at(-1)![1] > 0,
cpu: id === 0 ? cpu.at(-1)![1] : cpu.at(-1)![1] * 0.5, mem: id === 0 ? mem.at(-1)![1] : 31, cores: id === 0 ? 4 : 2, mem_total: (id === 0 ? 4 : 2) * 2 ** 30,
used_down: used(d), used_up: used(u) },
series: { down: d, up: u, online: scale(online, k), heavy: id === 0 ? heavy : scale(heavy, 0), drops: id === 0 ? drops : scale(drops, 0),
cpu: id === 0 ? cpu : scale(cpu, 0.5), mem: id === 0 ? mem : scale(mem, 0.55) },
};
};
const empty = { down: [], up: [], online: [], heavy: [], drops: [], cpu: [], mem: [] };
// Без ?server= — все серверы (как monitor.go): ряды трафика, устройств и потерь суммируются, процессор
// и память — среднее. Метрики отдают ядро и Frankfurt; у Amsterdam (3) старый агент — его нет.
if (q.query.server === undefined) {
const all = [one(0), one(1)];
const zip = (key: keyof typeof empty, avg: boolean) => all[0].series[key].map(([t], n) => {
const sum = all.reduce((acc, x) => acc + x.series[key][n][1], 0);
return [t, avg ? sum / all.length : sum] as [number, number];
});
return r.json({ range: q.query.range ?? "1h", step, from, to, servers: all.map(x => x.row),
total: { down: zip("down", false), up: zip("up", false), online: zip("online", false), heavy: zip("heavy", false),
drops: zip("drops", false), cpu: zip("cpu", true), mem: zip("mem", true) } });
}
// Один сервер (?server=<id>)
const id = Number(q.query.server);
if (id !== 0 && id !== 1) return r.json({ range: q.query.range ?? "1h", step, from, to, servers: [], total: empty });
const x = one(id);
r.json({ range: q.query.range ?? "1h", step, from, to, servers: [x.row], total: x.series });
});
// Prometheus: токен метрик и сам /metrics (без проверки токена — мок).
@@ -211,7 +262,9 @@ app.delete("/ui/metrics-token", (_q, r) => { promTok = null; r.json(promView());
app.get("/metrics", (_q, r) => r.type("text/plain").send('awg_panel_info{version="mock"} 1\nawg_servers 4\n'));
// Деление канала: состояние по серверам; usersOf[1] играет «старую ноду» без маршрута (404 → «обнови сервер»).
const shapingOf: Record<number, { enabled: boolean; downMbit: number; upMbit: number; auto: boolean }> = {};
// На сервере 0 деление канала включено сразу — чтобы был пример «фонового» приоритета: пользователь
// 10.9.0.2 и «MacBook Ивана» в мастер-ключе «Семья».
const shapingOf: Record<number, { enabled: boolean; downMbit: number; upMbit: number; auto: boolean }> = { 0: { enabled: true, downMbit: 100, upMbit: 50, auto: true } };
const shapingView = (id: number) => {
const settings = shapingOf[id] ?? { enabled: false, downMbit: 0, upMbit: 0, auto: true };
const on = settings.enabled;
@@ -254,6 +307,25 @@ app.put("/api/torrent", (q, r) => {
r.json(torrentView(id));
});
// Маскировка первого пакета (I1): у каждого сервера своя; Frankfurt (1) — старая нода без маршрута (404).
// «Сменить» берёт случайный шаблон из примеров — как GenI1 в awg-ctrl, только без случайных полей.
const I1_SAMPLES = [
{ kind: "dns", label: "DNS-запрос к ya.ru", i1: "<r 2><b 0x01000001000000000001027961027275000001000100002904d0000000000000>" },
{ kind: "quic", label: "QUIC Initial, 1250 байт", i1: "<b 0xc30000000108><r 8><b 0x00><b 0x0044e2><r 1232>" },
{ kind: "stun", label: "STUN binding request", i1: "<b 0x000100002112a442><r 12>" },
{ kind: "dns", label: "DNS-запрос к www.google.com", i1: "<r 2><b 0x010000010000000000000377777706676f6f676c6503636f6d0000410001>" },
{ kind: "quic", label: "QUIC Initial, 1200 байт", i1: "<b 0xc90000000108><r 8><b 0x08><r 8><b 0x0044a6><r 1190>" },
];
const maskingOf: Record<number, number> = { 0: 0, 2: 1, 3: 2 };
app.get("/api/masking", (q, r) => tsid(q) === 1 ? r.status(404).json({ error: "Not found" }) : r.json(I1_SAMPLES[maskingOf[tsid(q)] ?? 3]));
app.post("/api/masking", (q, r) => {
const id = tsid(q);
if (id === 1) return r.status(404).json({ error: "Not found" });
const cur = maskingOf[id] ?? 3;
maskingOf[id] = (cur + 1 + Math.floor(Math.random() * (I1_SAMPLES.length - 1))) % I1_SAMPLES.length;
r.json(I1_SAMPLES[maskingOf[id]]);
});
app.get("/api/users", (q, r) => r.json({ users: U_(q) }));
// Приоритет в моке: пока на сервере 0 включено деление канала, первый пользователь «фоновый».
// С меткой «торренты» — тоже фоновый (пока включено деление канала).
awg-ui/nodes.ts
+2 -1
View File
@@ -67,9 +67,10 @@ export function createNodes(deps: { uidb: Database.Database; ctrlLocal: Ctrl; ba
const crtF = file(process.env.NODE_TLS_CERT_FILE, "node_tls.crt");
try {
if (!fs.existsSync(keyF) && !fs.existsSync(crtF)) {
// CN случайный (12 hex, как имя хоста контейнера): постоянный CN — готовый отпечаток для DPI.
const r = spawnSync("openssl", [
"req", "-x509", "-newkey", "ec", "-pkeyopt", "ec_paramgen_curve:prime256v1", "-nodes",
"-keyout", keyF, "-out", crtF, "-days", "3650", "-subj", "/CN=awg-node",
"-keyout", keyF, "-out", crtF, "-days", "3650", "-subj", "/CN=" + crypto.randomBytes(6).toString("hex"),
], { stdio: "ignore" });
if (r.status !== 0) throw new Error("openssl");
fs.chmodSync(keyF, 0o600); fs.chmodSync(crtF, 0o600);
awg-ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "awg-ui",
"version": "0.4.7",
"version": "0.5.0",
"private": true,
"scripts": {
"dev": "vite",
awg-ui/src/App.css
+511 -265
View File
File diff suppressed because it is too large Load Diff
awg-ui/src/App.tsx
+185 -68
View File
@@ -3,15 +3,17 @@
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useRef, useCallback } from 'react';
import axios from 'axios';
import './tokens.css';
import './App.css';
import {
TOKEN_KEY, THEME_KEY, SERVER_KEY, BRAND_FALLBACK, apiFetch, setServerId, getServerId,
TOKEN_KEY, SERVER_KEY, BRAND_FALLBACK, apiFetch, setServerId, getServerId, serversLabel, openTab, MIN_NODE_VERSION,
type NodeInfo, type Brand,
} from './lib/shared';
import { IcoMenu, IcoLogout, IcoSun, IcoMoon, IcoRefresh } from './components/icons';
import { IcoMenu, IcoLogout, IcoSun, IcoMoon, IcoRefresh, IcoChevronDown } from './components/icons';
import ServerBar from './components/ServerBar';
import DrumTitle from './components/DrumTitle';
import { useTheme, setThemeMode } from './lib/theme';
import AddServerModal from './components/AddServerModal';
import ServerSettingsModal from './components/ServerSettingsModal';
import { TABS, TABS_BY_GROUP } from './tabs';
// Оболочка приложения: логин, тема, drawer/сайдбар, общая сессия (token,
@@ -27,14 +29,17 @@ export default function App() {
const [panelVersion, setPanelVersion] = useState<string | null>(null);
const [serverId, setServerIdState] = useState<number | null>(null);
const [modal, setModal] = useState<{ node?: NodeInfo } | null>(null);
const [settingsFor, setSettingsFor] = useState<NodeInfo | null>(null);
const [msg, setMsg] = useState('');
const [drawerOpen, setDrawerOpen] = useState(false);
const [serversOpen, setServersOpen] = useState(false); // выпадающий список серверов
const serverSelectRef = useRef<HTMLDivElement>(null);
const [activeTab, setActiveTab] = useState(TABS[0].id);
// Встроенный Prometheus: null — ещё не знаем; fresh — только что поставили (пункт «Монитор» въезжает в меню);
// leaving — только что удалили (пункт ещё в меню, пока доигрывает уход)
const [prom, setProm] = useState<{ ready: boolean; fresh: boolean; leaving: boolean } | null>(null);
const [restarting, setRestarting] = useState(false);
const [brand, setBrand] = useState<Brand>({ brand: BRAND_FALLBACK, channel: '', version: '' });
const [theme, setTheme] = useState<'light' | 'dark'>(() =>
localStorage.getItem(THEME_KEY) === 'dark' ? 'dark' : 'light');
const { theme } = useTheme();
const touchStartX = useRef(0);
const touchCurrentX = useRef(0);
@@ -197,18 +202,78 @@ export default function App() {
.catch(() => { /* остаётся фолбэк */ });
}, []);
// Применять и сохранять тему
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem(THEME_KEY, theme);
}, [theme]);
// Блокировать прокрутку фона когда drawer открыт
useEffect(() => {
document.body.style.overflow = drawerOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [drawerOpen]);
// На широком окне (≥1200px) меню постоянное — модальный drawer там не нужен
useEffect(() => {
const mq = window.matchMedia('(min-width: 1200px)');
const h = () => { if (mq.matches) setDrawerOpen(false); };
mq.addEventListener('change', h);
return () => mq.removeEventListener('change', h);
}, []);
// Список серверов закрывается кликом мимо него и по Escape
useEffect(() => {
if (!serversOpen) return;
const down = (e: MouseEvent) => {
if (!serverSelectRef.current?.contains(e.target as Node)) setServersOpen(false);
};
const key = (e: KeyboardEvent) => { if (e.key === 'Escape') setServersOpen(false); };
document.addEventListener('mousedown', down);
document.addEventListener('keydown', key);
return () => { document.removeEventListener('mousedown', down); document.removeEventListener('keydown', key); };
}, [serversOpen]);
// Есть ли встроенный Prometheus — от него зависит пункт «Монитор» (requires: 'prometheus').
// Узнаём при входе, раз в минуту (могли поставить из CLI) и сразу от вкладок (announcePrometheus).
// Анимации — только при переходах «не было → есть» и «было → нет», не при каждой загрузке страницы.
const notePrometheus = useCallback((ready: boolean) => {
setProm(p => (p?.ready === ready ? p : { ready, fresh: p !== null && ready, leaving: !!p?.ready && !ready }));
}, []);
// Уход длится --duration-medium2 (300 мс); потом пункт убираем из меню совсем
useEffect(() => {
if (!prom?.leaving) return;
const t = setTimeout(() => setProm(p => (p?.leaving ? { ...p, leaving: false } : p)), 300);
return () => clearTimeout(t);
}, [prom?.leaving]);
useEffect(() => {
if (!token) { setProm(null); return; }
const load = () => apiFetch('GET', `/ui/monitor?server=${getServerId() ?? 0}`, token)
.then(r => notePrometheus(!!r.ready))
.catch(() => { /* не знаем — меню не трогаем */ });
void load();
const t = setInterval(load, 60000);
const h = (e: Event) => notePrometheus((e as CustomEvent<boolean>).detail);
window.addEventListener('awg:prometheus', h);
return () => { clearInterval(t); window.removeEventListener('awg:prometheus', h); };
}, [token, notePrometheus]);
// tabVisible — вкладка доступна; в меню она ещё и на время ухода
const tabVisible = (t: { requires?: 'prometheus' }) => t.requires !== 'prometheus' || !!prom?.ready;
const tabLeaving = (t: { requires?: 'prometheus' }) => t.requires === 'prometheus' && !!prom?.leaving;
const navGroups = TABS_BY_GROUP
.map(g => ({ ...g, tabs: g.tabs.filter(t => tabVisible(t) || tabLeaving(t)) }))
.filter(g => g.tabs.length > 0);
// Активная вкладка пропала из меню (Prometheus удалили) — на первую
useEffect(() => {
const t = TABS.find(x => x.id === activeTab);
if (t && !tabVisible(t)) setActiveTab(TABS[0].id);
});
// Переход на другую вкладку из самой вкладки (openTab в lib/shared)
useEffect(() => {
const h = (e: Event) => {
const id = (e as CustomEvent<string>).detail;
if (TABS.some(t => t.id === id)) setActiveTab(id);
};
window.addEventListener('awg:open-tab', h);
return () => window.removeEventListener('awg:open-tab', h);
}, []);
// Закрывать drawer по Escape
useEffect(() => {
if (!drawerOpen) return;
@@ -223,31 +288,25 @@ export default function App() {
const chrome = tab.chrome ?? {};
const showServerBar = chrome.serverBar !== false;
const showRestart = chrome.restart !== false;
const current = nodes.find(n => n.id === serverId) ?? null;
// Позиция вкладки в меню (по группам) — направление прокрутки заголовка-барабана
const tabOrder = navGroups.flatMap(g => g.tabs).findIndex(t => t.id === tab.id);
const themeToggle = (
<button
className="theme-toggle"
aria-label={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}
onClick={() => setThemeMode(theme === 'dark' ? 'light' : 'dark')}
>
{theme === 'dark' ? <IcoSun /> : <IcoMoon />}
</button>
);
return (
<div className="app">
<button
className="theme-toggle"
aria-label={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}
onClick={() => setTheme(t => (t === 'dark' ? 'light' : 'dark'))}
>
{theme === 'dark' ? <IcoSun /> : <IcoMoon />}
</button>
{token && showRestart && serverId !== null && (
<button
className={`awg-restart${restarting ? ' spinning' : ''}`}
aria-label="Перезапустить AWG"
title="Перезапустить AWG-интерфейс"
onClick={restartAwg}
disabled={restarting}
>
<IcoRefresh /> {restarting ? 'Перезапуск…' : 'Перезапустить AWG'}
</button>
)}
{!token ? (
<div className="login-screen">
<span className="theme-toggle--fixed">{themeToggle}</span>
<div className="login-card">
<span className="logo-name">{brand.brand}</span>
<p className="login-sub">Войдите, чтобы продолжить</p>
@@ -285,7 +344,8 @@ export default function App() {
>
<IcoMenu />
</button>
<span className="top-bar-title">{tab.label}</span>
<span className="top-bar-title"><DrumTitle text={tab.label} order={tabOrder} /></span>
<span className="top-bar-end">{themeToggle}</span>
</header>
{/* Затемнение под drawer */}
@@ -301,6 +361,15 @@ export default function App() {
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
>
{/* Кнопка меню rail (600–1199px): раскрывает его в модальный drawer */}
<button
className="rail-menu"
aria-label={drawerOpen ? 'Свернуть меню' : 'Развернуть меню'}
aria-expanded={drawerOpen}
onClick={() => setDrawerOpen(o => !o)}
>
<IcoMenu />
</button>
<div className="sidebar-logo">
<span className="logo-name">{brand.brand}</span>
<span className="sidebar-version">
@@ -308,48 +377,105 @@ export default function App() {
</span>
</div>
<hr className="drawer-divider" />
{TABS_BY_GROUP.map(g => (
{navGroups.map(g => (
<nav key={g.id} className="nav-group" aria-label={g.label}>
<span className="nav-group-title">{g.label}</span>
{g.tabs.map(t => (
<div
<button
key={t.id}
className={`nav-item${t.id === activeTab ? ' nav-item--active' : ''}`}
type="button"
className={`nav-item${t.id === activeTab ? ' nav-item--active' : ''}${tabLeaving(t) ? ' nav-item--leave' : t.requires === 'prometheus' && prom?.fresh ? ' nav-item--enter' : ''}`}
aria-current={t.id === activeTab ? 'page' : undefined}
aria-hidden={tabLeaving(t) || undefined}
tabIndex={tabLeaving(t) ? -1 : undefined}
onClick={() => { setActiveTab(t.id); setDrawerOpen(false); }}
>
<t.Icon /> {t.label}
</div>
<span className="nav-icon"><t.Icon /></span>
<span className="nav-label">{t.label}</span>
</button>
))}
</nav>
))}
<div className="sidebar-spacer" />
<button className="btn btn--danger" onClick={logout}>
<IcoLogout /> Выйти
<button className="btn btn--danger sidebar-logout" aria-label="Выйти" onClick={logout}>
<IcoLogout /> <span className="nav-label">Выйти</span>
</button>
</aside>
<main className="main">
<h2 className="page-title">{tab.label}</h2>
{/* Общий хром над вкладкой — App владеет им сам, вкладки про него не знают */}
{showServerBar && (
<ServerBar
nodes={nodes}
serverId={serverId}
hubEnabled={hubEnabled}
panelVersion={panelVersion}
onSelect={pickServer}
onAdd={() => setModal({})}
onJoin={n => setModal({ node: n })}
onDelete={deleteNode}
// Сначала выбираем сервер: запросы модалки идут с X-Server-Id выбранного
onSettings={n => { pickServer(n.id); setSettingsFor(n); }}
onRestartAwg={restartAwg}
restarting={restarting}
showRestart={showRestart}
/>
)}
{/* Шапка страницы: заголовок слева; справа — выбор сервера, перезапуск AWG и тема.
На телефоне заголовок и тема — в верхнем баре, выбор сервера — во всю ширину. */}
<div className="page-head">
<h2 className="page-title"><DrumTitle text={tab.label} order={tabOrder} /></h2>
<div className="page-actions">
{/* Общий хром над вкладкой — App владеет им сам, вкладки про него не знают.
Текущий сервер — кнопкой, остальные — выпадающим списком под ней. */}
{showServerBar && (
<div className="server-select" ref={serverSelectRef}>
<button
type="button"
className={`server-current${serversOpen ? ' server-current--open' : ''}`}
aria-expanded={serversOpen}
aria-controls="server-menu"
onClick={() => setServersOpen(o => !o)}
>
<span
className={`status-dot${current?.online ? ' status-dot--online' : ''}`}
role="img"
aria-label={current?.online ? 'на связи' : 'нет связи'}
/>
<span className="server-current-info">
<span className="server-card-name">
{current ? (current.health?.server || current.name) : 'Сервер не выбран'}
</span>
<span className="server-card-ip">
{!current ? 'добавьте ноду'
: current.pending ? 'ждёт подключения'
: current.outdated ? `нужно обновить до ${MIN_NODE_VERSION}`
: !current.online ? 'нет связи'
: current.health?.ip}
</span>
</span>
<span className="server-current-count">{serversLabel(nodes.length)}</span>
<span className="server-current-caret"><IcoChevronDown /></span>
</button>
{serversOpen && (
<div className="server-menu" id="server-menu" aria-label="Серверы">
<ServerBar
nodes={nodes}
serverId={serverId}
hubEnabled={hubEnabled}
panelVersion={panelVersion}
onSelect={id => { pickServer(id); setServersOpen(false); }}
onAdd={() => { setServersOpen(false); setModal({}); }}
onJoin={n => { setServersOpen(false); setModal({ node: n }); }}
onDelete={deleteNode}
// Сначала выбираем сервер: запросы модалки идут с X-Server-Id выбранного
onSettings={n => { setServersOpen(false); pickServer(n.id); openTab('settings', 'server'); }}
onRestartAwg={restartAwg}
restarting={restarting}
showRestart={showRestart}
/>
</div>
)}
</div>
)}
{showRestart && serverId !== null && (
<button
className={`awg-restart${restarting ? ' spinning' : ''}`}
aria-label="Перезапустить AWG"
title="Перезапустить AWG-интерфейс"
onClick={restartAwg}
disabled={restarting}
>
<IcoRefresh /> {restarting ? 'Перезапуск…' : 'Перезапустить AWG'}
</button>
)}
<span className="page-theme">{themeToggle}</span>
</div>
</div>
{serverId === null && showServerBar ? (
<p className="login-sub">
Серверов пока нет. Добавьте ноду: она сама подключится к этой панели.
@@ -373,15 +499,6 @@ export default function App() {
/>
)}
{settingsFor && (
<ServerSettingsModal
token={token}
node={settingsFor}
onClose={() => setSettingsFor(null)}
showMsg={showMsg}
/>
)}
{msg && <div className="snack">{msg}</div>}
</div>
);
awg-ui/src/components/AddServerModal.tsx
+1 -1
View File
@@ -85,6 +85,7 @@ export default function AddServerModal({ token, node, onClose, onChanged, showMs
{error && <p className="login-error">{error}</p>}
<div className="node-modal-actions">
<button className="btn btn--text" onClick={onClose}>{result ? 'Готово' : 'Отмена'}</button>
{result ? (
<button className="btn btn--tonal" onClick={() => copyText(command).then(() => showMsg('Команда скопирована'))}>
<IcoCopy /> Скопировать
@@ -94,7 +95,6 @@ export default function AddServerModal({ token, node, onClose, onChanged, showMs
Создать
</button>
)}
<button className="btn btn--outline" onClick={onClose}>{result ? 'Готово' : 'Отмена'}</button>
</div>
</div>
</div>
awg-ui/src/components/DrumTitle.tsx
+19
View File
@@ -0,0 +1,19 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState } from 'react';
// Заголовок-«барабан»: при смене текста старый уходит гранью барабана, новый выкатывается на его
// место. order — позиция вкладки в меню: дальше по списку — барабан крутится вверх, обратно — вниз.
// Первый показ — без анимации. Стили — App.css, «Заголовок-барабан».
export default function DrumTitle({ text, order }: { text: string; order: number }) {
const [s, setS] = useState({ text, order, from: null as string | null, up: true, n: 0 });
// Текст сменился — запоминаем прежний прямо в рендере, чтобы новый не мелькнул без анимации
if (s.text !== text) setS({ text, order, from: s.text, up: order >= s.order, n: s.n + 1 });
return (
<span key={s.n} className={`drum${s.from !== null ? ` drum--roll drum--${s.up ? 'up' : 'down'}` : ''}`}>
{s.from !== null && <span className="drum-out" aria-hidden="true">{s.from}</span>}
<span className="drum-in">{text}</span>
</span>
);
}
awg-ui/src/components/ServerBar.tsx
+20 -17
View File
@@ -1,27 +1,31 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { type NodeInfo, genLabel, cmpVersion } from '../lib/shared';
import { type NodeInfo, genLabel, cmpVersion, MIN_NODE_VERSION } from '../lib/shared';
import { IcoRefresh, IcoPlus, IcoTrash, IcoCopy, IcoSettings } from './icons';
// Сервер-бар: карточки серверов (core-локальный и ноды) + «Добавить сервер» и
// (на мобильной) перезапуск AWG под ними. Общий для вкладок — показывает
// серверы, между которыми переключается содержимое вкладки (пиры / абоненты).
// Версия Forgetting на сервере. Нода, которая отстаёт от панели или не сообщает версию
// (агент старше 0.3.4), подсвечена: её стоит обновить — install.sh, «Обновить».
// Версия Forgetting на сервере, три состояния: совпадает с панелью — нейтральный чип; нода отстаёт
// от панели (но не старше MIN_NODE_VERSION) или новее неё — жёлтый, стоит обновить; старше
// MIN_NODE_VERSION или не сообщает версию (агент старше 0.3.4) — красный: хаб такую ноду не подключает.
function versionChip(n: NodeInfo, panel: string | null) {
if (n.pending) return null;
let tip = '', warn = false;
let tip = '', level: '' | 'warn' | 'bad' = '';
if (!n.version) {
warn = true;
tip = 'Версия неизвестна: нода старше 0.3.4 — обнови её (install.sh → «Обновить»)';
level = 'bad';
tip = `Версия неизвестна: нода старше 0.3.4, панель с ней не работает — обнови её до ${MIN_NODE_VERSION} (install.sh → «Обновить»)`;
} else if (!n.local && cmpVersion(n.version, MIN_NODE_VERSION) < 0) {
level = 'bad';
tip = `Слишком старая версия: панель с ней не работает, нужна не ниже ${MIN_NODE_VERSION} — обнови ноду (install.sh → «Обновить»)`;
} else if (panel && !n.local) {
const d = cmpVersion(n.version, panel);
if (d < 0) { warn = true; tip = `Панель на ${panel} — обнови ноду (install.sh → «Обновить»)`; }
else if (d > 0) { warn = true; tip = `Нода новее панели (${panel}) — обнови панель`; }
if (d < 0) { level = 'warn'; tip = `Устарела: панель на ${panel} — обнови ноду (install.sh → «Обновить»)`; }
else if (d > 0) { level = 'warn'; tip = `Нода новее панели (${panel}) — обнови панель`; }
}
const chip = (
<span className={`chip server-ver-chip${warn ? ' server-ver-chip--warn' : ''}`}>
<span className={`chip server-ver-chip${level ? ` server-ver-chip--${level}` : ''}`}>
{n.version ? `v${n.version}` : 'v?.?.?'}
</span>
);
@@ -60,18 +64,17 @@ export default function ServerBar({
onClick={() => onSelect(n.id)}
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(n.id); } }}
>
{/* toggle — виден на мобильном вместо чипа */}
<div className={`server-toggle${n.online ? ' server-toggle--on' : ''}`} aria-hidden="true">
<div className="server-toggle-thumb" />
</div>
{/* чип онлайн/офлайн — виден на десктопе */}
<span className={`chip chip--${n.online ? 'online' : 'offline'} server-online-chip`}>
<span className="chip-dot" />
</span>
<span
className={`status-dot${n.online ? ' status-dot--online' : ''}`}
role="img"
aria-label={n.online ? 'на связи' : 'нет связи'}
/>
<div className="server-card-info">
<span className="server-card-name">{h?.server || n.name}</span>
{n.pending ? (
<span className="server-card-ip">ждёт подключения</span>
) : n.outdated ? (
<span className="server-card-ip server-card-ip--bad">нужно обновить до {MIN_NODE_VERSION}</span>
) : !n.online ? (
<span className="server-card-ip">нет связи</span>
) : h && (
awg-ui/src/components/ServerSelect.tsx
+90
View File
@@ -0,0 +1,90 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useRef } from 'react';
import { type NodeInfo, genLabel, serversLabel, MIN_NODE_VERSION } from '../lib/shared';
import { IcoChevronDown } from './icons';
// Выбор одного сервера внутри страницы: чьи графики показывать в «Мониторе».
// Выглядит как выбор сервера в шапке страницы: кнопка с текущим сервером (точка связи, имя, IP,
// «N серверов», стрелка) и под ней меню-список; выбранная строка залита primary-container. Выбор
// локальный: сервер в шапке панели он не меняет. Серверы без связи видны, но недоступны (на них
// ничего не поставить) — кроме pickOffline: история на графиках у них есть. all — первой строкой
// «Все серверы» (ALL_SERVERS).
// Меню раскрывается от правого края кнопки, как в шапке.
export const ALL_SERVERS = -1;
export default function ServerSelect({ nodes, value, onChange, name, all, pickOffline }: {
nodes: NodeInfo[];
value: number;
onChange: (id: number) => void;
name: string; // id меню (aria-controls)
all?: boolean;
pickOffline?: boolean;
}) {
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
// Закрывается кликом мимо и по Escape — как меню серверов в шапке
useEffect(() => {
if (!open) return;
const down = (e: MouseEvent) => { if (!ref.current?.contains(e.target as Node)) setOpen(false); };
const key = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
document.addEventListener('mousedown', down);
document.addEventListener('keydown', key);
return () => { document.removeEventListener('mousedown', down); document.removeEventListener('keydown', key); };
}, [open]);
const online = nodes.filter(n => n.online).length;
const current = nodes.find(n => n.id === value) ?? null;
const isAll = value === ALL_SERVERS;
const pick = (id: number) => { setOpen(false); if (id !== value) onChange(id); };
const sub = (n: NodeInfo) => n.pending ? 'ждёт подключения' : n.outdated ? `нужно обновить до ${MIN_NODE_VERSION}` : !n.online ? 'нет связи' : n.health?.ip ?? '';
return (
<div className="server-select" ref={ref}>
<button type="button" className={`server-current${open ? ' server-current--open' : ''}`}
aria-expanded={open} aria-controls={name} onClick={() => setOpen(o => !o)}>
<span className={`status-dot${(isAll ? online > 0 : current?.online) ? ' status-dot--online' : ''}`}
role="img" aria-label={(isAll ? online > 0 : current?.online) ? 'на связи' : 'нет связи'} />
<span className="server-current-info">
<span className="server-card-name">
{isAll ? 'Все серверы' : current ? (current.health?.server || current.name) : 'Сервер не выбран'}
</span>
<span className="server-card-ip">{isAll ? `на связи ${online} из ${nodes.length}` : current ? sub(current) : ''}</span>
</span>
<span className="server-current-count">{serversLabel(nodes.length)}</span>
<span className="server-current-caret"><IcoChevronDown /></span>
</button>
{open && (
<div className="server-menu" id={name} role="listbox" aria-label="Серверы">
{all && (
<button type="button" role="option" aria-selected={isAll}
className={`server-option${isAll ? ' server-option--active' : ''}`} onClick={() => pick(ALL_SERVERS)}>
<span className="status-dot server-option-nodot" aria-hidden="true" />{/* место точки — текст в один столбец */}
<span className="server-current-info">
<span className="server-card-name">Все серверы</span>
<span className="server-option-sub">{serversLabel(nodes.length)} · на связи {online}</span>
</span>
</button>
)}
{nodes.map(n => {
const off = !n.online && !pickOffline;
return (
<button key={n.id} type="button" role="option" aria-selected={n.id === value} disabled={off}
className={`server-option${n.id === value ? ' server-option--active' : ''}`} onClick={() => pick(n.id)}>
<span className={`status-dot${n.online ? ' status-dot--online' : ''}`} role="img"
aria-label={n.online ? 'на связи' : 'нет связи'} />
<span className="server-current-info">
<span className="server-card-name">{n.health?.server || n.name}</span>
<span className="server-card-ip">{sub(n)}</span>
</span>
{n.health?.gen && <span className="server-option-sub">{genLabel(n.health.gen)}</span>}
</button>
);
})}
</div>
)}
</div>
);
}
awg-ui/src/components/icons.tsx
+25
View File
@@ -11,6 +11,11 @@ export const IcoMenu = () => (
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
);
export const IcoChevronDown = () => (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polyline points="6 9 12 15 18 9"/>
</svg>
);
export const IcoUsers = () => (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -108,7 +113,27 @@ export const IcoMove = () => (
</svg>
);
export const IcoGear = () => (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
</svg>
);
export const IcoCheck = () => (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 12.5 10 17.5 19 7"/>
</svg>
);
// «Ещё» (MD3 more_vert): меню действий строки
export const IcoMore = () => (
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>
</svg>
);
export const ICONS: Record<string, () => JSX.Element> = {
settings: IcoGear,
users: IcoUsers,
key: IcoKey,
shield: IcoShield,
awg-ui/src/lib/qr.ts
+66
View File
@@ -0,0 +1,66 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import QRCode, { type QRCodeErrorCorrectionLevel } from 'qrcode';
// Фирменный QR: скруглённые модули (соседи сливаются в «капли», одиночный — круг) и угловые
// «глаза» с фиолетовой серединкой. Рисуется в SVG по матрице библиотеки, отдаётся data-URL для <img>.
//
// Цвета — светлой темы и не зависят от текущей: сканеры читают только тёмный код на светлом фоне,
// а токены тёмной темы светлые. Логотипа нет: у vpn:// (уровень 'L') нет запаса коррекции ошибок.
const DARK = '#3a2e22'; // on-surface светлой темы
const ACCENT = '#6a45b8'; // primary светлой темы
const LIGHT = '#ffffff';
const MARGIN = 2; // тихая зона в модулях — как было у toDataURL
const R = 0.5; // радиус открытого угла модуля (0.5 — одиночный модуль становится кругом)
// Квадрат 1×1 в (x, y) со скруглением только тех углов, у которых оба соседа по сторонам пусты.
function cell(x: number, y: number, tl: boolean, tr: boolean, br: boolean, bl: boolean): string {
const a = tl ? R : 0, b = tr ? R : 0, c = br ? R : 0, d = bl ? R : 0;
return `M${x + a} ${y}H${x + 1 - b}` + (b ? `a${b} ${b} 0 0 1 ${b} ${b}` : '')
+ `V${y + 1 - c}` + (c ? `a${c} ${c} 0 0 1 ${-c} ${c}` : '')
+ `H${x + d}` + (d ? `a${d} ${d} 0 0 1 ${-d} ${-d}` : '')
+ `V${y + a}` + (a ? `a${a} ${a} 0 0 1 ${a} ${-a}` : '') + 'Z';
}
// Скруглённый прямоугольник как подпуть (для «глаз»).
function rrect(x: number, y: number, w: number, h: number, r: number): string {
return `M${x + r} ${y}H${x + w - r}a${r} ${r} 0 0 1 ${r} ${r}V${y + h - r}a${r} ${r} 0 0 1 ${-r} ${r}`
+ `H${x + r}a${r} ${r} 0 0 1 ${-r} ${-r}V${y + r}a${r} ${r} 0 0 1 ${r} ${-r}Z`;
}
// Бросает, если текст не помещается в QR на этом уровне коррекции.
export function qrDataUrl(text: string, errorCorrectionLevel: QRCodeErrorCorrectionLevel): string {
const { modules } = QRCode.create(text, { errorCorrectionLevel });
const n = modules.size;
const finder = (x: number, y: number) =>
(x < 7 && y < 7) || (x >= n - 7 && y < 7) || (x < 7 && y >= n - 7);
const on = (x: number, y: number) =>
x >= 0 && y >= 0 && x < n && y < n && !finder(x, y) && !!modules.get(y, x);
// Все модули — одним путём: соседние квадраты сливаются без щелей сглаживания.
let body = '';
for (let y = 0; y < n; y++) {
for (let x = 0; x < n; x++) {
if (!on(x, y)) continue;
const up = on(x, y - 1), down = on(x, y + 1), left = on(x - 1, y), right = on(x + 1, y);
body += cell(x, y, !up && !left, !up && !right, !down && !right, !down && !left);
}
}
// «Глаза»: кольцо 7×7 (внешний минус внутренний контур, evenodd) и серединка 3×3.
let rings = '', pupils = '';
for (const [x, y] of [[0, 0], [n - 7, 0], [0, n - 7]]) {
rings += rrect(x, y, 7, 7, 2) + rrect(x + 1, y + 1, 5, 5, 1.5);
pupils += rrect(x + 2, y + 2, 3, 3, 1);
}
const s = n + MARGIN * 2;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-MARGIN} ${-MARGIN} ${s} ${s}" width="560" height="560">`
+ `<rect x="${-MARGIN}" y="${-MARGIN}" width="${s}" height="${s}" fill="${LIGHT}"/>`
+ `<path d="${body}" fill="${DARK}"/>`
+ `<path d="${rings}" fill="${DARK}" fill-rule="evenodd"/>`
+ `<path d="${pupils}" fill="${ACCENT}"/>`
+ '</svg>';
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}
awg-ui/src/lib/shared.ts
+26
View File
@@ -56,6 +56,19 @@ export interface Brand { brand: string; channel: string; version: string }
export const TOKEN_KEY = 'awg_token';
export const THEME_KEY = 'awg_theme';
export const SERVER_KEY = 'awg_server';
export const SETTINGS_SECTION_KEY = 'awg_settings_section'; // открытый раздел «Настроек»
// Встроенный Prometheus установлен или удалён: вкладка «Монитор» в меню есть только при нём.
// Кто узнал состояние (раздел установки, сам «Монитор») — сообщает App, тот прячет или показывает пункт.
export const announcePrometheus = (ready: boolean) =>
window.dispatchEvent(new CustomEvent('awg:prometheus', { detail: ready }));
// Открыть другую вкладку панели (App слушает событие). section — раздел «Настроек»: его вкладка
// читает из SETTINGS_SECTION_KEY при монтировании, поэтому пишем до перехода.
export function openTab(id: string, section?: string) {
if (section) try { localStorage.setItem(SETTINGS_SECTION_KEY, section); } catch { /* не критично */ }
window.dispatchEvent(new CustomEvent('awg:open-tab', { detail: id }));
}
// Сервер (core или нода) в списке ServerBar: то, что отдаёт GET /ui/nodes.
export interface NodeInfo {
@@ -66,6 +79,7 @@ export interface NodeInfo {
pending: boolean; // нода создана, но ещё ни разу не подключалась
last_seen: number | null;
version: string | null; // версия Forgetting на сервере; null — нода ещё не подключалась или агент старше 0.3.4
outdated?: boolean; // старше MIN_NODE_VERSION: панель её не подключает, пока не обновят
health: { server: string; ip: string; gen: AwgGen; peers: number; awg_up: boolean; module: string; tools: string } | null;
}
@@ -90,6 +104,18 @@ export interface TorrentStatus {
error?: string;
}
// «1 сервер», «3 сервера», «5 серверов»
export function serversLabel(n: number): string {
const m10 = n % 10, m100 = n % 100;
const word = m10 === 1 && m100 !== 11 ? 'сервер'
: m10 >= 2 && m10 <= 4 && (m100 < 12 || m100 > 14) ? 'сервера' : 'серверов';
return `${n} ${word}`;
}
// Минимальная версия Forgetting на ноде (в хабе — MinNodeVersion, internal/ui/nodes.go): старше — хаб
// ноду не подключает, чип версии красный; между ней и версией панели — жёлтый (просто стоит обновить).
export const MIN_NODE_VERSION = '0.5.0';
// Сравнение версий вида 0.3.3 (хвост после «-» не учитывается): <0 — a старше b.
export function cmpVersion(a: string, b: string): number {
const pa = a.split('-')[0].split('.').map(Number), pb = b.split('-')[0].split('.').map(Number);
awg-ui/src/lib/theme.ts
+47
View File
@@ -0,0 +1,47 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
// Тема панели: светлая, тёмная или как в системе. Одно хранилище на всё приложение —
// переключатель в шапке и вкладка «Настройки» читают и меняют его через useTheme().
import { useSyncExternalStore } from 'react';
import { THEME_KEY } from './shared';
export type ThemeMode = 'light' | 'dark' | 'system';
export type Theme = 'light' | 'dark';
const dark = window.matchMedia('(prefers-color-scheme: dark)');
const listeners = new Set<() => void>();
function readMode(): ThemeMode {
try {
const v = localStorage.getItem(THEME_KEY);
if (v === 'dark' || v === 'system') return v;
} catch { /* не критично */ }
return 'light'; // без сохранённого выбора — светлая, как было до режима «как в системе»
}
let mode = readMode();
const resolved = (): Theme => (mode === 'system' ? (dark.matches ? 'dark' : 'light') : mode);
function apply() {
document.documentElement.setAttribute('data-theme', resolved());
listeners.forEach(l => l());
}
// «Как в системе» следует за сменой темы ОС на лету
dark.addEventListener('change', () => { if (mode === 'system') apply(); });
apply();
export function setThemeMode(next: ThemeMode) {
mode = next;
try { localStorage.setItem(THEME_KEY, next); } catch { /* не критично */ }
apply();
}
const subscribe = (l: () => void) => { listeners.add(l); return () => { listeners.delete(l); }; };
// mode — выбор пользователя, theme — что реально применено.
export function useTheme(): { mode: ThemeMode; theme: Theme } {
const snap = useSyncExternalStore(subscribe, () => `${mode}:${resolved()}`);
const [m, t] = snap.split(':') as [ThemeMode, Theme];
return { mode: m, theme: t };
}
awg-ui/src/tabs/apikeys/metadata.json
-7
View File
@@ -1,7 +0,0 @@
{
"id": "apikeys",
"label": "API-ключи",
"icon": "key",
"group": "main",
"order": 2
}
awg-ui/src/tabs/audit/metadata.json
-11
View File
@@ -1,11 +0,0 @@
{
"id": "audit",
"label": "Аудит",
"icon": "shield",
"group": "server",
"order": 1.8,
"chrome": {
"serverBar": false,
"restart": false
}
}
awg-ui/src/tabs/index.ts
+6 -1
View File
@@ -4,7 +4,7 @@
// Автообнаружение вкладок. Каждая вкладка — самодостаточная папка tabs/<name>/:
// index.tsx — компонент + логика
// <name>.css — стили вкладки (импортит сам компонент)
// metadata.json — { id, label, icon, group?, order?, chrome? } (манифест: описание, группа меню, порядок)
// metadata.json — { id, label, icon, group?, order?, requires?, chrome? } (манифест: описание, группа меню, порядок)
// Реестр сам находит все папки через import.meta.glob и собирает «живые» части
// (Page-компонент, Icon по имени из ICONS) к метадате. Добавить вкладку = просто
// создать папку с index.tsx и metadata.json — этот файл трогать НЕ нужно.
@@ -35,6 +35,7 @@ export interface TabMeta {
icon: string; // имя иконки → ICONS
group: TabGroupId; // группа меню; без поля — 'main'
order?: number; // порядок внутри группы (по возрастанию; без него — 0)
requires?: 'prometheus'; // вкладка в меню только при условии: 'prometheus' — встроенный Prometheus установлен
chrome?: TabChrome;
}
@@ -66,6 +67,9 @@ function toMeta(name: string, raw: unknown): TabMeta {
if (m.chrome !== undefined && (typeof m.chrome !== 'object' || m.chrome === null)) {
throw new Error(`tabs/${name}/metadata.json: "chrome" должно быть объектом`);
}
if (m.requires !== undefined && m.requires !== 'prometheus') {
throw new Error(`tabs/${name}/metadata.json: "requires" может быть только "prometheus"`);
}
const group = (m.group ?? 'main') as string;
if (!TAB_GROUPS.some(g => g.id === group)) {
throw new Error(`tabs/${name}/metadata.json: "group" должно быть одним из: ${TAB_GROUPS.map(g => g.id).join(', ')}`);
@@ -76,6 +80,7 @@ function toMeta(name: string, raw: unknown): TabMeta {
icon: str('icon'),
group: group as TabGroupId,
order: m.order as number | undefined,
requires: m.requires as 'prometheus' | undefined,
chrome: m.chrome as TabChrome | undefined,
};
}
awg-ui/src/tabs/masterkeys/BulkServersModal.tsx
+2 -2
View File
@@ -109,12 +109,12 @@ export default function BulkServersModal({ token, nodes, keys, defaults, onClose
{preview?.hidden.map(h => (
<p className="mk-notice" key={h.id}>
Ключ API «{h.label}» перестанет видеть {h.keys} мастер-ключ(ей): у них появится сервер вне его области.
Расширьте его область на вкладке «API-ключи», если он ими управляет.
Расширьте его область в «Настройках», на вкладке «API-ключи», если он ими управляет.
</p>
))}
{error && <p className="login-error">{error}</p>}
<div className="node-modal-actions">
<button className="btn btn--outline" onClick={onClose}>Отмена</button>
<button className="btn btn--text" onClick={onClose}>Отмена</button>
<button className="btn btn--primary" disabled={busy || nothing || !!error} onClick={apply}>
{busy ? 'Применяем…' : 'Применить'}
</button>
awg-ui/src/tabs/masterkeys/index.tsx
+280 -110
View File
@@ -2,9 +2,9 @@
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { Fragment, useState, useEffect, useCallback, useMemo, useRef } from 'react';
import QRCode from 'qrcode';
import { apiFetch, copyText, bytes, timeAgo, getServerId, type NodeInfo, type PageProps, type Priority } from '../../lib/shared';
import { IcoPlus, IcoTrash, IcoCopy, IcoQR, IcoKey, IcoRefresh, IcoSettings, IcoGlobe } from '../../components/icons';
import { apiFetch, copyText, bytes, timeAgo, getServerId, cmpVersion, type NodeInfo, type PageProps, type Priority } from '../../lib/shared';
import { qrDataUrl } from '../../lib/qr';
import { IcoPlus, IcoTrash, IcoCopy, IcoQR, IcoKey, IcoRefresh, IcoSettings, IcoMore } from '../../components/icons';
import ServerPicker, { serverName } from '../../components/ServerPicker';
import PriorityChip from '../../components/PriorityChip';
import TorrentChip from '../../components/TorrentChip';
@@ -23,18 +23,12 @@ interface Device {
ips?: { server_id: number; ip: string }[]; // IP на каждом сервере ключа (старая панель не отдаёт)
}
// Устройство ещё не на всех серверах ключа (нода не в сети при регистрации или смене ключа) —
// панель догонит, когда нода появится.
const syncLabel = (d: Device): string =>
d.servers_ok < d.servers_total ? ` · на ${d.servers_ok} из ${d.servers_total} серверов` : '';
// Платформа и версия клиента: «macOS-0.6.5»; без версии — просто платформа.
const platformLabel = (d: Device): string =>
d.platform ? (d.version ? `${d.platform}-${d.version}` : d.platform) : '—';
const errText = (e: any): string => e?.response?.data?.error ?? 'Ошибка запроса';
// Статус — как у пользователей: «онлайн», иначе сколько прошло с последнего handshake.
// Приоритет показываем, только когда он не обычный: «обычный» в каждой строке — шум
const bgOnly = (p?: Priority) => p === 'background' ? p : undefined;
const statusChip = (d: Device) => (
<span className={`chip chip--${d.online ? 'online' : 'offline'}`}>
<span className="chip-dot" />
@@ -55,11 +49,18 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
const [enabled, setEnabled] = useState(true);
const [tls, setTls] = useState(false);
const [nodes, setNodes] = useState<NodeInfo[]>([]); // серверы, которые можно включить в ключ
// Маскировка первого пакета (I1) сервера из шапки: false — сервер её не умеет (старый awg-ctrl) или недоступен
const [masking, setMasking] = useState<'ready' | 'busy' | false>(false);
const [label, setLabel] = useState('');
const [limit, setLimit] = useState('3');
const [devs, setDevs] = useState<Record<number, Device[]>>({});
const [folded, setFolded] = useState<Set<number>>(new Set()); // свёрнутые узлы
const [tools, setTools] = useState<number | null>(null); // узел с открытыми настройками
// Меню «⋮» ключа или устройства. position: fixed по кнопке: .table-card прокручивается вбок
// и обрезал бы меню у нижних строк. full — в меню ключа и «Скопировать ссылку» (в таблице;
// в карточке на телефоне ссылка — отдельной кнопкой).
const [menu, setMenu] = useState<{ kind: 'key' | 'device'; id: number; full: boolean; top: number; right: number; up: boolean } | null>(null);
const menuRef = useRef<HTMLDivElement>(null);
const [limitEdit, setLimitEdit] = useState('');
const [failed, setFailed] = useState<Set<number>>(new Set()); // ключи, чьи устройства не загрузились
const [down, setDown] = useState<Record<number, number[]>>({}); // серверы ключа, не ответившие на статистику
@@ -121,6 +122,21 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
}, [label, limit, nodes, defaults, token, act]);
const live = useMemo(() => keys.filter(k => !k.deleting), [keys]);
useEffect(() => {
let alive = true;
apiFetch('GET', '/api/masking', token).then(() => { if (alive) setMasking('ready'); }).catch(() => {});
return () => { alive = false; };
}, [token]);
// Новый случайный I1 на сервере из шапки. Интерфейс не трогается: I1 нужен только клиентам,
// sen:// подхватят его со следующим обновлением профиля (≤ 60 с), выданные vpn:// остаются со старым.
const regenMasking = async () => {
setMasking('busy');
try { await apiFetch('POST', '/api/masking', token); showMsg('Маскировка сменена'); }
catch (e: any) { showMsg(e?.response?.data?.error ?? 'Не удалось сменить маскировку'); }
finally { setMasking('ready'); }
};
const serverNames = useCallback((ids: number[]) => ids.map(id => serverName(nodes, id)).join(', '), [nodes]);
const remove = useCallback(async (k: MasterKey) => {
@@ -141,8 +157,7 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
const showQR = useCallback(async (k: MasterKey) => {
try {
const { link, tls: t } = await fetchLink(k);
const dataUrl = await QRCode.toDataURL(link, { width: 560, margin: 2, errorCorrectionLevel: 'H' });
setModal({ label: k.label, link, tls: t, dataUrl });
setModal({ label: k.label, link, tls: t, dataUrl: qrDataUrl(link, 'H') });
} catch (e) { showMsg(errText(e)); }
}, [fetchLink, showMsg]);
@@ -195,12 +210,48 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
</span>
);
useEffect(() => {
if (!menu) return;
menuRef.current?.querySelector<HTMLButtonElement>('button')?.focus();
const close = () => setMenu(null);
const down = (e: MouseEvent) => { if (!menuRef.current?.contains(e.target as Node)) close(); };
const key = (e: KeyboardEvent) => {
if (e.key === 'Escape') { close(); document.querySelector<HTMLButtonElement>(`[data-menu-for="${menu.kind}-${menu.id}"]`)?.focus(); return; }
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
e.preventDefault();
const items = [...(menuRef.current?.querySelectorAll<HTMLButtonElement>('button') ?? [])];
const i = items.indexOf(document.activeElement as HTMLButtonElement);
items[(i + (e.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length]?.focus();
};
document.addEventListener('mousedown', down);
document.addEventListener('keydown', key);
window.addEventListener('scroll', close, true);
window.addEventListener('resize', close);
return () => {
document.removeEventListener('mousedown', down);
document.removeEventListener('keydown', key);
window.removeEventListener('scroll', close, true);
window.removeEventListener('resize', close);
};
}, [menu]);
const openMenu = (kind: 'key' | 'device', id: number, el: HTMLElement, full = false) => {
if (menu?.kind === kind && menu.id === id) return setMenu(null);
const r = el.getBoundingClientRect();
const up = r.bottom + 160 > window.innerHeight; // у нижнего края — вверх от кнопки
setMenu({ kind, id, full, top: up ? r.top - 4 : r.bottom + 4, right: window.innerWidth - r.right, up });
};
const moreButton = (kind: 'key' | 'device', id: number, label: string, full = false) => (
<button className="btn-icon mk-more" aria-label={label} aria-haspopup="menu" aria-expanded={menu?.kind === kind && menu.id === id}
data-menu-for={`${kind}-${id}`} onClick={e => openMenu(kind, id, e.currentTarget, full)}><IcoMore /></button>
);
// В таблице — QR и «⋮» (остальное в меню), чтобы колонка действий всегда помещалась.
// Подсказки — .tip-wrap, не title: нативная появляется с задержкой и бесполезна на тач-экране.
const actions = (k: MasterKey) => (
<div className="actions">
<button className="btn-icon" title="QR-код" aria-label="QR-код" onClick={() => showQR(k)}><IcoQR /></button>
<button className="btn-icon" title="Скопировать ссылку" aria-label="Скопировать ссылку" onClick={() => copyLink(k)}><IcoCopy /></button>
<button className="btn-icon" title="Настройки мастер-ключа" aria-label="Настройки мастер-ключа" aria-expanded={tools === k.id} onClick={() => openTools(k)}><IcoSettings /></button>
<button className="btn-icon btn-icon--danger" title="Удалить мастер-ключ" aria-label="Удалить мастер-ключ" onClick={() => remove(k)}><IcoTrash /></button>
<span className="tip-wrap tip-wrap--end" data-tip="QR-код"><button className="btn-icon" aria-label="QR-код" onClick={() => showQR(k)}><IcoQR /></button></span>
{moreButton('key', k.id, `Ещё: ${k.label}`, true)}
</div>
);
@@ -275,7 +326,7 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
// Полоска занятых слотов: числа по краям внутри; цвет по заполнению.
const meter = (k: MasterKey, n: number) => (
<div className={`mk-meter${n >= k.device_limit ? ' mk-meter--full' : n * 3 >= k.device_limit * 2 ? ' mk-meter--warn' : ''}`}
<div className={`mk-meter${n >= k.device_limit ? ' mk-meter--full' : ''}`}
role="progressbar" aria-label="Устройства" aria-valuemin={0}
aria-valuemax={k.device_limit} aria-valuenow={n}
title={`Устройств: ${n} из ${k.device_limit}`}>
@@ -288,22 +339,35 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
</div>
);
const newPsk = async (d: Device) => {
try {
const r = await apiFetch('POST', `/ui/devices/${d.id}/psk`, token);
showMsg(r.pending ? `PSK обновлён; ещё на ${r.pending} — когда сервер будет на связи` : 'PSK обновлён');
await load();
} catch (e) { showMsg(errText(e)); }
};
const revoke = (d: Device) => {
if (confirm('Отозвать устройство «' + (d.device_name || d.id) + '»?'))
act(() => apiFetch('DELETE', `/ui/devices/${d.id}`, token), 'Устройство отозвано');
};
const deviceActions = (d: Device) => (
<div className="actions">
<button className="btn-icon" title="Новый PSK" aria-label="Новый PSK" onClick={async () => {
try {
const r = await apiFetch('POST', `/ui/devices/${d.id}/psk`, token);
showMsg(r.pending ? `PSK обновлён; ещё на ${r.pending} — когда сервер будет на связи` : 'PSK обновлён');
await load();
} catch (e) { showMsg(errText(e)); }
}}><IcoRefresh /></button>
<button className="btn-icon btn-icon--danger" title="Отозвать устройство" aria-label="Отозвать устройство" onClick={() => {
if (confirm('Отозвать устройство «' + (d.device_name || d.id) + '»?'))
act(() => apiFetch('DELETE', `/ui/devices/${d.id}`, token), 'Устройство отозвано');
}}><IcoTrash /></button>
<span className="tip-wrap tip-wrap--end" data-tip="Новый PSK"><button className="btn-icon" aria-label="Новый PSK" onClick={() => newPsk(d)}><IcoRefresh /></button></span>
<span className="tip-wrap tip-wrap--end" data-tip="Отозвать устройство"><button className="btn-icon btn-icon--danger" aria-label="Отозвать устройство" onClick={() => revoke(d)}><IcoTrash /></button></span>
</div>
);
// Короткий ID устройства: полностью — в подсказке, по клику копируется
const deviceId = (d: Device) => (
<span className="tip-wrap tip-wrap--start" data-tip={`ID устройства ${d.device_id} · нажми, чтобы скопировать`}>
<button className="copy-id" aria-label={`Скопировать ID устройства ${d.device_id}`}
onClick={() => copyText(d.device_id).then(() => showMsg('ID устройства скопирован'), () => showMsg('Не удалось скопировать'))}>
{d.device_id.slice(0, 8)}…
</button>
</span>
);
// Метка ключа и под ней UUID — коротко, чтобы не раздувать колонку «Имя». Полностью — в подсказке,
// по клику копируется.
const nameCell = (k: MasterKey) => (
@@ -325,72 +389,146 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
return d?.length ? <span className="mk-flag" title="Онлайн и трафик с этих серверов не получены"> · нет связи: {serverNames(d)}</span> : null;
};
// Сводка по устройствам ключа в его строке — видна и у свёрнутого ключа.
const summary = (list: Device[]) => {
if (!list.length) return <><td></td><td></td><td colSpan={2}></td><td></td><td></td></>;
// Серверы ключа, куда ещё не добавлено устройство: был не в сети, когда оно подключалось или меняло
// ключ; панель добавит его сама, когда сервер появится (reconcile). Без ips (старая панель) — неизвестно.
const missingOn = (k: MasterKey, d: Device) => d.ips ? k.servers.filter(s => !d.ips!.some(x => x.server_id === s)) : [];
// «из 3 серверов», «из 21 сервера»
const ofServers = (n: number) => `${n} ${n % 10 === 1 && n % 100 !== 11 ? 'сервера' : 'серверов'}`;
const syncFlag = (k: MasterKey, d: Device) => {
const miss = missingOn(k, d);
if (miss.length) return `${k.servers.length - miss.length} из ${ofServers(k.servers.length)}`;
return d.servers_ok < d.servers_total ? `${d.servers_ok} из ${ofServers(d.servers_total)}` : '';
};
const syncTip = (k: MasterKey, d: Device) => {
const miss = missingOn(k, d);
return miss.length ? `Нет на ${miss.map(s => serverName(nodes, s)).join(', ')} — добавится само, когда сервер будет на связи`
: 'Не на всех серверах ключа — добавится само, когда они будут на связи';
};
// Серверы ключа — в его строке под колонками IP и «Платформа»: «все серверы» (у ключа с одним
// сервером — его имя) светло-зелёным или «2 из 3 серверов» тёплым, если на каком-то ещё нет всех
// устройств ключа.
// Имена — в подсказке.
const keyServers = (k: MasterKey, list: Device[]) => {
const behind = (s: number) => list.some(d => missingOn(k, d).includes(s));
const late = k.servers.filter(behind);
const ready = k.servers.filter(s => !behind(s));
const names = (ids: number[]) => ids.map(s => serverName(nodes, s)).join(', ');
const text = late.length ? `${ready.length} из ${ofServers(k.servers.length)}`
: k.servers.length === 1 ? serverName(nodes, k.servers[0]) : 'все серверы';
const tip = late.length ? `Есть: ${names(ready) || 'нигде'}. Нет: ${names(late)} — добавятся сами, когда сервер будет на связи`
: k.servers.length > 1 ? names(k.servers) : null;
const chip = <span className={`chip ${late.length ? 'chip--warm' : 'chip--online'} mk-srv`}>{text}</span>; // всё на месте — светло-зелёный
return tip ? <span className="tip-wrap tip-wrap--end" data-tip={tip}>{chip}</span> : chip;
};
// Статус ключа по его устройствам: онлайн / когда были / «нет устройств», плюс фоновый приоритет и торренты
const keyStatus = (list: Device[], empty: boolean) => {
if (!list.length) return empty ? <span className="mk-flag">нет устройств</span> : null;
const on = list.filter(d => d.online).length;
const last = Math.max(...list.map(d => d.lastHandshake || 0));
const torrent = list.some(d => d.torrent);
const prio = list.some(d => d.priority === 'background') ? 'background' : list.find(d => d.priority)?.priority;
const prio = bgOnly(list.some(d => d.priority === 'background') ? 'background' : undefined);
return (
<>
<td>
<span className={`chip chip--${on ? 'online' : 'offline'}`}>
<span className="chip-dot" />
{on ? `онлайн: ${on} из ${list.length}` : last ? timeAgo(last) + ' назад' : 'никогда'}
</span>
</td>
<td><span className="user-chips"><PriorityChip priority={prio} torrent={torrent} /><TorrentChip torrent={torrent} /></span></td>
<td colSpan={2}></td>
<span className={`chip chip--${on ? 'online' : 'offline'}`}>
<span className="chip-dot" />
{on ? `онлайн: ${on} из ${list.length}` : last ? timeAgo(last) + ' назад' : 'никогда'}
</span>
<PriorityChip priority={prio} torrent={torrent} /><TorrentChip torrent={torrent} />
</>
);
};
// Сводка по устройствам ключа в его строке — видна и у свёрнутого ключа.
const summary = (k: MasterKey, list: Device[], empty: boolean) => {
if (!list.length) return <><td>{keyStatus(list, empty)}</td><td colSpan={2}>{keyServers(k, list)}</td><td></td><td></td></>;
return (
<>
<td><span className="user-chips">{keyStatus(list, empty)}</span></td>
<td colSpan={2}>{keyServers(k, list)}</td>
<td>{bytes(list.reduce((a, d) => a + d.rx, 0))}</td>
<td>{bytes(list.reduce((a, d) => a + d.tx, 0))}</td>
</>
);
};
// Адрес с другого сервера подписан его именем; подсказка со всеми адресами — когда их больше одного.
// Один адрес — выбранного в шапке сервера, остальные — «+N» и подсказка со всеми. Адрес с другого
// сервера подписан его именем строкой ниже, иначе его примут за адрес выбранного.
const ipCell = (d: Device) => {
const all = d.ips ?? [];
const { ip, serverId, other } = ipPick(d);
const text = <code className="mk-ip">{ip}{other && serverId !== undefined ? ` · ${serverName(nodes, serverId)}` : ''}</code>;
const body = (
<span className="name-stack">
<span className="mk-ip-line">
<code className="mk-ip">{ip}</code>
{all.length > 1 && <span className="mk-ip-more">+{all.length - 1}</span>}
</span>
{other && serverId !== undefined && <span className="mk-sub">{serverName(nodes, serverId)}</span>}
</span>
);
return all.length > 1
? <span className="tip-wrap" data-tip={all.map(x => `${serverName(nodes, x.server_id)}: ${x.ip}`).join(' · ')}>{text}</span>
: text;
? <span className="tip-wrap" data-tip={all.map(x => `${serverName(nodes, x.server_id)}: ${x.ip}`).join(' · ')}>{body}</span>
: body;
};
const caret = (k: MasterKey) => (
// Самая новая версия SenAWG среди устройств панели: кто отстал — тёплой плашкой, как ноды в меню серверов
const newest = useMemo(() => Object.values(devs).flat().map(d => d.version).filter(Boolean)
.reduce<string | null>((a, v) => !a || cmpVersion(v, a) > 0 ? v : a, null), [devs]);
const versionTag = (d: Device, tip: 'start' | 'end') => {
if (!d.version) return null;
const old = !!newest && cmpVersion(d.version, newest) < 0;
return old
? <span className={`tip-wrap tip-wrap--${tip}`} data-tip={`Есть новее: ${newest} — обнови SenAWG на устройстве`}><span className="chip chip--warm mk-ver">{d.version}</span></span>
: <span className="mk-sub">{d.version}</span>;
};
const platformCell = (d: Device) => (
<span className="name-stack">
{d.platform || '—'}
{versionTag(d, 'end')}
</span>
);
// Раскрывать нечего — вместо стрелки пустое место той же ширины, имена остаются в одну линию
const caret = (k: MasterKey, n: number) => n === 0 ? <span className="mk-caret-gap" aria-hidden="true" /> : (
<button className={`mk-caret${folded.has(k.id) ? ' mk-caret--folded' : ''}`}
aria-label={folded.has(k.id) ? 'Развернуть' : 'Свернуть'} aria-expanded={!folded.has(k.id)}
onClick={() => fold(k.id)}>▾</button>
);
const deviceNode = (k: MasterKey, d: Device) => (
<li className="mk-node mk-node--device" key={d.id}>
<div className="mk-device">
<div className="mk-device-main">
<span className="mk-device-title">
<span className="mk-device-name">{d.device_name || 'Устройство'}</span>
<code className="mk-device-id" title={`ID устройства: ${d.device_id}`}>{d.device_id}</code>
// Телефон: устройство — строка списка в карточке ключа, а не карточка в карточке. Имя, статус и «⋮»;
// ниже мелко — платформа, версия, IP; трафик, приоритет и то, на скольких серверах оно есть.
const deviceRow = (k: MasterKey, d: Device) => {
const all = d.ips ?? [];
const { ip, serverId, other } = ipPick(d);
return (
<li className="mk-dev" key={d.id}>
<div className="mk-dev-head">
<span className="name-stack mk-dev-title">
<span className="mk-dev-name">{d.device_name || 'Устройство'}</span>
{deviceId(d)}
</span>
<span className="mk-device-sub">{platformLabel(d)}
{d.rekey_requested ? ' · ждёт смены ключа' : ''}{syncLabel(d)}</span>
{statusChip(d)}
{moreButton('device', d.id, `Ещё: ${d.device_name || 'устройство'}`)}
</div>
{statusChip(d)}
{/* как строка IP в карточке пользователя: адрес и чипы приоритета/торрентов */}
<div className="mk-device-ip">
<IcoGlobe />
{ipCell(d)}
<PriorityChip priority={d.priority} torrent={d.torrent} />
<div className="mk-dev-meta">
<span>{d.platform || '—'}</span>
{versionTag(d, 'start')}
<span aria-hidden="true">·</span>
<code className="mk-ip">{ip}</code>
{all.length > 1 && <span className="mk-ip-more" aria-label={all.map(x => `${serverName(nodes, x.server_id)}: ${x.ip}`).join(', ')}>+{all.length - 1}</span>}
{other && serverId !== undefined && <span>{serverName(nodes, serverId)}</span>}
</div>
<div className="mk-dev-meta">
<span className="mk-dev-traffic">↓ {bytes(d.rx)} ↑ {bytes(d.tx)}</span>
<PriorityChip priority={bgOnly(d.priority)} torrent={d.torrent} />
<TorrentChip torrent={d.torrent} />
{syncFlag(k, d) && <span>{syncFlag(k, d)}</span>}
{d.rekey_requested && <span>ждёт смены ключа</span>}
</div>
<div className="mk-device-traffic">
<span className="mk-metric"><i className="mk-metric-name" data-sfx=" rx">↓</i><b>{bytes(d.rx)}</b></span>
<span className="mk-metric"><i className="mk-metric-name" data-sfx=" tx">↑</i><b>{bytes(d.tx)}</b></span>
</div>
{deviceActions(d)}
</div>
</li>
);
</li>
);
};
return (
<>
@@ -401,6 +539,19 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
<p className="mk-notice">Подписка работает без TLS: ответы подписаны, но secret ссылки и конфиг видны в сети.</p>
)}
{masking && (
<div className="mk-warn" role="note">
<span className="mk-warn-text">
<b>Маскировка первого пакета · {serverName(nodes, getServerId() ?? 0)}</b>
Перед подключением клиент шлёт пакет, похожий на обычный трафик. Новый шаблон устройства sen://
получат в течение минуты.
</span>
<button className="btn btn--tonal" onClick={regenMasking} disabled={masking === 'busy'}>
<IcoRefresh /> Сменить
</button>
</div>
)}
<div className="toolbar">
<input className="field" placeholder="Метка (напр. Семья)" value={label}
onChange={e => setLabel(e.target.value)} onKeyDown={e => e.key === 'Enter' && create()} />
@@ -408,6 +559,7 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
aria-label="Лимит устройств" value={limit} onChange={e => setLimit(e.target.value)} />
<div className="toolbar-btns">
<button className="btn btn--primary" onClick={create} disabled={creating}><IcoPlus /> Создать ключ</button>
<button className="btn btn--tonal" onClick={load}><IcoRefresh /> Обновить</button>
<button className="btn btn--tonal" onClick={() => setBulk(true)} disabled={!live.length || !nodes.length}
title="Добавить или убрать серверы у всех мастер-ключей сразу"><IcoSettings /> Серверы для всех</button>
</div>
@@ -418,65 +570,56 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
<table className="mk-table">
<thead>
<tr>
<th>Имя</th><th>Статус</th><th>Приоритет</th><th>IP</th><th>Платформа</th>
<th>Имя</th><th>Статус</th><th>IP</th><th>Платформа</th>
<th>↓ rx</th><th>↑ tx</th><th>Устройства</th><th></th>
</tr>
</thead>
<tbody>
{keys.length === 0 ? (
<tr><td colSpan={9} className="empty">Нет мастер-ключей</td></tr>
<tr><td colSpan={8} className="empty">Нет мастер-ключей</td></tr>
) : keys.map(k => {
if (k.deleting) return (
<tr key={k.id} className="mk-tr-master mk-last">
<td><span className="mk-name"><IcoKey />{nameCell(k)}</span></td>
<td colSpan={8}>{deletingChip(k)}</td>
<td colSpan={7}>{deletingChip(k)}</td>
</tr>
);
const list = devs[k.id] ?? [];
const count = devs[k.id]?.length ?? k.devices;
const free = Math.max(0, k.device_limit - count);
const open = !folded.has(k.id);
return (
<Fragment key={k.id}>
<tr className="mk-tr-master">
<td><span className="mk-name">{caret(k)}<IcoKey />{nameCell(k)}{dataFlag(k)}</span></td>
{summary(list)}
<td><span className="mk-name">{caret(k, count)}<IcoKey />{nameCell(k)}{dataFlag(k)}</span></td>
{summary(k, list, count === 0)}
<td>{meter(k, count)}</td>
<td className="td-actions mk-td-actions">{actions(k)}</td>
</tr>
{tools === k.id && <tr className="mk-tr-tools"><td colSpan={9}>{toolbox(k)}</td></tr>}
{tools === k.id && <tr className="mk-tr-tools"><td colSpan={8}>{toolbox(k)}</td></tr>}
{open && list.map((d, i) => (
<tr key={d.id} className={`mk-tr-device${i === list.length - 1 && free === 0 ? ' mk-last' : ''}`}>
<tr key={d.id} className={`mk-tr-device${i === list.length - 1 ? ' mk-last' : ''}`}>
<td>
<span className="mk-indent">
<span className="name-stack">
{d.device_name || 'Устройство'}
<span className="tip-wrap" data-tip={`ID устройства ${d.device_id} · нажми, чтобы скопировать`}>
<button className="copy-id" aria-label={`Скопировать ID устройства ${d.device_id}`}
onClick={() => copyText(d.device_id).then(() => showMsg('ID устройства скопирован'), () => showMsg('Не удалось скопировать'))}>
{d.device_id.slice(0, 8)}…
</button>
{/* пометки — в строке ID, не рядом с именем: так колонка «Имя» уже и таблица влезает */}
<span className="mk-id-line">
{deviceId(d)}
{syncFlag(k, d) && <span className="tip-wrap tip-wrap--start mk-flag" data-tip={syncTip(k, d)}>· {syncFlag(k, d)}</span>}
{d.rekey_requested && <span className="mk-flag">· ждёт смены ключа</span>}
</span>
</span>
</span>
{d.rekey_requested && <span className="mk-flag"> · ждёт смены ключа</span>}
{syncLabel(d) && <span className="mk-flag">{syncLabel(d)}</span>}
</td>
<td>{statusChip(d)}</td>
<td><span className="user-chips"><PriorityChip priority={d.priority} torrent={d.torrent} /><TorrentChip torrent={d.torrent} /></span></td>
<td className="td-mono">{ipCell(d)}</td>
<td>{platformLabel(d)}</td>
<td><span className="user-chips">{statusChip(d)}<PriorityChip priority={bgOnly(d.priority)} torrent={d.torrent} /><TorrentChip torrent={d.torrent} /></span></td>
<td>{ipCell(d)}</td>
<td>{platformCell(d)}</td>
<td>{bytes(d.rx)}</td>
<td>{bytes(d.tx)}</td>
<td></td>
<td className="td-actions mk-td-actions">{deviceActions(d)}</td>
</tr>
))}
{open && free > 0 && (
<tr className="mk-tr-free mk-last">
<td colSpan={9}><span className="mk-indent">Свободно: {free}</span></td>
</tr>
)}
</Fragment>
);
})}
@@ -484,7 +627,8 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
</table>
</div>
{/* Мобильный: таблица скрыта (.table-card), то же — деревом карточек */}
{/* Телефон и планшет: таблица скрыта (.table-card) — карточка на ключ: шапка, сводка, действия,
ниже списком его устройства */}
{keys.length === 0 ? <p className="mk-empty mk-tree">Нет мастер-ключей</p> : (
<ul className="mk-tree">
{keys.map(k => {
@@ -492,39 +636,65 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
<li className="mk-root" key={k.id}>
<div className="mk-master">
<IcoKey />
<span className="mk-master-label">{k.label}<code className="mk-master-uuid">{k.uuid}</code></span>
{deletingChip(k)}
<span className="mk-master-label">{nameCell(k)}</span>
</div>
<div className="mk-master-sum">{deletingChip(k)}</div>
</li>
);
const list = devs[k.id] ?? [];
const count = devs[k.id]?.length ?? k.devices;
const free = Math.max(0, k.device_limit - count);
const isFolded = folded.has(k.id);
return (
<li className="mk-root" key={k.id}>
<div className="mk-master">
{caret(k)}
{caret(k, count)}
<IcoKey />
<span className="mk-master-label">{k.label}{dataFlag(k)}<code className="mk-master-uuid">{k.uuid}</code></span>
<span className="mk-master-label">{nameCell(k)}</span>
{meter(k, count)}
{actions(k)}
</div>
<div className="mk-master-sum">
{keyStatus(list, count === 0)}
{keyServers(k, list)}
{dataFlag(k)}
</div>
<div className="mk-master-actions">
<button className="btn btn--tonal" onClick={() => showQR(k)}><IcoQR /> QR</button>
<button className="btn btn--outline" onClick={() => copyLink(k)}><IcoCopy /> Ссылка</button>
{moreButton('key', k.id, `Ещё: ${k.label}`)}
</div>
{tools === k.id && toolbox(k)}
{!isFolded && (
<ul className="mk-children">
{list.map(d => deviceNode(k, d))}
{free > 0 && (
<li className="mk-node mk-node--free"><div className="mk-free">Свободно: {free}</div></li>
)}
</ul>
)}
{!isFolded && list.length > 0 && <ul className="mk-devs">{list.map(d => deviceRow(k, d))}</ul>}
</li>
);
})}
</ul>
)}
{menu && (() => {
const run = (f: () => void) => () => { setMenu(null); f(); };
const at = { top: menu.top, right: menu.right };
const cls = `mk-menu${menu.up ? ' mk-menu--up' : ''}`;
if (menu.kind === 'device') {
const d = Object.values(devs).flat().find(x => x.id === menu.id);
if (!d) return null;
return (
<div className={cls} role="menu" aria-label={`Устройство ${d.device_name}`} ref={menuRef} style={at}>
<button role="menuitem" className="mk-menu-item" onClick={run(() => newPsk(d))}><IcoRefresh /> Новый PSK</button>
<button role="menuitem" className="mk-menu-item mk-menu-item--danger" onClick={run(() => revoke(d))}><IcoTrash /> Отозвать</button>
</div>
);
}
const k = keys.find(x => x.id === menu.id);
if (!k) return null;
return (
<div className={cls} role="menu" aria-label={`Мастер-ключ ${k.label}`} ref={menuRef} style={at}>
{menu.full && <button role="menuitem" className="mk-menu-item" onClick={run(() => copyLink(k))}><IcoCopy /> Скопировать ссылку</button>}
<button role="menuitem" className="mk-menu-item" onClick={run(() => openTools(k))}><IcoSettings /> Настройки ключа</button>
<button role="menuitem" className="mk-menu-item mk-menu-item--danger" onClick={run(() => remove(k))}><IcoTrash /> Удалить</button>
</div>
);
})()}
{bulk && (
<BulkServersModal token={token} nodes={nodes} keys={live} defaults={defaults} onClose={() => setBulk(false)}
onDone={n => { setBulk(false); showMsg(n ? `Серверы обновлены у ${n} ключей` : 'Сохранено'); load(); }} />
@@ -538,8 +708,8 @@ export default function MasterKeysPage({ token, showMsg }: PageProps) {
onClick={async () => { await copyText(modal.link); showMsg('Ссылка скопирована'); }} />
<p className="qr-hint">Отсканируй в SenAWG · нажми на QR чтобы скопировать{modal.tls ? '' : ' · без TLS'}</p>
<div className="qr-actions">
<button className="btn btn--text" onClick={() => setModal(null)}>Закрыть</button>
<button className="btn btn--primary" onClick={async () => { await copyText(modal.link); showMsg('Ссылка скопирована'); }}><IcoCopy /> Скопировать</button>
<button className="btn btn--tonal" onClick={() => setModal(null)}>Закрыть</button>
</div>
</div>
</div>
awg-ui/src/tabs/masterkeys/masterkeys.css
+128 -150
View File
@@ -7,70 +7,84 @@ LICENSE file in the root directory of this source tree.
Общая дизайн-система — в App.css. */
.mk-notice {
font-size: 13px;
color: var(--error-text);
background: var(--error-bg);
border-radius: 16px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
color: var(--on-error-container);
background: var(--error-container);
border-radius: var(--shape-large);
padding: 10px 16px;
}
.mk-empty { font-size: 14px; color: var(--neutral-text); text-align: center; padding: 48px 0; }
/* Предупреждение о маскировке: тёплый tertiary, как чип «устарела» у версии сервера */
.mk-warn {
display: flex; align-items: center; gap: 12px;
background: var(--tertiary-container); color: var(--on-tertiary-container);
border-radius: var(--shape-large);
padding: 10px 12px 10px 16px;
}
.mk-warn-text {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
}
.mk-warn-text b { font-weight: var(--weight-medium); }
.mk-warn .btn { flex-shrink: 0; }
.mk-empty { font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--neutral-text); text-align: center; padding: 48px 0; }
.mk-limit-input { width: 88px !important; }
/* ── таблица (десктоп) ── */
.mk-table td, .mk-table th { white-space: nowrap; }
.mk-table .td-actions { width: 150px; }
.mk-table .mk-device-id { display: inline-block; max-width: 170px; vertical-align: middle; }
.mk-table .td-actions { width: 80px; } /* QR и «⋮» */
.mk-table th, .mk-table td { padding-left: 10px; padding-right: 10px; }
.mk-table th:first-child, .mk-table td:first-child { padding-left: 20px; }
.mk-table th:last-child, .mk-table td:last-child { padding-right: 16px; }
.mk-tr-master td { background: var(--surface-container); font-weight: 500; padding-top: 6px; padding-bottom: 6px; }
.mk-tr-master td { background: var(--surface-container); font-weight: var(--weight-medium); padding-top: 6px; padding-bottom: 6px; }
.mk-tr-master:hover td { background: var(--surface-container); }
.mk-name { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); }
.mk-master-uuid {
display: block;
font-family: var(--mono); font-size: 12px; font-weight: 400;
color: var(--neutral-text);
overflow: hidden; text-overflow: ellipsis;
}
.mk-name .mk-caret { margin-left: -8px; }
.mk-tr-master .mk-name { color: var(--on-surface); }
.mk-tr-master .mk-name svg { color: var(--primary); }
.mk-tr-tools td { background: var(--surface-container); padding-top: 4px; padding-bottom: 12px; } /* слева/справа — общие отступы колонок таблицы: блок стоит под заголовком «Имя» */
.mk-tr-tools:hover { background: transparent; }
.mk-tr-device td, .mk-tr-free td { padding-top: 10px; padding-bottom: 10px; }
.mk-flag { color: var(--neutral-text); font-size: 12px; }
.mk-tr-device td { padding-top: 10px; padding-bottom: 10px; }
.mk-flag { color: var(--neutral-text); font-size: var(--body-small-size); line-height: var(--body-small-line); }
.mk-id-line { display: inline-flex; align-items: baseline; gap: 6px; }
/* чипы приоритета и торрентов в одной ячейке — как во вкладке «Пользователи» */
.mk-table .user-chips { display: inline-flex; flex-wrap: nowrap; gap: 6px; }
.mk-ip { font-family: var(--mono); }
.mk-ip { font-family: var(--mono); font-size: var(--body-small-size); line-height: var(--body-small-line); }
/* вторая строка ячейки: сервер чужого адреса, версия клиента */
.mk-sub { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mk-ip-line { display: inline-flex; align-items: center; gap: 6px; }
.mk-ip-more {
font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--on-surface-variant);
background: var(--surface-container-high); border-radius: var(--shape-full); padding: 0 6px;
}
.mk-srv, .mk-ver { font-weight: var(--weight-regular); }
.mk-ver { align-self: flex-start; padding-top: 0; padding-bottom: 0; font-family: var(--mono); }
/* иерархия: линия слева от имени и «ножка» к каждой строке; у последней линия обрывается */
.mk-tr-device td:first-child, .mk-tr-free td:first-child {
.mk-tr-device td:first-child {
background: linear-gradient(var(--outline), var(--outline)) 30px 0 / 2px 100% no-repeat;
}
.mk-tr-device.mk-last td:first-child, .mk-tr-free.mk-last td:first-child { background-size: 2px 50%; }
.mk-tr-device.mk-last td:first-child { background-size: 2px 50%; }
.mk-indent { position: relative; display: inline-block; padding-left: 36px; }
.mk-indent::before {
content: ''; position: absolute; left: 10px; top: 50%; width: 16px;
border-top: 2px solid var(--outline);
}
.mk-tr-free td { color: var(--neutral-dot); font-size: 12px; }
.mk-tr-free:hover { background: transparent; }
/* ── дерево (мобильный) ── */
.mk-tree, .mk-children { list-style: none; margin: 0; padding: 0; }
.mk-tree, .mk-devs { list-style: none; margin: 0; padding: 0; }
.mk-tree { display: none; flex-direction: column; gap: 12px; } /* только мобильный */
.mk-root {
background: var(--surface-bright);
border: 1px solid var(--outline-variant);
border-radius: var(--r-card);
padding: 12px 18px 14px;
border-radius: var(--shape-extra-large);
padding: 12px 16px;
}
/* родитель */
/* шапка ключа: стрелка, ключ, метка с коротким UUID, полоска устройств */
.mk-master { display: flex; align-items: center; gap: 10px; color: var(--primary); min-height: 42px; }
.mk-master-label {
font-size: 16px;
font-weight: 500;
font-size: var(--title-medium-size); line-height: var(--title-medium-line);
font-weight: var(--weight-medium);
color: var(--on-surface);
flex: 1;
min-width: 0;
@@ -83,13 +97,38 @@ LICENSE file in the root directory of this source tree.
border: 0; border-radius: 50%;
background: transparent;
color: var(--neutral-text);
font-size: 16px;
font-size: var(--body-large-size); line-height: var(--body-large-line);
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s;
transition: transform var(--duration-short3) var(--ease-standard);
}
.mk-caret:hover { background: var(--state-neutral); }
.mk-caret--folded { transform: rotate(-90deg); }
.mk-caret-gap { width: 28px; flex-shrink: 0; } /* ключ без устройств: место стрелки */
.mk-name .mk-caret-gap { margin-left: -8px; }
/* Меню «⋮» ключа (MD3 menu): плавает над таблицей, у кнопки справа */
.mk-menu {
position: fixed; z-index: 30;
min-width: 200px; padding: 6px;
background: var(--surface-container);
border-radius: var(--shape-large);
box-shadow: var(--elevation-2);
animation: mk-menu-in var(--duration-short4) var(--ease-emphasized-decelerate);
transform-origin: top right;
}
.mk-menu--up { transform: translateY(-100%); transform-origin: bottom right; }
@keyframes mk-menu-in { from { opacity: 0; scale: .92; } }
.mk-menu-item {
display: flex; align-items: center; gap: 12px; width: 100%;
min-height: 40px; padding: 0 12px;
border: 0; border-radius: var(--shape-medium); background: transparent;
font-family: var(--font); font-size: var(--label-large-size); line-height: var(--label-large-line); font-weight: var(--weight-medium);
color: var(--on-surface); text-align: left; cursor: pointer;
}
.mk-menu-item svg { color: var(--on-surface-variant); flex-shrink: 0; }
.mk-menu-item--danger, .mk-menu-item--danger svg { color: var(--error); }
@media (pointer: coarse) { .mk-menu-item { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .mk-menu { animation: none; } }
.mk-tools {
display: grid;
@@ -103,10 +142,10 @@ LICENSE file in the root directory of this source tree.
display: flex; flex-direction: column; gap: 10px;
background: var(--surface-bright);
border: 1px solid var(--outline-variant);
border-radius: 16px;
border-radius: var(--shape-large);
padding: 12px 16px 14px;
}
.mk-box-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--label); }
.mk-box-title { margin: 0; font-size: var(--title-small-size); line-height: var(--title-small-line); font-weight: var(--weight-medium); color: var(--on-surface-variant); }
.mk-box .mk-box-title { margin-bottom: 2px; }
/* строка настройки: слева название и пояснение, справа контрол */
.mk-setting {
@@ -117,25 +156,26 @@ LICENSE file in the root directory of this source tree.
.mk-box-title + .mk-setting { border-top: 0; padding-top: 4px; }
.mk-setting:last-child { padding-bottom: 0; }
.mk-setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-setting-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
.mk-setting-hint { font-size: 12px; color: var(--neutral-text); }
.mk-setting-name { font-size: var(--title-small-size); line-height: var(--title-small-line); font-weight: var(--weight-medium); color: var(--on-surface); }
.mk-setting-hint { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mk-setting-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-uuid {
font-family: var(--mono); font-size: 12px; color: var(--on-surface);
font-family: var(--mono); font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--on-surface);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.mk-setting-ctl .btn { height: 36px; padding: 0 16px; font-size: 13px; }
.mk-setting-ctl .btn { height: 36px; padding: 0 16px; font-size: var(--label-large-size); line-height: var(--label-large-line); }
.mk-limit-input { height: 36px; width: 80px !important; text-align: center; }
/* прогресс занятых слотов с числом внутри; полный — цветом «ошибка».
/* прогресс занятых слотов с числом внутри: обычная заливка primary, цветом — только когда мест
не осталось (тёплый: это повод присмотреться, а не ошибка).
Текст дублируется: тёмный на дорожке, светлый поверх заливки (обрезается ею). */
.mk-meter {
--mk-w: 136px;
--meter-fill: var(--success-dot); /* < 2/3 — зелёный */
--meter-on: #2a2118; /* цвет числа поверх заливки */
--meter-fill: var(--primary);
--meter-on: var(--on-primary); /* цвет числа поверх заливки */
position: relative;
width: var(--mk-w); height: 20px;
border-radius: var(--r-pill);
border-radius: var(--shape-full);
background: var(--outline-variant);
overflow: hidden;
flex-shrink: 0;
@@ -144,7 +184,7 @@ LICENSE file in the root directory of this source tree.
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--meter-fill);
overflow: hidden;
transition: width 0.25s, background 0.25s;
transition: width var(--duration-medium1) var(--ease-standard), background var(--duration-medium1) var(--ease-standard);
}
/* числа по краям внутри полоски: текущее слева, лимит справа */
.mk-meter-text {
@@ -153,90 +193,62 @@ LICENSE file in the root directory of this source tree.
box-sizing: border-box;
padding: 0 11px;
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; font-weight: 500;
font-size: var(--label-medium-size); line-height: var(--label-medium-line); font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
color: var(--on-surface);
}
.mk-meter-text--on { color: var(--meter-on); }
.mk-meter--warn { --meter-fill: var(--warn-dot); } /* от 2/3 — оранжевый */
.mk-meter--full { --meter-fill: var(--error-dot); --meter-on: #fff; } /* лимит — красный */
:root[data-theme="dark"] .mk-meter--full { --meter-on: #2a2118; }
.mk-meter--full { --meter-fill: var(--warn-dot); --meter-on: #2a2118; } /* все места заняты */
.mk-box .tip-wrap { width: 100%; }
/* дети: вертикальная линия слева и «ножка» к каждому узлу */
.mk-children { margin: 8px 0 0 18px; padding-left: 28px; border-left: 2px solid var(--outline); }
.mk-node { position: relative; padding: 4px 0; }
.mk-node::before {
content: '';
position: absolute;
left: -28px; top: 50%;
width: 28px;
border-top: 2px solid var(--outline);
}
/* последний узел: линия родителя обрывается на его «ножке» */
.mk-node:last-child::after {
content: '';
position: absolute;
left: -30px; top: calc(50% + 1px); bottom: 0;
width: 2px;
background: var(--surface-bright);
}
/* сводка (статус, серверы) и действия ключа */
.mk-master-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.mk-master-sum:empty { display: none; }
.mk-master-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mk-master-actions .btn { flex: 1; }
.mk-tree .mk-more { width: 40px; height: 40px; }
/* на телефоне .tip-wrap по умолчанию во всю ширину — здесь чипы и ID идут в строку */
.mk-tree .tip-wrap { width: auto; }
.mk-device {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: var(--surface-container);
border-radius: 14px;
padding: 8px 14px;
/* устройства ключа — строками списка под ним, разделены линией */
.mk-devs { margin: 12px -16px -12px; border-top: 1px solid var(--outline-variant); }
.mk-dev { padding: 10px 16px; }
.mk-dev + .mk-dev { border-top: 1px solid var(--outline-variant); }
.mk-dev-head { display: flex; align-items: center; gap: 8px; }
.mk-dev-title { flex: 1; min-width: 0; }
.mk-dev-name {
font-size: var(--title-small-size); line-height: var(--title-small-line); font-weight: var(--weight-medium); color: var(--on-surface);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-device-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
.mk-device-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mk-device-id {
font-family: var(--mono);
font-size: 11px;
color: var(--neutral-text);
background: var(--surface-bright);
border-radius: var(--r-pill);
padding: 1px 8px;
min-width: 0;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.mk-dev-head .mk-more { margin: -4px -8px -4px 0; }
.mk-dev-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px;
font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text);
}
.mk-device-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
.mk-device-sub { font-size: 12px; color: var(--neutral-text); }
.mk-device-ip {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
width: 100%;
color: var(--neutral-text);
}
.mk-device-ip .mk-ip { font-size: 13px; }
.mk-device-ip .tip-wrap { width: auto; }
.mk-device-traffic { display: flex; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--neutral-text); }
.mk-metric { display: inline-flex; gap: 4px; }
.mk-metric i, .mk-metric b { font-style: normal; font-weight: 400; }
.mk-dev-meta .chip { font-size: var(--body-small-size); }
.mk-dev-traffic { font-family: var(--mono); white-space: pre; }
.mk-free {
border: 1px dashed var(--outline);
border-radius: 14px;
padding: 10px 14px;
font-size: 13px;
color: var(--neutral-dot);
}
/* ── мобильный (design.md, часть IV): одна колонка, тач-цели ≥ 44px, rx/tx блоками
50/50, действия рядом с большим пальцем ── */
@media (max-width: 640px) {
/* ── телефон и планшет (design.md, часть IV): карточка на ключ, устройства строками, тач-цели ≥ 44px ── */
/* compact и medium (< 840px): карточки вместо таблицы */
@media (max-width: 839px) {
.mk-warn { flex-wrap: wrap; padding: 12px 12px 12px 16px; }
.mk-warn-text { flex-basis: 100%; }
.mk-warn .btn { margin-left: auto; }
.mk-tree { display: flex; }
}
@media (pointer: coarse) {
.mk-tree .mk-more { width: 44px; height: 44px; }
}
@media (max-width: 599px) {
.mk-limit-input { width: 100% !important; }
.mk-root { padding: 12px; }
.mk-devs { margin: 12px -12px -12px; }
.mk-dev { padding: 10px 12px; }
/* родитель: шапка, затем ряд действий на всю ширину */
.mk-master { flex-wrap: wrap; row-gap: 10px; }
.mk-master .actions { width: 100%; gap: 8px; }
.mk-caret { width: 44px; height: 44px; margin: -6px 0 -6px -8px; }
.mk-caret-gap { width: 44px; margin-left: -8px; }
.mk-meter { --mk-w: 112px; height: 24px; }
/* настройки узла: поля и кнопки на всю ширину */
@@ -246,38 +258,6 @@ LICENSE file in the root directory of this source tree.
.mk-setting-ctl .btn { flex: 1; height: 44px; }
.mk-setting-ctl .mk-limit-input { width: 100% !important; flex: 1; height: 44px; }
.mk-tools .btn { width: 100%; height: 44px; justify-content: center; }
/* дерево уже: отступы поменьше, «ножки» короче */
.mk-children { margin-left: 8px; padding-left: 14px; }
.mk-node { padding: 4px 0; }
.mk-node::before { left: -14px; width: 14px; }
.mk-node:last-child::after { left: -16px; }
/* устройство — карточка: заголовок + чип, метрики 50/50, ряд действий */
.mk-device { border-radius: 16px; padding: 12px; gap: 10px; }
.mk-device-main { flex: 1 1 0; }
.mk-device-title { flex-wrap: wrap; row-gap: 2px; }
.mk-device-id { max-width: 100%; }
.mk-device-traffic { width: 100%; gap: 8px; }
.mk-metric {
flex: 1; flex-direction: column; gap: 2px;
background: var(--surface-bright);
border-radius: 16px; padding: 8px 12px;
}
.mk-metric i { font-family: var(--font, inherit); font-size: 12px; color: var(--neutral-text); }
.mk-metric-name::after { content: attr(data-sfx); }
.mk-metric b { font-size: 16px; font-weight: 500; color: var(--on-surface); }
/* кнопки действий: контурные, на всю ширину ряда, 44px */
.mk-device .actions { width: 100%; gap: 8px; }
.mk-master .btn-icon, .mk-device .btn-icon {
flex: 1; width: auto; height: 44px;
border: 1px solid var(--outline);
border-radius: var(--r-pill);
}
.mk-master .btn-icon--danger, .mk-device .btn-icon--danger { border-color: var(--error-dot); }
.mk-free { padding: 12px; font-size: 13px; }
}
/* «Серверы для всех» (BulkServersModal) */
@@ -285,27 +265,25 @@ LICENSE file in the root directory of this source tree.
.bs-list { display: flex; flex-direction: column; gap: 8px; }
.bs-row {
display: flex; align-items: center; gap: 10px;
background: var(--surface-container); border-radius: 12px; padding: 8px 8px 8px 14px;
font-size: 13px; color: var(--on-surface);
background: var(--surface-container); border-radius: var(--shape-medium); padding: 8px 8px 8px 14px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-surface);
}
.bs-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bs-sub { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--neutral-text); }
.bs-sub { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.bs-sub .server-pick-ip { margin-left: 0; }
.bs-opts { display: flex; gap: 4px; flex-shrink: 0; }
.bs-opt {
min-height: 36px; padding: 0 12px;
font: inherit; font-size: 13px; color: var(--on-surface);
font: inherit; font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-surface);
background: var(--surface-bright);
border: 1px solid var(--outline); border-radius: var(--r-pill);
border: 1px solid var(--outline); border-radius: var(--shape-full);
cursor: pointer; white-space: nowrap;
}
.bs-opt:hover { background: var(--state-primary); }
.bs-opt--on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; font-weight: 500; }
.bs-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface); cursor: pointer; }
.bs-opt--on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; font-weight: var(--weight-medium); }
.bs-check { display: flex; align-items: center; gap: 8px; font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-surface); cursor: pointer; }
.bs-check input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; }
@media (max-width: 640px) {
@media (max-width: 599px) {
.bs-row { flex-wrap: wrap; }
.bs-opts { width: 100%; }
.bs-opt { flex: 1; }
}
.bs-modal .btn:disabled { opacity: .5; cursor: default; }
awg-ui/src/tabs/migrate/metadata.json
-11
View File
@@ -1,11 +0,0 @@
{
"id": "migrate",
"label": "Перенос",
"icon": "move",
"group": "server",
"order": 1.9,
"chrome": {
"serverBar": false,
"restart": false
}
}
awg-ui/src/tabs/migrate/migrate.css
-26
View File
@@ -1,26 +0,0 @@
/*
Copyright (c) 2026 Ivan Vasilev
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* Стили вкладки «Перенос». Общая дизайн-система — в App.css. */
.mv-box { display: flex; flex-direction: column; gap: 10px; background: var(--surface-container); border-radius: 16px; padding: 12px 16px; }
.mv-title { margin: 0; font-size: 14px; font-weight: 500; }
.mv-text { margin: 0; font-size: 14px; line-height: 1.5; }
.mv-muted { font-size: 13px; color: var(--neutral-text); }
.mv-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.mv-row { display: flex; gap: 8px; }
.mv-row .field { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.mv-row--end { justify-content: flex-end; flex-wrap: wrap; }
.mv-self { align-self: flex-start; }
.mv-notice {
font-size: 13px; color: var(--error-text); background: var(--error-bg);
border-radius: 16px; padding: 10px 16px; margin: 0;
}
.mv-box .node-modal-cmd { background: var(--surface-bright); }
@media (max-width: 640px) { .mv-row:not(.mv-row--end) { flex-direction: column; } }
.mv-box .btn:disabled { opacity: .5; cursor: default; }
.mv-checks { display: flex; flex-direction: column; gap: 8px; }
.mv-check { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.5; }
.mv-check .chip { flex-shrink: 0; }
awg-ui/src/tabs/monitor/index.tsx
+106 -154
View File
@@ -2,20 +2,16 @@
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useCallback, useRef } from 'react';
import { apiFetch, copyText, getServerId, type NodeInfo, type PageProps } from '../../lib/shared';
import { IcoCopy, IcoTrash } from '../../components/icons';
import { apiFetch, getServerId, openTab, announcePrometheus, type NodeInfo, type PageProps } from '../../lib/shared';
import { IcoGear } from '../../components/icons';
import type { MonitorStatus as Status } from '../settings/prometheus';
import LineChart from '../../components/LineChart';
import ServerSelect, { ALL_SERVERS } from '../../components/ServerSelect';
import './monitor.css';
// Вкладка «Монитор»: встроенный Prometheus и основные графики.
// Кнопка «Подключить Prometheus» просит awg-ctrl сервера поставить его (`awg-ctrl monitor install`, root;
// сама панель пакетов не ставит). У панели без VPN он ставится на ноду, и панель читает его через её агента.
// Вкладка «Монитор»: основные графики со встроенного Prometheus. Ставится и удаляется он в «Настройках»,
// раздел «Prometheus» (tabs/settings/prometheus); пока его нет, здесь — карточка со ссылкой туда.
// Графики читают Prometheus через фиксированные запросы панели (internal/ui/monitor.go).
interface Status {
ready: boolean; can_install: boolean; command: string;
host: { id: number; name: string } | null; // Prometheus на ноде (или будет поставлен туда); null — на этом сервере
job: { action: 'install' | 'remove'; running: boolean; exit: number | null; log: string } | null; // последняя операция
}
type Pts = [number, number][];
interface Overview {
range: string; step: number; from: number; to: number;
@@ -27,6 +23,24 @@ interface Overview {
total: Series;
}
interface Series { down: Pts; up: Pts; online: Pts; heavy: Pts; drops: Pts; cpu: Pts; mem: Pts }
type Row = Overview['servers'][number];
type NumKey = 'down' | 'up' | 'online' | 'heavy' | 'cpu' | 'mem' | 'cores' | 'mem_total' | 'used_down' | 'used_up';
// «Все серверы» — сводка «сейчас» для плиток: скорости, устройства, ядра, память и объём складываем,
// загрузку процессора и памяти — среднее по серверам (как и ряды total в monitor.go).
function sumUp(rows: Row[]): Row | undefined {
if (rows.length <= 1) return rows[0];
const sum = (k: NumKey) => rows.some(r => r[k] != null) ? rows.reduce((n, r) => n + (r[k] ?? 0), 0) : null;
const avg = (k: NumKey) => {
const v = rows.map(r => r[k]).filter((x): x is number => x != null);
return v.length ? v.reduce((a, b) => a + b, 0) / v.length : null;
};
return {
id: ALL_SERVERS, name: 'Все серверы', ok: rows.every(r => r.ok), congested: rows.some(r => r.congested),
down: sum('down'), up: sum('up'), online: sum('online'), heavy: sum('heavy'), cpu: avg('cpu'), mem: avg('mem'),
cores: sum('cores'), mem_total: sum('mem_total'), used_down: sum('used_down'), used_up: sum('used_up'),
};
}
const RANGES: [string, string][] = [['1h', '1 час'], ['6h', '6 часов'], ['24h', '24 часа'], ['7d', '7 дней'], ['30d', '30 дней']];
@@ -51,28 +65,6 @@ function Bar({ v, label }: { v: number | null | undefined; label: string }) {
</span>
);
}
// Прогресс операции из строк «N/M шаг», которые печатает сам установщик (cli/src/monitor.ts). Шаг N считаем
// выполненным наполовину: так полоска не стоит на нуле, пока идёт долгий apt, и не обещает больше, чем известно.
const STEP = /^(\d+)\/(\d+)\s+(.+)$/;
function JobProgress({ job, starting }: { job: Status['job']; starting: boolean }) {
let step: [number, number, string] | null = null;
for (const l of job?.log.split('\n') ?? []) { const m = STEP.exec(l.trim()); if (m) step = [Number(m[1]), Number(m[2]), m[3]]; }
const failed = !!job && job.exit !== null && job.exit !== 0;
const done = !!job && job.exit === 0;
const pct = done ? 100 : step ? ((step[0] - 0.5) / step[1]) * 100 : 0;
const label = failed ? `Не удалось (код ${job!.exit})`
: done ? (job!.action === 'install' ? 'Готово' : 'Удалено')
: step ? `Шаг ${step[0]} из ${step[1]}: ${step[2]}` : 'Запуск…';
return (
<div className="mon-progress" aria-live="polite">
<span className={`mon-pbar${failed ? ' mon-pbar--bad' : done ? ' mon-pbar--ok' : !step && (starting || job?.running) ? ' mon-pbar--wait' : ''}`}
role="progressbar" aria-label="Ход операции" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(pct)}>
<i style={{ width: `${pct}%` }} />
</span>
<span className="mon-progress-label">{label}</span>
</div>
);
}
const gb = (b: number) => `${nf(b / 2 ** 30, 1)} ГБ`;
// Объём трафика — десятичные единицы, как считают провайдеры: 1 ТБ = 10¹² байт
function vol(b: number): string {
@@ -81,39 +73,42 @@ function vol(b: number): string {
return `${nf(b / 1e6, 0)} МБ`;
}
export default function MonitorPage({ token, showMsg }: PageProps) {
export default function MonitorPage({ token }: PageProps) {
const [status, setStatus] = useState<Status | null>(null);
const [range, setRange] = useState('1h');
const [ov, setOv] = useState<Overview | null>(null);
const [ovErr, setOvErr] = useState('');
const [loading, setLoading] = useState(false);
const [pending, setPending] = useState<'install' | 'remove' | null>(null); // операция запущена из этой вкладки
const [server, setServer] = useState<NodeInfo | null>(null); // показанный сервер: выбран в другой вкладке, здесь не меняется
const [nodes, setNodes] = useState<NodeInfo[]>([]);
// Чьи графики: сервер (по умолчанию — выбранный в шапке) или ALL_SERVERS. Выбор свой, шапку не меняет.
const [view, setView] = useState(() => getServerId() ?? 0);
const alive = useRef(true);
// StrictMode монтирует эффект дважды: флаг надо вернуть в true, иначе все ответы отбрасываются
useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
const loadStatus = useCallback(async () => {
try { const s = await apiFetch('GET', `/ui/monitor?server=${getServerId() ?? 0}`, token) as Status; if (alive.current) setStatus(s); return s; }
try { const s = await apiFetch('GET', `/ui/monitor?server=${getServerId() ?? 0}`, token) as Status; announcePrometheus(s.ready); if (alive.current) setStatus(s); return s; }
catch { return null; }
}, [token]);
const loadOverview = useCallback(async () => {
setLoading(true);
try {
const o = await apiFetch('GET', `/ui/monitor/overview?range=${range}&server=${getServerId() ?? 0}`, token) as Overview;
// Без ?server= monitor.go отдаёт все серверы: total — сумма (процессор и память — среднее), servers — каждый
const q = view === ALL_SERVERS ? '' : `&server=${view}`;
const o = await apiFetch('GET', `/ui/monitor/overview?range=${range}${q}`, token) as Overview;
if (alive.current) { setOv(o); setOvErr(''); }
} catch (e: any) { if (alive.current) setOvErr(e?.response?.data?.error ?? 'Не удалось получить данные'); }
finally { if (alive.current) setLoading(false); }
}, [token, range]);
}, [token, range, view]);
useEffect(() => { void loadStatus(); }, [loadStatus]);
// Название и состояние сервера для заголовка; список серверов на этой вкладке не показываем
// Серверы для выбора (и их связь — точки на плашках)
useEffect(() => {
const load = () => apiFetch('GET', '/ui/nodes', token)
.then(r => { if (alive.current) setServer((r.nodes as NodeInfo[]).find(n => n.id === (getServerId() ?? 0)) ?? null); })
.catch(() => { /* заголовок необязателен */ });
.then(r => { if (alive.current) setNodes(r.nodes ?? []); })
.catch(() => { /* выбор необязателен — останется текущий сервер */ });
void load();
const t = setInterval(load, 15000);
return () => clearInterval(t);
@@ -127,116 +122,43 @@ export default function MonitorPage({ token, showMsg }: PageProps) {
return () => clearInterval(t);
}, [status?.ready, loadOverview]);
// Пока идёт установка или удаление — следим за ходом: раз в 2 с читаем статус и лог
// Пока Prometheus нет — раз в 10 с проверяем: его могли поставить в «Настройках»
useEffect(() => {
if (!pending && !status?.job?.running) return;
const t = setInterval(async () => {
const s = await loadStatus();
if (s && !s.job?.running) setPending(null);
}, 2000);
if (!status || status.ready) return;
const t = setInterval(() => { void loadStatus(); }, 10000);
return () => clearInterval(t);
}, [pending, status?.job?.running, loadStatus]);
}, [status, loadStatus]);
const run = async (action: 'install' | 'remove') => {
if (action === 'remove' && !confirm('Удалить Prometheus? Он будет остановлен, а накопленные графики (до 31 дня) сотрутся. Панель продолжит отдавать /metrics.')) return;
setPending(action);
try { await apiFetch('POST', `/ui/monitor/${action}?server=${getServerId() ?? 0}`, token); await loadStatus(); }
catch (e: any) { setPending(null); showMsg(e?.response?.data?.error ?? (action === 'install' ? 'Не удалось запустить установку' : 'Не удалось запустить удаление')); }
};
const working = !!pending || !!status?.job?.running;
// Прогресс рядом с кнопкой: для установки — пока Prometheus нет (там же виден итог удаления), для удаления — только удаление
const progressFor = (action: 'install' | 'remove' | 'any') => {
const j = status?.job;
const mine = !!j && (action === 'any' || j.action === action) && (j.running || j.exit !== null);
const starting = !!pending && (action === 'any' || action === pending);
return mine || starting ? <JobProgress job={mine ? j! : null} starting={starting} /> : null;
};
// Полный лог — только при ошибке: оператору нужна причина, а не поток строк apt
const failureLog = () => {
const j = status?.job;
if (!j || j.exit === null || j.exit === 0) return null;
return (
<>
<pre className="mon-log">{j.log.trim()}</pre>
<p className="login-error">
{j.action === 'install' ? 'Установка' : 'Удаление'} не удалась. Если дело в правах или пакетах, выполните вручную: <b>{`awg-ctrl monitor ${j.action}`}</b>
</p>
</>
);
};
// ───────── установка ─────────
// Prometheus нет — графиков не будет: ведём в «Настройки», где он ставится
const setup = status && !status.ready && (
<section className="mon-card" aria-labelledby="mon-setup">
<div className="mon-head">
<h3 className="mon-title" id="mon-setup">Мониторинг</h3>
<span className="chip chip--offline"><span className="chip-dot" />не подключён</span>
<span className="chip chip--offline">
<span className="chip-dot" />{status.job?.running && status.job.action === 'install' ? 'ставится' : 'не подключён'}
</span>
</div>
<p className="mon-hint">
Панель поставит Prometheus {status.host ? <>на сервер <b>{status.host.name}</b></> : 'на этот сервер'} и сама подключит его к своим метрикам: основные графики —
скорость, устройства онлайн, нагрузка на канал, — появятся здесь через минуту-две. Prometheus слушает
только 127.0.0.1, наружу он не открывается.
Графики — скорость, устройства онлайн, нагрузка на канал — строит встроенный Prometheus.
Он ставится в «Настройках», на вкладке «Prometheus»; графики появятся здесь через минуту-две после установки.
</p>
{status.can_install ? (
<div className="mon-actions">
<button className="btn btn--primary" onClick={() => run('install')} disabled={working}>
{pending === 'install' || (status.job?.running && status.job.action === 'install') ? 'Устанавливаем…' : 'Подключить Prometheus'}
</button>
{progressFor('any')}
</div>
) : (
<>
<p className="mon-hint">
У этой панели нет своего VPN-сервера: выберите ноду в сервер-баре, чтобы поставить Prometheus на неё
кнопкой, или выполните на ней от root:
</p>
<code className="mon-code">{status.command}</code>
<div className="mon-actions">
<button className="btn btn--tonal" onClick={() => copyText(status.command).then(() => showMsg('Команда скопирована'))}>
<IcoCopy /> Скопировать
</button>
</div>
</>
)}
{failureLog()}
</section>
);
// Удаление: только пока Prometheus есть
const manage = status?.ready && (
<section className="mon-card" aria-labelledby="mon-manage">
<div className="mon-head">
<h3 className="mon-title" id="mon-manage">Prometheus</h3>
<span className="chip chip--online"><span className="chip-dot" />работает</span>
<div className="mon-actions">
<button className="btn btn--primary" onClick={() => openTab('settings', 'prom')}>
<IcoGear /> Открыть настройки
</button>
</div>
<p className="mon-hint">
Стоит {status.host ? <>на сервере <b>{status.host.name}</b> (панель читает его через агента ноды)</> : 'на этом сервере'} и
слушает только 127.0.0.1:9090, графики хранит 31 день. Удаление остановит его, снимет пакет и сотрёт накопленные данные.
</p>
{status.can_install ? (
<div className="mon-actions">
<button className="btn btn--danger" onClick={() => run('remove')} disabled={working}>
<IcoTrash /> {pending === 'remove' || (status.job?.running && status.job.action === 'remove') ? 'Удаляем…' : 'Удалить Prometheus'}
</button>
{progressFor('remove')}
</div>
) : (
<>
<p className="mon-hint">Выполните на сервере с Prometheus от root:</p>
<code className="mon-code">awg-ctrl monitor remove</code>
</>
)}
{status.job?.action === 'remove' && failureLog()}
</section>
);
// ───────── дашборд ─────────
// Вкладка показывает один сервер — выбранный в сервер-баре; при смене сервера App монтирует её заново.
const one = ov?.servers[0];
// Один сервер или сводка по всем (sumUp) — плитки читают одно и то же
const all = view === ALL_SERVERS;
const one = all ? sumUp(ov?.servers ?? []) : ov?.servers[0];
// Кого нет в сумме: сервер не отдал метрики (ok = false) или на связи, а рядов нет совсем (старый агент)
const silent = !all || !ov ? [] : [
...ov.servers.filter(r => !r.ok).map(r => r.name),
...nodes.filter(n => n.online && !ov.servers.some(r => r.id === n.id)).map(n => n.health?.server || n.name),
];
const data = ov?.total ?? null;
const cur = data && {
// Скорость «сейчас» — от сервера: на неделе/месяце последняя точка ряда — среднее за шаг, а не текущее
@@ -249,18 +171,30 @@ export default function MonitorPage({ token, showMsg }: PageProps) {
const unit = peak >= 1e9 ? { name: 'Гбит/с', div: 1e9 } : peak >= 1e6 ? { name: 'Мбит/с', div: 1e6 } : peak >= 1e3 ? { name: 'Кбит/с', div: 1e3 } : { name: 'бит/с', div: 1 };
const dashboard = status?.ready && (
<>
{/* Период — единственный фильтр: он задаёт окно для всего ниже */}
<div className="mon-filters" role="group" aria-label="Период">
{RANGES.map(([id, label]) => (
<button key={id} type="button" className={`mon-range${range === id ? ' mon-range--on' : ''}`}
aria-pressed={range === id} onClick={() => setRange(id)}>{label}</button>
))}
{/* Период слева задаёт окно для всего ниже; справа — чьи графики: кнопка и меню, как выбор
сервера в шапке, «Все серверы» — сводка по всем */}
<div className="mon-toolbar">
<div className="mon-filters" role="group" aria-label="Период">
{RANGES.map(([id, label]) => (
<button key={id} type="button" className={`mon-range${range === id ? ' mon-range--on' : ''}`}
aria-pressed={range === id} onClick={() => setRange(id)}>{label}</button>
))}
</div>
{nodes.length > 0 && (
<ServerSelect name="mon-server-menu" nodes={nodes} value={view} onChange={setView} all pickOffline />
)}
</div>
{ovErr && <p className="login-error">{ovErr}</p>}
{ov && !one?.ok && (
{ov && !all && !one?.ok && (
<p className="mon-hint mon-notice">Этот сервер сейчас не отдаёт метрики: графики могут быть неполными или пустыми.</p>
)}
{ov && all && (ov.servers.length === 0 || silent.length > 0) && (
<p className="mon-hint mon-notice">
{ov.servers.length === 0 ? 'Метрики сейчас не отдаёт ни один сервер.'
: `Не отдают метрики: ${silent.join(', ')} — в сумме их нет.`}
</p>
)}
<div className="mon-tiles">
<div className="mon-tile">
@@ -303,14 +237,14 @@ export default function MonitorPage({ token, showMsg }: PageProps) {
<div className="mon-tile-meter">
<span className="mon-tile-value mon-tile-rate">
{one?.cpu != null ? `${nf(one.cpu, 0)} %` : '—'}
<span className="mon-tile-sub">процессор{one?.cores ? ` · ${nf(one.cores, 0)} ядер` : ''}</span>
<span className="mon-tile-sub">процессор{all ? ` · в среднем по ${ov?.servers.length ?? 0}` : one?.cores ? ` · ${nf(one.cores, 0)} ядер` : ''}</span>
</span>
<Bar v={one?.cpu} label="Загрузка процессора" />
</div>
<div className="mon-tile-meter">
<span className="mon-tile-value mon-tile-rate">
{one?.mem != null ? `${nf(one.mem, 0)} %` : '—'}
<span className="mon-tile-sub">память{one?.mem_total ? ` · из ${gb(one.mem_total)}` : ''}</span>
<span className="mon-tile-sub">память{all ? ` · в среднем по ${ov?.servers.length ?? 0}` : one?.mem_total ? ` · из ${gb(one.mem_total)}` : ''}</span>
</span>
<Bar v={one?.mem} label="Занято оперативной памяти" />
</div>
@@ -318,6 +252,33 @@ export default function MonitorPage({ token, showMsg }: PageProps) {
</div>
</div>
{/* Сводка по всем — и разбивка: кто сколько качает и насколько загружен */}
{all && ov && ov.servers.length > 1 && (
<section className="mon-chart mon-per-server" aria-labelledby="mon-per">
<div className="mon-chart-head"><span className="mon-chart-title" id="mon-per">По серверам</span></div>
<div className="mon-table-wrap">
<table className="mon-table">
<thead>
<tr><th>Сервер</th><th>Загрузка</th><th>Отдача</th><th>Онлайн</th><th>Процессор</th><th>Память</th><th>Потрачено</th></tr>
</thead>
<tbody>
{ov.servers.map(r => (
<tr key={r.id}>
<td>{r.name}{!r.ok && <span className="mon-tile-sub"> · нет метрик</span>}</td>
<td>{r.down != null ? rate(r.down) : '—'}</td>
<td>{r.up != null ? rate(r.up) : '—'}</td>
<td>{r.online != null ? nf(r.online, 0) : '—'}</td>
<td>{r.cpu != null ? `${nf(r.cpu, 0)} %` : '—'}</td>
<td>{r.mem != null ? `${nf(r.mem, 0)} %` : '—'}</td>
<td>{r.used_down != null && r.used_up != null ? vol(r.used_down + r.used_up) : '—'}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
)}
{ov && data && (
<div className="mon-charts">
<LineChart title={`Трафик, ${unit.name}`} from={ov.from} to={ov.to} step={ov.step} dim={loading}
@@ -348,18 +309,9 @@ export default function MonitorPage({ token, showMsg }: PageProps) {
return (
<>
{server && (
<p className="mon-server">
<span className="mon-server-label">Сервер</span>
<b>{server.health?.server || server.name}</b>
<span className={`chip chip--${server.online ? 'online' : 'offline'}`}><span className="chip-dot" />{server.online ? 'на связи' : 'нет связи'}</span>
</p>
)}
{!status && <p className="mon-hint">Загрузка…</p>}
{setup}
{dashboard}
{manage}
</>
);
}
awg-ui/src/tabs/monitor/metadata.json
+1
View File
@@ -4,6 +4,7 @@
"icon": "pulse",
"group": "server",
"order": 1.7,
"requires": "prometheus",
"chrome": {
"serverBar": false,
"restart": false
awg-ui/src/tabs/monitor/monitor.css
+40 -62
View File
@@ -8,25 +8,20 @@ LICENSE file in the root directory of this source tree.
display: flex; flex-direction: column; gap: 12px;
background: var(--surface-bright);
border: 1px solid var(--outline-variant);
border-radius: var(--r-card);
border-radius: var(--shape-extra-large);
padding: 20px;
margin-bottom: 16px;
}
.mon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mon-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--on-surface); }
.mon-hint { margin: 0; font-size: 12px; color: var(--neutral-text); }
.mon-title { margin: 0; font-size: var(--title-medium-size); line-height: var(--title-medium-line); font-weight: var(--weight-medium); color: var(--on-surface); }
.mon-hint { margin: 0; font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mon-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mon-code {
display: block; word-break: break-all; user-select: all;
font-family: var(--mono); font-size: 12px; color: var(--on-surface);
background: var(--surface-container);
border-radius: var(--r-table);
padding: 12px;
}
@media (max-width: 640px) {
@media (max-width: 599px) {
.mon-actions .btn { flex: 1; }
.mon-toolbar .server-select { flex: 1 1 100%; } /* своя строка под периодом */
.mon-toolbar .server-current { width: 100%; }
.mon-toolbar .server-menu { width: 100%; }
}
/* ───── Графики ─────
@@ -35,30 +30,31 @@ LICENSE file in the root directory of this source tree.
:root { --series-1: #6a45b8; --series-2: #c4620a; }
:root[data-theme="dark"] { --series-1: #8f6be0; --series-2: #d9772a; }
.mon-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* Строка над плитками: период слева, выбор сервера (components/ServerSelect) справа; на узком — друг под другом */
.mon-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.mon-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mon-range {
min-height: 44px; padding: 0 18px;
font: inherit; font-size: 14px; color: var(--on-surface);
font: inherit; font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-surface);
background: var(--surface-bright);
border: 1px solid var(--outline); border-radius: var(--r-pill);
border: 1px solid var(--outline); border-radius: var(--shape-full);
cursor: pointer;
}
.mon-range:hover { background: var(--state-primary); }
.mon-range--on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; font-weight: 500; }
.mon-range--on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; font-weight: var(--weight-medium); }
.mon-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mon-tile {
display: flex; flex-direction: column; gap: 4px;
background: var(--surface-bright);
border: 1px solid var(--outline-variant); border-radius: var(--r-table);
border: 1px solid var(--outline-variant); border-radius: var(--shape-large);
padding: 14px 16px;
}
.mon-tile-label { font-size: 12px; color: var(--neutral-text); }
.mon-tile-value { font-size: 20px; font-weight: 500; color: var(--on-surface); }
.mon-tile-sub { font-size: 12px; color: var(--neutral-text); }
.mon-tile-label { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mon-tile-value { font-size: var(--title-large-size); line-height: var(--title-large-line); font-weight: var(--weight-medium); color: var(--on-surface); }
.mon-tile-sub { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mon-tile-rates { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mon-tile-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; white-space: nowrap; }
.mon-tile-dir { font-size: 16px; }
.mon-tile-dir { font-size: var(--body-large-size); line-height: var(--body-large-line); }
.mon-tile-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--outline-variant); }
.mon-tile-meter { display: flex; flex-direction: column; gap: 4px; }
.mon-tile-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
@@ -71,78 +67,60 @@ LICENSE file in the root directory of this source tree.
.mon-chart {
margin: 0; min-width: 0;
background: var(--surface-bright);
border: 1px solid var(--outline-variant); border-radius: var(--r-card);
border: 1px solid var(--outline-variant); border-radius: var(--shape-extra-large);
padding: 16px;
transition: opacity .15s;
transition: opacity var(--duration-short3) var(--ease-standard);
}
.mon-chart--dim { opacity: .6; }
.mon-chart-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.mon-chart-title { font-size: 15px; font-weight: 500; color: var(--on-surface); }
.mon-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--neutral-text); }
.mon-chart-title { font-size: var(--title-medium-size); line-height: var(--title-medium-line); font-weight: var(--weight-medium); color: var(--on-surface); }
.mon-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mon-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mon-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex: none; }
.mon-key { display: inline-block; width: 14px; height: 3px; border-radius: var(--shape-extra-small); flex: none; }
.mon-chart-toggle {
margin-left: auto; min-height: 44px; padding: 0 12px;
font: inherit; font-size: 13px; color: var(--on-primary-container);
background: none; border: 0; border-radius: var(--r-pill); cursor: pointer;
font: inherit; font-size: var(--label-large-size); line-height: var(--label-large-line); color: var(--on-primary-container);
background: none; border: 0; border-radius: var(--shape-full); cursor: pointer;
}
.mon-chart-toggle:hover { background: var(--state-primary); }
.mon-plot { position: relative; }
.mon-plot svg { display: block; max-width: 100%; }
.mon-plot svg:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.mon-plot svg:focus-visible { border-radius: var(--shape-small); }
.mon-grid { stroke: var(--outline-variant); stroke-width: 1; }
.mon-tick { fill: var(--neutral-text); font-size: 12px; font-family: var(--font); }
.mon-tick { fill: var(--neutral-text); font-size: var(--body-small-size); font-family: var(--font); }
.mon-cross { stroke: var(--outline); stroke-width: 1; }
.mon-end { stroke: var(--surface-bright); stroke-width: 2px; }
.mon-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; text-align: center; font-size: 13px; color: var(--neutral-text); }
.mon-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; text-align: center; font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--neutral-text); }
.mon-tip {
position: absolute; pointer-events: none; z-index: 2;
display: flex; flex-direction: column; gap: 4px;
background: var(--surface-container);
border: 1px solid var(--outline-variant); border-radius: 12px;
padding: 8px 10px; font-size: 12px; color: var(--neutral-text);
border: 1px solid var(--outline-variant); border-radius: var(--shape-medium);
padding: 8px 10px; font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text);
}
.mon-tip-time { color: var(--neutral-text); }
.mon-tip-row { display: flex; align-items: center; gap: 8px; }
.mon-tip-row b { font-weight: 500; font-size: 13px; color: var(--on-surface); }
.mon-tip-row b { font-weight: var(--weight-medium); font-size: var(--label-large-size); line-height: var(--label-large-line); color: var(--on-surface); }
.mon-table-wrap { overflow-x: auto; }
.mon-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mon-table th { text-align: left; font-weight: 500; color: var(--label); padding: 8px 10px; white-space: nowrap; }
.mon-table { width: 100%; border-collapse: collapse; font-size: var(--body-medium-size); line-height: var(--body-medium-line); }
.mon-table th { text-align: left; font-weight: var(--weight-medium); color: var(--on-surface-variant); padding: 8px 10px; white-space: nowrap; }
.mon-table td { padding: 8px 10px; color: var(--on-surface); border-top: .5px solid var(--outline-variant); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-log {
margin: 0; max-height: 240px; overflow: auto;
font-family: var(--mono); font-size: 12px; color: var(--on-surface);
background: var(--surface-container); border-radius: var(--r-table);
padding: 12px; white-space: pre-wrap; word-break: break-word;
}
.mon-notice { margin-bottom: 12px; }
/* Полоски процессора и памяти в плитках */
.mon-bar { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--primary-container); margin: 2px 0; }
.mon-bar i { display: block; height: 100%; border-radius: 4px; background: var(--series-1); transition: width .3s; }
.mon-bar { display: block; width: 100%; height: 8px; border-radius: var(--shape-extra-small); overflow: hidden; background: var(--primary-container); margin: 2px 0; }
.mon-bar i { display: block; height: 100%; border-radius: var(--shape-extra-small); background: var(--series-1); transition: width var(--duration-medium2) var(--ease-standard); }
.mon-bar i.mon-bar--warn { background: var(--warn-dot); }
.mon-bar i.mon-bar--bad { background: var(--error-dot); }
/* Какой сервер показан (выбирается в других вкладках) */
.mon-server { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; font-size: 16px; color: var(--on-surface); }
.mon-server b { font-weight: 500; }
.mon-server-label { font-size: 12px; color: var(--neutral-text); }
/* Прогресс операции рядом с кнопкой */
/* Разбивка «По серверам» в режиме «Все серверы» */
.mon-per-server { margin-bottom: 16px; }
/* Кнопка рядом с подписью — по центру строки */
.mon-actions { align-items: center; }
.mon-progress { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.mon-progress-label { font-size: 12px; color: var(--neutral-text); }
.mon-pbar { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--primary-container); }
.mon-pbar i { display: block; height: 100%; border-radius: 4px; background: var(--series-1); transition: width .4s ease; }
.mon-pbar--ok i { background: var(--success-dot); }
.mon-pbar--bad i { background: var(--error-dot); }
/* Шага ещё нет — ход неизвестен: бегущий отрезок вместо ложных процентов */
.mon-pbar--wait i { width: 35% !important; animation: mon-wait 1.2s ease-in-out infinite; }
@keyframes mon-wait { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .mon-pbar--wait i { animation: none; } .mon-pbar i { transition: none; } }
awg-ui/src/tabs/apikeys/apikeys.css → awg-ui/src/tabs/settings/apikeys/apikeys.css
+19 -16
View File
@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
/* Открытый API-ключ (показывается один раз при создании) */
.apikey-value {
font-family: var(--mono);
font-size: 13px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
color: var(--on-surface);
background: var(--surface-container);
border: 1px solid var(--outline-variant);
border-radius: 12px;
border-radius: var(--shape-medium);
padding: 12px 14px;
width: 100%;
word-break: break-all;
@@ -21,9 +21,9 @@ LICENSE file in the root directory of this source tree.
.apikey-cards-list { display: none; flex-direction: column; gap: 12px; }
.apikey-count { font-size: 12px; color: var(--neutral-text); }
.apikey-count { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.apikey-empty {
font-size: 14px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
color: var(--neutral-text);
text-align: center;
padding: 48px 0;
@@ -31,7 +31,7 @@ LICENSE file in the root directory of this source tree.
.apikey-card {
background: var(--surface-bright);
border: 1px solid var(--outline-variant);
border-radius: var(--r-card);
border-radius: var(--shape-extra-large);
padding: 16px;
display: flex;
flex-direction: column;
@@ -49,10 +49,10 @@ LICENSE file in the root directory of this source tree.
gap: 8px;
min-width: 0;
}
.apikey-card-num { font-size: 12px; color: var(--neutral-dot); flex-shrink: 0; }
.apikey-card-num { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-dot); flex-shrink: 0; }
.apikey-card-label {
font-size: 16px;
font-weight: 500;
font-size: var(--title-medium-size); line-height: var(--title-medium-line);
font-weight: var(--weight-medium);
color: var(--on-surface);
overflow: hidden;
text-overflow: ellipsis;
@@ -60,7 +60,7 @@ LICENSE file in the root directory of this source tree.
}
.apikey-card-prefix {
font-family: var(--mono);
font-size: 13px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
color: var(--neutral-text);
word-break: break-all;
}
@@ -68,12 +68,15 @@ LICENSE file in the root directory of this source tree.
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 12px;
font-size: var(--body-small-size); line-height: var(--body-small-line);
color: var(--neutral-text);
}
@media (max-width: 640px) {
.apikey-cards-list { display: flex; }
/* compact и medium (< 840px): карточки вместо таблицы, на планшете — сеткой */
@media (max-width: 839px) {
.apikey-cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* счётчик и «пусто» — на всю строку сетки */
:is(.apikey-count, .apikey-empty) { grid-column: 1 / -1; }
}
/* Настройки ключа: какие серверы он видит */
@@ -82,13 +85,13 @@ LICENSE file in the root directory of this source tree.
display: flex; flex-direction: column; gap: 10px;
background: var(--surface-bright);
border: 1px solid var(--outline-variant);
border-radius: 16px;
border-radius: var(--shape-large);
padding: 12px 16px 14px;
margin: 6px 0 8px;
}
.apikey-tools-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--label); }
.apikey-tools-hint { margin: 0; font-size: 12px; color: var(--neutral-text); }
.apikey-tools-title { margin: 0; font-size: var(--title-small-size); line-height: var(--title-small-line); font-weight: var(--weight-medium); color: var(--on-surface-variant); }
.apikey-tools-hint { margin: 0; font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.apikey-card-btns { display: flex; gap: 8px; flex-shrink: 0; }
.apikey-card-servers { font-size: 12px; color: var(--neutral-text); }
.apikey-card-servers { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.apikey-new-servers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
awg-ui/src/tabs/apikeys/index.tsx → awg-ui/src/tabs/settings/apikeys/index.tsx
+7 -8
View File
@@ -2,15 +2,15 @@
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { Fragment, useState, useEffect, useCallback } from 'react';
import { apiFetch, copyText, timeAgo, getServerId, type ApiKey, type NodeInfo, type PageProps } from '../../lib/shared';
import { IcoPlus, IcoTrash, IcoCopy, IcoSettings } from '../../components/icons';
import ServerPicker, { serverName } from '../../components/ServerPicker';
import { apiFetch, copyText, timeAgo, getServerId, type ApiKey, type NodeInfo, type PageProps } from '../../../lib/shared';
import { IcoPlus, IcoTrash, IcoCopy, IcoSettings } from '../../../components/icons';
import ServerPicker, { serverName } from '../../../components/ServerPicker';
import './apikeys.css';
// Вкладка «API-ключи»: ключи внешнего API (/api/v1). Открытый ключ показывается
// один раз при создании (в БД хранится только хэш). Сервер-бар сверху рендерит App.
// один раз при создании (в БД хранится только хэш). Раздел вкладки «Настройки».
// Ключ видит набор серверов: на них он заводит vpn://-пользователей и в их пределах
// управляет мастер-ключами. Создаётся на выбранном в сервер-баре сервере, набор
// управляет мастер-ключами. По умолчанию новый ключ видит выбранный в панели сервер, набор
// правится в настройках ключа.
export default function ApiKeysPage({ token, showMsg }: PageProps) {
const [keys, setKeys] = useState<ApiKey[]>([]);
@@ -18,7 +18,7 @@ export default function ApiKeysPage({ token, showMsg }: PageProps) {
const [label, setLabel] = useState('');
const [created, setCreated] = useState<{ label: string; key: string } | null>(null);
const [tools, setTools] = useState<number | null>(null); // ключ с открытыми настройками
const [picked, setPicked] = useState<number[] | null>(null); // серверы нового ключа; null — только выбранный в сервер-баре
const [picked, setPicked] = useState<number[] | null>(null); // серверы нового ключа; null — только выбранный в панели
const load = useCallback(async () => {
try {
@@ -77,7 +77,6 @@ export default function ApiKeysPage({ token, showMsg }: PageProps) {
return (
<>
{/* Сервер-бар сверху рендерит App; новый ключ получает выбранный в нём сервер. */}
<div className="toolbar">
<input
className="field"
@@ -194,11 +193,11 @@ export default function ApiKeysPage({ token, showMsg }: PageProps) {
</p>
<code className="apikey-value">{created.key}</code>
<div className="qr-actions">
<button className="btn btn--text" onClick={() => setCreated(null)}>Закрыть</button>
<button className="btn btn--primary" onClick={async () => {
await copyText(created.key);
showMsg('Ключ скопирован');
}}><IcoCopy /> Скопировать</button>
<button className="btn btn--tonal" onClick={() => setCreated(null)}>Закрыть</button>
</div>
</div>
</div>
awg-ui/src/tabs/audit/audit.css → awg-ui/src/tabs/settings/audit/audit.css
+11 -11
View File
@@ -7,33 +7,33 @@ LICENSE file in the root directory of this source tree.
.au-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.au-run { margin-left: auto; }
.au-hint { font-size: 13px; color: var(--neutral-text); }
.au-hint { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.au-notice {
font-size: 13px; color: var(--error-text); background: var(--error-bg);
border-radius: 16px; padding: 10px 16px; margin: 0;
font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-error-container); background: var(--error-container);
border-radius: var(--shape-large); padding: 10px 16px; margin: 0;
}
.au-empty { font-size: 14px; color: var(--neutral-text); text-align: center; padding: 48px 0; }
.au-pub { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-family: var(--mono); font-size: 12px; }
.au-empty { font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--neutral-text); text-align: center; padding: 48px 0; }
.au-pub { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-family: var(--mono); font-size: var(--body-small-size); line-height: var(--body-small-line); }
.au-table td, .au-table th { white-space: nowrap; }
/* мобильный: таблица скрыта (.table-card), то же — карточками */
.au-cards { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 8px; }
.au-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface-container); border-radius: 16px; padding: 12px 16px; }
.au-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface-container); border-radius: var(--shape-large); padding: 12px 16px; }
.au-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.au-card .au-pub { max-width: 100%; }
@media (max-width: 640px) { .au-cards { display: flex; } }
@media (max-width: 839px) { .au-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.au-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.au-run { margin-left: 0; }
.au-box { display: flex; flex-direction: column; gap: 10px; background: var(--surface-container); border-radius: 16px; padding: 12px 16px; }
.au-box-title { margin: 0; font-size: 14px; font-weight: 500; }
.au-box { display: flex; flex-direction: column; gap: 10px; background: var(--surface-container); border-radius: var(--shape-large); padding: 12px 16px; }
.au-box-title { margin: 0; font-size: var(--title-small-size); line-height: var(--title-small-line); font-weight: var(--weight-medium); }
.au-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-setting-name { font-size: 14px; }
.au-setting-name { font-size: var(--body-medium-size); line-height: var(--body-medium-line); }
.au-setting-ctl { display: inline-flex; align-items: center; gap: 8px; }
.au-max { width: 88px !important; }
.au-select { width: auto !important; }
.au-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.au-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.au-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--body-medium-size); line-height: var(--body-medium-line); }
.au-log .au-pub { max-width: 240px; }
awg-ui/src/tabs/audit/index.tsx → awg-ui/src/tabs/settings/audit/index.tsx
+5 -5
View File
@@ -2,12 +2,12 @@
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useCallback } from 'react';
import { apiFetch, timeAgo, type NodeInfo, type PageProps } from '../../lib/shared';
import { IcoRefresh, IcoTrash } from '../../components/icons';
import { serverName } from '../../components/ServerPicker';
import { apiFetch, timeAgo, type NodeInfo, type PageProps } from '../../../lib/shared';
import { IcoRefresh, IcoTrash } from '../../../components/icons';
import { serverName } from '../../../components/ServerPicker';
import './audit.css';
// Вкладка «Аудит»: core периодически обходит все серверы и ищет «мёртвых» пиров — живых на сервере,
// Раздел «Аудит» вкладки «Настройки»: core периодически обходит все серверы и ищет «мёртвых» пиров — живых на сервере,
// хотя панель про них не знает (мастер-ключ удалён, а пир остался). Снимает только подтверждённых
// (мёртвых два прохода подряд): автоматически, если включено в настройках, или кнопкой.
// Отчёт и очистку считает awg-ui/sub.ts (/ui/masterkeys/audit*).
@@ -96,7 +96,7 @@ export default function AuditPage({ token, showMsg }: PageProps) {
</section>
<section className="au-box">
<h4 className="au-box-title">Настройки</h4>
<h4 className="au-box-title">Параметры аудита</h4>
<label className="au-setting">
<span className="au-setting-text">
<span className="au-setting-name">Снимать мёртвых автоматически</span>
awg-ui/src/tabs/settings/index.tsx
+285
View File
@@ -0,0 +1,285 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react';
import axios from 'axios';
import { apiFetch, copyText, timeAgo, BRAND_FALLBACK, SETTINGS_SECTION_KEY, type Brand, type NodeInfo, type PageProps } from '../../lib/shared';
import { useTheme, setThemeMode, type ThemeMode } from '../../lib/theme';
import { IcoCheck, IcoCopy, IcoRefresh, IcoTrash, IcoPlus } from '../../components/icons';
import ApiKeysPage from './apikeys';
import AuditPage from './audit';
import MigratePage from './migrate';
import PrometheusInstall from './prometheus';
import ServerSettings from './server';
import './settings.css';
// Вкладка «Настройки»: настройки самой панели, не конкретного сервера (те — в меню серверов).
// Разделы — по вкладкам MD3 (primary tabs) сверху, виден один:
// Оформление — тема (хранится в браузере, lib/theme).
// Сервер — деление канала и блокировка торрентов сервера из шапки (./server; туда ведёт и шестерёнка
// в меню серверов).
// API-ключи, Аудит, Перенос — бывшие отдельные вкладки меню; живут в подпапках и
// рендерятся здесь целиком (реестр tabs/index.ts их не видит — он ищет на уровень выше).
// Prometheus — установка встроенного Prometheus (./prometheus) и токен «только метрики» для GET /metrics (/ui/metrics-token): выпуск,
// перевыпуск, отзыв. Значение показывается один раз, в БД — только хэш.
// О панели — имя, канал, версия и серверы.
interface MetricsToken {
exists: boolean;
prefix?: string;
created_at?: number;
last_used?: number | null;
per_peer: boolean; // пер-пировые серии (METRICS_PEERS=on в .env)
}
const SECTIONS = [
{ id: 'look', label: 'Оформление' },
{ id: 'server', label: 'Сервер' },
{ id: 'apikeys', label: 'API-ключи' },
{ id: 'prom', label: 'Prometheus' },
{ id: 'audit', label: 'Аудит' },
{ id: 'migrate', label: 'Перенос' },
{ id: 'about', label: 'О панели' },
] as const;
type SectionId = (typeof SECTIONS)[number]['id'];
// Открытый раздел помнится в браузере — чтобы «Аудит» или «Перенос» не искать заново
// (туда же пишет openTab из lib/shared, когда другая вкладка ведёт в нужный раздел)
const indexOf = (id: SectionId) => SECTIONS.findIndex(t => t.id === id);
function savedSection(): SectionId {
try {
const v = localStorage.getItem(SETTINGS_SECTION_KEY);
if (SECTIONS.some(t => t.id === v)) return v as SectionId;
} catch { /* не критично */ }
return 'look';
}
const THEMES: { id: ThemeMode; label: string }[] = [
{ id: 'light', label: 'Светлая' },
{ id: 'dark', label: 'Тёмная' },
{ id: 'system', label: 'Как в системе' },
];
export default function SettingsPage({ token, showMsg }: PageProps) {
const { mode } = useTheme();
const [metrics, setMetrics] = useState<MetricsToken | null>(null);
const [created, setCreated] = useState<string | null>(null); // открытый токен — один раз после выпуска
const [busy, setBusy] = useState(false);
const [brand, setBrand] = useState<Brand>({ brand: BRAND_FALLBACK, channel: '', version: '' });
const [nodes, setNodes] = useState<NodeInfo[]>([]);
// dir — откуда въезжает раздел: 1 — справа (вкладка правее прежней), -1 — слева, 0 — первый показ
const [view, setView] = useState<{ section: SectionId; dir: number }>(() => ({ section: savedSection(), dir: 0 }));
const section = view.section;
const go = (id: SectionId) => setView(v => v.section === id ? v : { section: id, dir: Math.sign(indexOf(id) - indexOf(v.section)) });
const tabRefs = useRef<Partial<Record<SectionId, HTMLButtonElement | null>>>({});
const indicator = useRef<HTMLSpanElement>(null);
const centered = useRef(false); // первый показ — без анимации прокрутки вкладок
// Индикатор — одна полоса под активной вкладкой: переезжает к ней, а не появляется заново
useLayoutEffect(() => {
const place = () => {
const b = tabRefs.current[section], el = indicator.current;
if (b && el) { el.style.left = `${b.offsetLeft}px`; el.style.width = `${b.offsetWidth}px`; }
};
place();
// На узком экране вкладки прокручиваются — выбранную ставим по центру полосы (у краёв — насколько
// позволяет прокрутка). Двигаем саму полосу, а не scrollIntoView: тот прокрутил бы и страницу.
const b = tabRefs.current[section], bar = b?.parentElement;
if (b && bar && bar.scrollWidth > bar.clientWidth) {
const still = !centered.current || matchMedia('(prefers-reduced-motion: reduce)').matches;
bar.scrollTo({ left: b.offsetLeft - (bar.clientWidth - b.offsetWidth) / 2, behavior: still ? 'auto' : 'smooth' });
}
centered.current = true;
try { localStorage.setItem(SETTINGS_SECTION_KEY, section); } catch { /* не критично */ }
window.addEventListener('resize', place);
return () => window.removeEventListener('resize', place);
}, [section]);
// openTab('settings', раздел) при уже открытых настройках: раздел записан в localStorage — переключаемся на него
useEffect(() => {
const h = (e: Event) => { if ((e as CustomEvent).detail === 'settings') go(savedSection()); };
window.addEventListener('awg:open-tab', h);
return () => window.removeEventListener('awg:open-tab', h);
}, []);
// Стрелки, Home/End — по вкладкам (MD3 / WAI-ARIA tabs)
const onTabKey = (e: React.KeyboardEvent) => {
const i = indexOf(section);
const j = e.key === 'ArrowRight' ? (i + 1) % SECTIONS.length
: e.key === 'ArrowLeft' ? (i + SECTIONS.length - 1) % SECTIONS.length
: e.key === 'Home' ? 0 : e.key === 'End' ? SECTIONS.length - 1 : -1;
if (j < 0) return;
e.preventDefault();
go(SECTIONS[j].id);
tabRefs.current[SECTIONS[j].id]?.focus();
};
// Адрес /metrics рядом с панелью — с учётом префикса, под которым она открыта
const metricsUrl = new URL('metrics', location.href.split(/[?#]/)[0]).href;
const load = useCallback(async () => {
try {
setMetrics(await apiFetch('GET', '/ui/metrics-token', token));
} catch {
showMsg('Ошибка загрузки настроек');
}
axios.get('/ui/brand').then(({ data }) => setBrand({
brand: data.brand || BRAND_FALLBACK, channel: data.channel || '', version: data.version || '',
})).catch(() => {});
apiFetch('GET', '/ui/nodes', token).then(r => setNodes(r.nodes ?? [])).catch(() => {});
}, [token, showMsg]);
useEffect(() => { if (token) load(); }, [token, load]);
const issue = useCallback(async () => {
if (metrics?.exists && !confirm('Перевыпустить токен? Старый сразу перестанет работать — Prometheus нужно будет перенастроить.')) return;
setBusy(true);
try {
const r = await apiFetch('POST', '/ui/metrics-token', token);
setCreated(r.token);
setMetrics(r);
} catch (e: any) {
showMsg(e?.response?.data?.error ?? 'Ошибка запроса');
} finally {
setBusy(false);
}
}, [metrics, token, showMsg]);
const revoke = useCallback(async () => {
if (!confirm('Отозвать токен? Prometheus перестанет получать метрики панели.')) return;
setBusy(true);
try {
setMetrics(await apiFetch('DELETE', '/ui/metrics-token', token));
showMsg('Токен отозван');
} catch (e: any) {
showMsg(e?.response?.data?.error ?? 'Ошибка запроса');
} finally {
setBusy(false);
}
}, [token, showMsg]);
const online = nodes.filter(n => n.online).length;
return (
<>
<div className="st-tabs" role="tablist" aria-label="Разделы настроек" onKeyDown={onTabKey}>
{SECTIONS.map(t => (
<button key={t.id} type="button" role="tab" id={`st-tab-${t.id}`} className="st-tab"
aria-selected={section === t.id} aria-controls={`st-panel-${t.id}`}
tabIndex={section === t.id ? 0 : -1}
ref={el => { tabRefs.current[t.id] = el; }} onClick={() => go(t.id)}>
{t.label}
</button>
))}
<span className="st-tabs-indicator" ref={indicator} aria-hidden="true" />
</div>
{/* Раздел пересоздаётся при смене (key) и въезжает со стороны выбранной вкладки */}
<div key={section} className="st-view" role="tabpanel" id={`st-panel-${section}`} aria-labelledby={`st-tab-${section}`}
style={{ '--st-dir': view.dir } as React.CSSProperties}>
{section === 'look' && (
<section className="st-section">
<div className="st-row">
<span className="st-row-text">
<span className="st-row-name">Тема</span>
<span className="st-hint">Запоминается в этом браузере</span>
</span>
<div className="segmented" role="radiogroup" aria-label="Тема">
{THEMES.map(t => (
<button key={t.id} type="button" role="radio" aria-checked={mode === t.id}
className="segmented-item" onClick={() => setThemeMode(t.id)}>
{mode === t.id && <IcoCheck />}{t.label}
</button>
))}
</div>
</div>
</section>
)}
{section === 'prom' && <PrometheusInstall token={token} showMsg={showMsg} />}
{section === 'prom' && (
<section className="st-section">
<p className="st-hint st-lead">
Метрики панели и всех серверов отдаются по адресу <code className="st-code">{metricsUrl}</code> только
с токеном: Prometheus передаёт его заголовком <code className="st-code">Authorization: Bearer</code>.
Токен открывает только метрики — ни панель, ни API.
</p>
<div className="st-row">
<span className="st-row-text">
<span className="st-row-name">Токен метрик</span>
{metrics?.exists ? (
<span className="st-hint">
<code className="st-code">{metrics.prefix}</code> · выпущен {new Date((metrics.created_at ?? 0) * 1000).toLocaleDateString()}
{' · '}{metrics.last_used ? `скрейп ${timeAgo(metrics.last_used)} назад` : 'ещё не использовался'}
</span>
) : (
<span className="st-hint">{metrics ? 'Не выпущен — /metrics закрыт' : 'Загрузка…'}</span>
)}
</span>
{metrics && (
<span className="st-row-ctl">
{metrics.exists && (
<button className="btn btn--danger" disabled={busy} onClick={revoke}><IcoTrash /> Отозвать</button>
)}
<button className={`btn ${metrics.exists ? 'btn--tonal' : 'btn--primary'}`} disabled={busy} onClick={issue}>
{metrics.exists ? <><IcoRefresh /> Перевыпустить</> : <><IcoPlus /> Выпустить</>}
</button>
</span>
)}
</div>
{metrics && (
<div className="st-row">
<span className="st-row-text">
<span className="st-row-name">Метрики по пользователям</span>
<span className="st-hint">
{metrics.per_peer
? 'Включены: серии по каждому пиру с внутренним IP и именем'
: 'Выключены. Включаются строкой METRICS_PEERS=on в .env панели'}
</span>
</span>
<span className={`chip chip--${metrics.per_peer ? 'online' : 'offline'}`}>
<span className="chip-dot" />{metrics.per_peer ? 'Вкл' : 'Выкл'}
</span>
</div>
)}
</section>
)}
{section === 'server' && <ServerSettings token={token} showMsg={showMsg} />}
{section === 'apikeys' && <ApiKeysPage token={token} showMsg={showMsg} />}
{section === 'audit' && <AuditPage token={token} showMsg={showMsg} />}
{section === 'migrate' && <MigratePage token={token} showMsg={showMsg} />}
{section === 'about' && (
<section className="st-section">
<dl className="st-facts">
<div><dt>Панель</dt><dd>{brand.brand}</dd></div>
<div><dt>Версия</dt><dd>{[brand.channel, brand.version].filter(Boolean).join(' ') || '—'}</dd></div>
<div><dt>Серверы</dt><dd>{nodes.length ? `${nodes.length}, на связи ${online}` : '—'}</dd></div>
</dl>
</section>
)}
</div>
{created && (
<div className="qr-backdrop" onClick={() => setCreated(null)}>
<div className="qr-card" role="dialog" aria-modal="true" aria-labelledby="st-new-title" onClick={e => e.stopPropagation()}>
<p className="qr-name" id="st-new-title">Токен метрик выпущен</p>
<p className="qr-hint">
Скопируй его сейчас — он показывается один раз. В prometheus.yml он идёт
в <code className="st-code">authorization.credentials</code>.
</p>
<code className="st-secret">{created}</code>
<div className="qr-actions">
<button className="btn btn--text" onClick={() => setCreated(null)}>Закрыть</button>
<button className="btn btn--primary" onClick={async () => {
await copyText(created);
showMsg('Токен скопирован');
}}><IcoCopy /> Скопировать</button>
</div>
</div>
</div>
)}
</>
);
}
awg-ui/src/tabs/settings/metadata.json
+10
View File
@@ -0,0 +1,10 @@
{
"id": "settings",
"label": "Настройки",
"icon": "settings",
"group": "server",
"order": 9,
"chrome": {
"restart": false
}
}
awg-ui/src/tabs/migrate/index.tsx → awg-ui/src/tabs/settings/migrate/index.tsx
+5 -5
View File
@@ -2,11 +2,11 @@
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useCallback } from 'react';
import { apiFetch, copyText, type PageProps } from '../../lib/shared';
import { IcoCopy } from '../../components/icons';
import { apiFetch, copyText, type PageProps } from '../../../lib/shared';
import { IcoCopy } from '../../../components/icons';
import './migrate.css';
// Вкладка «Перенос»: панель уезжает с сервера «панель + VPN» на отдельную панель без VPN, а
// Раздел «Перенос» вкладки «Настройки»: панель уезжает с сервера «панель + VPN» на отдельную панель без VPN, а
// старый сервер остаётся её нодой #0. Новая панель выдаёт одноразовый код, старая по нему сама
// отправляет туда базу и ключи подписки — у пользователей не меняется ничего. Логика — в
// internal/ui/migrate.go (/ui/migrate*), порядок — docs/node-protocol.md, «Перенос панели».
@@ -160,7 +160,7 @@ export default function MigratePage({ token, showMsg }: PageProps) {
</p>
<ol className="mv-steps">
<li>На новом сервере установите Forgetting с ролью «только панель».</li>
<li>Там на вкладке «Перенос» нажмите «Получить код».</li>
<li>Там в «Настройках», на вкладке «Перенос», нажмите «Получить код».</li>
<li>Вставьте код сюда и нажмите «Перенести».</li>
</ol>
{info.state === 'uncertain' ? (
@@ -190,7 +190,7 @@ export default function MigratePage({ token, showMsg }: PageProps) {
info.code ? (
<>
<p className="mv-text">
Вставьте код на вкладке «Перенос» старой панели. Он одноразовый и действует
Вставьте код в «Настройках» старой панели, на вкладке «Перенос». Он одноразовый и действует
ещё {Math.max(1, Math.round(info.code.expires_in / 60))} мин. Архив придёт зашифрованным ключом из кода.
</p>
<code className="node-modal-cmd">{info.code.code}</code>
awg-ui/src/tabs/settings/migrate/migrate.css
+25
View File
@@ -0,0 +1,25 @@
/*
Copyright (c) 2026 Ivan Vasilev
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* Стили вкладки «Перенос». Общая дизайн-система — в App.css. */
.mv-box { display: flex; flex-direction: column; gap: 10px; background: var(--surface-container); border-radius: var(--shape-large); padding: 12px 16px; }
.mv-title { margin: 0; font-size: var(--title-small-size); line-height: var(--title-small-line); font-weight: var(--weight-medium); }
.mv-text { margin: 0; font-size: var(--body-medium-size); line-height: 1.5; }
.mv-muted { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.mv-steps { margin: 0; padding-left: 20px; font-size: var(--body-medium-size); line-height: 1.6; }
.mv-row { display: flex; gap: 8px; }
.mv-row .field { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--body-small-size); line-height: var(--body-small-line); }
.mv-row--end { justify-content: flex-end; flex-wrap: wrap; }
.mv-self { align-self: flex-start; }
.mv-notice {
font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-error-container); background: var(--error-container);
border-radius: var(--shape-large); padding: 10px 16px; margin: 0;
}
.mv-box .node-modal-cmd { background: var(--surface-bright); }
@media (max-width: 599px) { .mv-row:not(.mv-row--end) { flex-direction: column; } }
.mv-checks { display: flex; flex-direction: column; gap: 8px; }
.mv-check { display: flex; align-items: baseline; gap: 10px; font-size: var(--body-medium-size); line-height: 1.5; }
.mv-check .chip { flex-shrink: 0; }
awg-ui/src/tabs/settings/prometheus/index.tsx
+141
View File
@@ -0,0 +1,141 @@
// Copyright (c) 2026 Ivan Vasilev
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useCallback, useRef } from 'react';
import { apiFetch, copyText, getServerId, announcePrometheus, type PageProps } from '../../../lib/shared';
import { IcoCopy, IcoPlus, IcoTrash } from '../../../components/icons';
import './prometheus.css';
// Установка встроенного Prometheus (раздел «Prometheus» вкладки «Настройки»; графики — во вкладке «Монитор»).
// Кнопка просит awg-ctrl сервера поставить его (`awg-ctrl monitor install`, root; сама панель пакетов
// не ставит). У панели без VPN он ставится на ноду, и панель читает его через её агента — на сервер,
// выбранный в шапке (при смене сервера вкладка перемонтируется). У панели со своим VPN цель всегда
// «этот сервер».
export interface MonitorStatus {
ready: boolean; can_install: boolean; command: string;
host: { id: number; name: string } | null; // Prometheus на ноде (или будет поставлен туда); null — на этом сервере
job: { action: 'install' | 'remove'; running: boolean; exit: number | null; log: string } | null; // последняя операция
}
// Прогресс операции из строк «N/M шаг», которые печатает сам установщик (cli/src/monitor.ts). Шаг N считаем
// выполненным наполовину: так полоска не стоит на нуле, пока идёт долгий apt, и не обещает больше, чем известно.
const STEP = /^(\d+)\/(\d+)\s+(.+)$/;
function JobProgress({ job, starting }: { job: MonitorStatus['job']; starting: boolean }) {
let step: [number, number, string] | null = null;
for (const l of job?.log.split('\n') ?? []) { const m = STEP.exec(l.trim()); if (m) step = [Number(m[1]), Number(m[2]), m[3]]; }
const failed = !!job && job.exit !== null && job.exit !== 0;
const done = !!job && job.exit === 0;
const pct = done ? 100 : step ? ((step[0] - 0.5) / step[1]) * 100 : 0;
const label = failed ? `Не удалось (код ${job!.exit})`
: done ? (job!.action === 'install' ? 'Готово' : 'Удалено')
: step ? `Шаг ${step[0]} из ${step[1]}: ${step[2]}` : 'Запуск…';
return (
<div className="prom-progress" aria-live="polite">
<span className={`prom-pbar${failed ? ' prom-pbar--bad' : done ? ' prom-pbar--ok' : !step && (starting || job?.running) ? ' prom-pbar--wait' : ''}`}
role="progressbar" aria-label="Ход операции" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(pct)}>
<i style={{ width: `${pct}%` }} />
</span>
<span className="st-hint">{label}</span>
</div>
);
}
export default function PrometheusInstall({ token, showMsg }: PageProps) {
const target = getServerId() ?? 0; // куда ставить (панель без VPN) — сервер из шапки
const [status, setStatus] = useState<MonitorStatus | null>(null);
const [pending, setPending] = useState<'install' | 'remove' | null>(null); // операция запущена отсюда
const alive = useRef(true);
// StrictMode монтирует эффект дважды: флаг надо вернуть в true, иначе все ответы отбрасываются
useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
const loadStatus = useCallback(async () => {
try { const s = await apiFetch('GET', `/ui/monitor?server=${target}`, token) as MonitorStatus; announcePrometheus(s.ready); if (alive.current) setStatus(s); return s; }
catch { return null; }
}, [token, target]);
useEffect(() => { void loadStatus(); }, [loadStatus]);
// Пока идёт установка или удаление — следим за ходом: раз в 2 с читаем статус и лог
useEffect(() => {
if (!pending && !status?.job?.running) return;
const t = setInterval(async () => {
const s = await loadStatus();
if (s && !s.job?.running) setPending(null);
}, 2000);
return () => clearInterval(t);
}, [pending, status?.job?.running, loadStatus]);
const run = async (action: 'install' | 'remove') => {
if (action === 'remove' && !confirm('Удалить Prometheus? Он будет остановлен, а накопленные графики (до 31 дня) сотрутся. Панель продолжит отдавать /metrics.')) return;
setPending(action);
try { await apiFetch('POST', `/ui/monitor/${action}?server=${target}`, token); await loadStatus(); }
catch (e: any) { setPending(null); showMsg(e?.response?.data?.error ?? (action === 'install' ? 'Не удалось запустить установку' : 'Не удалось запустить удаление')); }
};
if (!status) return <section className="st-section"><p className="st-hint">Загрузка…</p></section>;
const job = status.job;
const working = !!pending || !!job?.running;
const doing = pending ?? (job?.running ? job.action : null);
const showJob = !!pending || (!!job && (job.running || job.exit !== null));
const failed = !!job && job.exit !== null && job.exit !== 0;
// «Этот сервер» путал: в шапке может быть выбрана нода, а Prometheus у панели один и стоит не там
const where = status.host ? <>на сервере <b>{status.host.name}</b></> : 'на сервере панели';
const command = status.ready ? 'awg-ctrl monitor remove' : status.command;
return (
<section className="st-section">
<div className="st-row">
<span className="st-row-text">
<span className="st-row-name">Встроенный Prometheus</span>
<span className="st-hint">
{status.ready
? <>Один на всю панель, собирает метрики всех серверов. Стоит {where}{status.host && ' (панель читает его через агента ноды)'}, слушает только 127.0.0.1:9090, графики хранит 31 день.</>
: <>Один на всю панель, соберёт метрики всех серверов. Панель поставит его {where} и сама подключит к своим метрикам: графики «Монитора» появятся через минуту-две. Наружу он не открывается.</>}
</span>
</span>
<span className="st-row-ctl">
<span className={`chip chip--${status.ready ? 'online' : 'offline'}`}>
<span className="chip-dot" />{doing === 'install' ? 'ставится' : doing === 'remove' ? 'удаляется' : status.ready ? 'работает' : 'не подключён'}
</span>
{status.can_install && (status.ready ? (
<button className="btn btn--danger" onClick={() => run('remove')} disabled={working}>
<IcoTrash /> {doing === 'remove' ? 'Удаляем…' : 'Удалить'}
</button>
) : (
<button className="btn btn--primary" onClick={() => run('install')} disabled={working}>
<IcoPlus /> {doing === 'install' ? 'Устанавливаем…' : 'Установить'}
</button>
))}
</span>
</div>
{showJob && <JobProgress job={job} starting={!!pending} />}
{!status.can_install && (
<div className="st-row">
<span className="st-row-text">
<span className="st-hint">
{status.ready ? 'Удаляется на сервере с Prometheus от root:'
: 'На выбранном сервере установка кнопкой недоступна (нет связи или старый awg-ctrl): выберите другой сервер в шапке или выполните на этом от root:'}
</span>
<code className="prom-code">{command}</code>
</span>
<button className="btn btn--tonal" onClick={() => copyText(command).then(() => showMsg('Команда скопирована'))}>
<IcoCopy /> Скопировать
</button>
</div>
)}
{/* Полный лог — только при ошибке: оператору нужна причина, а не поток строк apt */}
{failed && (
<>
<pre className="prom-log">{job!.log.trim()}</pre>
<p className="login-error">
{job!.action === 'install' ? 'Установка' : 'Удаление'} не удалась. Если дело в правах или пакетах, выполните вручную: <b>{`awg-ctrl monitor ${job!.action}`}</b>
</p>
</>
)}
</section>
);
}
awg-ui/src/tabs/settings/prometheus/prometheus.css
+31
View File
@@ -0,0 +1,31 @@
/*
Copyright (c) 2026 Ivan Vasilev
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* Установка Prometheus (раздел «Prometheus» вкладки «Настройки»). Строки — из settings.css. */
/* Ход установки или удаления: полоска + подпись шага */
.prom-progress { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.prom-pbar { display: block; width: 100%; height: 8px; border-radius: var(--shape-extra-small); overflow: hidden; background: var(--primary-container); }
.prom-pbar i { display: block; height: 100%; border-radius: var(--shape-extra-small); background: var(--primary); transition: width var(--duration-medium4) var(--ease-standard); }
.prom-pbar--ok i { background: var(--success-dot); }
.prom-pbar--bad i { background: var(--error-dot); }
/* Шага ещё нет — ход неизвестен: бегущий отрезок вместо ложных процентов */
.prom-pbar--wait i { width: 35% !important; animation: prom-wait 1.2s ease-in-out infinite; }
@keyframes prom-wait { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .prom-pbar--wait i { animation: none; } .prom-pbar i { transition: none; } }
.prom-code {
display: block; margin-top: 6px; word-break: break-all; user-select: all;
font-family: var(--mono); font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--on-surface);
background: var(--surface-container-lowest);
border-radius: var(--shape-medium);
padding: 10px 12px;
}
.prom-log {
margin: 0 0 8px; max-height: 240px; overflow: auto;
font-family: var(--mono); font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--on-surface);
background: var(--surface-container-lowest); border-radius: var(--shape-medium);
padding: 12px; white-space: pre-wrap; word-break: break-word;
}
awg-ui/src/components/ServerSettingsModal.tsx → awg-ui/src/tabs/settings/server/index.tsx
+33 -42
View File
@@ -3,17 +3,13 @@
// LICENSE file in the root directory of this source tree.
import { useEffect, useState } from 'react';
import axios from 'axios';
import { apiFetch, type NodeInfo, type ShapingStatus, type TorrentStatus } from '../lib/shared';
import { apiFetch, type PageProps, type ShapingStatus, type TorrentStatus } from '../../../lib/shared';
import './server.css';
// Настройки сервера: деление канала между устройствами (CAKE) и блокировка BitTorrent. Сами
// настройки живут в awg-ctrl этого сервера — запрос идёт обычным прокси с X-Server-Id (App выбирает сервер
// до открытия модалки), так что ядро и ноды настраиваются одинаково.
export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
token: string;
node: NodeInfo;
onClose: () => void;
showMsg: (text: string) => void;
}) {
// Раздел «Сервер» вкладки «Настройки»: деление канала между устройствами (CAKE) и блокировка BitTorrent
// для сервера из шапки (при его смене вкладка перемонтируется). Сами настройки живут в awg-ctrl этого
// сервера — запрос идёт обычным прокси с X-Server-Id, так что ядро и ноды настраиваются одинаково.
export default function ServerSettings({ token, showMsg }: PageProps) {
const [st, setSt] = useState<ShapingStatus | null>(null);
const [enabled, setEnabled] = useState(false);
const [auto, setAuto] = useState(true);
@@ -63,12 +59,6 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
return () => { alive = false; };
}, [token]);
useEffect(() => {
const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', h);
return () => document.removeEventListener('keydown', h);
}, [onClose]);
const downN = Number(down), upN = Number(up);
const valid = !enabled || (Number.isInteger(downN) && downN >= 1 && Number.isInteger(upN) && upN >= 1);
@@ -99,18 +89,17 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
};
return (
<div className="node-scrim" onClick={onClose}>
<div className="node-modal" role="dialog" aria-modal="true" aria-label="Настройки сервера" onClick={e => e.stopPropagation()}>
<h3 className="node-modal-title">Настройки сервера: {node.name}</h3>
<h4 className="ss-section">Деление канала</h4>
<>
<section className="st-section ss-card">
<h3 className="ss-section">Деление канала</h3>
{unsupported ? (
<p className="node-modal-hint">
<p className="st-hint">
Этот сервер не поддерживает деление канала: обновите его (install.sh → «Обновить»).
</p>
) : (
<>
<p className="node-modal-hint">
<p className="st-hint">
Канал делится поровну между устройствами, но не простаивает: кто берёт мало, получает всё
нужное, остальное достаётся тем, кто качает много. Звонки и игры не ждут за чужими закачками.
</p>
@@ -134,7 +123,7 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
value={up} disabled={!st || busy} onChange={e => setUp(e.target.value)} />
</label>
</div>
<p className="node-modal-hint">
<p className="st-hint">
Укажите около 90–95% реального канала сервера. Если задать больше, очередь копится у провайдера
и деление перестаёт работать.
</p>
@@ -142,7 +131,7 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
<label className="ss-setting">
<span className="ss-setting-text">
<span className="ss-setting-name">Снижать приоритет тяжёлых</span>
<span className="node-modal-hint">
<span className="st-hint">
Когда канал занят, устройства, которые долго качают заметно больше своей доли, временно
уходят в фоновый класс. Работает на загрузку; свободный канал они по-прежнему занимают.
</span>
@@ -167,10 +156,12 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
</>
)}
<hr className="ss-divider" />
<h4 className="ss-section">Торренты</h4>
</section>
<section className="st-section ss-card">
<h3 className="ss-section">Торренты</h3>
{tUnsupported ? (
<p className="node-modal-hint">
<p className="st-hint">
Этот сервер не умеет блокировать торренты: обновите его (install.sh → «Обновить»).
</p>
) : (
@@ -178,12 +169,12 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
<label className="ss-setting">
<span className="ss-setting-text">
<span className="ss-setting-name">Блокировать BitTorrent</span>
<span className="node-modal-hint">
<span className="st-hint">
Режет поиск пиров (DHT), трекеры и начало торрент-соединений — как блокировка в 3x-ui.
Клиент с шифрованием и HTTPS-трекерами может частично её обойти, но без DHT и открытых
трекеров большинство торрентов не стартуют. Остальной трафик не режется.
</span>
<span className="node-modal-hint">
<span className="st-hint">
{enabled
? 'Кто пытается качать, на 10 минут после последней попытки уходит в фоновый приоритет: уступает остальным, когда канал занят.'
: 'Включите деление канала — тогда кто пытается качать, на 10 минут уйдёт ещё и в фоновый приоритет.'}
@@ -199,14 +190,14 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
</span>
<span className="ss-mono">заблокировано попыток: {tst.hits.toLocaleString('ru-RU')}</span>
{tst.active && !tst.tcp && (
<span className="node-modal-hint">
<span className="st-hint">
TCP не проверяется: на сервере старый nftables. DHT, трекеры и uTP блокируются.
</span>
)}
{tst.error && <span className="node-modal-hint">{tst.error}</span>}
{tst.error && <span className="st-hint">{tst.error}</span>}
{tst.seen.length > 0 && (
<>
<span className="node-modal-hint">Пытались качать за последние 10 минут:</span>
<span className="st-hint">Пытались качать за последние 10 минут:</span>
<span className="ss-seen">
{tst.seen.map(p => (
<span key={p.ip} className="chip chip--error">
@@ -221,17 +212,17 @@ export default function ServerSettingsModal({ token, node, onClose, showMsg }: {
</>
)}
{error && <p className="login-error">{error}</p>}
</section>
<div className="node-modal-actions">
{!(unsupported && tUnsupported) && (
<button className="btn btn--primary" onClick={save} disabled={busy || !valid || !(shapingDirty || torrentDirty)}>
Сохранить
</button>
)}
<button className="btn btn--outline" onClick={onClose}>Закрыть</button>
{error && <p className="login-error">{error}</p>}
{!(unsupported && tUnsupported) && (
<div className="ss-actions">
<button className="btn btn--primary" onClick={save} disabled={busy || !valid || !(shapingDirty || torrentDirty)}>
Сохранить
</button>
</div>
</div>
</div>
)}
</>
);
}
awg-ui/src/tabs/settings/server/server.css
+11
View File
@@ -0,0 +1,11 @@
/*
Copyright (c) 2026 Ivan Vasilev
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* Раздел «Сервер» вкладки «Настройки»: бывший диалог «Настройки сервера», строки .ss-* — из App.css */
.ss-card { gap: 12px; padding: 16px; }
.ss-card .ss-section { margin: 0; }
.ss-card .ss-status { background: var(--surface-container-lowest); }
.ss-actions { display: flex; justify-content: flex-end; }
.ss-card .ss-grid { max-width: 480px; }
awg-ui/src/tabs/settings/settings.css
+119
View File
@@ -0,0 +1,119 @@
/*
Copyright (c) 2026 Ivan Vasilev
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* Стили вкладки «Настройки». Общая дизайн-система — в App.css (там же .segmented). */
/* Вкладки разделов (MD3 primary tabs, прокручиваемые): 48px, подпись title-small, прижаты влево;
активная — цветом primary и полосой 3px снизу, которая переезжает между вкладками (left/width
ставит компонент). Под вкладками — линия outline-variant во всю ширину. */
.st-tabs {
position: relative;
display: flex;
box-shadow: inset 0 -1px var(--outline-variant); /* линия — тенью: рамка ушла бы в прокрутку */
/* MD3 scrollable tabs: не влезли — прокручиваются вбок, без полосы прокрутки */
overflow-x: auto;
scrollbar-width: none;
}
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab {
flex: 0 0 auto;
height: 48px;
padding: 0 20px;
border: none;
background: transparent;
color: var(--on-surface-variant);
font-family: var(--font);
font-size: var(--title-small-size); line-height: var(--title-small-line);
font-weight: var(--weight-medium);
white-space: nowrap;
cursor: pointer;
transition: color var(--duration-short3) var(--ease-standard);
}
.st-tab[aria-selected="true"] { color: var(--primary); }
.st-tab:focus-visible { outline-offset: -3px; }
.st-tabs-indicator {
position: absolute;
bottom: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--primary);
transition: left var(--duration-medium2) var(--ease-standard), width var(--duration-medium2) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) { .st-tabs-indicator { transition: none; } }
/* Содержимое раздела — с тем же шагом, что у страницы. При смене вкладки въезжает на 32px со стороны
выбранной (--st-dir: 1 — справа, -1 — слева, 0 — только проявляется), как MD3 shared axis X.
Только backwards: после анимации transform не остаётся — иначе fixed-диалоги внутри (QR, ключи)
отсчитывались бы от раздела, а не от окна. */
.st-view {
display: flex; flex-direction: column; gap: 20px; min-width: 0;
animation: st-view-in var(--duration-medium2) var(--ease-emphasized-decelerate) backwards;
}
@keyframes st-view-in {
from { opacity: 0; transform: translateX(calc(var(--st-dir, 0) * 32px)); }
}
@media (prefers-reduced-motion: reduce) { .st-view { animation: none; } }
/* въезжающий раздел на миг шире страницы — без горизонтальной прокрутки */
.main:has(.st-view) { overflow-x: hidden; }
/* Раздел — блок на surface-container; строки внутри разделены линией outline-variant */
.st-section {
display: flex; flex-direction: column;
background: var(--surface-container);
border-radius: var(--shape-large);
padding: 12px 16px;
}
.st-lead { margin: 4px 0; }
.st-row {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: 8px 16px;
padding: 12px 0;
}
.st-row + .st-row, .st-lead + .st-row { border-top: 1px solid var(--outline-variant); }
.st-row:first-child { padding-top: 4px; }
.st-row:last-child { padding-bottom: 4px; }
.st-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.st-row-name { font-size: var(--body-large-size); line-height: var(--body-large-line); color: var(--on-surface); }
.st-row-ctl { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.st-hint { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); overflow-wrap: anywhere; }
.st-code {
font-family: var(--mono);
font-size: 0.95em;
background: var(--surface-container-highest);
border-radius: var(--shape-extra-small);
padding: 0 4px;
overflow-wrap: anywhere;
}
/* О панели: пары «название — значение» */
.st-facts { display: flex; flex-direction: column; margin: 0; }
.st-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.st-facts > div + div { border-top: 1px solid var(--outline-variant); }
.st-facts > div:first-child { padding-top: 4px; }
.st-facts > div:last-child { padding-bottom: 4px; }
.st-facts dt { font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--neutral-text); }
.st-facts dd { margin: 0; font-size: var(--body-medium-size); line-height: var(--body-medium-line); color: var(--on-surface); text-align: right; }
/* Открытый токен (один раз после выпуска) — как ключ API */
.st-secret {
font-family: var(--mono);
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
color: var(--on-surface);
background: var(--surface-container-lowest);
border-radius: var(--shape-medium);
padding: 12px 14px;
width: 100%;
word-break: break-all;
user-select: all;
}
/* compact: переключатель темы и кнопки — на всю ширину строки */
@media (max-width: 599px) {
.st-row > .segmented { width: 100%; }
.st-row > .segmented .segmented-item { flex: 1; padding: 0 8px; }
.st-row-ctl { width: 100%; }
.st-row-ctl .btn { flex: 1; }
}
awg-ui/src/tabs/users/index.tsx
+3 -8
View File
@@ -2,11 +2,11 @@
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
import { useState, useEffect, useRef, useCallback } from 'react';
import QRCode from 'qrcode';
import {
apiFetch, vpnKeyToConf, downloadFile, copyText, bytes, timeAgo, genLabel,
type User, type PageProps, type AwgGen,
} from '../../lib/shared';
import { qrDataUrl } from '../../lib/qr';
import { IcoPlus, IcoRefresh, IcoQR, IcoTrash, IcoGlobe } from '../../components/icons';
import PriorityChip from '../../components/PriorityChip';
import TorrentChip from '../../components/TorrentChip';
@@ -109,12 +109,7 @@ export default function UsersPage({ token, showMsg }: PageProps) {
const vpnKey = u.vpn_key ?? '';
// errorCorrectionLevel 'L' (а не 'H'): ключ vpn:// длинный (~1.3 КБ),
// при 'H' ёмкость QR падает до ~1273 байт и кодирование падает.
const dataUrl = await QRCode.toDataURL(vpnKey, {
width: 560,
margin: 2,
errorCorrectionLevel: 'L',
});
setQrModal({ name, dataUrl, vpnKey });
setQrModal({ name, dataUrl: qrDataUrl(vpnKey, 'L'), vpnKey });
} catch {
showMsg('Не удалось сгенерировать QR-код');
}
@@ -297,6 +292,7 @@ export default function UsersPage({ token, showMsg }: PageProps) {
/>
<p className="qr-hint">Отсканируй в AmneziaVPN · нажми на QR чтобы скопировать</p>
<div className="qr-actions">
<button className="btn btn--text" onClick={() => setQrModal(null)}>Закрыть</button>
<button className="btn btn--tonal" onClick={async () => {
try {
const conf = await vpnKeyToConf(qrModal.vpnKey);
@@ -305,7 +301,6 @@ export default function UsersPage({ token, showMsg }: PageProps) {
showMsg('Конфиг скачан');
} catch { showMsg('Не удалось декодировать ключ'); }
}}>Скачать .conf</button>
<button className="btn btn--tonal" onClick={() => setQrModal(null)}>Закрыть</button>
</div>
</div>
</div>
awg-ui/src/tabs/users/users.css
+21 -13
View File
@@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree.
.user-cards-list { display: none; flex-direction: column; gap: 12px; }
.users-count { font-size: 12px; color: var(--neutral-text); }
.users-count { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.empty-cards {
font-size: 14px;
font-size: var(--body-medium-size); line-height: var(--body-medium-line);
color: var(--neutral-text);
text-align: center;
padding: 48px 0;
@@ -18,7 +18,7 @@ LICENSE file in the root directory of this source tree.
.user-card {
background: var(--surface-bright);
border: 1px solid var(--outline-variant);
border-radius: var(--r-card);
border-radius: var(--shape-extra-large);
padding: 16px;
display: flex;
flex-direction: column;
@@ -36,10 +36,10 @@ LICENSE file in the root directory of this source tree.
gap: 8px;
min-width: 0;
}
.user-card-num { font-size: 12px; color: var(--neutral-dot); flex-shrink: 0; }
.user-card-num { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-dot); flex-shrink: 0; }
.user-card-name {
font-size: 16px;
font-weight: 500;
font-size: var(--title-medium-size); line-height: var(--title-medium-line);
font-weight: var(--weight-medium);
color: var(--on-surface);
overflow: hidden;
text-overflow: ellipsis;
@@ -52,20 +52,23 @@ LICENSE file in the root directory of this source tree.
gap: 8px;
color: var(--neutral-text);
}
.user-card-ip-text { font-family: var(--mono); font-size: 13px; }
.user-card-ip-text { font-family: var(--mono); font-size: var(--body-medium-size); line-height: var(--body-medium-line); }
/* чипы приоритета и торрентов — рядом с IP, как в карточке устройства мастер-ключа (на телефоне
.tip-wrap по умолчанию во всю ширину и уводил чип на отдельную строку) */
.user-card-ip .tip-wrap { width: auto; }
.user-card-metrics { display: flex; gap: 8px; }
.metric-block {
flex: 1;
background: var(--surface-container);
border-radius: var(--r-table);
border-radius: var(--shape-large);
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.metric-label { font-size: 12px; color: var(--neutral-text); }
.metric-value { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--on-surface); }
.metric-label { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--neutral-text); }
.metric-value { font-family: var(--mono); font-size: var(--title-medium-size); line-height: var(--title-medium-line); font-weight: var(--weight-medium); color: var(--on-surface); }
.user-card-actions { display: flex; gap: 8px; }
.user-card-actions .btn--outline { flex: 1; }
@@ -73,9 +76,14 @@ LICENSE file in the root directory of this source tree.
/* Метка устаревшего ключа рядом с именем: ключ выдан на другом поколении AWG. */
.user-gen { margin-left: 8px; vertical-align: middle; }
/* На мобильной таблица скрывается (.table-card в App.css), карточки показываются. */
@media (max-width: 640px) {
.user-cards-list { display: flex; }
/* compact и medium (< 840px): таблица скрывается (.table-card в App.css), показываются карточки —
в одну колонку на телефоне, сеткой на планшете. */
@media (max-width: 839px) {
.user-cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* счётчик и «пусто» — на всю строку сетки */
:is(.users-count, .empty-cards) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
/* .tip-wrap на мобильной растягивается на всю ширину — метке это не нужно. */
.user-gen { width: auto; }
}
awg-ui/src/tokens.css
+164
View File
@@ -0,0 +1,164 @@
/*
Copyright (c) 2026 Ivan Vasilev
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/* Токены дизайн-системы Material 3 (design.md, часть I). Компоненты берут значения только
отсюда — без литеральных цветов, размеров шрифта, радиусов и длительностей.
Цвета — тёплая палитра Forgetting, разложенная по ролям MD3: роли, которых раньше не было
(secondary, tertiary, лестница surface-container, inverse), достроены в тех же оттенках. */
:root {
/* ── Цвет: роли MD3 ── */
--primary: #6a45b8;
--on-primary: #ffffff;
--primary-container: #ebddff;
--on-primary-container: #5a2da8;
--inverse-primary: #cbb3ff;
--secondary: #645a73;
--on-secondary: #ffffff;
--secondary-container: #e8dff5;
--on-secondary-container: #4c425a;
--tertiary: #8b5a1f;
--on-tertiary: #ffffff;
--tertiary-container: #ffdcad;
--on-tertiary-container: #7a4a14;
--error: #ba1a1a;
--on-error: #ffffff;
--error-container: #ffdad6;
--on-error-container: #410002;
--surface: #faf6f0;
--surface-dim: #e2d9cc;
--surface-bright: #fdfaf6; /* рабочая зона: карточки, поля, диалоги */
--surface-container-lowest: #ffffff;
--surface-container-low: #f5efe6;
--surface-container: #f0e8dd;
--surface-container-high: #ece2d3;
--surface-container-highest: #e4dac9;
--on-surface: #3a2e22;
--on-surface-variant: #5a4a3a;
--inverse-surface: #3a2e22;
--inverse-on-surface: #fdfaf6;
--outline: #d8cdbe;
--outline-variant: #ece2d3;
/* ── Цвет: статусы (custom colors MD3), тёплый подтон ── */
--success-bg: #c0dd97; --success-text: #2c4d0a; --success-dot: #639922;
--neutral-bg: #e4dac9; --neutral-text: #7a6a55; --neutral-dot: #a99a85;
--error-dot: #ba1a1a;
--warn-dot: #e08a2c;
/* ── State layers: непрозрачность слоя MD3 (цвет слоя — цвет содержимого, App.css) ── */
--state-hover: .08;
--state-focus: .10;
--state-pressed: .10;
--state-dragged: .16;
/* недоступные элементы: содержимое и контейнер (on-surface 38% / 12%) */
--disabled-content: color-mix(in srgb, var(--on-surface) 38%, transparent);
--disabled-container: color-mix(in srgb, var(--on-surface) 12%, transparent);
--state-row: rgba(106, 69, 184, .035);
--scrim: rgba(58, 46, 34, .45);
--shadow: rgba(58, 46, 34, .15);
/* ── Типографика: шкала MD3 (размер / интерлиньяж); веса — только 400 и 500.
label-small (11px) не заводим: минимальный размер шрифта — 12px (design.md, 6) ── */
--font: system-ui, -apple-system, 'Inter', sans-serif;
--mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
--weight-regular: 400;
--weight-medium: 500;
--headline-small-size: 24px; --headline-small-line: 32px;
--title-large-size: 22px; --title-large-line: 28px; /* emphasized: вес 500 */
--title-medium-size: 16px; --title-medium-line: 24px;
--title-small-size: 14px; --title-small-line: 20px;
--body-large-size: 16px; --body-large-line: 24px;
--body-medium-size: 14px; --body-medium-line: 20px;
--body-small-size: 12px; --body-small-line: 16px;
--label-large-size: 14px; --label-large-line: 20px;
--label-medium-size: 12px; --label-medium-line: 16px;
/* ── Форма: шкала скруглений MD3 ── */
--shape-extra-small: 4px;
--shape-small: 8px;
--shape-medium: 12px;
--shape-large: 16px;
--shape-extra-large: 28px;
--shape-full: 9999px;
/* ── Движение: кривые и длительности MD3 ── */
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--ease-standard-accelerate: cubic-bezier(.3, 0, 1, 1);
--ease-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
--ease-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);
--duration-short1: 50ms;
--duration-short2: 100ms;
--duration-short3: 150ms;
--duration-short4: 200ms;
--duration-medium1: 250ms;
--duration-medium2: 300ms;
--duration-medium3: 350ms;
--duration-medium4: 400ms;
/* ── Элевация MD3: уровни 1–3 (тени цвета --shadow) ── */
--elevation-1: 0 1px 2px var(--shadow), 0 1px 3px 1px var(--shadow);
--elevation-2: 0 1px 2px var(--shadow), 0 2px 6px 2px var(--shadow);
--elevation-3: 0 1px 3px var(--shadow), 0 4px 8px 3px var(--shadow);
}
:root[data-theme="dark"] {
--primary: #cbb3ff;
--on-primary: #381b6c;
--primary-container: #52389e;
--on-primary-container: #ebddff;
--inverse-primary: #6a45b8;
--secondary: #cec1de;
--on-secondary: #352c43;
--secondary-container: #483a55;
--on-secondary-container: #ebddff;
--tertiary: #f2bd7c;
--on-tertiary: #4a2800;
--tertiary-container: #4a3218;
--on-tertiary-container: #ffdcad;
--error: #ffb4ab;
--on-error: #690005;
--error-container: #5c1414;
--on-error-container: #ffb4ab;
/* surface-bright светлее канона MD3 (тон 15 вместо 24): рабочая зона в тёмной теме
чуть приподнята над фоном, а не выбелена */
--surface: #1a1611;
--surface-dim: #1a1611;
--surface-bright: #2b251d;
--surface-container-lowest: #14100b;
--surface-container-low: #201a14;
--surface-container: #251f18;
--surface-container-high: #302820;
--surface-container-highest: #3a332a;
--on-surface: #ede2d4;
--on-surface-variant: #b6a994;
--inverse-surface: #ede2d4;
--inverse-on-surface: #2b251d;
--outline: #4d4334;
--outline-variant: #342c20;
--success-bg: #2d4413; --success-text: #c8e3a0; --success-dot: #8fc24f;
--neutral-bg: #34291c; --neutral-text: #d0c0a4; --neutral-dot: #b0a085;
--error-dot: #ff5449;
--warn-dot: #ffb76b;
--state-row: rgba(203, 179, 255, .05);
--scrim: rgba(0, 0, 0, .55);
--shadow: rgba(0, 0, 0, .45);
}
awg-ui/vite.config.ts
+7 -5
View File
@@ -4,6 +4,8 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
const api = `http://localhost:${process.env.MOCK_PORT || 8080}`;
export default defineConfig({
// Ресурсы — от адреса страницы, а не от корня домена: собранная панель работает и в корне, и в
// подпапке за reverse-proxy (example.com/forgetting/) без пересборки. Запросы к API — так же
@@ -12,11 +14,11 @@ export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': 'http://localhost:8080',
'/ui': 'http://localhost:8080',
'/health': 'http://localhost:8080',
'/login': 'http://localhost:8080',
'/logout': 'http://localhost:8080',
'/api': api,
'/ui': api,
'/health': api,
'/login': api,
'/logout': api,
},
},
});