622 lines
24 KiB
TypeScript
622 lines
24 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useRef, useEffect, useCallback, useMemo } from "react"
|
|
import { PageHeader } from "@/components/page-header"
|
|
import { Button } from "@/components/ui/button"
|
|
import { servers as mockServers } from "@/lib/data"
|
|
import { Flag } from "@/components/flag"
|
|
import { useDataSource } from "@/lib/data-source"
|
|
import {
|
|
TrashIcon, RefreshCwIcon, CircleIcon, Loader2Icon,
|
|
} from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
// ─── types ────────────────────────────────────────────────────────────────────
|
|
|
|
/** Unified server representation for the terminal sidebar */
|
|
interface TermServer {
|
|
uid: string // unique key (mock id or String(backend id))
|
|
backendId: number | null // null in mock mode
|
|
name: string
|
|
host: string
|
|
country: string
|
|
status: "online" | "offline" | "degraded" | null
|
|
enabled: boolean
|
|
rosVersion: string | null
|
|
identityName: string | null
|
|
}
|
|
|
|
interface TermLine {
|
|
id: number
|
|
kind: "output" | "prompt" | "error" | "info"
|
|
text: string
|
|
}
|
|
|
|
// ─── mock CLI responses ───────────────────────────────────────────────────────
|
|
|
|
type CmdFn = (args: string[], serverName: string) => string
|
|
|
|
const MOCK_COMMANDS: Record<string, CmdFn> = {
|
|
"ip address print": () =>
|
|
"Flags: X - disabled, I - invalid, D - dynamic\n" +
|
|
" # ADDRESS NETWORK INTERFACE\n" +
|
|
" 0 10.0.0.1/24 10.0.0.0 ether1-wan\n" +
|
|
" 1 192.168.88.1/24 192.168.88.0 bridge-lan\n" +
|
|
" 2 10.200.0.1/30 10.200.0.0 gre-msk-spb\n" +
|
|
" 3 10.200.0.5/30 10.200.0.4 gre-msk-fra\n" +
|
|
" 4 D 169.254.0.0/16 169.254.0.0 lo0",
|
|
|
|
"ip route print": () =>
|
|
"Flags: A - active, D - dynamic, C - connect, S - static, b - bgp, o - ospf\n" +
|
|
" # DST-ADDRESS PREF-SRC GATEWAY DIST\n" +
|
|
" 0 ADS 0.0.0.0/0 10.0.0.254 1\n" +
|
|
" 1 Ab 1.1.1.0/24 10.0.1.1 20\n" +
|
|
" 2 Ab 8.8.8.0/24 10.0.1.1 20\n" +
|
|
" 3 ADC 10.0.0.0/24 10.0.0.1 0\n" +
|
|
" 4 ADC 10.200.0.0/30 10.200.0.1 0",
|
|
|
|
"interface print": () =>
|
|
"Flags: X - disabled, D - dynamic, R - running\n" +
|
|
" # NAME TYPE MTU\n" +
|
|
" 0 R ether1-wan ether 1500\n" +
|
|
" 1 R ether2-lan ether 1500\n" +
|
|
" 2 R bridge-lan bridge 1500\n" +
|
|
" 3 R gre-msk-spb gre 1476\n" +
|
|
" 4 R gre-msk-fra gre 1476\n" +
|
|
" 5 gre-msk-ams gre 1476",
|
|
|
|
"system resource print": () =>
|
|
" uptime: 12d 4h 22m 18s\n" +
|
|
" version: 7.14.3 (stable)\n" +
|
|
" free-memory: 512.0 MiB\n" +
|
|
" total-memory: 2048.0 MiB\n" +
|
|
" cpu: Intel(R) Xeon(R)\n" +
|
|
" cpu-count: 4\n" +
|
|
" cpu-frequency: 3200 MHz\n" +
|
|
" cpu-load: 12%\n" +
|
|
" free-hdd-space: 8192.0 MiB\n" +
|
|
" total-hdd-space: 16384.0 MiB\n" +
|
|
" architecture-name: x86\n" +
|
|
" board-name: CHR\n" +
|
|
" platform: MikroTik",
|
|
|
|
"system identity print": (_, n) => ` name: ${n}`,
|
|
|
|
"ip firewall filter print": () =>
|
|
"Flags: X - disabled, I - invalid, D - dynamic\n\n" +
|
|
" 0 \n ;;; Accept established connections\n" +
|
|
" chain=input action=accept connection-state=established,related\n\n" +
|
|
" 1 \n ;;; YouTube bypass traffic\n" +
|
|
" chain=forward action=accept src-address-list=youtube-bypass protocol=tcp dst-port=443\n" +
|
|
" packets=188421 bytes=14283698176\n\n" +
|
|
" 2 \n ;;; Block SSH from WAN\n" +
|
|
" chain=input action=drop in-interface=ether1-wan protocol=tcp dst-port=22\n" +
|
|
" packets=882412 bytes=54618112",
|
|
|
|
"routing bgp session print": () =>
|
|
"Flags: E - established\n" +
|
|
" # NAME REMOTE-AS REMOTE-ADDRESS STATE UPTIME\n" +
|
|
" 0 E peer-spb-01 65002 10.0.1.1 established 12d 4h 22m\n" +
|
|
" 1 E peer-fra-01 65003 10.0.2.1 established 9d 12h 11m\n" +
|
|
" 2 peer-ams-01 65004 10.0.3.1 active —",
|
|
|
|
"routing ospf neighbor print": () =>
|
|
"Flags: V - virtual\n" +
|
|
" # ROUTER-ID STATE CHANGES ADJACENCY INTERFACE\n" +
|
|
" 0 10.0.0.7 Full 8 12d 4h 18m gre-msk-spb\n" +
|
|
" 1 10.0.1.1 Full 3 9d 11h 42m gre-msk-fra",
|
|
|
|
"routing bfd session print": () =>
|
|
" # LOCAL-ADDRESS REMOTE-ADDRESS STATE UPTIME\n" +
|
|
" 0 10.200.0.1%gre-msk-spb 10.200.0.2%gre-msk-spb up 12d 4h\n" +
|
|
" 1 10.200.1.1%gre-msk-fra 10.200.1.2%gre-msk-fra up 9d 11h",
|
|
|
|
"log print": () =>
|
|
"may/01 08:14:22 ospf,debug,packet GRE-MSK-FRA: hello received, RouterID: 10.0.2.1\n" +
|
|
"may/01 08:14:21 bgp,debug peer-spb-01 sending UPDATE\n" +
|
|
"may/01 08:14:18 system,info user admin logged from 10.10.0.5\n" +
|
|
"may/01 08:12:44 firewall,info forward: in:ether2-lan out:gre-msk-fra proto TCP\n" +
|
|
"may/01 08:11:03 script,info backup-script: backup saved to /backup/mt.rsc\n" +
|
|
"may/01 08:09:17 system,warning cpu load is 85% on cpu0",
|
|
|
|
"ping": (args) => {
|
|
const host = args[0] || "8.8.8.8"
|
|
const count = parseInt(args.find(a => a.startsWith("count="))?.split("=")[1] || "4")
|
|
const rtt = Math.round(10 + Math.random() * 50)
|
|
const lines = [`PING ${host}`]
|
|
for (let i = 0; i < Math.min(count, 5); i++) {
|
|
const t = rtt + Math.round((Math.random() - 0.5) * 8)
|
|
lines.push(` seq=${i} ttl=56 time=${t}ms`)
|
|
}
|
|
lines.push(` sent=${count} received=${count} packet-loss=0%`)
|
|
return lines.join("\n")
|
|
},
|
|
}
|
|
|
|
function mockResolve(raw: string, serverName: string): string {
|
|
const trimmed = raw.trim()
|
|
if (!trimmed) return ""
|
|
|
|
if (trimmed === "?" || trimmed === "help")
|
|
return "ip address print | ip route print | interface print\n" +
|
|
"system resource print | ip firewall filter print\n" +
|
|
"routing bgp session print | routing ospf neighbor print\n" +
|
|
"routing bfd session print | log print | ping <host>"
|
|
|
|
if (trimmed === "clear" || trimmed === "/clear") return "__CLEAR__"
|
|
if (trimmed === "quit" || trimmed === "exit") return "Connection closed."
|
|
|
|
const key = Object.keys(MOCK_COMMANDS).find(k =>
|
|
trimmed === k || trimmed.toLowerCase().startsWith(k + " ")
|
|
)
|
|
if (key) {
|
|
const rest = trimmed.slice(key.length).trim().split(/\s+/)
|
|
return MOCK_COMMANDS[key](rest, serverName)
|
|
}
|
|
|
|
return `bad command name ${trimmed.split(" ")[0]} (line 1 column 1)`
|
|
}
|
|
|
|
// ─── MOTD builders ────────────────────────────────────────────────────────────
|
|
|
|
function mockMotd(server: TermServer): string {
|
|
return [
|
|
"",
|
|
" MMM MMM KKK TTTTTTTTTTT KKK",
|
|
" MMM MMMM MMM III KKK KKK RRR OOOOOO TTT TTT II KKK KKK",
|
|
" MMM MMM III KKK KKK RRR RRROOOOO TTT TTT II KKK KKK",
|
|
"",
|
|
` MikroTik RouterOS ${server.rosVersion ?? "7.14.3"} (c) 1999-${new Date().getFullYear()} https://www.mikrotik.com/`,
|
|
"",
|
|
"[?] Gives the list of available commands",
|
|
"[Tab] Completes the command/word",
|
|
"[/] Move up to base level",
|
|
"[..] Move up one level",
|
|
"",
|
|
].join("\n")
|
|
}
|
|
|
|
function liveMotd(server: TermServer): string {
|
|
return [
|
|
"",
|
|
` MikroTik RouterOS ${server.rosVersion ?? "7.x"} (c) 1999-${new Date().getFullYear()} https://www.mikrotik.com/`,
|
|
"",
|
|
` Connected to ${server.name} (${server.host})`,
|
|
"",
|
|
"[?] Gives the list of available commands — type help or ?",
|
|
"[Tab] Completes the command/word",
|
|
"[/] Move up to base level",
|
|
"",
|
|
].join("\n")
|
|
}
|
|
|
|
// ─── terminal component ───────────────────────────────────────────────────────
|
|
|
|
function Terminal({
|
|
server,
|
|
isLive,
|
|
backendUrl,
|
|
}: {
|
|
server: TermServer
|
|
isLive: boolean
|
|
backendUrl: string
|
|
}) {
|
|
const [lines, setLines] = useState<TermLine[]>([])
|
|
const [input, setInput] = useState("")
|
|
const [history, setHistory] = useState<string[]>([])
|
|
const [_histIdx, setHistIdx] = useState(-1)
|
|
const [_idCtr, setIdCtr] = useState(0)
|
|
const [executing, setExecuting] = useState(false)
|
|
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const scrollRef = useRef<HTMLDivElement>(null)
|
|
|
|
const nextId = useCallback((): number => {
|
|
let id = 0
|
|
setIdCtr(prev => { id = prev + 1; return prev + 1 })
|
|
return id
|
|
}, [])
|
|
|
|
// Initialize MOTD on mount / server change
|
|
useEffect(() => {
|
|
const motd = isLive ? liveMotd(server) : mockMotd(server)
|
|
const init = motd.split("\n").map((text, i) => ({ id: i, kind: "output" as const, text }))
|
|
setLines(init)
|
|
setIdCtr(init.length)
|
|
setInput("")
|
|
setHistory([])
|
|
setHistIdx(-1)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [server.uid, isLive])
|
|
|
|
// Auto-scroll
|
|
useEffect(() => {
|
|
scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" })
|
|
}, [lines])
|
|
|
|
const prompt = `[admin@${server.identityName ?? server.name}] > `
|
|
|
|
const submit = useCallback(async () => {
|
|
if (executing) return
|
|
const cmd = input.trim()
|
|
|
|
setLines(prev => [...prev, { id: nextId(), kind: "prompt", text: prompt + input }])
|
|
setInput("")
|
|
setHistIdx(-1)
|
|
|
|
if (!cmd) return
|
|
|
|
setHistory(h => [cmd, ...h.filter(x => x !== cmd)].slice(0, 100))
|
|
|
|
// local always-available commands
|
|
const lower = cmd.toLowerCase()
|
|
if (lower === "clear" || lower === "/clear") { setLines([]); return }
|
|
if (lower === "quit" || lower === "exit") {
|
|
setLines(prev => [...prev, { id: nextId(), kind: "info", text: "Connection closed." }])
|
|
return
|
|
}
|
|
|
|
if (isLive && server.backendId !== null) {
|
|
setExecuting(true)
|
|
try {
|
|
const res = await fetch(`${backendUrl}/api/servers/${server.backendId}/exec`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ command: cmd }),
|
|
})
|
|
const data = await res.json() as { output?: string; error?: string }
|
|
const text = data.output ?? data.error ?? "(empty response)"
|
|
const kind: TermLine["kind"] = text.startsWith("error:") ? "error" : "output"
|
|
text.split("\n").forEach(line =>
|
|
setLines(prev => [...prev, { id: nextId(), kind, text: line }])
|
|
)
|
|
} catch (err) {
|
|
setLines(prev => [...prev, { id: nextId(), kind: "error", text: `network error: ${String(err)}` }])
|
|
} finally {
|
|
setExecuting(false)
|
|
}
|
|
} else {
|
|
// mock mode
|
|
const result = mockResolve(cmd, server.name)
|
|
if (result === "__CLEAR__") { setLines([]); return }
|
|
if (result) {
|
|
result.split("\n").forEach(line =>
|
|
setLines(prev => [...prev, { id: nextId(), kind: "output", text: line }])
|
|
)
|
|
}
|
|
}
|
|
}, [executing, input, nextId, prompt, isLive, server, backendUrl])
|
|
|
|
const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault(); void submit()
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault()
|
|
setHistIdx(i => {
|
|
const next = Math.min(i + 1, history.length - 1)
|
|
if (history[next] !== undefined) setInput(history[next])
|
|
return next
|
|
})
|
|
} else if (e.key === "ArrowDown") {
|
|
e.preventDefault()
|
|
setHistIdx(i => {
|
|
const next = i - 1
|
|
if (next < 0) { setInput(""); return -1 }
|
|
if (history[next] !== undefined) setInput(history[next])
|
|
return next
|
|
})
|
|
} else if (e.key === "l" && e.ctrlKey) {
|
|
e.preventDefault(); setLines([])
|
|
}
|
|
}
|
|
|
|
const lineColor = (kind: TermLine["kind"]) => {
|
|
if (kind === "error") return "text-red-400"
|
|
if (kind === "prompt") return "text-emerald-400"
|
|
if (kind === "info") return "text-sky-400"
|
|
return "text-[#c9d1d9]"
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col bg-[#0d1117] rounded-lg border border-[#30363d] overflow-hidden font-mono text-xs h-full"
|
|
onClick={() => inputRef.current?.focus()}
|
|
>
|
|
{/* title bar */}
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-[#30363d] bg-[#161b22] shrink-0">
|
|
<CircleIcon className="size-3 text-red-500 fill-red-500" />
|
|
<CircleIcon className="size-3 text-amber-400 fill-amber-400" />
|
|
<CircleIcon className="size-3 text-emerald-500 fill-emerald-500" />
|
|
<span className="mx-auto text-[#8b949e] text-[11px]">
|
|
{server.name} — {isLive ? "RouterOS REST" : "SSH Terminal (mock)"}
|
|
</span>
|
|
{isLive && (
|
|
<span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium border border-emerald-500/30 bg-emerald-500/10 text-emerald-400">
|
|
<span className="size-1 rounded-full bg-emerald-400" />LIVE
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={e => { e.stopPropagation(); setLines([]) }}
|
|
className="text-[#8b949e] hover:text-white transition-colors ml-1"
|
|
title="Очистить"
|
|
>
|
|
<TrashIcon className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* output */}
|
|
<div ref={scrollRef} className="flex-1 overflow-y-auto p-3 space-y-0.5 min-h-0">
|
|
{lines.map((line, i) => (
|
|
<div key={`${line.id}-${i}`} className={cn("whitespace-pre-wrap break-all leading-5", lineColor(line.kind))}>
|
|
{line.text}
|
|
</div>
|
|
))}
|
|
|
|
{/* executing indicator */}
|
|
{executing && (
|
|
<div className="flex items-center gap-2 text-amber-400 opacity-80">
|
|
<Loader2Icon className="size-3 animate-spin" />
|
|
<span>executing…</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* input line */}
|
|
{!executing && (
|
|
<div className="flex items-center gap-0">
|
|
<span className="text-emerald-400 select-none shrink-0">{prompt}</span>
|
|
<input
|
|
ref={inputRef}
|
|
value={input}
|
|
onChange={e => setInput(e.target.value)}
|
|
onKeyDown={handleKey}
|
|
className="terminal-input-active flex-1 bg-transparent outline-none text-[#c9d1d9] caret-emerald-400"
|
|
autoComplete="off"
|
|
autoCorrect="off"
|
|
autoCapitalize="off"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── quick commands ───────────────────────────────────────────────────────────
|
|
|
|
const QUICK_CMDS = [
|
|
{ cmd: "system resource print", label: "system resource print" },
|
|
{ cmd: "interface print", label: "interface print" },
|
|
{ cmd: "ip address print", label: "ip address print" },
|
|
{ cmd: "ip route print", label: "ip route print" },
|
|
{ cmd: "ip firewall filter print", label: "ip firewall filter print" },
|
|
{ cmd: "routing bgp session print", label: "routing bgp session print" },
|
|
{ cmd: "routing ospf neighbor print", label: "routing ospf neighbor print" },
|
|
{ cmd: "routing ospf area print", label: "routing ospf area print" },
|
|
{ cmd: "routing bfd session print", label: "routing bfd session print" },
|
|
{ cmd: "log print", label: "log print" },
|
|
]
|
|
|
|
// ─── page ─────────────────────────────────────────────────────────────────────
|
|
|
|
/** Convert mock server list to TermServer[] */
|
|
function mockServersToTermServers(): TermServer[] {
|
|
return mockServers.map(s => ({
|
|
uid: s.id,
|
|
backendId: null,
|
|
name: s.name,
|
|
host: s.host,
|
|
country: s.country,
|
|
status: s.status as TermServer["status"],
|
|
enabled: s.enabled,
|
|
rosVersion: s.os ?? null,
|
|
identityName: s.name,
|
|
}))
|
|
}
|
|
|
|
/** Backend ServerRead shape (only fields we need) */
|
|
interface BackendServer {
|
|
id: number
|
|
name: string
|
|
host: string
|
|
country: string
|
|
status: "online" | "offline" | null
|
|
enabled: boolean
|
|
os: string | null
|
|
identityName: string | null
|
|
}
|
|
|
|
export default function TerminalPage() {
|
|
const { mode, backendUrl, backendStatus } = useDataSource()
|
|
const isLive = mode === "live" && backendStatus === true
|
|
|
|
// Server list state
|
|
const [liveServers, setLiveServers] = useState<TermServer[]>([])
|
|
const [serversLoading, setServersLoading] = useState(false)
|
|
const [refreshKey, setRefreshKey] = useState(0) // force terminal remount on reconnect
|
|
|
|
// Load servers from backend when in live mode
|
|
useEffect(() => {
|
|
if (!isLive) return
|
|
let cancelled = false
|
|
queueMicrotask(() => {
|
|
if (cancelled) return
|
|
setServersLoading(true)
|
|
fetch(`${backendUrl}/api/servers`)
|
|
.then(r => r.json() as Promise<BackendServer[]>)
|
|
.then(data => {
|
|
if (cancelled) return
|
|
setLiveServers(data.map(s => ({
|
|
uid: String(s.id),
|
|
backendId: s.id,
|
|
name: s.name || s.host,
|
|
host: s.host,
|
|
country: s.country || "",
|
|
status: s.status,
|
|
enabled: s.enabled,
|
|
rosVersion: s.os,
|
|
identityName: s.identityName,
|
|
})))
|
|
setServersLoading(false)
|
|
})
|
|
.catch(() => { if (!cancelled) setServersLoading(false) })
|
|
})
|
|
return () => { cancelled = true }
|
|
}, [isLive, backendUrl, refreshKey])
|
|
|
|
const termServers: TermServer[] = isLive ? liveServers : mockServersToTermServers()
|
|
|
|
// Select first available server by default
|
|
const [selectedUid, setSelectedUid] = useState<string>("")
|
|
|
|
const defaultUid = useMemo(() => {
|
|
const first = termServers.find(s => s.status !== "offline" && s.enabled)
|
|
?? termServers[0]
|
|
return first?.uid ?? ""
|
|
}, [termServers])
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
if (!selectedUid && defaultUid) setSelectedUid(defaultUid)
|
|
})
|
|
}, [defaultUid, selectedUid])
|
|
|
|
// Reset selection when switching modes
|
|
useEffect(() => {
|
|
queueMicrotask(() => setSelectedUid(""))
|
|
}, [isLive])
|
|
|
|
const selected = termServers.find(s => s.uid === selectedUid) ?? termServers[0]
|
|
|
|
const termKey = `${selectedUid}-${refreshKey}-${isLive ? "live" : "mock"}`
|
|
|
|
function injectCommand(cmd: string) {
|
|
const el = document.querySelector<HTMLInputElement>(".terminal-input-active")
|
|
if (!el) return
|
|
const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set
|
|
nativeSetter?.call(el, cmd)
|
|
el.dispatchEvent(new Event("input", { bubbles: true }))
|
|
el.focus()
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<PageHeader
|
|
crumbs={[{ label: "Инструменты" }, { label: "Терминал" }]}
|
|
actions={
|
|
<Button variant="outline" size="sm" onClick={() => {
|
|
setRefreshKey(k => k + 1)
|
|
if (isLive) setSelectedUid("")
|
|
}}>
|
|
<RefreshCwIcon className="size-4" />Переподключить
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<div className="flex-1 overflow-hidden p-6">
|
|
<div className="grid grid-cols-[220px_1fr] gap-5 h-full">
|
|
|
|
{/* ── sidebar ── */}
|
|
<div className="flex flex-col gap-4 overflow-y-auto min-h-0">
|
|
|
|
{/* server picker */}
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Узел</p>
|
|
{isLive && serversLoading && (
|
|
<Loader2Icon className="size-3 animate-spin text-muted-foreground" />
|
|
)}
|
|
{isLive && !serversLoading && (
|
|
<span className="inline-flex items-center gap-1 text-[10px] font-medium rounded border border-emerald-500/30 bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5">
|
|
<span className="size-1 rounded-full bg-emerald-400" />LIVE
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{isLive && !serversLoading && liveServers.length === 0 && (
|
|
<p className="text-xs text-muted-foreground px-2.5">
|
|
Нет доступных серверов
|
|
</p>
|
|
)}
|
|
|
|
<div className="space-y-1">
|
|
{termServers.map(s => {
|
|
const isOffline = s.status === "offline"
|
|
const isSelected = s.uid === selectedUid
|
|
return (
|
|
<button
|
|
key={s.uid}
|
|
disabled={isOffline || !s.enabled}
|
|
onClick={() => { setSelectedUid(s.uid); setRefreshKey(k => k + 1) }}
|
|
className={cn(
|
|
"w-full text-left rounded-md px-2.5 py-2 text-xs transition-colors",
|
|
"flex items-center gap-2",
|
|
isSelected
|
|
? "bg-primary text-primary-foreground"
|
|
: "hover:bg-muted",
|
|
(isOffline || !s.enabled) && "opacity-40 cursor-not-allowed",
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
"inline-block size-1.5 rounded-full shrink-0",
|
|
s.status === "online" ? "bg-emerald-500" :
|
|
s.status === "degraded" ? "bg-amber-400" :
|
|
s.status === null ? "bg-sky-400" : "bg-red-500",
|
|
)} />
|
|
{s.country && <Flag code={s.country} />}
|
|
<span className="truncate font-mono">{s.name}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* quick commands */}
|
|
<div>
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
Быстрые команды
|
|
</p>
|
|
<div className="space-y-1">
|
|
{QUICK_CMDS.map(({ cmd, label }) => (
|
|
<button
|
|
key={cmd}
|
|
className="w-full text-left rounded-md px-2.5 py-1.5 text-[11px] font-mono text-muted-foreground hover:bg-muted hover:text-foreground transition-colors truncate block"
|
|
onClick={() => injectCommand(cmd)}
|
|
title={cmd}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* hints */}
|
|
<div className="mt-auto text-[10px] text-muted-foreground/50 space-y-0.5 px-0.5">
|
|
<p>↑↓ — история команд</p>
|
|
<p>Ctrl+L — очистить экран</p>
|
|
{isLive
|
|
? <p className="text-sky-400/60">Команды выполняются на роутере</p>
|
|
: <p>Режим: mock-данные</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── terminal ── */}
|
|
{selected ? (
|
|
<Terminal
|
|
key={termKey}
|
|
server={selected}
|
|
isLive={isLive}
|
|
backendUrl={backendUrl}
|
|
/>
|
|
) : (
|
|
<div className="flex items-center justify-center bg-[#0d1117] rounded-lg border border-[#30363d] text-[#8b949e] text-sm font-mono">
|
|
{serversLoading ? "Загрузка серверов…" : "Выберите сервер"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|