feat(users): implement user management features and database schema
Docker images / prepare-release (push) Successful in 10s
Docker images / backend-image (push) Successful in 1m57s
Docker images / frontend-image (push) Successful in 4m8s
Docker images / notify-webhook (push) Skipped
Docker images / updater-image (push) Successful in 44s
Docker images / publish-release (push) Successful in 11s
Docker images / prepare-release (push) Successful in 10s
Docker images / backend-image (push) Successful in 1m57s
Docker images / frontend-image (push) Successful in 4m8s
Docker images / notify-webhook (push) Skipped
Docker images / updater-image (push) Successful in 44s
Docker images / publish-release (push) Successful in 11s
Added user management functionality, including the creation of app_users and user_interface_bindings tables in the database. Implemented API routes for user data retrieval and permissions handling. Enhanced the traffic monitoring system to include user traffic statistics and interface bindings. Updated relevant components and services to support the new user features, improving overall application functionality and user experience.
This commit is contained in:
Denozordec
@@ -3,7 +3,7 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { PageHeader } from "@/components/page-header"
|
||||
import { FormField, FormToggle } from "@/components/form-kit"
|
||||
import { FormToggle } from "@/components/form-kit"
|
||||
import { FileImportDialog } from "@/components/file-import-dialog"
|
||||
import { OpsPanel } from "@/components/ops-panel"
|
||||
import { Frame, FramePanel } from "@/components/reui/frame"
|
||||
@@ -12,10 +12,6 @@ import { Input } from "@/components/ui/input"
|
||||
import { useDataSource } from "@/lib/data-source"
|
||||
import { useEvoBGP, type EvoBgpSavePayload, type EvoBgpTestDraft } from "@/lib/evobgp-context"
|
||||
import { DEFAULT_ROUTE_AI_OPTIMIZER_SETTINGS } from "@/lib/route-optimizer-data"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter,
|
||||
} from "@/components/ui/sheet"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -27,119 +23,19 @@ import {
|
||||
AlertDialogMedia,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { Flag } from "@/components/flag"
|
||||
import { StatusDot } from "@/components/status-dot"
|
||||
import { servers } from "@/lib/data"
|
||||
import {
|
||||
SaveIcon, PencilIcon, TrashIcon, PlusIcon, CheckIcon, CopyIcon,
|
||||
XIcon, AlertCircleIcon, ShieldIcon, EyeIcon, EyeOffIcon, WrenchIcon, UserIcon,
|
||||
ServerIcon, LayoutDashboardIcon, RefreshCwIcon, CableIcon, LoaderCircleIcon,
|
||||
DownloadIcon, UploadIcon,
|
||||
SaveIcon, TrashIcon, PlusIcon, CheckIcon, CopyIcon,
|
||||
AlertCircleIcon, EyeIcon, EyeOffIcon,
|
||||
RefreshCwIcon, LoaderCircleIcon,
|
||||
DownloadIcon, UploadIcon, XIcon,
|
||||
} from "lucide-react"
|
||||
import { SubusersDataGrid } from "@/components/data-grids/subusers-data-grid"
|
||||
import { SettingsAccessSummaryDataGrid } from "@/components/data-grids/settings-access-summary-data-grid"
|
||||
import { DataPageCard } from "@/components/data-page-card"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { requestJson } from "@/shared/api/http-client"
|
||||
import { downloadSystemDatabaseBackup, restoreSystemDatabaseBackup } from "@/shared/api/system-database"
|
||||
import { toast } from "sonner"
|
||||
|
||||
// ─── types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type Role = "admin" | "operator" | "viewer"
|
||||
type PermLevel = "none" | "read" | "write"
|
||||
|
||||
interface SectionPerm { section: string; level: PermLevel }
|
||||
interface ServerPerm { serverId: string; level: PermLevel }
|
||||
|
||||
interface User {
|
||||
id: string; name: string; login: string; email: string
|
||||
role: Role; last: string; avatar: string; active: boolean
|
||||
sections: SectionPerm[]; servers: ServerPerm[]
|
||||
subUsers: SubUser[]
|
||||
}
|
||||
|
||||
interface ApiKey { id: string; name: string; prefix: string; created: string; last: string; scopes: string[] }
|
||||
|
||||
// Подчинённый пользователь — учётка для подключения устройства к JH через GRE
|
||||
interface SubUser {
|
||||
id: string
|
||||
login: string
|
||||
password: string
|
||||
description: string // "офисный роутер", "склад", и т.п.
|
||||
jhServerIds: string[] // на каких JH зарегистрирована учётка
|
||||
clientIp: string // назначенный IP внутри туннеля
|
||||
active: boolean
|
||||
lastSeen: string | null
|
||||
}
|
||||
|
||||
// ─── section definitions ──────────────────────────────────────────────────────
|
||||
|
||||
const SECTION_GROUPS: { group: string; icon: React.ReactNode; items: string[] }[] = [
|
||||
{ group: "Обзор", icon: <LayoutDashboardIcon className="size-3" />, items: ["Дашборд", "Трафик", "Карта сети", "Мониторинг"] },
|
||||
{ group: "Данные", icon: <EyeIcon className="size-3" />, items: ["Домены", "IP-диапазоны", "ASN", "Communities"] },
|
||||
{ group: "Управление", icon: <WrenchIcon className="size-3" />, items: ["Серверы", "Фильтры", "Firewall", "GRE-туннели", "Бэкапы"] },
|
||||
{ group: "Инструменты", icon: <ShieldIcon className="size-3" />, items: ["Оптимизатор маршрутов", "OSPF", "Диагностика GRE", "Терминал"] },
|
||||
{ group: "Система", icon: <ServerIcon className="size-3" />, items: ["Оповещения", "Сбор данных", "Настройки"] },
|
||||
]
|
||||
|
||||
const ALL_SECTIONS = SECTION_GROUPS.flatMap(g => g.items)
|
||||
|
||||
// ─── default permissions by role ──────────────────────────────────────────────
|
||||
|
||||
function defaultSections(role: Role): SectionPerm[] {
|
||||
return ALL_SECTIONS.map(section => {
|
||||
let level: PermLevel = "none"
|
||||
if (role === "admin") level = "write"
|
||||
else if (role === "operator") level = ["Серверы","Фильтры","Firewall","GRE-туннели","Бэкапы","Диагностика GRE","Оптимизатор маршрутов","OSPF"].includes(section) ? "write" : "read"
|
||||
else if (role === "viewer") level = ["Настройки","Терминал"].includes(section) ? "none" : "read"
|
||||
return { section, level }
|
||||
})
|
||||
}
|
||||
|
||||
function defaultServers(role: Role): ServerPerm[] {
|
||||
return servers.map(s => ({
|
||||
serverId: s.id,
|
||||
level: role === "admin" ? "write" : role === "operator" ? "read" : "read" as PermLevel,
|
||||
}))
|
||||
}
|
||||
|
||||
// ─── initial data ──────────────────────────────────────────────────────────────
|
||||
|
||||
const INIT_USERS: User[] = [
|
||||
{
|
||||
id: "u1", name: "Александр Коротаев", login: "a.korotaev", email: "[email protected]",
|
||||
role: "admin", last: "сейчас", avatar: "АК", active: true,
|
||||
sections: defaultSections("admin"), servers: defaultServers("admin"),
|
||||
subUsers: [
|
||||
{ id: "su1", login: "gre-office-msk", password: "xK9#mQ2$vLp8", description: "Офис MSK", jhServerIds: ["srv1","srv7"], clientIp: "10.210.0.2", active: true, lastSeen: "5м назад" },
|
||||
{ id: "su2", login: "gre-datacenter", password: "pW3@jT7!hD5k", description: "ЦОД Tier-2", jhServerIds: ["srv1"], clientIp: "10.210.0.6", active: true, lastSeen: "1ч назад" },
|
||||
{ id: "su3", login: "gre-warehouse", password: "rN6%bF2*cM8s", description: "Склад Химки", jhServerIds: ["srv7"], clientIp: "10.210.1.2", active: false, lastSeen: "3 дн назад" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "u2", name: "Дмитрий Фёдоров", login: "d.fedorov", email: "[email protected]",
|
||||
role: "operator", last: "2ч назад", avatar: "ДФ", active: true,
|
||||
sections: defaultSections("operator"), servers: defaultServers("operator"),
|
||||
subUsers: [
|
||||
{ id: "su4", login: "gre-spb-branch", password: "qA4^eU9#wG1o", description: "Филиал SPB", jhServerIds: ["srv1","srv7"], clientIp: "10.210.0.10", active: true, lastSeen: "20м назад" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "u3", name: "Мария Соколова", login: "m.sokolova", email: "[email protected]",
|
||||
role: "viewer", last: "вчера", avatar: "МС", active: true,
|
||||
sections: defaultSections("viewer"), servers: defaultServers("viewer"),
|
||||
subUsers: [],
|
||||
},
|
||||
{
|
||||
id: "u4", name: "Игорь Петров", login: "i.petrov", email: "[email protected]",
|
||||
role: "operator", last: "3 дн назад", avatar: "ИП", active: false,
|
||||
sections: defaultSections("operator"), servers: defaultServers("operator"),
|
||||
subUsers: [
|
||||
{ id: "su5", login: "gre-retail-01", password: "bF7!nK3@mZ9v", description: "Магазин #1", jhServerIds: ["srv1"], clientIp: "10.210.0.14", active: false, lastSeen: null },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const INIT_API_KEYS: ApiKey[] = [
|
||||
{ id: "k1", name: "Monitoring Script", prefix: "rl_live_mU9k2…", created: "12 дн назад", last: "2м назад", scopes: ["servers:read", "probes:read"] },
|
||||
@@ -147,26 +43,7 @@ const INIT_API_KEYS: ApiKey[] = [
|
||||
{ id: "k3", name: "Grafana datasource", prefix: "rl_live_xK7r1…", created: "2 мес назад", last: "сейчас", scopes: ["traffic:read", "servers:read"] },
|
||||
]
|
||||
|
||||
const ROLE_LABEL: Record<Role, string> = { admin: "Администратор", operator: "Оператор", viewer: "Наблюдатель" }
|
||||
const ROLE_COLOR: Record<Role, string> = {
|
||||
admin: "bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20",
|
||||
operator: "bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20",
|
||||
viewer: "bg-muted text-muted-foreground border border-border",
|
||||
}
|
||||
|
||||
const PERM_OPTS: { v: PermLevel; label: string }[] = [
|
||||
{ v: "none", label: "Нет" },
|
||||
{ v: "read", label: "Просмотр" },
|
||||
{ v: "write", label: "Управление"},
|
||||
]
|
||||
|
||||
const PERM_COLOR: Record<PermLevel, string> = {
|
||||
none: "bg-muted text-muted-foreground",
|
||||
read: "bg-sky-500/10 text-sky-600 dark:text-sky-400",
|
||||
write: "bg-success/10 text-success",
|
||||
}
|
||||
|
||||
const SECTIONS_NAV = ["Общие", "EvoBGP", "Уведомления", "Пользователи", "API-ключи", "Безопасность"] as const
|
||||
const SECTIONS_NAV = ["Общие", "EvoBGP", "Уведомления", "API-ключи", "Безопасность"] as const
|
||||
type NavSection = typeof SECTIONS_NAV[number]
|
||||
|
||||
function makeApiFetch(backendUrl: string) {
|
||||
@@ -175,8 +52,6 @@ function makeApiFetch(backendUrl: string) {
|
||||
}
|
||||
}
|
||||
|
||||
// ─── small components ─────────────────────────────────────────────────────────
|
||||
|
||||
function SettingRow({ label, description, children }: { label: string; description?: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4 py-3.5">
|
||||
@@ -189,512 +64,6 @@ function SettingRow({ label, description, children }: { label: string; descripti
|
||||
)
|
||||
}
|
||||
|
||||
function PermPills({ value, onChange, disabled }: { value: PermLevel; onChange: (v: PermLevel) => void; disabled?: boolean }) {
|
||||
return (
|
||||
<div className={cn("flex rounded border border-input overflow-hidden h-6", disabled && "opacity-40 pointer-events-none")}>
|
||||
{PERM_OPTS.map((o, i) => (
|
||||
<button
|
||||
key={o.v} type="button" onClick={() => onChange(o.v)}
|
||||
className={cn(
|
||||
"px-2 text-[11px] font-medium transition-colors",
|
||||
i < PERM_OPTS.length - 1 && "border-r border-input",
|
||||
value === o.v
|
||||
? o.v === "write" ? "bg-success text-white"
|
||||
: o.v === "read" ? "bg-info text-white"
|
||||
: "bg-muted-foreground/70 text-white"
|
||||
: "text-muted-foreground hover:bg-muted",
|
||||
)}
|
||||
>{o.label}</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarCircle({ avatar, active }: { avatar: string; active: boolean }) {
|
||||
return (
|
||||
<div className="relative shrink-0">
|
||||
<div className={cn(
|
||||
"size-8 rounded-full flex items-center justify-center text-white text-[10px] font-semibold",
|
||||
"bg-gradient-to-br from-blue-500 to-violet-500",
|
||||
!active && "opacity-50",
|
||||
)}>{avatar}</div>
|
||||
{!active && (
|
||||
<span className="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full bg-muted-foreground/50 border-2 border-background" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── user sheet ───────────────────────────────────────────────────────────────
|
||||
|
||||
interface UserForm {
|
||||
name: string; login: string; email: string; role: Role; active: boolean
|
||||
sections: SectionPerm[]; servers: ServerPerm[]
|
||||
subUsers: SubUser[]
|
||||
}
|
||||
|
||||
function emptyForm(): UserForm {
|
||||
return { name: "", login: "", email: "", role: "viewer", active: true,
|
||||
sections: defaultSections("viewer"), servers: defaultServers("viewer"), subUsers: [] }
|
||||
}
|
||||
|
||||
function genPassword(): string {
|
||||
const chars = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789!@#$%"
|
||||
return Array.from({ length: 16 }, () => chars[Math.floor(Math.random() * chars.length)]).join("")
|
||||
}
|
||||
|
||||
function genSubLogin(userLogin: string, existing: SubUser[]): string {
|
||||
const base = `gre-${userLogin.split(".").pop() ?? "client"}`
|
||||
const n = existing.filter(s => s.login.startsWith(base)).length
|
||||
return n === 0 ? base : `${base}-${String(n + 1).padStart(2, "0")}`
|
||||
}
|
||||
|
||||
function UserSheet({ open, user, onSave, onClose }: {
|
||||
open: boolean
|
||||
user: User | null // null = create
|
||||
onSave: (f: UserForm) => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
const isCreate = user === null
|
||||
const [tab, setTab] = useState<"profile" | "sections" | "servers" | "subusers">("profile")
|
||||
const [form, setForm] = useState<UserForm>(() =>
|
||||
user ? {
|
||||
name: user.name, login: user.login, email: user.email, role: user.role,
|
||||
active: user.active,
|
||||
sections: user.sections.map(s => ({ ...s })),
|
||||
servers: user.servers.map(s => ({ ...s })),
|
||||
subUsers: user.subUsers.map(s => ({ ...s })),
|
||||
} : emptyForm()
|
||||
)
|
||||
// sub-user add form state
|
||||
const [addSubOpen, setAddSubOpen] = useState(false)
|
||||
const [newSubLogin, setNewSubLogin] = useState("")
|
||||
const [newSubPwd, setNewSubPwd] = useState("")
|
||||
const [newSubDesc, setNewSubDesc] = useState("")
|
||||
const [newSubJhs, setNewSubJhs] = useState<string[]>([])
|
||||
const [newSubIp, setNewSubIp] = useState("")
|
||||
const [revealedIds, setRevealedIds] = useState<Set<string>>(new Set())
|
||||
const [errors, setErrors] = useState<Partial<Record<keyof UserForm, string>>>({})
|
||||
|
||||
const setField = <K extends keyof UserForm>(k: K, v: UserForm[K]) => {
|
||||
setForm(f => ({ ...f, [k]: v }))
|
||||
if (errors[k]) setErrors(e => ({ ...e, [k]: undefined }))
|
||||
}
|
||||
|
||||
// When role changes → reset permissions to defaults
|
||||
const setRole = (role: Role) => {
|
||||
setForm(f => ({ ...f, role, sections: defaultSections(role), servers: defaultServers(role) }))
|
||||
}
|
||||
|
||||
const setSectionPerm = (section: string, level: PermLevel) => {
|
||||
setForm(f => ({
|
||||
...f,
|
||||
sections: f.sections.map(s => s.section === section ? { ...s, level } : s),
|
||||
}))
|
||||
}
|
||||
|
||||
const setServerPerm = (serverId: string, level: PermLevel) => {
|
||||
setForm(f => ({
|
||||
...f,
|
||||
servers: f.servers.map(s => s.serverId === serverId ? { ...s, level } : s),
|
||||
}))
|
||||
}
|
||||
|
||||
const setAllSections = (level: PermLevel) => {
|
||||
setForm(f => ({ ...f, sections: f.sections.map(s => ({ ...s, level })) }))
|
||||
}
|
||||
|
||||
const setAllServers = (level: PermLevel) => {
|
||||
setForm(f => ({ ...f, servers: f.servers.map(s => ({ ...s, level })) }))
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
const e: Partial<Record<keyof UserForm, string>> = {}
|
||||
if (!form.name.trim()) e.name = "Обязательное поле"
|
||||
if (!form.login.trim()) e.login = "Обязательное поле"
|
||||
if (!form.email.trim()) e.email = "Обязательное поле"
|
||||
setErrors(e)
|
||||
return !Object.keys(e).length
|
||||
}
|
||||
|
||||
const handleSave = () => { if (validate()) onSave(form) }
|
||||
|
||||
const isAdmin = form.role === "admin"
|
||||
|
||||
const jhServers = servers.filter(s => s.type === "jump-host" && s.enabled)
|
||||
|
||||
const addSubUser = () => {
|
||||
if (!newSubLogin.trim() || !newSubPwd.trim() || newSubJhs.length === 0) return
|
||||
const sub: SubUser = {
|
||||
id: `su${Date.now()}`,
|
||||
login: newSubLogin.trim(),
|
||||
password: newSubPwd,
|
||||
description: newSubDesc.trim(),
|
||||
jhServerIds: [...newSubJhs],
|
||||
clientIp: newSubIp.trim(),
|
||||
active: true,
|
||||
lastSeen: null,
|
||||
}
|
||||
setForm(f => ({ ...f, subUsers: [...f.subUsers, sub] }))
|
||||
setAddSubOpen(false)
|
||||
setNewSubLogin(""); setNewSubPwd(""); setNewSubDesc(""); setNewSubIp(""); setNewSubJhs([])
|
||||
}
|
||||
|
||||
const toggleNewSubJh = (id: string) =>
|
||||
setNewSubJhs(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
|
||||
|
||||
const removeSubUser = (id: string) =>
|
||||
setForm(f => ({ ...f, subUsers: f.subUsers.filter(s => s.id !== id) }))
|
||||
|
||||
const toggleSubUser = (id: string) =>
|
||||
setForm(f => ({ ...f, subUsers: f.subUsers.map(s => s.id === id ? { ...s, active: !s.active } : s) }))
|
||||
|
||||
const toggleReveal = (id: string) =>
|
||||
setRevealedIds(prev => {
|
||||
const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next
|
||||
})
|
||||
|
||||
const TABS = [
|
||||
{ id: "profile", label: "Профиль" },
|
||||
{ id: "sections", label: "Разделы" },
|
||||
{ id: "servers", label: "Серверы" },
|
||||
{ id: "subusers", label: "GRE-клиенты", badge: form.subUsers.length || undefined },
|
||||
] as const
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={v => { if (!v) onClose() }}>
|
||||
<SheetContent side="right" className="sm:max-w-[520px] p-0 flex flex-col" showCloseButton={false}>
|
||||
|
||||
{/* header */}
|
||||
<SheetHeader className="px-5 pt-5 pb-0 border-b shrink-0">
|
||||
<div className="flex items-start justify-between gap-2 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{!isCreate && user && (
|
||||
<AvatarCircle avatar={user.avatar} active={form.active} />
|
||||
)}
|
||||
<div>
|
||||
<SheetTitle className="text-base leading-tight">
|
||||
{isCreate ? "Новый пользователь" : form.name || "—"}
|
||||
</SheetTitle>
|
||||
<SheetDescription className="text-xs mt-0.5">
|
||||
{isCreate ? "Заполните данные и настройте доступ" : `@${form.login}`}
|
||||
</SheetDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon-sm" onClick={onClose} className="shrink-0 mt-0.5">
|
||||
<XIcon className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* tab bar */}
|
||||
<div className="flex gap-0 -mb-px">
|
||||
{TABS.map(t => (
|
||||
<button key={t.id} onClick={() => setTab(t.id as typeof tab)}
|
||||
className={cn(
|
||||
"px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5",
|
||||
tab === t.id
|
||||
? "border-foreground text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground",
|
||||
)}>
|
||||
{t.label}
|
||||
{"badge" in t && t.badge !== undefined && (
|
||||
<span className={cn(
|
||||
"text-[10px] font-semibold px-1.5 py-0.5 rounded-full tabular-nums",
|
||||
tab === t.id
|
||||
? "bg-foreground/10"
|
||||
: "bg-muted text-muted-foreground",
|
||||
)}>{t.badge}</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</SheetHeader>
|
||||
|
||||
{/* body */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
|
||||
{/* ── Profile tab ── */}
|
||||
{tab === "profile" && (
|
||||
<div className="px-5 py-5 flex flex-col gap-4">
|
||||
|
||||
<FormField label="Полное имя" error={errors.name}>
|
||||
<Input value={form.name} onChange={e => setField("name", e.target.value)}
|
||||
placeholder="Иван Иванов" className="h-9" />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Логин" error={errors.login}>
|
||||
<Input value={form.login} onChange={e => setField("login", e.target.value)}
|
||||
placeholder="i.ivanov" className="h-9 font-mono" />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Email" error={errors.email}>
|
||||
<Input value={form.email} onChange={e => setField("email", e.target.value)}
|
||||
placeholder="[email protected]" type="email" className="h-9" />
|
||||
</FormField>
|
||||
|
||||
<Separator />
|
||||
|
||||
<FormField label="Роль">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{(["viewer", "operator", "admin"] as Role[]).map(r => (
|
||||
<button key={r} type="button" onClick={() => setRole(r)}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded-md border text-xs font-medium transition-all",
|
||||
form.role === r
|
||||
? r === "admin" ? "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/30 ring-1 ring-violet-500/30"
|
||||
: r === "operator" ? "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/30 ring-1 ring-sky-500/30"
|
||||
: "bg-muted text-foreground border-border ring-1 ring-border"
|
||||
: "border-border text-muted-foreground hover:bg-muted",
|
||||
)}>
|
||||
{ROLE_LABEL[r]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground mt-1.5">
|
||||
{form.role === "admin"
|
||||
? "Полный доступ ко всем разделам и серверам, не ограничивается матрицей прав"
|
||||
: form.role === "operator"
|
||||
? "Управление инфраструктурой согласно выданным правам"
|
||||
: "Только просмотр согласно выданным правам"}
|
||||
</p>
|
||||
</FormField>
|
||||
|
||||
<Separator />
|
||||
|
||||
<FormField label="Статус учётной записи">
|
||||
<div className="flex items-center gap-3">
|
||||
<FormToggle checked={form.active} onChange={v => setField("active", v)} />
|
||||
<span className={cn("text-xs font-medium", form.active ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground")}>
|
||||
{form.active ? "Активна" : "Заблокирована"}
|
||||
</span>
|
||||
</div>
|
||||
</FormField>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Sections tab ── */}
|
||||
{tab === "sections" && (
|
||||
<div className="flex flex-col">
|
||||
{/* bulk actions */}
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 border-b bg-muted/30">
|
||||
<span className="text-xs text-muted-foreground mr-1">Выбрать всё:</span>
|
||||
{PERM_OPTS.map(o => (
|
||||
<button key={o.v} type="button" onClick={() => setAllSections(o.v)}
|
||||
disabled={isAdmin}
|
||||
className={cn(
|
||||
"text-[11px] px-2 py-0.5 rounded border transition-colors",
|
||||
isAdmin ? "opacity-30 cursor-not-allowed" : "hover:bg-muted cursor-pointer",
|
||||
PERM_COLOR[o.v], "border-border",
|
||||
)}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
{isAdmin && (
|
||||
<span className="ml-auto text-[11px] text-violet-600 dark:text-violet-400 flex items-center gap-1">
|
||||
<ShieldIcon className="size-3" />Администратор имеет полный доступ
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{SECTION_GROUPS.map(group => (
|
||||
<div key={group.group}>
|
||||
{/* group header */}
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 bg-muted/20 border-b">
|
||||
<span className="text-muted-foreground">{group.icon}</span>
|
||||
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
{group.group}
|
||||
</span>
|
||||
</div>
|
||||
{/* section rows */}
|
||||
<div className="divide-y divide-border/60">
|
||||
{group.items.map(section => {
|
||||
const perm = form.sections.find(s => s.section === section)
|
||||
const level = perm?.level ?? "none"
|
||||
return (
|
||||
<div key={section} className="flex items-center justify-between px-4 py-2.5 hover:bg-muted/20 transition-colors">
|
||||
<span className="text-sm">{section}</span>
|
||||
<PermPills value={level} onChange={v => setSectionPerm(section, v)} disabled={isAdmin} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Servers tab ── */}
|
||||
{tab === "servers" && (
|
||||
<div className="flex flex-col">
|
||||
{/* bulk actions */}
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 border-b bg-muted/30">
|
||||
<span className="text-xs text-muted-foreground mr-1">Выбрать всё:</span>
|
||||
{PERM_OPTS.map(o => (
|
||||
<button key={o.v} type="button" onClick={() => setAllServers(o.v)}
|
||||
disabled={isAdmin}
|
||||
className={cn(
|
||||
"text-[11px] px-2 py-0.5 rounded border transition-colors",
|
||||
isAdmin ? "opacity-30 cursor-not-allowed" : "hover:bg-muted cursor-pointer",
|
||||
PERM_COLOR[o.v], "border-border",
|
||||
)}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
{isAdmin && (
|
||||
<span className="ml-auto text-[11px] text-violet-600 dark:text-violet-400 flex items-center gap-1">
|
||||
<ShieldIcon className="size-3" />Администратор имеет полный доступ
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-border/60">
|
||||
{servers.map(srv => {
|
||||
const perm = form.servers.find(s => s.serverId === srv.id)
|
||||
const level = perm?.level ?? "none"
|
||||
return (
|
||||
<div key={srv.id} className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-muted/20 transition-colors">
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<StatusDot status={srv.status} />
|
||||
{srv.country && <Flag code={srv.country} size={14} />}
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate leading-tight">{srv.name}</p>
|
||||
<p className="text-[11px] font-mono text-muted-foreground">{srv.host} · {srv.site}</p>
|
||||
</div>
|
||||
</div>
|
||||
<PermPills value={level} onChange={v => setServerPerm(srv.id, v)} disabled={isAdmin} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── GRE-клиенты tab ── */}
|
||||
{tab === "subusers" && (
|
||||
<div className="flex flex-col">
|
||||
|
||||
{/* hint */}
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 border-b bg-muted/30">
|
||||
<CableIcon className="size-3.5 text-muted-foreground shrink-0" />
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Учётные записи для подключения устройств к JH через GRE
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SubusersDataGrid
|
||||
subUsers={form.subUsers}
|
||||
servers={servers}
|
||||
revealedIds={revealedIds}
|
||||
onToggleReveal={toggleReveal}
|
||||
onToggleActive={toggleSubUser}
|
||||
onRemove={removeSubUser}
|
||||
/>
|
||||
|
||||
{/* inline add form */}
|
||||
{addSubOpen ? (
|
||||
<div className="border-t bg-muted/20 px-4 py-4 flex flex-col gap-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">Новый GRE-клиент</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[10px] text-muted-foreground">Логин</label>
|
||||
<Input className="h-8 text-xs font-mono" placeholder="gre-office-msk"
|
||||
value={newSubLogin} onChange={e => setNewSubLogin(e.target.value)} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[10px] text-muted-foreground">Описание</label>
|
||||
<Input className="h-8 text-xs" placeholder="Офис MSK"
|
||||
value={newSubDesc} onChange={e => setNewSubDesc(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[10px] text-muted-foreground">Пароль</label>
|
||||
<div className="flex gap-1.5">
|
||||
<Input className="h-8 text-xs font-mono flex-1" placeholder="••••••••"
|
||||
value={newSubPwd} onChange={e => setNewSubPwd(e.target.value)} />
|
||||
<Button variant="outline" size="sm" className="h-8 px-2 shrink-0"
|
||||
onClick={() => setNewSubPwd(genPassword())} title="Сгенерировать пароль">
|
||||
<RefreshCwIcon className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[10px] text-muted-foreground">
|
||||
JH-серверы
|
||||
<span className="ml-1 text-muted-foreground/50">(можно выбрать несколько)</span>
|
||||
</label>
|
||||
<div className="flex flex-col gap-1 rounded-md border border-input bg-background px-2 py-1.5">
|
||||
{jhServers.map(s => {
|
||||
const checked = newSubJhs.includes(s.id)
|
||||
return (
|
||||
<label key={s.id}
|
||||
className="flex items-center gap-2 py-0.5 cursor-pointer hover:text-foreground transition-colors">
|
||||
<input type="checkbox" checked={checked}
|
||||
onChange={() => toggleNewSubJh(s.id)}
|
||||
className="rounded border-input accent-primary" />
|
||||
<Flag code={s.country} size={12} />
|
||||
<span className="font-mono text-xs">{s.name}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{s.site}</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{newSubJhs.length === 0 && (
|
||||
<p className="text-[10px] text-destructive">Выберите хотя бы один JH-сервер</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[10px] text-muted-foreground">IP-клиента</label>
|
||||
<Input className="h-8 text-xs font-mono" placeholder="10.210.0.18"
|
||||
value={newSubIp} onChange={e => setNewSubIp(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Button variant="outline" size="sm" className="flex-1"
|
||||
onClick={() => { setAddSubOpen(false); setNewSubLogin(""); setNewSubPwd(""); setNewSubDesc(""); setNewSubIp(""); setNewSubJhs([]) }}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button size="sm" className="flex-1"
|
||||
disabled={!newSubLogin.trim() || !newSubPwd.trim() || newSubJhs.length === 0}
|
||||
onClick={addSubUser}>
|
||||
<PlusIcon className="size-3.5" />Добавить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
setNewSubLogin(genSubLogin(form.login, form.subUsers))
|
||||
setNewSubPwd(genPassword())
|
||||
setNewSubJhs(jhServers.length > 0 ? [jhServers[0].id] : [])
|
||||
setAddSubOpen(true)
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-4 py-2.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t">
|
||||
<PlusIcon className="size-3.5" />Добавить GRE-клиента
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* footer */}
|
||||
<SheetFooter className="px-5 py-4 border-t shrink-0 gap-2">
|
||||
<Button variant="outline" onClick={onClose} className="flex-1">Отмена</Button>
|
||||
<Button onClick={handleSave} className="flex-1">
|
||||
<CheckIcon className="size-4" />
|
||||
{isCreate ? "Создать" : "Сохранить"}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── delete confirm ───────────────────────────────────────────────────────────
|
||||
|
||||
function DatabaseRestoreConfirm({
|
||||
open,
|
||||
filename,
|
||||
@@ -737,41 +106,6 @@ function DatabaseRestoreConfirm({
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteConfirm({
|
||||
open,
|
||||
user,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: {
|
||||
open: boolean
|
||||
user: User
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
}) {
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={(v) => { if (!v) onCancel() }}>
|
||||
<AlertDialogContent size="default">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogMedia className="bg-destructive/10 text-destructive">
|
||||
<TrashIcon />
|
||||
</AlertDialogMedia>
|
||||
<AlertDialogTitle>Удалить пользователя?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{user.name} · @{user.login}. Это действие нельзя отменить.
|
||||
Пользователь потеряет доступ немедленно.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={onCancel}>Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" onClick={onConfirm}>
|
||||
Удалить
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function SettingsPage() {
|
||||
@@ -824,12 +158,6 @@ export default function SettingsPage() {
|
||||
const [notifBgp, setNotifBgp] = useState(true)
|
||||
const [notifBackup, setNotifBackup] = useState(false)
|
||||
|
||||
// users
|
||||
const [users, setUsers] = useState<User[]>(INIT_USERS)
|
||||
const [sheetOpen, setSheetOpen] = useState(false)
|
||||
const [editUser, setEditUser] = useState<User | null>(null) // null = create mode
|
||||
const [deleteTarget, setDeleteTarget]= useState<User | null>(null)
|
||||
|
||||
// api keys
|
||||
const [apiKeys, setApiKeys] = useState<ApiKey[]>(INIT_API_KEYS)
|
||||
|
||||
@@ -851,22 +179,6 @@ export default function SettingsPage() {
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
}, [])
|
||||
|
||||
const handleUserSave = (form: UserForm) => {
|
||||
if (!editUser) {
|
||||
const initials = form.name.split(" ").map(p => p[0] ?? "").slice(0, 2).join("").toUpperCase()
|
||||
setUsers(prev => [...prev, {
|
||||
id: "u" + Date.now(), ...form,
|
||||
last: "только что", avatar: initials || "??",
|
||||
}])
|
||||
} else {
|
||||
setUsers(prev => prev.map(u => u.id === editUser.id ? { ...u, ...form } : u))
|
||||
}
|
||||
setSheetOpen(false)
|
||||
}
|
||||
|
||||
// total sub-users count for summary
|
||||
const totalSubUsers = users.reduce((s, u) => s + u.subUsers.length, 0)
|
||||
|
||||
useEffect(() => {
|
||||
if (section !== "EvoBGP") return
|
||||
if (mode === "live" && backendStatus === true) queueMicrotask(() => { void evo.loadSettings() })
|
||||
@@ -1409,94 +721,6 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
)
|
||||
|
||||
// ── Пользователи ──
|
||||
if (section === "Пользователи") return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{users.length} пользователей · {users.filter(u => u.active).length} активных
|
||||
{totalSubUsers > 0 && ` · ${totalSubUsers} GRE-клиентов`}
|
||||
</p>
|
||||
<Button size="sm" onClick={() => { setEditUser(null); setSheetOpen(true) }}>
|
||||
<PlusIcon className="size-4" />Пригласить
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Frame dense className="w-full">
|
||||
<FramePanel className="overflow-hidden p-0">
|
||||
{/* table header */}
|
||||
<div className="grid grid-cols-[1fr_120px_100px_80px_auto] items-center gap-3 px-4 py-2 border-b bg-muted/30 text-[11px] font-medium text-muted-foreground">
|
||||
<span>Пользователь</span>
|
||||
<span>Роль</span>
|
||||
<span>Последний вход</span>
|
||||
<span>Статус</span>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-border/60">
|
||||
{users.map(u => {
|
||||
return (
|
||||
<div key={u.id} className="grid grid-cols-[1fr_120px_100px_80px_auto] items-center gap-3 px-4 py-2.5 hover:bg-muted/20 transition-colors">
|
||||
{/* user */}
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<AvatarCircle avatar={u.avatar} active={u.active} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">{u.name}</p>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<p className="text-[11px] font-mono text-muted-foreground">@{u.login}</p>
|
||||
{u.subUsers.length > 0 && (
|
||||
<span className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60">
|
||||
<CableIcon className="size-2.5" />{u.subUsers.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* role */}
|
||||
<span className={cn("text-[11px] font-medium px-2 py-0.5 rounded-full w-fit", ROLE_COLOR[u.role])}>
|
||||
{ROLE_LABEL[u.role]}
|
||||
</span>
|
||||
{/* last */}
|
||||
<span className="text-xs text-muted-foreground">{u.last}</span>
|
||||
{/* status */}
|
||||
<span className={cn("text-[11px] font-medium", u.active ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground")}>
|
||||
{u.active ? "Активен" : "Заблокирован"}
|
||||
</span>
|
||||
{/* actions */}
|
||||
<div className="flex items-center gap-0.5 justify-end">
|
||||
<Button size="sm" variant="ghost" className="size-7 p-0 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => { setEditUser(u); setSheetOpen(true) }} title="Редактировать">
|
||||
<PencilIcon className="size-3.5" />
|
||||
</Button>
|
||||
{u.id !== "u1" && (
|
||||
<Button size="sm" variant="ghost" className="size-7 p-0 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(u)} title="Удалить">
|
||||
<TrashIcon className="size-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</FramePanel>
|
||||
</Frame>
|
||||
|
||||
{/* access summary */}
|
||||
<DataPageCard>
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b">
|
||||
<UserIcon className="size-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-sm font-medium">Сводка прав доступа</span>
|
||||
</div>
|
||||
<SettingsAccessSummaryDataGrid
|
||||
users={users}
|
||||
servers={servers}
|
||||
allSectionsCount={ALL_SECTIONS.length}
|
||||
/>
|
||||
</DataPageCard>
|
||||
</div>
|
||||
)
|
||||
|
||||
// ── API-ключи ──
|
||||
if (section === "API-ключи") return (
|
||||
<div className="flex flex-col gap-4">
|
||||
@@ -1655,15 +879,6 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* user sheet */}
|
||||
<UserSheet
|
||||
key={sheetOpen ? (editUser?.id ?? "create") : "closed"}
|
||||
open={sheetOpen}
|
||||
user={editUser}
|
||||
onSave={handleUserSave}
|
||||
onClose={() => setSheetOpen(false)}
|
||||
/>
|
||||
|
||||
{/* delete confirm */}
|
||||
{dbRestoreFile && (
|
||||
<DatabaseRestoreConfirm
|
||||
@@ -1677,14 +892,6 @@ export default function SettingsPage() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{deleteTarget && (
|
||||
<DeleteConfirm
|
||||
open={!!deleteTarget}
|
||||
user={deleteTarget}
|
||||
onConfirm={() => { setUsers(p => p.filter(u => u.id !== deleteTarget.id)); setDeleteTarget(null) }}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FileImportDialog
|
||||
open={dbRestoreDialogOpen}
|
||||
@@ -1701,3 +908,4 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
+204
-179
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useMemo, useEffect, useCallback } from "react"
|
||||
import { useState, useMemo, useEffect, useCallback, type ReactNode } from "react"
|
||||
import { PageHeader } from "@/components/page-header"
|
||||
import { Frame, FramePanel } from "@/components/reui/frame"
|
||||
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
|
||||
@@ -18,6 +18,14 @@ import { fmtGB, fmtRate } from "@/lib/fmt-rate"
|
||||
import { useDataSource } from "@/lib/data-source"
|
||||
import { useTrafficLive } from "@/hooks/use-traffic-live"
|
||||
import { requestJson } from "@/shared/api/http-client"
|
||||
import { Badge } from "@/components/reui/badge"
|
||||
import {
|
||||
IFACE_TYPE_LABEL,
|
||||
INIT_USERS,
|
||||
ROLE_LABEL,
|
||||
type InterfaceType,
|
||||
} from "@/lib/users"
|
||||
import { TYPE_VARIANT } from "@/components/data-grids/users-expanded-detail"
|
||||
|
||||
// ─── helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -37,18 +45,19 @@ function addSeries(a: number[], b: number[]): number[] {
|
||||
|
||||
// ─── data model ───────────────────────────────────────────────────────────────
|
||||
|
||||
interface GreClientTraffic {
|
||||
interface BoundIfaceTraffic {
|
||||
id: string
|
||||
subUserId: string
|
||||
bindingId: string
|
||||
userId: string
|
||||
userLogin: string
|
||||
login: string
|
||||
description: string
|
||||
userName: string
|
||||
interfaceName: string
|
||||
interfaceType: InterfaceType
|
||||
comment: string
|
||||
serverId: string
|
||||
serverName: string
|
||||
serverSite: string
|
||||
serverCountry: string
|
||||
clientIp: string
|
||||
rxNow: number
|
||||
txNow: number
|
||||
rxPeak: number
|
||||
@@ -75,7 +84,7 @@ interface ServerTraffic {
|
||||
sessions: number
|
||||
rxSeries: number[]
|
||||
txSeries: number[]
|
||||
greClients: GreClientTraffic[]
|
||||
boundIfaces: BoundIfaceTraffic[]
|
||||
}
|
||||
|
||||
interface UserTraffic {
|
||||
@@ -83,7 +92,8 @@ interface UserTraffic {
|
||||
login: string
|
||||
displayName: string
|
||||
role: string
|
||||
greClients: GreClientTraffic[]
|
||||
active?: boolean
|
||||
interfaces: BoundIfaceTraffic[]
|
||||
rxNow: number
|
||||
txNow: number
|
||||
rxPeak: number
|
||||
@@ -125,129 +135,101 @@ function makeApiFetch(backendUrl: string) {
|
||||
}
|
||||
}
|
||||
|
||||
// ─── mock GRE client data ─────────────────────────────────────────────────────
|
||||
function hashSeed(s: string): number {
|
||||
let h = 0
|
||||
for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
|
||||
return Math.abs(h)
|
||||
}
|
||||
|
||||
const greClients: GreClientTraffic[] = [
|
||||
// u1 / admin (Иванов)
|
||||
{
|
||||
id: "su1-srv1", subUserId: "su1", userId: "u1", userLogin: "admin",
|
||||
login: "gre-ivanov-01", description: "Иванов — основной тоннель MSK",
|
||||
serverId: "srv1", serverName: "mt-msk-core-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.0.10",
|
||||
rxNow: 84, txNow: 62, rxPeak: 180, txPeak: 130, rxTotal: 28.4, txTotal: 21.2,
|
||||
rxSeries: buildSeries(301, 84, 25), txSeries: buildSeries(401, 62, 20),
|
||||
status: "online",
|
||||
},
|
||||
{
|
||||
id: "su1-srv7", subUserId: "su1", userId: "u1", userLogin: "admin",
|
||||
login: "gre-ivanov-01", description: "Иванов — основной тоннель LAB",
|
||||
serverId: "srv7", serverName: "mt-msk-lab-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.0.10",
|
||||
rxNow: 6, txNow: 4, rxPeak: 20, txPeak: 14, rxTotal: 1.8, txTotal: 1.1,
|
||||
rxSeries: buildSeries(302, 6, 3), txSeries: buildSeries(402, 4, 2),
|
||||
status: "online",
|
||||
},
|
||||
{
|
||||
id: "su2-srv1", subUserId: "su2", userId: "u1", userLogin: "admin",
|
||||
login: "gre-ivanov-02", description: "Иванов — резервный MSK",
|
||||
serverId: "srv1", serverName: "mt-msk-core-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.0.11",
|
||||
rxNow: 42, txNow: 28, rxPeak: 96, txPeak: 64, rxTotal: 14.2, txTotal: 9.6,
|
||||
rxSeries: buildSeries(303, 42, 15), txSeries: buildSeries(403, 28, 12),
|
||||
status: "online",
|
||||
},
|
||||
{
|
||||
id: "su3-srv7", subUserId: "su3", userId: "u1", userLogin: "admin",
|
||||
login: "gre-ivanov-03", description: "Иванов — лабораторный тоннель",
|
||||
serverId: "srv7", serverName: "mt-msk-lab-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.0.12",
|
||||
rxNow: 4, txNow: 3, rxPeak: 12, txPeak: 8, rxTotal: 1.2, txTotal: 0.8,
|
||||
rxSeries: buildSeries(304, 4, 2), txSeries: buildSeries(404, 3, 1),
|
||||
status: "online",
|
||||
},
|
||||
// u2 / operator1 (Петров)
|
||||
{
|
||||
id: "su4-srv1", subUserId: "su4", userId: "u2", userLogin: "operator1",
|
||||
login: "gre-petrov-01", description: "Петров — основной MSK",
|
||||
serverId: "srv1", serverName: "mt-msk-core-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.1.10",
|
||||
rxNow: 128, txNow: 96, rxPeak: 248, txPeak: 184, rxTotal: 42.8, txTotal: 32.4,
|
||||
rxSeries: buildSeries(305, 128, 35), txSeries: buildSeries(405, 96, 28),
|
||||
status: "online",
|
||||
},
|
||||
{
|
||||
id: "su4-srv7", subUserId: "su4", userId: "u2", userLogin: "operator1",
|
||||
login: "gre-petrov-01", description: "Петров — основной LAB",
|
||||
serverId: "srv7", serverName: "mt-msk-lab-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.1.10",
|
||||
rxNow: 2, txNow: 1, rxPeak: 8, txPeak: 6, rxTotal: 0.6, txTotal: 0.4,
|
||||
rxSeries: buildSeries(306, 2, 1), txSeries: buildSeries(406, 1, 1),
|
||||
status: "online",
|
||||
},
|
||||
// u4 / operator2 (Козлов, неактивный)
|
||||
{
|
||||
id: "su5-srv1", subUserId: "su5", userId: "u4", userLogin: "operator2",
|
||||
login: "gre-kozlov-01", description: "Козлов — MSK",
|
||||
serverId: "srv1", serverName: "mt-msk-core-01", serverSite: "MSK", serverCountry: "RU",
|
||||
clientIp: "10.200.2.10",
|
||||
rxNow: 0, txNow: 0, rxPeak: 44, txPeak: 32, rxTotal: 0, txTotal: 0,
|
||||
rxSeries: Array(60).fill(0), txSeries: Array(60).fill(0),
|
||||
status: "offline",
|
||||
},
|
||||
]
|
||||
function mockBoundFromUsers(): BoundIfaceTraffic[] {
|
||||
return INIT_USERS.flatMap((u) =>
|
||||
u.bindings.map((b) => {
|
||||
const seed = hashSeed(b.id)
|
||||
const offline = !u.active || b.interfaceName.includes("retail") || b.interfaceName.includes("warehouse")
|
||||
const rxNow = offline ? 0 : 12 + (seed % 140)
|
||||
const txNow = offline ? 0 : 8 + (seed % 110)
|
||||
return {
|
||||
id: `${b.userId}:${b.serverId}:${b.interfaceName}`,
|
||||
bindingId: b.id,
|
||||
userId: u.id,
|
||||
userLogin: u.login,
|
||||
userName: u.name,
|
||||
interfaceName: b.interfaceName,
|
||||
interfaceType: b.interfaceType,
|
||||
comment: b.comment,
|
||||
serverId: b.serverId,
|
||||
serverName: b.serverName,
|
||||
serverSite: b.serverSite,
|
||||
serverCountry: b.serverCountry,
|
||||
rxNow,
|
||||
txNow,
|
||||
rxPeak: rxNow + 40,
|
||||
txPeak: txNow + 28,
|
||||
rxTotal: offline ? 0 : +(rxNow / 8).toFixed(1),
|
||||
txTotal: offline ? 0 : +(txNow / 10).toFixed(1),
|
||||
rxSeries: offline ? Array(60).fill(0) : buildSeries(seed, rxNow, Math.max(4, rxNow / 4)),
|
||||
txSeries: offline ? Array(60).fill(0) : buildSeries(seed + 17, txNow, Math.max(3, txNow / 4)),
|
||||
status: (offline ? "offline" : "online") as "online" | "offline",
|
||||
}
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
// ─── mock server data (with GRE clients attached) ─────────────────────────────
|
||||
const boundIfaces: BoundIfaceTraffic[] = mockBoundFromUsers()
|
||||
|
||||
// ─── mock server data (with bound interfaces attached) ────────────────────────
|
||||
|
||||
const serverTraffic: ServerTraffic[] = [
|
||||
{
|
||||
id: "srv1", name: "mt-msk-core-01", site: "MSK", country: "RU", status: "online",
|
||||
rxNow: 342, txNow: 287, rxPeak: 614, txPeak: 521, rxTotal: 124.8, txTotal: 98.2, sessions: 4,
|
||||
rxSeries: buildSeries(101, 342, 80), txSeries: buildSeries(201, 287, 70),
|
||||
greClients: greClients.filter(c => c.serverId === "srv1"),
|
||||
boundIfaces: boundIfaces.filter((c) => c.serverId === "srv1"),
|
||||
},
|
||||
{
|
||||
id: "srv2", name: "mt-spb-edge-01", site: "SPB", country: "RU", status: "online",
|
||||
rxNow: 218, txNow: 164, rxPeak: 412, txPeak: 310, rxTotal: 78.4, txTotal: 61.1, sessions: 6,
|
||||
rxSeries: buildSeries(102, 218, 60), txSeries: buildSeries(202, 164, 50),
|
||||
greClients: [],
|
||||
boundIfaces: [],
|
||||
},
|
||||
{
|
||||
id: "srv3", name: "mt-fra-edge-01", site: "FRA", country: "DE", status: "online",
|
||||
rxNow: 184, txNow: 141, rxPeak: 388, txPeak: 282, rxTotal: 66.2, txTotal: 51.4, sessions: 3,
|
||||
rxSeries: buildSeries(103, 184, 55), txSeries: buildSeries(203, 141, 45),
|
||||
greClients: [],
|
||||
boundIfaces: [],
|
||||
},
|
||||
{
|
||||
id: "srv4", name: "mt-ams-edge-01", site: "AMS", country: "NL", status: "degraded",
|
||||
rxNow: 88, txNow: 61, rxPeak: 244, txPeak: 188, rxTotal: 32.1, txTotal: 24.8, sessions: 2,
|
||||
rxSeries: buildSeries(104, 88, 40), txSeries: buildSeries(204, 61, 30),
|
||||
greClients: [],
|
||||
boundIfaces: [],
|
||||
},
|
||||
{
|
||||
id: "srv5", name: "mt-sgp-edge-01", site: "SGP", country: "SG", status: "offline",
|
||||
rxNow: 0, txNow: 0, rxPeak: 0, txPeak: 0, rxTotal: 0, txTotal: 0, sessions: 0,
|
||||
rxSeries: Array(60).fill(0), txSeries: Array(60).fill(0),
|
||||
greClients: [],
|
||||
boundIfaces: [],
|
||||
},
|
||||
{
|
||||
id: "srv6", name: "mt-ams-test-01", site: "AMS", country: "NL", status: "online",
|
||||
rxNow: 42, txNow: 28, rxPeak: 118, txPeak: 84, rxTotal: 14.2, txTotal: 9.8, sessions: 1,
|
||||
rxSeries: buildSeries(105, 42, 20), txSeries: buildSeries(205, 28, 14),
|
||||
greClients: [],
|
||||
boundIfaces: [],
|
||||
},
|
||||
{
|
||||
id: "srv7", name: "mt-msk-lab-01", site: "MSK", country: "RU", status: "online",
|
||||
rxNow: 12, txNow: 8, rxPeak: 44, txPeak: 31, rxTotal: 4.2, txTotal: 2.9, sessions: 2,
|
||||
rxSeries: buildSeries(106, 12, 6), txSeries: buildSeries(206, 8, 4),
|
||||
greClients: greClients.filter(c => c.serverId === "srv7"),
|
||||
boundIfaces: boundIfaces.filter(c => c.serverId === "srv7"),
|
||||
},
|
||||
]
|
||||
|
||||
// ─── user traffic (aggregated from GRE clients) ───────────────────────────────
|
||||
// ─── user traffic (aggregated from bound interfaces) ──────────────────────────
|
||||
|
||||
function buildUserTraffic(
|
||||
id: string, login: string, displayName: string, role: string,
|
||||
clients: GreClientTraffic[],
|
||||
clients: BoundIfaceTraffic[],
|
||||
active = true,
|
||||
): UserTraffic {
|
||||
const rxNow = clients.reduce((a, c) => a + c.rxNow, 0)
|
||||
const txNow = clients.reduce((a, c) => a + c.txNow, 0)
|
||||
@@ -257,15 +239,19 @@ function buildUserTraffic(
|
||||
const txTotal = clients.reduce((a, c) => a + c.txTotal, 0)
|
||||
const rxSeries = clients.reduce((a, c) => addSeries(a, c.rxSeries), Array(60).fill(0) as number[])
|
||||
const txSeries = clients.reduce((a, c) => addSeries(a, c.txSeries), Array(60).fill(0) as number[])
|
||||
return { id, login, displayName, role, greClients: clients, rxNow, txNow, rxPeak, txPeak, rxTotal, txTotal, rxSeries, txSeries }
|
||||
return { id, login, displayName, role, active, interfaces: clients, rxNow, txNow, rxPeak, txPeak, rxTotal, txTotal, rxSeries, txSeries }
|
||||
}
|
||||
|
||||
const userTraffic: UserTraffic[] = [
|
||||
buildUserTraffic("u1", "admin", "Иванов А.П.", "Администратор", greClients.filter(c => c.userId === "u1")),
|
||||
buildUserTraffic("u2", "operator1", "Петров В.С.", "Оператор", greClients.filter(c => c.userId === "u2")),
|
||||
buildUserTraffic("u3", "viewer", "Сидоров К.А.", "Наблюдатель", greClients.filter(c => c.userId === "u3")),
|
||||
buildUserTraffic("u4", "operator2", "Козлов М.Н.", "Оператор", greClients.filter(c => c.userId === "u4")),
|
||||
]
|
||||
const userTraffic: UserTraffic[] = INIT_USERS.map((u) =>
|
||||
buildUserTraffic(
|
||||
u.id,
|
||||
u.login,
|
||||
u.name,
|
||||
ROLE_LABEL[u.role],
|
||||
boundIfaces.filter((c) => c.userId === u.id),
|
||||
u.active,
|
||||
),
|
||||
)
|
||||
|
||||
// ─── types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -281,13 +267,13 @@ const TRAFFIC_RANGE_LABELS: Record<Range, string> = {
|
||||
"24h": "24ч",
|
||||
}
|
||||
|
||||
type GroupMode = "servers" | "users" | "gre"
|
||||
type GroupMode = "servers" | "users" | "ifaces"
|
||||
type SortField = "rx" | "tx" | "name" | "sessions"
|
||||
type SortDir = "asc" | "desc"
|
||||
|
||||
// ─── shared sub-components ────────────────────────────────────────────────────
|
||||
|
||||
function StatChip({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
|
||||
function StatChip({ icon, label, value }: { icon: ReactNode; label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center size-7 rounded-md bg-muted shrink-0">{icon}</div>
|
||||
@@ -347,9 +333,9 @@ function ServerCard({ s, selected, onClick }: { s: ServerTraffic; selected: bool
|
||||
<ArrowUpIcon className="size-3 text-blue-500" />
|
||||
<span className="font-mono font-medium text-blue-500">{fmtRate(s.txNow)}</span>
|
||||
</div>
|
||||
{s.greClients.length > 0 && (
|
||||
{s.boundIfaces.length > 0 && (
|
||||
<div className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
|
||||
<CableIcon className="size-3" />{s.greClients.length}
|
||||
<CableIcon className="size-3" />{s.boundIfaces.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -358,7 +344,7 @@ function ServerCard({ s, selected, onClick }: { s: ServerTraffic; selected: bool
|
||||
}
|
||||
|
||||
function UserCard({ u, selected, onClick }: { u: UserTraffic; selected: boolean; onClick: () => void }) {
|
||||
const hasClients = u.greClients.length > 0
|
||||
const hasClients = u.interfaces.length > 0
|
||||
return (
|
||||
<button onClick={onClick} className={cn(
|
||||
"text-left w-full rounded-lg border p-3 transition-colors hover:bg-muted/50",
|
||||
@@ -376,7 +362,7 @@ function UserCard({ u, selected, onClick }: { u: UserTraffic; selected: boolean;
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5 text-[10px] text-muted-foreground shrink-0">
|
||||
<CableIcon className="size-3" />{u.greClients.length}
|
||||
<CableIcon className="size-3" />{u.interfaces.length}
|
||||
</div>
|
||||
</div>
|
||||
{hasClients ? (
|
||||
@@ -394,13 +380,13 @@ function UserCard({ u, selected, onClick }: { u: UserTraffic; selected: boolean;
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-[10px] text-muted-foreground">Нет GRE-клиентов</p>
|
||||
<p className="text-[10px] text-muted-foreground">Нет привязанных интерфейсов</p>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function GreCard({ c, selected, onClick }: { c: GreClientTraffic; selected: boolean; onClick: () => void }) {
|
||||
function IfaceCard({ c, selected, onClick }: { c: BoundIfaceTraffic; selected: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<button onClick={onClick} className={cn(
|
||||
"text-left w-full rounded-lg border p-3 transition-colors hover:bg-muted/50",
|
||||
@@ -411,7 +397,7 @@ function GreCard({ c, selected, onClick }: { c: GreClientTraffic; selected: bool
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<StatusDot status={c.status} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-mono font-medium truncate">{c.login}</p>
|
||||
<p className="text-xs font-mono font-medium truncate">{c.interfaceName}</p>
|
||||
<p className="text-[10px] text-muted-foreground truncate">{c.userLogin}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -440,29 +426,25 @@ function GreCard({ c, selected, onClick }: { c: GreClientTraffic; selected: bool
|
||||
* Compact single-row card for a GRE client.
|
||||
* showServer=true adds a server chip (used in user-detail where server is not implied).
|
||||
*/
|
||||
function GreClientRow({ c, showServer = false }: { c: GreClientTraffic; showServer?: boolean }) {
|
||||
function IfaceRow({ c, showServer = false }: { c: BoundIfaceTraffic; showServer?: boolean }) {
|
||||
return (
|
||||
<div className={cn(
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg border bg-card hover:bg-muted/30 transition-colors",
|
||||
c.status === "offline" && "opacity-55",
|
||||
)}>
|
||||
{/* identity */}
|
||||
<StatusDot status={c.status} />
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-mono font-semibold">{c.login}</span>
|
||||
<span className="text-xs font-mono font-semibold">{c.interfaceName}</span>
|
||||
<Badge variant={TYPE_VARIANT[c.interfaceType]} size="sm">{IFACE_TYPE_LABEL[c.interfaceType]}</Badge>
|
||||
{showServer && (
|
||||
<span className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground
|
||||
bg-muted px-1.5 py-0.5 rounded">
|
||||
<span className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
||||
<Flag code={c.serverCountry} />{c.serverSite}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground truncate mt-0.5">{c.description}</p>
|
||||
<p className="text-[10px] text-muted-foreground truncate mt-0.5">{c.comment || c.userLogin}</p>
|
||||
</div>
|
||||
|
||||
{/* live RX / TX */}
|
||||
<div className="shrink-0 text-right leading-tight">
|
||||
<div className="flex items-center gap-1 justify-end text-xs font-mono font-medium text-emerald-600 dark:text-emerald-400">
|
||||
<ArrowDownIcon className="size-3" />{fmtRate(c.rxNow)}
|
||||
@@ -471,19 +453,13 @@ function GreClientRow({ c, showServer = false }: { c: GreClientTraffic; showServ
|
||||
<ArrowUpIcon className="size-3" />{fmtRate(c.txNow)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* totals today */}
|
||||
<div className="shrink-0 text-right leading-tight text-[10px] text-muted-foreground w-[72px]">
|
||||
<p className="tabular-nums">{fmtGB(c.rxTotal)}</p>
|
||||
<p className="tabular-nums">{fmtGB(c.txTotal)}</p>
|
||||
</div>
|
||||
|
||||
{/* status dot — badge style */}
|
||||
<span className={cn(
|
||||
"shrink-0 text-[10px] px-1.5 py-0.5 rounded-full font-medium tabular-nums",
|
||||
c.status === "online"
|
||||
? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
|
||||
: "bg-muted text-muted-foreground",
|
||||
c.status === "online" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground",
|
||||
)}>
|
||||
{c.status === "online" ? "online" : "offline"}
|
||||
</span>
|
||||
@@ -491,12 +467,12 @@ function GreClientRow({ c, showServer = false }: { c: GreClientTraffic; showServ
|
||||
)
|
||||
}
|
||||
|
||||
function GreClientsList({ clients, showServer = false }: { clients: GreClientTraffic[]; showServer?: boolean }) {
|
||||
function BoundIfacesList({ clients, showServer = false }: { clients: BoundIfaceTraffic[]; showServer?: boolean }) {
|
||||
if (clients.length === 0)
|
||||
return <p className="text-xs text-muted-foreground py-1">Нет GRE-клиентов</p>
|
||||
return <p className="text-xs text-muted-foreground py-1">Нет привязанных интерфейсов</p>
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{clients.map(c => <GreClientRow key={c.id} c={c} showServer={showServer} />)}
|
||||
{clients.map((c) => <IfaceRow key={c.id} c={c} showServer={showServer} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -504,7 +480,7 @@ function GreClientsList({ clients, showServer = false }: { clients: GreClientTra
|
||||
// ─── detail panel helpers ─────────────────────────────────────────────────────
|
||||
|
||||
function DetailHeader({ range, setRange, children }: {
|
||||
range: Range; setRange: (r: Range) => void; children: React.ReactNode
|
||||
range: Range; setRange: (r: Range) => void; children: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-start justify-between mb-3 gap-3">
|
||||
@@ -617,14 +593,14 @@ function ServerDetail({
|
||||
/>
|
||||
</div>
|
||||
<TotalsRow rxTotal={sel.rxTotal} txTotal={sel.txTotal} rxSeries={sel.rxSeries} txSeries={sel.txSeries} />
|
||||
{sel.greClients.length > 0 && (
|
||||
{sel.boundIfaces.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<CableIcon className="size-4 text-muted-foreground" />
|
||||
GRE-клиенты
|
||||
<span className="text-xs text-muted-foreground font-normal">({sel.greClients.length})</span>
|
||||
Привязанные интерфейсы
|
||||
<span className="text-xs text-muted-foreground font-normal">({sel.boundIfaces.length})</span>
|
||||
</h3>
|
||||
<GreClientsList clients={sel.greClients} />
|
||||
<BoundIfacesList clients={sel.boundIfaces} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@@ -632,7 +608,7 @@ function ServerDetail({
|
||||
}
|
||||
|
||||
function UserDetail({ sel, range, setRange }: { sel: UserTraffic; range: Range; setRange: (r: Range) => void }) {
|
||||
const hasClients = sel.greClients.length > 0
|
||||
const hasClients = sel.interfaces.length > 0
|
||||
return (
|
||||
<>
|
||||
<DetailHeader range={range} setRange={setRange}>
|
||||
@@ -645,7 +621,7 @@ function UserDetail({ sel, range, setRange }: { sel: UserTraffic; range: Range;
|
||||
</div>
|
||||
</DetailHeader>
|
||||
{!hasClients ? (
|
||||
<OfflinePlaceholder text="Нет GRE-клиентов у этого пользователя" />
|
||||
<OfflinePlaceholder text="Нет привязанных интерфейсов у этого пользователя" />
|
||||
) : (
|
||||
<>
|
||||
<TrafficRxTxChart rx={sel.rxSeries} tx={sel.txSeries} range={range} />
|
||||
@@ -653,16 +629,16 @@ function UserDetail({ sel, range, setRange }: { sel: UserTraffic; range: Range;
|
||||
<StatChip icon={<ArrowDownIcon className="size-3.5 text-emerald-500" />} label="RX сейчас" value={fmtRate(sel.rxNow)} />
|
||||
<StatChip icon={<ArrowUpIcon className="size-3.5 text-blue-500" />} label="TX сейчас" value={fmtRate(sel.txNow)} />
|
||||
<StatChip icon={<TrendingUpIcon className="size-3.5 text-amber-500" />} label="Пик RX" value={fmtRate(sel.rxPeak)} />
|
||||
<StatChip icon={<CableIcon className="size-3.5 text-purple-500" />} label="GRE-клиентов" value={`${sel.greClients.length}`} />
|
||||
<StatChip icon={<CableIcon className="size-3.5 text-purple-500" />} label="Интерфейсы" value={`${sel.interfaces.length}`} />
|
||||
</div>
|
||||
<TotalsRow rxTotal={sel.rxTotal} txTotal={sel.txTotal} rxSeries={sel.rxSeries} txSeries={sel.txSeries} />
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<CableIcon className="size-4 text-muted-foreground" />
|
||||
GRE-клиенты
|
||||
<span className="text-xs text-muted-foreground font-normal">({sel.greClients.length})</span>
|
||||
Привязанные интерфейсы
|
||||
<span className="text-xs text-muted-foreground font-normal">({sel.interfaces.length})</span>
|
||||
</h3>
|
||||
<GreClientsList clients={sel.greClients} showServer />
|
||||
<BoundIfacesList clients={sel.interfaces} showServer />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -670,15 +646,16 @@ function UserDetail({ sel, range, setRange }: { sel: UserTraffic; range: Range;
|
||||
)
|
||||
}
|
||||
|
||||
function GreDetail({ sel, range, setRange }: { sel: GreClientTraffic; range: Range; setRange: (r: Range) => void }) {
|
||||
function IfaceDetail({ sel, range, setRange }: { sel: BoundIfaceTraffic; range: Range; setRange: (r: Range) => void }) {
|
||||
return (
|
||||
<>
|
||||
<DetailHeader range={range} setRange={setRange}>
|
||||
<StatusDot status={sel.status} />
|
||||
<div className="leading-tight min-w-0">
|
||||
<h2 className="text-base font-mono font-semibold">{sel.login}</h2>
|
||||
<p className="text-xs text-muted-foreground truncate">{sel.description}</p>
|
||||
<h2 className="text-base font-mono font-semibold">{sel.interfaceName}</h2>
|
||||
<p className="text-xs text-muted-foreground truncate">{sel.comment || sel.userLogin}</p>
|
||||
</div>
|
||||
<Badge variant={TYPE_VARIANT[sel.interfaceType]} size="sm">{IFACE_TYPE_LABEL[sel.interfaceType]}</Badge>
|
||||
<span className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded flex items-center gap-1 shrink-0">
|
||||
<Flag code={sel.serverCountry} />{sel.serverSite}
|
||||
</span>
|
||||
@@ -693,15 +670,15 @@ function GreDetail({ sel, range, setRange }: { sel: GreClientTraffic; range: Ran
|
||||
<TotalsRow rxTotal={sel.rxTotal} txTotal={sel.txTotal} rxSeries={sel.rxSeries} txSeries={sel.txSeries} />
|
||||
<div className="mt-4 pt-4 border-t grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">Сервер JH</p>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">Сервер</p>
|
||||
<p className="text-sm font-mono">{sel.serverName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">IP клиента</p>
|
||||
<p className="text-sm font-mono">{sel.clientIp}</p>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">Тип</p>
|
||||
<p className="text-sm">{IFACE_TYPE_LABEL[sel.interfaceType]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">Аккаунт</p>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">Пользователь</p>
|
||||
<p className="text-sm font-mono">{sel.userLogin}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -711,17 +688,17 @@ function GreDetail({ sel, range, setRange }: { sel: GreClientTraffic; range: Ran
|
||||
|
||||
// ─── page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
const GROUP_MODES: Array<{ mode: GroupMode; icon: React.ReactNode; label: string }> = [
|
||||
const GROUP_MODES: Array<{ mode: GroupMode; icon: ReactNode; label: string }> = [
|
||||
{ mode: "servers", icon: <ServerIcon className="size-3" />, label: "Серверы" },
|
||||
{ mode: "users", icon: <UsersIcon className="size-3" />, label: "Клиенты" },
|
||||
{ mode: "gre", icon: <CableIcon className="size-3" />, label: "GRE" },
|
||||
{ mode: "ifaces", icon: <CableIcon className="size-3" />, label: "Интерфейсы" },
|
||||
]
|
||||
|
||||
const SORT_FIELDS: Array<{ field: SortField; label: string; modesOnly?: GroupMode[] }> = [
|
||||
{ field: "rx", label: "RX" },
|
||||
{ field: "tx", label: "TX" },
|
||||
{ field: "name", label: "Имя" },
|
||||
{ field: "sessions", label: "Сессий", modesOnly: ["servers"] },
|
||||
{ field: "sessions", label: "Сессий", modesOnly: ["servers", "users"] },
|
||||
]
|
||||
|
||||
export default function TrafficPage() {
|
||||
@@ -743,7 +720,9 @@ export default function TrafficPage() {
|
||||
const [hideDisabledIfaces, setHideDisabledIfaces] = useState(true)
|
||||
const [detailBusy, setDetailBusy] = useState(false)
|
||||
const [liveDetailServer, setLiveDetailServer] = useState<ServerTraffic | null>(null)
|
||||
const effectiveMode: GroupMode = isLive ? "servers" : groupMode
|
||||
const [liveUsers, setLiveUsers] = useState<UserTraffic[]>([])
|
||||
const [liveBoundIfaces, setLiveBoundIfaces] = useState<BoundIfaceTraffic[]>([])
|
||||
const effectiveMode: GroupMode = groupMode
|
||||
const { sample: liveSample, error: liveStreamError } = useTrafficLive({
|
||||
enabled: isLive && effectiveMode === "servers" && liveServers.some((s) => s.id === selectedId),
|
||||
backendUrl,
|
||||
@@ -767,7 +746,25 @@ export default function TrafficPage() {
|
||||
sessions: s.sessions,
|
||||
rxSeries: s.rxSeries.length ? s.rxSeries : Array(60).fill(0),
|
||||
txSeries: s.txSeries.length ? s.txSeries : Array(60).fill(0),
|
||||
greClients: [],
|
||||
boundIfaces: [],
|
||||
}
|
||||
}
|
||||
|
||||
const toLiveBound = (c: BoundIfaceTraffic): BoundIfaceTraffic => ({
|
||||
...c,
|
||||
interfaceType: (["ether", "gre", "wg", "other"].includes(c.interfaceType) ? c.interfaceType : "other") as InterfaceType,
|
||||
rxSeries: c.rxSeries.length ? c.rxSeries : Array(60).fill(0),
|
||||
txSeries: c.txSeries.length ? c.txSeries : Array(60).fill(0),
|
||||
})
|
||||
|
||||
const toLiveUser = (u: UserTraffic & { interfaces?: BoundIfaceTraffic[] }): UserTraffic => {
|
||||
const ifaces = (u.interfaces ?? []).map(toLiveBound)
|
||||
return {
|
||||
...u,
|
||||
role: ROLE_LABEL[u.role as keyof typeof ROLE_LABEL] ?? u.role,
|
||||
interfaces: ifaces,
|
||||
rxSeries: u.rxSeries.length ? u.rxSeries : Array(60).fill(0),
|
||||
txSeries: u.txSeries.length ? u.txSeries : Array(60).fill(0),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -776,29 +773,48 @@ export default function TrafficPage() {
|
||||
setLiveBusy(true)
|
||||
setLiveError(null)
|
||||
try {
|
||||
const res = await apiFetch<{ servers: LiveTrafficServer[] }>(`/api/traffic/servers?range=${encodeURIComponent(targetRange)}`)
|
||||
const mapped: ServerTraffic[] = res.servers.map(toLiveServer)
|
||||
const q = encodeURIComponent(targetRange)
|
||||
const [srvRes, usersRes, ifacesRes] = await Promise.all([
|
||||
apiFetch<{ servers: LiveTrafficServer[] }>(`/api/traffic/servers?range=${q}`),
|
||||
apiFetch<{ users: UserTraffic[] }>(`/api/traffic/users?range=${q}`),
|
||||
apiFetch<{ interfaces: BoundIfaceTraffic[] }>(`/api/traffic/bound-interfaces?range=${q}`),
|
||||
])
|
||||
const liveIfaces = ifacesRes.interfaces.map(toLiveBound)
|
||||
const mapped: ServerTraffic[] = srvRes.servers.map((s) => {
|
||||
const base = toLiveServer(s)
|
||||
return { ...base, boundIfaces: liveIfaces.filter((i) => i.serverId === String(s.id)) }
|
||||
})
|
||||
const mappedUsers = usersRes.users.map(toLiveUser)
|
||||
setLiveServers(mapped)
|
||||
setSelectedId((prev) => mapped.some((x) => x.id === prev) ? prev : (mapped[0]?.id ?? ""))
|
||||
setLiveUsers(mappedUsers)
|
||||
setLiveBoundIfaces(liveIfaces)
|
||||
setSelectedId((prev) => {
|
||||
if (groupMode === "users") return mappedUsers.some((x) => x.id === prev) ? prev : (mappedUsers[0]?.id ?? "")
|
||||
if (groupMode === "ifaces") return liveIfaces.some((x) => x.id === prev) ? prev : (liveIfaces[0]?.id ?? "")
|
||||
return mapped.some((x) => x.id === prev) ? prev : (mapped[0]?.id ?? "")
|
||||
})
|
||||
} catch (e) {
|
||||
setLiveError(e instanceof Error ? e.message : "Не удалось загрузить live трафик")
|
||||
} finally {
|
||||
setLiveBusy(false)
|
||||
}
|
||||
}, [apiFetch, isLive])
|
||||
}, [apiFetch, isLive, groupMode])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLive) {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setLiveServers([])
|
||||
setLiveUsers([])
|
||||
setLiveBoundIfaces([])
|
||||
setLiveError(null)
|
||||
return
|
||||
}
|
||||
if (groupMode !== "servers") setGroupMode("servers")
|
||||
void loadLiveTraffic(range)
|
||||
}, [isLive, groupMode, range, loadLiveTraffic])
|
||||
}, [isLive, range, loadLiveTraffic])
|
||||
|
||||
const activeServerTraffic = isLive ? liveServers : serverTraffic
|
||||
const activeUserTraffic = isLive ? liveUsers : userTraffic
|
||||
const activeBoundIfaces = isLive ? liveBoundIfaces : boundIfaces
|
||||
const visibleIfaces = useMemo(
|
||||
() => hideDisabledIfaces ? serverIfaces.filter((i) => !i.disabled && i.running) : serverIfaces,
|
||||
[serverIfaces, hideDisabledIfaces],
|
||||
@@ -826,18 +842,19 @@ export default function TrafficPage() {
|
||||
}
|
||||
setDetailBusy(true)
|
||||
apiFetch<{ server: LiveTrafficServer }>(`/api/traffic/servers/${encodeURIComponent(selectedId)}?range=${encodeURIComponent(range)}&iface=${encodeURIComponent(selectedIface)}`)
|
||||
.then((res) => setLiveDetailServer(toLiveServer(res.server)))
|
||||
.then((res) => setLiveDetailServer({
|
||||
...toLiveServer(res.server),
|
||||
boundIfaces: liveBoundIfaces.filter((i) => i.serverId === selectedId),
|
||||
}))
|
||||
.catch(() => setLiveDetailServer(null))
|
||||
.finally(() => setDetailBusy(false))
|
||||
}, [isLive, effectiveMode, selectedId, range, selectedIface, apiFetch])
|
||||
}, [isLive, effectiveMode, selectedId, range, selectedIface, apiFetch, liveBoundIfaces])
|
||||
|
||||
const handleModeChange = (mode: GroupMode) => {
|
||||
if (isLive && mode !== "servers") return
|
||||
setGroupMode(mode)
|
||||
if (mode === "servers") setSelectedId("srv1")
|
||||
else if (mode === "users") setSelectedId("u1")
|
||||
else setSelectedId("su1-srv1")
|
||||
// reset sort to rx desc when switching
|
||||
const handleModeChange = (next: GroupMode) => {
|
||||
setGroupMode(next)
|
||||
if (next === "servers") setSelectedId(activeServerTraffic[0]?.id ?? "srv1")
|
||||
else if (next === "users") setSelectedId((isLive ? liveUsers : userTraffic)[0]?.id ?? "u1")
|
||||
else setSelectedId((isLive ? liveBoundIfaces : boundIfaces)[0]?.id ?? "")
|
||||
setSortField("rx")
|
||||
setSortDir("desc")
|
||||
setSearch("")
|
||||
@@ -864,39 +881,47 @@ export default function TrafficPage() {
|
||||
}, [sortField, sortDir, q, activeServerTraffic])
|
||||
|
||||
const sortedUsers = useMemo(() => {
|
||||
return [...userTraffic]
|
||||
return [...activeUserTraffic]
|
||||
.filter(u => !q || u.login.toLowerCase().includes(q) || u.displayName.toLowerCase().includes(q))
|
||||
.sort((a, b) => {
|
||||
let v = 0
|
||||
if (sortField === "rx") v = a.rxNow - b.rxNow
|
||||
else if (sortField === "tx") v = a.txNow - b.txNow
|
||||
else if (sortField === "name") v = a.login.localeCompare(b.login)
|
||||
else if (sortField === "sessions") v = a.greClients.length - b.greClients.length
|
||||
else if (sortField === "sessions") v = a.interfaces.length - b.interfaces.length
|
||||
return sortDir === "desc" ? -v : v
|
||||
})
|
||||
}, [sortField, sortDir, q])
|
||||
}, [sortField, sortDir, q, activeUserTraffic])
|
||||
|
||||
const sortedGre = useMemo(() => {
|
||||
return [...greClients]
|
||||
.filter(c => !q || c.login.toLowerCase().includes(q) || c.description.toLowerCase().includes(q) || c.userLogin.toLowerCase().includes(q))
|
||||
const sortedIfaces = useMemo(() => {
|
||||
return [...activeBoundIfaces]
|
||||
.filter(c => !q
|
||||
|| c.interfaceName.toLowerCase().includes(q)
|
||||
|| c.comment.toLowerCase().includes(q)
|
||||
|| c.userLogin.toLowerCase().includes(q))
|
||||
.sort((a, b) => {
|
||||
let v = 0
|
||||
if (sortField === "rx") v = a.rxNow - b.rxNow
|
||||
else if (sortField === "tx") v = a.txNow - b.txNow
|
||||
else if (sortField === "name") v = a.login.localeCompare(b.login)
|
||||
else if (sortField === "name") v = a.interfaceName.localeCompare(b.interfaceName)
|
||||
return sortDir === "desc" ? -v : v
|
||||
})
|
||||
}, [sortField, sortDir, q])
|
||||
}, [sortField, sortDir, q, activeBoundIfaces])
|
||||
|
||||
const selServer = useMemo(() => activeServerTraffic.find(s => s.id === selectedId) ?? activeServerTraffic[0], [selectedId, activeServerTraffic])
|
||||
const detailServer = liveDetailServer?.id === selectedId ? liveDetailServer : selServer
|
||||
const selUser = useMemo(() => userTraffic.find(u => u.id === selectedId) ?? userTraffic[0], [selectedId])
|
||||
const selGre = useMemo(() => greClients.find(c => c.id === selectedId) ?? greClients[0], [selectedId])
|
||||
const selUser = useMemo(() => activeUserTraffic.find(u => u.id === selectedId) ?? activeUserTraffic[0], [selectedId, activeUserTraffic])
|
||||
const selIface = useMemo(() => activeBoundIfaces.find(c => c.id === selectedId) ?? activeBoundIfaces[0], [selectedId, activeBoundIfaces])
|
||||
|
||||
const totalRx = activeServerTraffic.reduce((a, s) => a + s.rxNow, 0)
|
||||
const totalTx = activeServerTraffic.reduce((a, s) => a + s.txNow, 0)
|
||||
const peakRx = activeServerTraffic.reduce((a, s) => Math.max(a, s.rxPeak), 0)
|
||||
const peakTx = activeServerTraffic.reduce((a, s) => Math.max(a, s.txPeak), 0)
|
||||
const kpiSource = effectiveMode === "users"
|
||||
? activeUserTraffic
|
||||
: effectiveMode === "ifaces"
|
||||
? activeBoundIfaces
|
||||
: activeServerTraffic
|
||||
const totalRx = kpiSource.reduce((a, s) => a + s.rxNow, 0)
|
||||
const totalTx = kpiSource.reduce((a, s) => a + s.txNow, 0)
|
||||
const peakRx = kpiSource.reduce((a, s) => Math.max(a, s.rxPeak), 0)
|
||||
const peakTx = kpiSource.reduce((a, s) => Math.max(a, s.txPeak), 0)
|
||||
|
||||
const visibleSortFields = SORT_FIELDS.filter(s => !s.modesOnly || s.modesOnly.includes(effectiveMode))
|
||||
|
||||
@@ -922,7 +947,7 @@ export default function TrafficPage() {
|
||||
{/* ── mode tab bar ── */}
|
||||
<div className="border-b bg-background shrink-0">
|
||||
<div className="flex items-center px-6">
|
||||
{GROUP_MODES.filter(m => !isLive || m.mode === "servers").map(({ mode, icon, label }) => (
|
||||
{GROUP_MODES.map(({ mode, icon, label }) => (
|
||||
<button key={mode} onClick={() => handleModeChange(mode)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px",
|
||||
@@ -1018,8 +1043,8 @@ export default function TrafficPage() {
|
||||
{effectiveMode === "users" && sortedUsers.map(u => (
|
||||
<UserCard key={u.id} u={u} selected={u.id === selectedId} onClick={() => setSelectedId(u.id)} />
|
||||
))}
|
||||
{effectiveMode === "gre" && sortedGre.map(c => (
|
||||
<GreCard key={c.id} c={c} selected={c.id === selectedId} onClick={() => setSelectedId(c.id)} />
|
||||
{effectiveMode === "ifaces" && sortedIfaces.map(c => (
|
||||
<IfaceCard key={c.id} c={c} selected={c.id === selectedId} onClick={() => setSelectedId(c.id)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1086,8 +1111,8 @@ export default function TrafficPage() {
|
||||
liveHint={liveSample ? "live" : (liveStreamError ? "история" : undefined)}
|
||||
/>
|
||||
)}
|
||||
{effectiveMode === "users" && <UserDetail sel={selUser} range={range} setRange={setRange} />}
|
||||
{effectiveMode === "gre" && <GreDetail sel={selGre} range={range} setRange={setRange} />}
|
||||
{effectiveMode === "users" && selUser && <UserDetail sel={selUser} range={range} setRange={setRange} />}
|
||||
{effectiveMode === "ifaces" && selIface && <IfaceDetail sel={selIface} range={range} setRange={setRange} />}
|
||||
</FramePanel>
|
||||
</Frame>
|
||||
|
||||
|
||||
@@ -0,0 +1,294 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { PageHeader } from "@/components/page-header"
|
||||
import { DataPageCard } from "@/components/data-page-card"
|
||||
import { UsersDataGrid } from "@/components/data-grids/users-data-grid"
|
||||
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
|
||||
import { UserSheet } from "@/components/users/user-sheet"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogMedia,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { servers as mockServers } from "@/lib/data"
|
||||
import { useDataSource } from "@/lib/data-source"
|
||||
import {
|
||||
ALL_SECTIONS,
|
||||
INIT_USERS,
|
||||
userInitials,
|
||||
type AppUser,
|
||||
type AppUserForm,
|
||||
type UserServerOption,
|
||||
} from "@/lib/users"
|
||||
import { listServers } from "@/shared/api/servers"
|
||||
import {
|
||||
createAppUser,
|
||||
createUserBinding,
|
||||
deleteAppUser,
|
||||
deleteUserBinding,
|
||||
listAppUsers,
|
||||
updateAppUser,
|
||||
} from "@/shared/api/users"
|
||||
import { ApiClientError } from "@/shared/api/http-client"
|
||||
import { toast } from "sonner"
|
||||
import {
|
||||
CableIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
UserCheckIcon,
|
||||
UsersIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
function toServerOptionsFromMock(): UserServerOption[] {
|
||||
return mockServers.map((s) => ({
|
||||
id: s.id,
|
||||
name: s.name,
|
||||
host: s.host,
|
||||
site: s.site,
|
||||
country: s.country,
|
||||
status: s.status,
|
||||
}))
|
||||
}
|
||||
|
||||
export default function UsersPage() {
|
||||
const { mode, backendUrl } = useDataSource()
|
||||
const isLive = mode === "live"
|
||||
|
||||
const [users, setUsers] = useState<AppUser[]>(INIT_USERS)
|
||||
const [serverOptions, setServerOptions] = useState<UserServerOption[]>(toServerOptionsFromMock)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [sheetOpen, setSheetOpen] = useState(false)
|
||||
const [editUser, setEditUser] = useState<AppUser | null>(null)
|
||||
const [deleteTarget, setDeleteTarget] = useState<AppUser | null>(null)
|
||||
|
||||
const loadLive = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [list, srvs] = await Promise.all([
|
||||
listAppUsers(backendUrl),
|
||||
listServers(backendUrl),
|
||||
])
|
||||
setUsers(list)
|
||||
setServerOptions(srvs.map((s) => ({
|
||||
id: String(s.id),
|
||||
name: s.name || s.host,
|
||||
host: s.host,
|
||||
site: s.site,
|
||||
country: s.country,
|
||||
status: s.status,
|
||||
})))
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Не удалось загрузить пользователей")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [backendUrl])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLive) {
|
||||
setUsers(INIT_USERS)
|
||||
setServerOptions(toServerOptionsFromMock())
|
||||
return
|
||||
}
|
||||
void loadLive()
|
||||
}, [isLive, loadLive])
|
||||
|
||||
const boundCount = users.reduce((n, u) => n + u.bindings.length, 0)
|
||||
const activeCount = users.filter((u) => u.active).length
|
||||
|
||||
const applyBindingsDiff = async (userId: string, next: AppUserForm["bindings"], prev: AppUser["bindings"]) => {
|
||||
const nextKeys = new Set(next.map((b) => `${b.serverId}::${b.interfaceName}`))
|
||||
const prevKeys = new Map(prev.map((b) => [`${b.serverId}::${b.interfaceName}`, b] as const))
|
||||
for (const b of prev) {
|
||||
if (!nextKeys.has(`${b.serverId}::${b.interfaceName}`)) {
|
||||
await deleteUserBinding(backendUrl, userId, b.id)
|
||||
}
|
||||
}
|
||||
for (const b of next) {
|
||||
if (!prevKeys.has(`${b.serverId}::${b.interfaceName}`)) {
|
||||
await createUserBinding(backendUrl, userId, {
|
||||
serverId: Number(b.serverId),
|
||||
interfaceName: b.interfaceName,
|
||||
interfaceType: b.interfaceType,
|
||||
comment: b.comment,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async (form: AppUserForm) => {
|
||||
if (!isLive) {
|
||||
if (!editUser) {
|
||||
const id = `u${Date.now()}`
|
||||
const created: AppUser = {
|
||||
id,
|
||||
...form,
|
||||
last: "только что",
|
||||
avatar: userInitials(form.name),
|
||||
bindings: form.bindings.map((b, i) => ({ ...b, id: `b${id}-${i}`, userId: id })),
|
||||
}
|
||||
setUsers((prev) => [...prev, created])
|
||||
} else {
|
||||
setUsers((prev) => prev.map((u) => u.id === editUser.id ? { ...u, ...form, avatar: userInitials(form.name) } : u))
|
||||
}
|
||||
setSheetOpen(false)
|
||||
toast.success(editUser ? "Пользователь сохранён" : "Пользователь создан")
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
if (!editUser) {
|
||||
const created = await createAppUser(backendUrl, {
|
||||
name: form.name,
|
||||
login: form.login,
|
||||
email: form.email,
|
||||
role: form.role,
|
||||
active: form.active,
|
||||
avatar: userInitials(form.name),
|
||||
sections: form.sections,
|
||||
servers: form.servers,
|
||||
})
|
||||
await applyBindingsDiff(created.id, form.bindings, [])
|
||||
await loadLive()
|
||||
} else {
|
||||
await updateAppUser(backendUrl, editUser.id, {
|
||||
name: form.name,
|
||||
login: form.login,
|
||||
email: form.email,
|
||||
role: form.role,
|
||||
active: form.active,
|
||||
avatar: userInitials(form.name),
|
||||
sections: form.sections,
|
||||
servers: form.servers,
|
||||
})
|
||||
await applyBindingsDiff(editUser.id, form.bindings, editUser.bindings)
|
||||
await loadLive()
|
||||
}
|
||||
setSheetOpen(false)
|
||||
toast.success(editUser ? "Пользователь сохранён" : "Пользователь создан")
|
||||
} catch (err) {
|
||||
const msg = err instanceof ApiClientError ? err.message : err instanceof Error ? err.message : "Ошибка сохранения"
|
||||
toast.error(msg)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return
|
||||
if (!isLive) {
|
||||
setUsers((prev) => prev.filter((u) => u.id !== deleteTarget.id))
|
||||
setDeleteTarget(null)
|
||||
toast.success("Пользователь удалён")
|
||||
return
|
||||
}
|
||||
try {
|
||||
await deleteAppUser(backendUrl, deleteTarget.id)
|
||||
setDeleteTarget(null)
|
||||
await loadLive()
|
||||
toast.success("Пользователь удалён")
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Не удалось удалить")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PageHeader
|
||||
crumbs={[{ label: "Управление" }, { label: "Пользователи" }]}
|
||||
actions={
|
||||
<Button size="sm" onClick={() => { setEditUser(null); setSheetOpen(true) }}>
|
||||
<PlusIcon className="size-4" />Пригласить
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 flex flex-col gap-5">
|
||||
{/* Preview: https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile */}
|
||||
<KpiStatGrid
|
||||
aria-label="Сводка пользователей"
|
||||
items={[
|
||||
{
|
||||
id: "all",
|
||||
label: "Пользователи",
|
||||
value: users.length,
|
||||
icon: <UsersIcon className="size-4" />,
|
||||
iconClassName: "text-muted-foreground",
|
||||
},
|
||||
{
|
||||
id: "active",
|
||||
label: "Активные",
|
||||
value: activeCount,
|
||||
icon: <UserCheckIcon className="size-4" />,
|
||||
iconClassName: "text-success",
|
||||
},
|
||||
{
|
||||
id: "ifaces",
|
||||
label: "Привязанные ifaces",
|
||||
value: boundCount,
|
||||
icon: <CableIcon className="size-4" />,
|
||||
iconClassName: "text-info",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Preview: https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/docs/components/base/data-grid · https://reui.io/docs/components/base/frame */}
|
||||
<DataPageCard>
|
||||
<UsersDataGrid
|
||||
users={users}
|
||||
serversCount={serverOptions.length}
|
||||
allSectionsCount={ALL_SECTIONS.length}
|
||||
isLoading={loading}
|
||||
onEdit={(u) => { setEditUser(u); setSheetOpen(true) }}
|
||||
onDelete={setDeleteTarget}
|
||||
/>
|
||||
</DataPageCard>
|
||||
</div>
|
||||
|
||||
<UserSheet
|
||||
key={sheetOpen ? (editUser?.id ?? "create") : "closed"}
|
||||
open={sheetOpen}
|
||||
user={editUser}
|
||||
users={users}
|
||||
servers={serverOptions}
|
||||
isLive={isLive}
|
||||
backendUrl={backendUrl}
|
||||
saving={saving}
|
||||
onSave={(f) => { void handleSave(f) }}
|
||||
onClose={() => setSheetOpen(false)}
|
||||
/>
|
||||
|
||||
{deleteTarget && (
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={(v) => { if (!v) setDeleteTarget(null) }}>
|
||||
<AlertDialogContent size="default">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogMedia className="bg-destructive/10 text-destructive">
|
||||
<TrashIcon />
|
||||
</AlertDialogMedia>
|
||||
<AlertDialogTitle>Удалить пользователя?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteTarget.name} · {deleteTarget.email || deleteTarget.login}. Привязки интерфейсов будут удалены.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setDeleteTarget(null)}>Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" onClick={() => { void handleDelete() }}>
|
||||
Удалить
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user