Denozordec
b3e50a1f5f
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.
277 lines
16 KiB
TypeScript
277 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState, useRef, useMemo } from "react"
|
|
import { useRouter, usePathname } from "next/navigation"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
SearchIcon, LayoutDashboardIcon, ActivityIcon, MapIcon, HeartPulseIcon,
|
|
GlobeIcon, NetworkIcon, LayersIcon, TagIcon, ServerIcon, FilterIcon,
|
|
ShieldIcon, ShieldCheckIcon, CableIcon, BoxIcon, BadgeCheckIcon,
|
|
HardDriveIcon, RouteIcon, GitForkIcon, GitMergeIcon, ScanLineIcon,
|
|
TerminalIcon, BellIcon, SettingsIcon, DatabaseIcon, UsersIcon,
|
|
} from "lucide-react"
|
|
|
|
// ─── Command item definition ──────────────────────────────────────────────────
|
|
|
|
interface CommandItem {
|
|
id: string
|
|
title: string
|
|
subtitle?: string
|
|
group: string
|
|
url: string
|
|
icon: React.ReactNode
|
|
keywords?: string[]
|
|
}
|
|
|
|
const ALL_ITEMS: CommandItem[] = [
|
|
// Обзор
|
|
{ id: "dashboard", title: "Дашборд", group: "Обзор", url: "/dashboard", icon: <LayoutDashboardIcon />, keywords: ["главная","home","overview"] },
|
|
{ id: "traffic", title: "Трафик", group: "Обзор", url: "/traffic", icon: <ActivityIcon />, keywords: ["bandwidth","traffic","клиенты","интерфейсы"] },
|
|
{ id: "network-map", title: "Карта сети", group: "Обзор", url: "/network-map", icon: <MapIcon />, keywords: ["topology","топология","map"] },
|
|
{ id: "uptime", title: "Мониторинг / Uptime", group: "Обзор", url: "/uptime", icon: <HeartPulseIcon />, keywords: ["ping","uptime","мониторинг","проверка"] },
|
|
// Данные
|
|
{ id: "domains", title: "Домены", group: "Данные", url: "/domains", icon: <GlobeIcon />, keywords: ["domain","dns","сайты"] },
|
|
{ id: "ip-ranges", title: "IP-диапазоны", group: "Данные", url: "/ip-ranges", icon: <NetworkIcon />, keywords: ["cidr","subnet","подсети","префиксы"] },
|
|
{ id: "asns", title: "ASN", group: "Данные", url: "/asns", icon: <LayersIcon />, keywords: ["autonomous system","автономная система"] },
|
|
{ id: "communities", title: "BGP Communities", group: "Данные", url: "/communities", icon: <TagIcon />, keywords: ["community","bgp","теги"] },
|
|
// Управление
|
|
{ id: "servers", title: "Серверы", group: "Управление", url: "/servers", icon: <ServerIcon />, keywords: ["router","mikrotik","сервер","routeros"] },
|
|
{ id: "users", title: "Пользователи", group: "Управление", url: "/users", icon: <UsersIcon />, keywords: ["user","клиент","оператор","привязка","интерфейс"] },
|
|
{ id: "filters", title: "Фильтры", group: "Управление", url: "/filters", icon: <FilterIcon />, keywords: ["filter","routing","маршрутизация"] },
|
|
{ id: "recursive-routes", title: "Рекурсивные маршруты", group: "Управление", url: "/recursive-routes", icon: <RouteIcon />, keywords: ["recursive","route","static","маршруты"] },
|
|
{ id: "firewall", title: "Firewall", group: "Управление", url: "/firewall", icon: <ShieldIcon />, keywords: ["rules","правила","брандмауэр","acl"] },
|
|
{ id: "wireguard", title: "WireGuard", group: "Управление", url: "/wireguard", icon: <ShieldCheckIcon />, keywords: ["vpn","tunnel","туннель","wg"] },
|
|
{ id: "gre", title: "GRE-туннели", group: "Управление", url: "/gre", icon: <CableIcon />, keywords: ["gre","ipsec","tunnel","туннель"] },
|
|
{ id: "vxlan", title: "VXLAN", group: "Управление", url: "/vxlan", icon: <NetworkIcon />, keywords: ["overlay","vni","vtep","l2"] },
|
|
{ id: "containers", title: "Контейнеры", group: "Управление", url: "/containers", icon: <BoxIcon />, keywords: ["docker","container","образ","image"] },
|
|
{ id: "certificates", title: "Сертификаты", group: "Управление", url: "/certificates", icon: <BadgeCheckIcon />, keywords: ["ssl","tls","cert","pki","x509"] },
|
|
{ id: "backups", title: "Бэкапы", group: "Управление", url: "/backups", icon: <HardDriveIcon />, keywords: ["backup","backup","резервная копия"] },
|
|
// Инструменты
|
|
{ id: "route-optimizer", title: "Оптимизатор маршрутов", group: "Инструменты", url: "/route-optimizer", icon: <RouteIcon />, keywords: ["routing","wan","failover","переключение"] },
|
|
{ id: "ospf", title: "OSPF", group: "Инструменты", url: "/ospf", icon: <GitForkIcon />, keywords: ["ospf","igp","neighbors","lsa"] },
|
|
{ id: "bgp", title: "BGP", group: "Инструменты", url: "/bgp", icon: <GitMergeIcon />, keywords: ["bgp","ebgp","ibgp","сессии","peers"] },
|
|
{ id: "probes", title: "Диагностика", group: "Инструменты", url: "/probes", icon: <ScanLineIcon />, keywords: ["probe","ping","traceroute","диагностика"] },
|
|
{ id: "terminal", title: "Терминал", group: "Инструменты", url: "/terminal", icon: <TerminalIcon />, keywords: ["terminal","cli","ssh","консоль"] },
|
|
// Система
|
|
{ id: "alerts", title: "Оповещения", group: "Система", url: "/alerts", icon: <BellIcon />, keywords: ["alert","notification","уведомление"] },
|
|
{ id: "data-collection", title: "Сбор данных", group: "Система", url: "/data-collection", icon: <DatabaseIcon />, keywords: ["scheduler","планировщик","коллектор","uptime","трафик","журнал","прогон"] },
|
|
{ id: "releases", title: "Релизы", group: "Система", url: "/releases", icon: <BadgeCheckIcon />, keywords: ["release","version","версия","changelog","релиз"] },
|
|
{ id: "settings", title: "Настройки", group: "Система", url: "/settings", icon: <SettingsIcon />, keywords: ["settings","config","конфигурация"] },
|
|
]
|
|
|
|
// ─── Scoring / filtering ──────────────────────────────────────────────────────
|
|
|
|
function score(item: CommandItem, q: string): number {
|
|
const t = item.title.toLowerCase()
|
|
const kws = (item.keywords ?? []).join(" ").toLowerCase()
|
|
if (t === q) return 100
|
|
if (t.startsWith(q)) return 90
|
|
if (t.includes(q)) return 70
|
|
if (kws.includes(q)) return 50
|
|
return 0
|
|
}
|
|
|
|
function filterItems(q: string): CommandItem[] {
|
|
if (!q.trim()) return ALL_ITEMS
|
|
const lq = q.trim().toLowerCase()
|
|
return ALL_ITEMS
|
|
.map(item => ({ item, s: score(item, lq) }))
|
|
.filter(x => x.s > 0)
|
|
.sort((a, b) => b.s - a.s)
|
|
.map(x => x.item)
|
|
}
|
|
|
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
|
|
export function CommandPalette() {
|
|
const [open, setOpen] = useState(false)
|
|
const [query, setQuery] = useState("")
|
|
const [activeIdx, setActiveIdx] = useState(0)
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const listRef = useRef<HTMLDivElement>(null)
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
const results = useMemo(() => filterItems(query), [query])
|
|
|
|
// ── Keyboard shortcut to open ─────────────────────────────────────────────
|
|
useEffect(() => {
|
|
function onKey(e: KeyboardEvent) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
|
e.preventDefault()
|
|
setOpen(prev => {
|
|
if (!prev) { setQuery(""); setActiveIdx(0) }
|
|
return !prev
|
|
})
|
|
}
|
|
if (e.key === "Escape") setOpen(false)
|
|
}
|
|
window.addEventListener("keydown", onKey)
|
|
return () => window.removeEventListener("keydown", onKey)
|
|
}, [])
|
|
|
|
// ── Focus input on open ───────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
if (open) setTimeout(() => inputRef.current?.focus(), 10)
|
|
}, [open])
|
|
|
|
// ── Close on route change ─────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
queueMicrotask(() => setOpen(false))
|
|
}, [pathname])
|
|
|
|
// ── Arrow key + Enter navigation ──────────────────────────────────────────
|
|
function onInputKey(e: React.KeyboardEvent) {
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault()
|
|
setActiveIdx(i => Math.min(i + 1, results.length - 1))
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault()
|
|
setActiveIdx(i => Math.max(i - 1, 0))
|
|
} else if (e.key === "Enter") {
|
|
e.preventDefault()
|
|
const item = results[activeIdx]
|
|
if (item) navigate(item)
|
|
}
|
|
}
|
|
|
|
function navigate(item: CommandItem) {
|
|
router.push(item.url)
|
|
setOpen(false)
|
|
}
|
|
|
|
// ── Scroll active item into view ──────────────────────────────────────────
|
|
useEffect(() => {
|
|
const el = listRef.current?.querySelector(`[data-idx="${activeIdx}"]`) as HTMLElement | null
|
|
el?.scrollIntoView({ block: "nearest" })
|
|
}, [activeIdx])
|
|
|
|
// ── Reset active idx when query changes ───────────────────────────────────
|
|
useEffect(() => {
|
|
queueMicrotask(() => setActiveIdx(0))
|
|
}, [query])
|
|
|
|
// ── Grouped results for display ───────────────────────────────────────────
|
|
const grouped = useMemo(() => {
|
|
const map = new Map<string, CommandItem[]>()
|
|
for (const item of results) {
|
|
if (!map.has(item.group)) map.set(item.group, [])
|
|
map.get(item.group)!.push(item)
|
|
}
|
|
return Array.from(map.entries())
|
|
}, [results])
|
|
|
|
// ── Running index across groups ───────────────────────────────────────────
|
|
let runningIdx = 0
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-start justify-center pt-[12vh]"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{/* Backdrop */}
|
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
|
|
|
|
{/* Dialog */}
|
|
<div
|
|
className="relative z-10 w-full max-w-[620px] mx-4 rounded-xl border border-white/[0.08] shadow-2xl overflow-hidden"
|
|
style={{ background: "#0c1526" }}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{/* Search input row */}
|
|
<div className="flex items-center gap-3 px-4 py-3.5 border-b border-white/[0.07]">
|
|
<SearchIcon className="size-4 text-muted-foreground shrink-0" />
|
|
<input
|
|
ref={inputRef}
|
|
value={query}
|
|
onChange={e => setQuery(e.target.value)}
|
|
onKeyDown={onInputKey}
|
|
placeholder="Поиск страниц и функций…"
|
|
className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
|
|
/>
|
|
{query && (
|
|
<button
|
|
onClick={() => setQuery("")}
|
|
className="text-muted-foreground hover:text-foreground transition-colors text-xs px-1.5 py-0.5 rounded border border-white/10 hover:border-white/20"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
<kbd className="text-[10px] font-mono text-muted-foreground/50 border border-white/10 rounded px-1.5 py-0.5 hidden sm:block">
|
|
ESC
|
|
</kbd>
|
|
</div>
|
|
|
|
{/* Results */}
|
|
<div ref={listRef} className="max-h-[420px] overflow-y-auto py-2">
|
|
{results.length === 0 ? (
|
|
<div className="py-12 text-center text-sm text-muted-foreground">
|
|
Ничего не найдено по “{query}”
|
|
</div>
|
|
) : grouped.map(([group, items]) => (
|
|
<div key={group}>
|
|
{/* Group header */}
|
|
<div className="px-4 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/50">
|
|
{group}
|
|
</div>
|
|
|
|
{items.map(item => {
|
|
const idx = runningIdx++
|
|
const isActive = idx === activeIdx
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
data-idx={idx}
|
|
onClick={() => navigate(item)}
|
|
onMouseEnter={() => setActiveIdx(idx)}
|
|
className={cn(
|
|
"w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors",
|
|
isActive
|
|
? "bg-white/[0.07] text-foreground"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
"size-7 flex items-center justify-center rounded-md shrink-0 transition-colors [&_svg]:size-3.5",
|
|
isActive ? "bg-primary/20 text-primary" : "bg-white/[0.04] text-muted-foreground",
|
|
)}>
|
|
{item.icon}
|
|
</span>
|
|
|
|
<span className="flex-1 min-w-0">
|
|
<span className="text-sm font-medium text-foreground">{item.title}</span>
|
|
{item.subtitle && (
|
|
<span className="text-xs text-muted-foreground ml-2">{item.subtitle}</span>
|
|
)}
|
|
</span>
|
|
|
|
{isActive && (
|
|
<span className="text-[10px] font-mono text-muted-foreground/50 border border-white/10 rounded px-1.5 py-0.5 shrink-0">
|
|
↵
|
|
</span>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-white/[0.07] px-4 py-2 flex items-center gap-4 text-[10px] text-muted-foreground/50">
|
|
<span><kbd className="font-mono border border-white/10 rounded px-1 py-0.5">↑↓</kbd> навигация</span>
|
|
<span><kbd className="font-mono border border-white/10 rounded px-1 py-0.5">↵</kbd> открыть</span>
|
|
<span><kbd className="font-mono border border-white/10 rounded px-1 py-0.5">Esc</kbd> закрыть</span>
|
|
<span className="ml-auto">
|
|
<kbd className="font-mono border border-white/10 rounded px-1 py-0.5">Ctrl</kbd>
|
|
{" + "}
|
|
<kbd className="font-mono border border-white/10 rounded px-1 py-0.5">K</kbd>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|