1145 lines
61 KiB
TypeScript
1145 lines
61 KiB
TypeScript
"use client"
|
||
|
||
import { toast } from "sonner"
|
||
import { Suspense, useEffect, useRef, useState, useMemo, useCallback } from "react"
|
||
import { useSearchParams } from "next/navigation"
|
||
import { readProbeSource } from "@/lib/probe-source"
|
||
import { readProbeUrl, patchProbeUrl } from "@/lib/probe-url"
|
||
import { PageHeader } from "@/components/page-header"
|
||
import { FormToggle } from "@/components/form-kit"
|
||
import { Frame, FramePanel } from "@/components/reui/frame"
|
||
import { OpsPanel } from "@/components/ops-panel"
|
||
import { DataPageCard } from "@/components/data-page-card"
|
||
import {
|
||
ProbesScheduleDataGrid,
|
||
type SchedRule,
|
||
type SchedType,
|
||
} from "@/components/data-grids/probes-schedule-data-grid"
|
||
import {ProbesSpeedSchedule} from "@/components/probes-speed-schedule"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
|
||
import { type ServerTileItem } from "@/components/server-tile-rail"
|
||
import { servers, greTunnels, type GreTunnel, type Server } from "@/lib/data"
|
||
import { filtersGreResponseSchema } from "@/lib/filters-response"
|
||
import { can } from "@/lib/auth"
|
||
import { readProbeOutput, probeServersSchema } from "@/lib/probe-response"
|
||
import { useDataSource } from "@/lib/data-source"
|
||
import {
|
||
PlayIcon, SquareIcon, CopyIcon, Trash2Icon, PlusIcon,
|
||
ActivityIcon, RouteIcon, SearchIcon, NetworkIcon, RulerIcon,
|
||
ZapIcon, CheckIcon, TerminalIcon,
|
||
LoaderCircleIcon,
|
||
} from "lucide-react"
|
||
import { cn } from "@/lib/utils"
|
||
import { requestJson } from "@/shared/api/http-client"
|
||
|
||
// ─── types ────────────────────────────────────────────────────────────────────
|
||
|
||
type DiagTool = "ping" | "traceroute" | "bandwidth" | "dns" | "route" | "mtu"
|
||
type RunStatus = "running" | "done" | "error" | "cancelled"
|
||
type TraceProto = "icmp" | "udp" | "tcp"
|
||
type DnsType = "A" | "AAAA" | "MX" | "NS" | "TXT" | "CNAME" | "PTR"
|
||
|
||
interface OutputLine { text: string; kind: "normal" | "ok" | "err" | "dim" | "header" | "cmd" }
|
||
|
||
interface DiagTest {
|
||
id: string
|
||
tool: DiagTool
|
||
status: RunStatus | "error"
|
||
srcServerId: string
|
||
srcServerName: string
|
||
target: string
|
||
command: string
|
||
startedAt: number
|
||
lines: OutputLine[]
|
||
totalLines: number // final line count — reveals progressively
|
||
/** demo: симуляция в браузере; live: ответ MikroTik через бекенд */
|
||
source?: "demo" | "live"
|
||
}
|
||
|
||
// SchedRule imported from probes-schedule-data-grid
|
||
|
||
|
||
// ─── tool metadata ────────────────────────────────────────────────────────────
|
||
|
||
const TOOL_META: Record<DiagTool, {
|
||
label: string
|
||
ros: string // RouterOS tool path
|
||
Icon: React.FC<{ className?: string }>
|
||
color: string
|
||
description: string
|
||
}> = {
|
||
ping: { label: "Ping", ros: "/tool ping", Icon: ActivityIcon, color: "text-info", description: "Проверка связи и RTT" },
|
||
traceroute: { label: "Traceroute", ros: "/tool traceroute", Icon: RouteIcon, color: "text-info", description: "Трассировка маршрута" },
|
||
bandwidth: { label: "BW-тест", ros: "/tool bandwidth-test", Icon: ZapIcon, color: "text-success", description: "Пропускная способность" },
|
||
dns: { label: "DNS", ros: "DNS приложения", Icon: SearchIcon, color: "text-warning", description: "DNS на хосте приложения" },
|
||
route: { label: "Маршрут", ros: "/ip route lookup", Icon: NetworkIcon, color: "text-info", description: "Поиск активного маршрута" },
|
||
mtu: { label: "MTU-тест", ros: "/tool ping", Icon: RulerIcon, color: "text-warning", description: "Определение MTU пути" },
|
||
}
|
||
|
||
function makeApiFetch(backendUrl: string) {
|
||
return async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
|
||
return requestJson<T>(backendUrl, path, init)
|
||
}
|
||
}
|
||
|
||
async function copyProbeText(text:string){
|
||
try{await navigator.clipboard.writeText(text);toast.success("Скопировано.")}
|
||
catch{toast.error("Не удалось скопировать. Разрешите доступ к буферу обмена или выделите текст вручную.")}
|
||
}
|
||
|
||
function inferProbeLineKind(line: string): OutputLine["kind"] {
|
||
const l = line.toLowerCase()
|
||
if (l.includes("error:") || (l.includes("timeout") && l.includes("seq="))) return "err"
|
||
if (l.includes("✓")) return "ok"
|
||
if (l.startsWith(";;") || l.trim() === "") return "dim"
|
||
if (/ADDRESS|QUESTION|bandwidth-test|^ping |lookup |MTU discovery/i.test(line)) return "header"
|
||
return "normal"
|
||
}
|
||
|
||
function parseProbeOutput(text: string): OutputLine[] {
|
||
const lines = text.split("\n").map(t => ({ text: t || " ", kind: inferProbeLineKind(t) }))
|
||
return lines.length > 1000 ? [{ text: "Показаны последние 1000 строк; начало вывода сокращено.", kind: "dim" }, ...lines.slice(-1000)] : lines
|
||
}
|
||
|
||
|
||
// SpeedProbeApiRow imported from probes-speed-probes-data-grid
|
||
|
||
// ─── helpers ──────────────────────────────────────────────────────────────────
|
||
|
||
function jitter(base: number, pct = 0.15) {
|
||
return Math.max(1, Math.round(base + (Math.random() - 0.5) * base * pct * 2))
|
||
}
|
||
|
||
function seededRng(seed: string) {
|
||
let h = 0
|
||
for (let i = 0; i < seed.length; i++) h = (Math.imul(31, h) + seed.charCodeAt(i)) | 0
|
||
h = Math.abs(h)
|
||
return (n = 233280) => { h = (h * 9301 + 49297) % n; return h / n }
|
||
}
|
||
|
||
function baseRtt(srcId: string, _target: string): number {
|
||
const map: Record<string, number> = { srv1: 13, srv2: 11, srv3: 5, srv4: 8, srv5: 80, srv6: 8, srv7: 14 }
|
||
return map[srcId] ?? 20
|
||
}
|
||
|
||
function randomIp(rng: () => number, base = "10.") {
|
||
return `${base}${Math.floor(rng() * 255)}.${Math.floor(rng() * 255)}.${Math.floor(rng() * 255)}`
|
||
}
|
||
|
||
// ─── output generators ────────────────────────────────────────────────────────
|
||
|
||
function genPingOutput(target: string, srcId: string, count: number, size: number, _ttl: number): OutputLine[] {
|
||
const rng = seededRng(target + srcId)
|
||
const base = baseRtt(srcId, target)
|
||
const rtts: (number | null)[] = Array.from({ length: count }, () =>
|
||
rng() < 0.04 ? null : jitter(base, 0.2),
|
||
)
|
||
const lines: OutputLine[] = [
|
||
{ text: ` SEQ HOST SIZE TTL TIME STATUS`, kind: "header" },
|
||
]
|
||
rtts.forEach((rtt, i) => {
|
||
lines.push({
|
||
text: ` ${String(i).padStart(3)} ${target.padEnd(40)} ${String(size).padStart(4)} ${String(rtt ? 118 : 0).padStart(3)} ${rtt ? `${rtt}ms`.padStart(6) : " "} ${rtt ? "" : "timeout"}`,
|
||
kind: rtt ? "normal" : "err",
|
||
})
|
||
})
|
||
const recv = rtts.filter(r => r !== null) as number[]
|
||
const loss = Math.round((count - recv.length) / count * 100)
|
||
lines.push({ text: "", kind: "dim" })
|
||
lines.push({
|
||
text: ` sent=${count} received=${recv.length} packet-loss=${loss}% min-rtt=${Math.min(...recv)}ms avg-rtt=${Math.round(recv.reduce((a, b) => a + b, 0) / recv.length)}ms max-rtt=${Math.max(...recv)}ms`,
|
||
kind: loss === 0 ? "ok" : "err",
|
||
})
|
||
return lines
|
||
}
|
||
|
||
function genTraceOutput(target: string, srcId: string, proto: TraceProto, maxHops: number): OutputLine[] {
|
||
const rng = seededRng(target + srcId + proto)
|
||
const base = baseRtt(srcId, target)
|
||
const hopCount = Math.min(maxHops, 4 + Math.floor(rng() * 3))
|
||
const lines: OutputLine[] = [
|
||
{ text: ` # ADDRESS LOSS SENT LAST AVG BEST WORST`, kind: "header" },
|
||
]
|
||
for (let i = 1; i <= hopCount; i++) {
|
||
const addr = i === 1 ? "10.200.0.2" : i === hopCount ? target : randomIp(rng, "95.213.")
|
||
const frac = i / hopCount
|
||
const rtt1 = Math.round(base * frac * jitter(1, 0.1))
|
||
const rtt2 = Math.round(base * frac * jitter(1, 0.08))
|
||
const rtt3 = Math.round(base * frac * jitter(1, 0.12))
|
||
const avg = Math.round((rtt1 + rtt2 + rtt3) / 3)
|
||
lines.push({
|
||
text: ` ${String(i).padStart(2)} ${addr.padEnd(40)} 0% 3 ${`${rtt1}ms`.padStart(6)} ${`${avg}ms`.padStart(6)} ${`${Math.min(rtt1,rtt2,rtt3)}ms`.padStart(6)} ${`${Math.max(rtt1,rtt2,rtt3)}ms`.padStart(6)}`,
|
||
kind: i === hopCount ? "ok" : "normal",
|
||
})
|
||
}
|
||
return lines
|
||
}
|
||
|
||
function genDnsOutput(target: string, srcId: string, type: DnsType): OutputLine[] {
|
||
const rng = seededRng(target + srcId + type)
|
||
const ttl = 300 - Math.floor(rng() * 200)
|
||
const time = 5 + Math.floor(rng() * 20)
|
||
const lines: OutputLine[] = [
|
||
{ text: `;; QUESTION SECTION:`, kind: "dim" },
|
||
{ text: `;; ${target}. IN ${type}`, kind: "dim" },
|
||
{ text: "", kind: "dim" },
|
||
{ text: `;; ANSWER SECTION:`, kind: "header" },
|
||
]
|
||
const count = type === "A" ? 2 + Math.floor(rng() * 2) : 1
|
||
for (let i = 0; i < count; i++) {
|
||
let value = ""
|
||
if (type === "A") value = `142.250.${74 + Math.floor(rng() * 10)}.${Math.floor(rng() * 200)}`
|
||
if (type === "AAAA") value = `2001:db8::${Math.floor(rng() * 0xffff).toString(16)}`
|
||
if (type === "MX") value = `10 mail.${target}.`
|
||
if (type === "NS") value = `ns${i + 1}.${target}.`
|
||
if (type === "TXT") value = `"v=spf1 include:${target} ~all"`
|
||
if (type === "CNAME") value = `${target}.cdn.example.com.`
|
||
if (type === "PTR") value = `${target}.in-addr.arpa.`
|
||
lines.push({ text: `${target.padEnd(24)} ${String(ttl).padStart(5)} IN ${type.padEnd(5)} ${value}`, kind: "ok" })
|
||
}
|
||
lines.push({ text: "", kind: "dim" })
|
||
lines.push({ text: `;; Query time: ${time} msec`, kind: "dim" })
|
||
lines.push({ text: `;; SERVER: 1.1.1.1`, kind: "dim" })
|
||
return lines
|
||
}
|
||
|
||
function genRouteOutput(target: string, srcId: string): OutputLine[] {
|
||
const rng = seededRng(target + srcId)
|
||
const gw = `10.200.0.${2 + Math.floor(rng() * 14)}`
|
||
const iface = ["gre-msk-fra", "gre-msk-ams", "gre-msk-spb"][Math.floor(rng() * 3)]
|
||
const prefix = target.split(".").slice(0, 3).join(".") + ".0/24"
|
||
const asn = [15169, 32934, 20940][Math.floor(rng() * 3)]
|
||
const comm = `65001:${100 + Math.floor(rng() * 4) * 100}`
|
||
return [
|
||
{ text: `Flags: X - disabled, A - active, B - blackhole, U - unreachable`, kind: "dim" },
|
||
{ text: "", kind: "dim" },
|
||
{ text: ` # DST-ADDRESS PREF-SRC GATEWAY DISTANCE SCOPE TARGET-SCOPE`, kind: "header" },
|
||
{ text: ` 0 A ${prefix.padEnd(18)} ${gw.padEnd(15)} 200 30 10`, kind: "ok" },
|
||
{ text: ` routing-table: main`, kind: "dim" },
|
||
{ text: ` bgp-as-path: ${asn}`, kind: "normal" },
|
||
{ text: ` bgp-communities: ${comm} ${asn}:5003`, kind: "normal" },
|
||
{ text: ` bgp-local-pref: 100`, kind: "dim" },
|
||
{ text: ` bgp-med: 0`, kind: "dim" },
|
||
{ text: ` bgp-origin: igp`, kind: "dim" },
|
||
{ text: ` bgp-nexthop: ${gw}`, kind: "dim" },
|
||
{ text: ` bgp-ext-communities: (nothing)`, kind: "dim" },
|
||
{ text: ` interface: ${iface}`, kind: "normal" },
|
||
{ text: ` gateway: ${gw}`, kind: "normal" },
|
||
{ text: "", kind: "dim" },
|
||
{ text: `1 route found`, kind: "ok" },
|
||
]
|
||
}
|
||
|
||
function genMtuOutput(target: string, srcId: string): OutputLine[] {
|
||
const base = baseRtt(srcId, target)
|
||
const mtu = [1476, 1472, 1468, 1400][Math.floor(Math.random() * 2)] // common GRE MTUs
|
||
const sizes = [1500, 1492, mtu + 8, mtu + 4, mtu, mtu - 4]
|
||
const lines: OutputLine[] = [
|
||
{ text: `MTU path discovery → ${target} (do-not-fragment ping)`, kind: "header" },
|
||
{ text: "", kind: "dim" },
|
||
{ text: ` SIZE RESULT RTT`, kind: "dim" },
|
||
]
|
||
sizes.forEach(sz => {
|
||
const pass = sz <= mtu
|
||
const rtt = pass ? jitter(base, 0.1) : null
|
||
lines.push({
|
||
text: ` ${String(sz).padStart(4)} ${pass ? "✓ PASS" : "✗ FAIL (frag needed)"} ${pass ? `${rtt}ms` : "—"}`,
|
||
kind: pass ? "ok" : "err",
|
||
})
|
||
})
|
||
lines.push({ text: "", kind: "dim" })
|
||
lines.push({ text: `MTU discovered: ${mtu} bytes`, kind: "ok" })
|
||
const overhead = 1500 - mtu
|
||
lines.push({ text: `Overhead: ${overhead} bytes (GRE ${overhead >= 24 ? "+IPsec" : "no IPsec"})`, kind: "dim" })
|
||
return lines
|
||
}
|
||
|
||
function genBwOutput(target: string, srcId: string, proto: string, duration: number): OutputLine[] {
|
||
const base = [410, 580, 220, 680][Math.floor(Math.random() * 4)]
|
||
seededRng(target + srcId)
|
||
const lines: OutputLine[] = [
|
||
{ text: ` status: running`, kind: "dim" },
|
||
{ text: ` direction: both`, kind: "dim" },
|
||
{ text: ` protocol: ${proto.toUpperCase()}`, kind: "dim" },
|
||
{ text: ` duration: ${duration}s`, kind: "dim" },
|
||
{ text: "", kind: "dim" },
|
||
]
|
||
for (let t = 2; t <= duration; t += 2) {
|
||
const tx = jitter(base * 0.98, 0.08)
|
||
const rx = jitter(base * 0.95, 0.09)
|
||
lines.push({
|
||
text: ` [${String(t).padStart(2)}s] tx-current: ${tx}Mbps rx-current: ${rx}Mbps`,
|
||
kind: "normal",
|
||
})
|
||
}
|
||
const txAvg = jitter(base * 0.97, 0.04)
|
||
const rxAvg = jitter(base * 0.94, 0.04)
|
||
lines.push({ text: "", kind: "dim" })
|
||
lines.push({ text: ` status: done`, kind: "ok" })
|
||
lines.push({ text: ` tx-total-average: ${txAvg}Mbps`, kind: "ok" })
|
||
lines.push({ text: ` rx-total-average: ${rxAvg}Mbps`, kind: "ok" })
|
||
return lines
|
||
}
|
||
|
||
// ─── command builder ──────────────────────────────────────────────────────────
|
||
|
||
/** RouterOS принимает в src-address только IPv4; FQDN подставлять нельзя. */
|
||
function isIpv4Literal(s: string): boolean {
|
||
const t = s.trim()
|
||
if (!/^\d{1,3}(\.\d{1,3}){3}$/.test(t)) return false
|
||
return t.split(".").every(p => {
|
||
const n = Number.parseInt(p, 10)
|
||
return Number.isFinite(n) && n >= 0 && n <= 255
|
||
})
|
||
}
|
||
|
||
/** Превью: IPv4 из API, иначе литерал host если уже IP, иначе плейсхолдер пока DNS не готов. */
|
||
function pickSrcAddressRos(host: string, resolvedLiveIpv4: string | null | undefined): string {
|
||
if (isIpv4Literal(host)) return host.trim()
|
||
if (resolvedLiveIpv4 === undefined) return "…"
|
||
if (resolvedLiveIpv4 === null) return "?"
|
||
return resolvedLiveIpv4
|
||
}
|
||
|
||
function buildCommand(
|
||
serversList: Server[],
|
||
tool: DiagTool, src: string, target: string,
|
||
opts: { pingCount?: number; pingSize?: number; pingTtl?: number; traceProto?: TraceProto; traceMaxHops?: number; traceUseDns?: boolean; dnsType?: DnsType; mtuStart?: number; bwProto?: string; bwDuration?: number; bwTarget?: string },
|
||
resolvedSrcIpv4?: string | null,
|
||
): string {
|
||
const host = serversList.find(s => s.id === src)?.host ?? "?"
|
||
const srcRos = pickSrcAddressRos(host, resolvedSrcIpv4)
|
||
switch (tool) {
|
||
case "ping":
|
||
return `/tool ping address=${target} count=${opts.pingCount ?? 5} size=${opts.pingSize ?? 64} ttl=${opts.pingTtl ?? 64} src-address=${srcRos}`
|
||
case "traceroute":
|
||
return `/tool traceroute address=${target} max-hops=${opts.traceMaxHops ?? 30} protocol=${opts.traceProto ?? "icmp"} timeout=00:00:01 count=1 use-dns=${opts.traceUseDns ? "yes" : "no"} src-address=${srcRos}`
|
||
case "bandwidth":
|
||
return `/tool bandwidth-test address=${opts.bwTarget ?? target} duration=${opts.bwDuration ?? 10}s protocol=${opts.bwProto ?? "tcp"} direction=both`
|
||
case "dns":
|
||
return "DNS приложения: " + target + " · " + (opts.dnsType ?? "A") + " · резолвер хоста backend"
|
||
case "route":
|
||
return `/ip route lookup ip=${target}`
|
||
case "mtu":
|
||
return `/tool ping address=${target} do-not-fragment count=1 size=${opts.mtuStart ?? 1500} src-address=${srcRos}`
|
||
}
|
||
}
|
||
|
||
// ─── small UI components ──────────────────────────────────────────────────────
|
||
|
||
function NativeSelect({ value, onChange, children, className, ariaLabel }: {
|
||
value: string; onChange: (v: string) => void; children: React.ReactNode; className?: string; ariaLabel?: string
|
||
}) {
|
||
return (
|
||
<select aria-label={ariaLabel} value={value} onChange={e => onChange(e.target.value)}
|
||
className={cn(
|
||
"h-8 min-w-0 rounded-lg border border-input bg-background px-2.5 py-1 text-sm text-foreground",
|
||
"transition-colors outline-none",
|
||
"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
|
||
className,
|
||
)}>
|
||
{children}
|
||
</select>
|
||
)
|
||
}
|
||
|
||
function OptionLabel({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) {
|
||
if (htmlFor) return <label htmlFor={htmlFor} className="block text-xs font-medium text-muted-foreground mb-1">{children}</label>
|
||
return <p className="text-[11px] font-medium text-muted-foreground mb-1">{children}</p>
|
||
}
|
||
|
||
function SegBtn<T extends string | number>({ value, current, onClick, children }: {
|
||
value: T; current: T; onClick: (v: T) => void; children: React.ReactNode
|
||
}) {
|
||
return (
|
||
<button type="button" aria-pressed={value === current} onClick={() => onClick(value)}
|
||
className={cn(
|
||
"px-2.5 py-1 text-xs font-mono border-r last:border-r-0 border-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||
value === current ? "bg-muted text-foreground font-semibold" : "text-muted-foreground hover:bg-muted/50",
|
||
)}>
|
||
{children}
|
||
</button>
|
||
)
|
||
}
|
||
|
||
// ─── terminal output ──────────────────────────────────────────────────────────
|
||
|
||
function TerminalOutput({ test }: { test: DiagTest }) {
|
||
const ref=useRef<HTMLDivElement>(null),follow=useRef(true)
|
||
const visible=test.lines.slice(0,test.totalLines)
|
||
useEffect(()=>{if(ref.current&&follow.current)ref.current.scrollTop=ref.current.scrollHeight},[visible.length])
|
||
return <div ref={ref} role="region" aria-label={"Вывод "+TOOL_META[test.tool].label+" · "+test.srcServerName} tabIndex={0}
|
||
onScroll={()=>{const el=ref.current;if(el)follow.current=el.scrollHeight-el.scrollTop-el.clientHeight<32}}
|
||
className="h-full min-h-0 overflow-auto rounded-lg bg-muted/30 border px-3 py-3 font-mono text-xs leading-relaxed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
||
<div className="mb-2 text-muted-foreground [overflow-wrap:anywhere]">{test.source==="demo"?"Демо":test.tool==="dns"?"DNS приложения":test.srcServerName} · {test.command}</div>
|
||
{visible.map((line,i)=><div key={i} className={cn("whitespace-pre-wrap [overflow-wrap:anywhere] leading-5",line.kind==="ok"&&"text-success",line.kind==="err"&&"text-destructive",line.kind==="dim"&&"text-muted-foreground",line.kind==="header"&&"text-foreground font-semibold",line.kind==="cmd"&&"text-warning",line.kind==="normal"&&"text-foreground")}>{line.text||" "}</div>)}
|
||
</div>
|
||
}
|
||
// ─── uptime speed probes (live) ───────────────────────────────────────────────
|
||
|
||
// ─── schedule tab ─────────────────────────────────────────────────────────────
|
||
|
||
const INIT_RULES: SchedRule[] = [
|
||
{ id: "r1", srcId: "srv1", tunnelId: "gre1", type: "both", intervalMin: 15, enabled: true, lastRun: "3 мин назад", nextRunMin: 12 },
|
||
{ id: "r2", srcId: "srv1", tunnelId: "gre2", type: "ping", intervalMin: 5, enabled: true, lastRun: "1 мин назад", nextRunMin: 4 },
|
||
{ id: "r3", srcId: "srv7", tunnelId: "gre5", type: "bandwidth", intervalMin: 60, enabled: false, lastRun: "2ч назад", nextRunMin: null },
|
||
]
|
||
|
||
function ScheduleTab({
|
||
rules,
|
||
setRules,
|
||
serverOptions,
|
||
tunnelsForServer,
|
||
defaultSrc,
|
||
}: {
|
||
rules: SchedRule[]
|
||
setRules: React.Dispatch<React.SetStateAction<SchedRule[]>>
|
||
serverOptions: Server[]
|
||
tunnelsForServer: (serverId: string) => GreTunnel[]
|
||
defaultSrc?: string
|
||
}) {
|
||
const [showAdd, setShowAdd] = useState(false)
|
||
const [addSrc, setAddSrc] = useState(defaultSrc ?? serverOptions[0]?.id ?? "srv1")
|
||
const [selectedTunnel, setAddTun] = useState("")
|
||
const [addType, setAddType] = useState<SchedType>("ping")
|
||
const [addMin, setAddMin] = useState(10)
|
||
const addTunnels = useMemo(() => tunnelsForServer(addSrc), [addSrc, tunnelsForServer])
|
||
|
||
const addTun = addTunnels.some(t=>t.id===selectedTunnel) ? selectedTunnel : addTunnels[0]?.id ?? ""
|
||
|
||
const tunnelName = (srcId: string, tunnelId: string) =>
|
||
tunnelsForServer(srcId).find((t) => t.id === tunnelId)?.name
|
||
|
||
return (
|
||
<div className="flex flex-col gap-3">
|
||
<DataPageCard>
|
||
<ProbesScheduleDataGrid
|
||
rules={rules}
|
||
serverOptions={serverOptions}
|
||
tunnelName={tunnelName}
|
||
onToggleEnabled={(id, enabled) =>
|
||
setRules((p) => p.map((r) => (r.id === id ? { ...r, enabled } : r)))
|
||
}
|
||
onDelete={(id) => setRules((p) => p.filter((r) => r.id !== id))}
|
||
/>
|
||
</DataPageCard>
|
||
{showAdd ? (
|
||
<Frame dense className="w-full overflow-hidden">
|
||
<FramePanel className="p-0 overflow-hidden">
|
||
<div className="px-4 py-3 border-b flex items-center gap-2 text-sm font-medium">
|
||
<PlusIcon aria-hidden="true" className="size-4 text-muted-foreground" />Новое правило
|
||
</div>
|
||
<div className="px-4 py-4 flex flex-wrap items-end gap-3">
|
||
<div><OptionLabel>Сервер</OptionLabel>
|
||
<NativeSelect ariaLabel="Устройство расписания" value={addSrc} onChange={value=>{setAddSrc(value);setAddTun("")}} className="min-w-[160px]">
|
||
{serverOptions.filter(s => s.enabled).map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
||
</NativeSelect>
|
||
</div>
|
||
<div><OptionLabel>GRE-туннель</OptionLabel>
|
||
<NativeSelect ariaLabel="Туннель расписания" value={addTun} onChange={setAddTun} className="min-w-[150px]">
|
||
{addTunnels.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||
</NativeSelect>
|
||
</div>
|
||
<div><OptionLabel>Тип</OptionLabel>
|
||
<NativeSelect ariaLabel="Тип теста расписания" value={addType} onChange={v => setAddType(v as SchedType)}>
|
||
<option value="ping">Ping</option>
|
||
<option value="bandwidth">BW-тест</option>
|
||
<option value="both">Ping + BW</option>
|
||
</NativeSelect>
|
||
</div>
|
||
<div><OptionLabel>Интервал (мин)</OptionLabel>
|
||
<Input type="number" min={1} max={1440} value={addMin}
|
||
onChange={e => setAddMin(Math.max(1, parseInt(e.target.value) || 1))}
|
||
className="w-20 font-mono text-sm" />
|
||
</div>
|
||
<Button size="sm" disabled={!addTunnels.length}
|
||
onClick={() => {
|
||
setRules(p => [...p, { id: `r${Date.now()}`, srcId: addSrc, tunnelId: addTun, type: addType, intervalMin: addMin, enabled: true, lastRun: null, nextRunMin: addMin }])
|
||
setShowAdd(false)
|
||
}}>
|
||
<CheckIcon className="size-4" />Добавить
|
||
</Button>
|
||
<Button variant="outline" size="sm" onClick={() => setShowAdd(false)}>Отмена</Button>
|
||
</div>
|
||
</FramePanel>
|
||
</Frame>
|
||
) : (
|
||
<Button variant="outline" size="sm" className="w-fit" onClick={() => setShowAdd(true)}>
|
||
<PlusIcon aria-hidden="true" className="size-4" />Добавить правило
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── page ─────────────────────────────────────────────────────────────────────
|
||
|
||
export default function ProbesPage() {
|
||
return <Suspense fallback={<p role="status">Загрузка диагностики…</p>}><ProbesRoute /></Suspense>
|
||
}
|
||
|
||
function ProbesRoute() {
|
||
const params = useSearchParams()
|
||
const url = readProbeUrl(new URLSearchParams(params.toString()))
|
||
const { mode, backendUrl, prefsHydrated } = useDataSource()
|
||
if (url.error) return <div role="alert" aria-label="Ссылка диагностики" className="p-4 space-y-2"><p>{url.error}</p><Button type="button" variant="outline" onClick={() => window.history.replaceState(null, "", patchProbeUrl(new URLSearchParams(params.toString()), null) + window.location.hash)}>Сбросить контекст диагностики</Button></div>
|
||
if (!prefsHydrated) return <p role="status">Загрузка настроек диагностики…</p>
|
||
return <ProbesContent key={JSON.stringify([mode, backendUrl])} />
|
||
}
|
||
|
||
function ProbesContent() {
|
||
const params = useSearchParams()
|
||
const { server } = readProbeUrl(new URLSearchParams(params.toString()))
|
||
const srcId = server ?? ""
|
||
const selectServer = (id: string) => window.history.pushState(null, "", patchProbeUrl(new URLSearchParams(params.toString()), id || null) + window.location.hash)
|
||
const { mode, backendUrl } = useDataSource()
|
||
const canRead = can("mm:servers:read")
|
||
const canRun = can("mm:servers:write")
|
||
const canReadGre = can("mm:filters:read")
|
||
const isLive = mode === "live"
|
||
const apiFetch = useMemo(() => makeApiFetch(backendUrl), [backendUrl])
|
||
|
||
const [liveServers, setLiveServers] = useState<Server[]>([])
|
||
const [liveLoad, setLiveLoad] = useState<"idle" | "loading" | "error">(() => (isLive ? "loading" : "idle"))
|
||
const [catalogError, setCatalogError] = useState<string | null>(null)
|
||
const [catalogRevision, setCatalogRevision] = useState(0)
|
||
const [catalogReadAt, setCatalogReadAt] = useState<number | null>(null)
|
||
const [greState, setGreState] = useState<{ id: string; state: "loading" | "ready" | "error"; error?: string } | null>(null)
|
||
const [greRevision, setGreRevision] = useState(0)
|
||
const [greByServer, setGreByServer] = useState<Record<string, GreTunnel[]>>({})
|
||
|
||
const [tool, setTool] = useState<DiagTool>("ping")
|
||
const [target, setTarget] = useState("8.8.8.8")
|
||
const [pingCount, setPingCount] = useState(5)
|
||
const [pingSize, setPingSize] = useState(64)
|
||
const [pingTtl] = useState(64)
|
||
const [traceProto, setTraceProto] = useState<TraceProto>("icmp")
|
||
const [traceUseDns, setTraceUseDns] = useState(false)
|
||
const [traceHops] = useState(30)
|
||
const [dnsType, setDnsType] = useState<DnsType>("A")
|
||
const [bwChoice, setBwChoice] = useState<{ serverId: string; id: string } | null>(null)
|
||
const [bwProto, setBwProto] = useState<"tcp" | "udp">("tcp")
|
||
const [bwDuration, setBwDuration] = useState(10)
|
||
const [runBusy, setRunBusy] = useState(false)
|
||
/** В live: IPv4 для src-address (DNS A-запись к host API); undefined = грузим, null = не удалось */
|
||
const [source, setSource] = useState<{ key: string; ipv4?: string | null; error?: string; loading: boolean } | null>(null)
|
||
const [sourceRevision, setSourceRevision] = useState(0)
|
||
|
||
useEffect(() => {
|
||
if (!isLive || !canRead) return
|
||
let cancelled = false
|
||
const ctrl = new AbortController()
|
||
queueMicrotask(() => { if (!cancelled) { setLiveLoad("loading"); setCatalogError(null) } })
|
||
void apiFetch<unknown>("/api/servers", { signal: ctrl.signal })
|
||
.then(raw => {
|
||
const result = probeServersSchema.safeParse(raw)
|
||
if (!result.success) throw new Error("Некорректный ответ API: каталог устройств не подтверждён.")
|
||
if (cancelled) return
|
||
setLiveServers(result.data.map(s => ({
|
||
id: String(s.id), name: s.name || s.host, host: s.host, model: "—", os: "—",
|
||
site: s.site ?? "", country: s.country ?? "UN", asn: s.asn ?? "", type: s.type,
|
||
enabled: s.enabled, status: s.status ?? "unknown",
|
||
latency: s.latency != null ? Math.round(s.latency) : null, sessions: 0,
|
||
})))
|
||
setCatalogReadAt(Date.now())
|
||
setLiveLoad("idle")
|
||
})
|
||
.catch(error => {
|
||
if (cancelled) return
|
||
setCatalogError(error instanceof Error ? error.message : "Не удалось прочитать устройства.")
|
||
setLiveLoad("error")
|
||
})
|
||
return () => { cancelled = true; ctrl.abort() }
|
||
}, [isLive, canRead, apiFetch, catalogRevision])
|
||
|
||
const allServers = useMemo(() => {
|
||
if (!isLive) return servers
|
||
return liveServers
|
||
}, [isLive, liveServers])
|
||
|
||
const probeRailItems = useMemo<ServerTileItem[]>(() => (
|
||
allServers.map((s) => ({
|
||
id: s.id,
|
||
name: s.name,
|
||
host: s.host,
|
||
site: s.site,
|
||
country: s.country,
|
||
status: s.status,
|
||
type: s.type,
|
||
enabled: s.enabled,
|
||
selectable: s.enabled,
|
||
}))
|
||
), [allServers])
|
||
|
||
|
||
useEffect(() => {
|
||
if (!isLive || !canReadGre || liveLoad !== "idle" || !allServers.some(s => s.id === srcId && s.enabled)) return
|
||
let cancelled = false
|
||
const ctrl = new AbortController()
|
||
queueMicrotask(() => { if (!cancelled) setGreState({ id: srcId, state: "loading" }) })
|
||
void apiFetch<unknown>("/api/filters/gre-tunnels?serverId=" + encodeURIComponent(srcId), { signal: ctrl.signal })
|
||
.then(raw => {
|
||
const result = filtersGreResponseSchema.safeParse(raw)
|
||
if (!result.success || result.data.tunnels.some(tunnel => tunnel.serverId !== srcId)) throw new Error("Некорректный ответ API: GRE выбранного устройства не подтверждены.")
|
||
if (cancelled) return
|
||
setGreByServer(prev => ({ ...prev, [srcId]: result.data.tunnels }))
|
||
setGreState({ id: srcId, state: "ready" })
|
||
})
|
||
.catch(error => {
|
||
if (cancelled) return
|
||
setGreState({ id: srcId, state: "error", error: error instanceof Error ? error.message : "Не удалось прочитать GRE." })
|
||
})
|
||
return () => { cancelled = true; ctrl.abort() }
|
||
}, [isLive, canReadGre, liveLoad, allServers, srcId, apiFetch, greRevision])
|
||
|
||
const tunnelsForSrc = useMemo(() => {
|
||
if (isLive) return greByServer[srcId] ?? []
|
||
return greTunnels.filter(t => t.serverId === srcId)
|
||
}, [isLive, greByServer, srcId])
|
||
|
||
|
||
// ── run state ──
|
||
const [tests, setTests] = useState<DiagTest[]>([])
|
||
const [tab, setTab] = useState<"history" | "schedule">("history")
|
||
const [rules, setRules] = useState<SchedRule[]>(INIT_RULES)
|
||
const nextId = useRef(1)
|
||
const targetRef = useRef<HTMLInputElement>(null)
|
||
const runButtonRef = useRef<HTMLButtonElement>(null)
|
||
/** Живой POST /probes/run — отмена через fetch AbortSignal */
|
||
const liveProbeRunRef = useRef<{ testId: string; ctrl: AbortController } | null>(null)
|
||
|
||
const runLock = useRef(false)
|
||
const alive = useRef(true)
|
||
useEffect(() => {
|
||
alive.current = true
|
||
return () => { alive.current = false; liveProbeRunRef.current?.ctrl.abort() }
|
||
}, [])
|
||
|
||
const bwTunnels = tunnelsForSrc
|
||
const bwTunId = bwChoice?.serverId === srcId ? bwChoice.id : (bwTunnels[0]?.id ?? "")
|
||
const setBwTunId = (id: string) => setBwChoice({ serverId: srcId, id })
|
||
const srcServer = useMemo(() => allServers.find(s => s.id === srcId), [allServers, srcId])
|
||
const sourceKey = JSON.stringify([srcId, srcServer?.host])
|
||
const sourceRequired = tool === "ping" || tool === "traceroute" || tool === "mtu"
|
||
const sourceCurrent = source?.key === sourceKey ? source : null
|
||
const rosSrcV4 = sourceCurrent?.ipv4
|
||
useEffect(() => {
|
||
if (!isLive || !canRead || liveLoad !== "idle" || !srcServer?.enabled || !sourceRequired) return
|
||
const host = srcServer.host, id = srcServer.id
|
||
if (!/^[1-9][0-9]*$/.test(id) || !Number.isSafeInteger(Number(id))) return
|
||
let cancelled = false
|
||
const ctrl = new AbortController()
|
||
queueMicrotask(() => { if (!cancelled) setSource({ key: sourceKey, loading: true }) })
|
||
void apiFetch<unknown>("/api/servers/" + id + "/ros-src-address", { signal: ctrl.signal })
|
||
.then(raw => { const ipv4 = readProbeSource(raw, host); if (!cancelled) setSource({ key: sourceKey, loading: false, ipv4 }) })
|
||
.catch(error => { if (!cancelled) setSource({ key: sourceKey, loading: false, error: error instanceof Error ? error.message : "Источник preview неизвестен." }) })
|
||
return () => { cancelled = true; ctrl.abort() }
|
||
}, [isLive, canRead, liveLoad, srcServer, sourceRequired, sourceKey, apiFetch, sourceRevision])
|
||
const greReady = !isLive || (greState?.id === srcId && greState.state === "ready")
|
||
const bwTun = useMemo(() => bwTunnels.find(t => t.id === bwTunId), [bwTunnels, bwTunId])
|
||
|
||
// current command preview
|
||
const cmdPreview = useMemo(() => buildCommand(allServers, tool, srcId, target, {
|
||
pingCount, pingSize, pingTtl, traceProto, traceMaxHops: traceHops, traceUseDns, dnsType,
|
||
bwTarget: bwTun?.remoteAddress, bwProto, bwDuration,
|
||
}, isLive ? rosSrcV4 : undefined), [allServers, tool, srcId, target, pingCount, pingSize, pingTtl, traceProto, traceHops, traceUseDns, dnsType, bwTun, bwProto, bwDuration, isLive, rosSrcV4])
|
||
|
||
// ── run test ──
|
||
const runTest = useCallback(async () => {
|
||
const srv = allServers.find(s => s.id === srcId)
|
||
if (!canRun || (tool === "bandwidth" && (!bwTun?.enabled || !bwTun.remoteAddress.trim() || !greReady || (isLive && !canReadGre))) || !srv || !srv.enabled || runLock.current || (isLive && liveLoad !== "idle")) return
|
||
const id = String(nextId.current++)
|
||
const numericServerId = Number.parseInt(srcId, 10)
|
||
|
||
if (isLive) {
|
||
if (!Number.isFinite(numericServerId)) return
|
||
runLock.current = true
|
||
setRunBusy(true)
|
||
const abortCtrl = new AbortController()
|
||
liveProbeRunRef.current = { testId: id, ctrl: abortCtrl }
|
||
let timedOut = false
|
||
const timeout = setTimeout(() => { timedOut = true; abortCtrl.abort() }, 60_000)
|
||
setTests(p => [{
|
||
id,
|
||
tool,
|
||
status: "running",
|
||
srcServerId: srcId,
|
||
srcServerName: srv.name,
|
||
target: tool === "bandwidth" ? (bwTun?.name ?? target) : target,
|
||
command: cmdPreview,
|
||
startedAt: Date.now(),
|
||
lines: [{ text: tool === "dns" ? "Выполняется DNS-запрос приложения…" : "Выполняется запрос к MikroTik через API…", kind: "dim" }],
|
||
totalLines: 1,
|
||
source: "live",
|
||
}, ...p.slice(0, 9)])
|
||
setTab("history")
|
||
try {
|
||
const peer =
|
||
bwTun?.remoteAddress
|
||
? allServers.find(s => s.host.trim().toLowerCase() === bwTun.remoteAddress.trim().toLowerCase())
|
||
: undefined
|
||
const body = {
|
||
tool,
|
||
target: tool === "bandwidth" ? undefined : target.trim(),
|
||
pingCount,
|
||
pingSize,
|
||
pingTtl,
|
||
traceProto,
|
||
traceMaxHops: traceHops,
|
||
traceHopTimeout: tool === "traceroute" ? "1s" : undefined,
|
||
traceProbeCount: tool === "traceroute" ? 1 : undefined,
|
||
traceUseDns: tool === "traceroute" ? traceUseDns : undefined,
|
||
dnsType,
|
||
bwRemoteAddress: tool === "bandwidth" ? bwTun?.remoteAddress : undefined,
|
||
dstServerId: peer ? Number.parseInt(peer.id, 10) : undefined,
|
||
bwProto,
|
||
bwDuration,
|
||
}
|
||
const res = await apiFetch<unknown>(`/api/servers/${numericServerId}/probes/run`, {
|
||
method: "POST",
|
||
body: JSON.stringify(body),
|
||
signal: abortCtrl.signal,
|
||
})
|
||
if (!alive.current || abortCtrl.signal.aborted) return
|
||
const output = readProbeOutput(res)
|
||
const lines = parseProbeOutput(output || "Запрос выполнен: API вернул пустой вывод.")
|
||
setTests(p => p.map(t => (t.id === id
|
||
? {
|
||
...t,
|
||
lines,
|
||
totalLines: lines.length,
|
||
status: "done",
|
||
}
|
||
: t)))
|
||
} catch (e) {
|
||
if (!alive.current) return
|
||
const aborted = abortCtrl.signal.aborted ||
|
||
(typeof DOMException !== "undefined" && e instanceof DOMException && e.name === "AbortError")
|
||
|| (e instanceof Error && e.name === "AbortError")
|
||
if (aborted) {
|
||
setTests(p => p.map(t => (t.id === id
|
||
? {
|
||
...t,
|
||
lines: [{ text: timedOut ? "Время ожидания истекло. Результат на устройстве не подтверждён; повтор выполняется вручную." : "Ожидание отменено. Остановка на устройстве не подтверждена.", kind: timedOut ? "err" : "dim" }],
|
||
totalLines: 1,
|
||
status: timedOut ? "error" : "cancelled",
|
||
}
|
||
: t)))
|
||
} else {
|
||
const msg = e instanceof Error ? e.message : String(e)
|
||
setTests(p => p.map(t => (t.id === id
|
||
? {
|
||
...t,
|
||
lines: [{ text: msg, kind: "err" }],
|
||
totalLines: 1,
|
||
status: "error",
|
||
}
|
||
: t)))
|
||
}
|
||
} finally {
|
||
clearTimeout(timeout)
|
||
if (liveProbeRunRef.current?.testId === id) liveProbeRunRef.current = null
|
||
runLock.current = false
|
||
if (alive.current) {
|
||
setRunBusy(false)
|
||
requestAnimationFrame(() => { if (alive.current && (document.activeElement === runButtonRef.current || document.activeElement === document.body)) (targetRef.current ?? runButtonRef.current)?.focus() })
|
||
}
|
||
}
|
||
return
|
||
}
|
||
|
||
let lines: OutputLine[] = []
|
||
|
||
switch (tool) {
|
||
case "ping": lines = genPingOutput(target, srcId, pingCount, pingSize, pingTtl); break
|
||
case "traceroute": lines = genTraceOutput(target, srcId, traceProto, traceHops); break
|
||
case "dns": lines = genDnsOutput(target, srcId, dnsType); break
|
||
case "route": lines = genRouteOutput(target, srcId); break
|
||
case "mtu": lines = genMtuOutput(target, srcId); break
|
||
case "bandwidth": lines = genBwOutput(bwTun?.remoteAddress ?? target, srcId, bwProto, bwDuration); break
|
||
}
|
||
|
||
const test: DiagTest = {
|
||
id,
|
||
tool,
|
||
status: "done",
|
||
srcServerId: srcId,
|
||
srcServerName: srv.name,
|
||
target: tool === "bandwidth" ? (bwTun?.name ?? target) : target,
|
||
command: cmdPreview,
|
||
startedAt: Date.now(),
|
||
lines,
|
||
totalLines: lines.length,
|
||
source: "demo",
|
||
}
|
||
setTests(p => [test, ...p.slice(0, 9)])
|
||
setTab("history")
|
||
}, [
|
||
isLive,
|
||
liveLoad,
|
||
canRun,
|
||
canReadGre,
|
||
greReady,
|
||
allServers,
|
||
srcId,
|
||
tool,
|
||
target,
|
||
pingCount,
|
||
pingSize,
|
||
pingTtl,
|
||
traceProto,
|
||
traceUseDns,
|
||
traceHops,
|
||
dnsType,
|
||
bwTun,
|
||
bwProto,
|
||
bwDuration,
|
||
cmdPreview,
|
||
apiFetch,
|
||
])
|
||
|
||
const stopTest = (id: string) => {
|
||
if (liveProbeRunRef.current?.testId === id) { liveProbeRunRef.current.ctrl.abort(); return }
|
||
setTests(p => p.map(t => (t.id === id && t.status === "running"
|
||
? { ...t, status: "cancelled" as const, totalLines: t.lines.length }
|
||
: t)))
|
||
}
|
||
const clearTest = (id: string) => {
|
||
if (liveProbeRunRef.current?.testId === id) liveProbeRunRef.current.ctrl.abort()
|
||
setTests(p => p.filter(t => t.id !== id))
|
||
runButtonRef.current?.focus()
|
||
}
|
||
|
||
const running = tests.filter(t => t.status === "running")
|
||
|
||
if (!canRead) return <p role="status">Для просмотра устройств требуется mm:servers:read.</p>
|
||
|
||
if (isLive && liveLoad === "loading" && catalogReadAt === null) {
|
||
return (
|
||
<div className="flex flex-col h-full">
|
||
<PageHeader crumbs={[{ label: "Инструменты" }, { label: "Диагностика" }]} />
|
||
<div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
|
||
<LoaderCircleIcon aria-hidden="true" className="size-8 motion-safe:animate-spin opacity-50" />
|
||
<p className="text-sm">Загрузка серверов из бекенда…</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<ServerRailLayout
|
||
items={probeRailItems}
|
||
selectedId={srcId}
|
||
onSelect={selectServer}
|
||
preserveSelection
|
||
showAll={false}
|
||
loading={isLive && liveLoad === "loading" && allServers.length === 0}
|
||
header={
|
||
<PageHeader
|
||
crumbs={[{ label: "Инструменты" }, { label: "Диагностика" }]}
|
||
actions={
|
||
<>
|
||
<ServerRailMobileButton />
|
||
{isLive && <Button type="button" size="sm" variant="outline" aria-label="Обновить устройства диагностики" disabled={liveLoad === "loading"} onClick={() => setCatalogRevision(n => n + 1)}>Обновить</Button>}
|
||
{running.length > 0
|
||
? <Button variant="outline" size="sm" onClick={() => {
|
||
running.forEach(test => stopTest(test.id))
|
||
}}>
|
||
<SquareIcon aria-hidden="true" className="size-4" />Остановить все
|
||
</Button>
|
||
: null}
|
||
</>
|
||
}
|
||
/>
|
||
}
|
||
>
|
||
<div className="flex flex-col gap-4">
|
||
|
||
{!server && <p role="status">Выберите устройство для диагностики. Выбор сохраняется в URL.</p>}
|
||
{server && (!isLive || catalogReadAt !== null) && !srcServer && <div role="alert" aria-label="Устройство диагностики"><p>Указанное устройство отсутствует в текущем каталоге. Другое устройство автоматически не выбирается.</p><Button type="button" variant="outline" onClick={() => selectServer("")}>Сбросить выбор устройства</Button></div>}
|
||
{srcServer && !srcServer.enabled && <p role="status">Выбранное устройство выключено. Диагностика недоступна.</p>}
|
||
{isLive && liveLoad === "error" && (
|
||
<div role="alert" aria-label="Каталог диагностики" className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-2.5 text-sm text-destructive">
|
||
<p>{catalogReadAt === null ? "Устройства пока неизвестны." : "Не удалось обновить устройства. Последний список сохранён; запуск приостановлен."}</p>
|
||
<p>{catalogError}</p>
|
||
</div>
|
||
)}
|
||
{isLive && catalogReadAt !== null && <p role="status" className="text-xs text-muted-foreground">Каталог получен: {new Date(catalogReadAt).toLocaleTimeString("ru-RU")}{liveLoad === "loading" ? " · обновляется" : ""}</p>}
|
||
{isLive && liveLoad === "idle" && allServers.length === 0 && <p role="status">В каталоге нет устройств. Добавьте устройство в разделе «Серверы».</p>}
|
||
|
||
{!isLive && <p role="status" className="text-sm text-muted-foreground">Демо: запросы не отправляются; результаты синтетические.</p>}
|
||
{isLive && (
|
||
<details className="text-xs text-muted-foreground"><summary className="cursor-pointer">Где выполняются тесты</summary><p className="pt-2">
|
||
Сетевые тесты выполняются на выбранном устройстве. DNS использует резолвер приложения. Traceroute ограничен примерно минутой; сокращение числа хопов указывается в ответе. Стоп отменяет ожидание, но не подтверждает остановку на устройстве.
|
||
</p></details>
|
||
)}
|
||
|
||
{!canRun && <p role="status" className="text-sm text-muted-foreground">Для запуска диагностики требуется mm:servers:write.</p>}
|
||
{isLive && tool === "bandwidth" && !canReadGre && <p role="status" className="text-sm text-muted-foreground">Для выбора GRE требуется mm:filters:read.</p>}
|
||
|
||
{isLive && tool === "bandwidth" && canReadGre && (
|
||
<div className="text-sm">
|
||
{greState?.id === srcId && greState.state === "error" ? <div role="alert" aria-label="GRE диагностики"><p className="text-destructive">GRE недоступны. Последний список сохранён; BW-тест приостановлен. {greState.error}</p><Button type="button" size="sm" variant="outline" onClick={() => setGreRevision(n => n + 1)}>Повторить GRE</Button></div>
|
||
: !greReady ? <p role="status">GRE выбранного устройства загружаются…</p>
|
||
: !bwTunnels.length ? <p role="status">У выбранного устройства нет GRE-туннелей.</p> : !bwTun?.enabled || !bwTun.remoteAddress.trim() ? <p role="status">Выберите включённый GRE с адресом назначения.</p> : null}
|
||
</div>
|
||
)}
|
||
|
||
{isLive && srcServer?.enabled && sourceRequired && (
|
||
<div className="text-xs text-muted-foreground">
|
||
{sourceCurrent?.error ? <div role="alert" aria-label="Источник preview"><p>{sourceCurrent.error}</p><Button type="button" size="sm" variant="outline" onClick={() => setSourceRevision(n => n + 1)}>Повторить определение IPv4</Button></div>
|
||
: !sourceCurrent || sourceCurrent.loading ? <p role="status">Определяем IPv4 для preview…</p>
|
||
: <p role="status">{sourceCurrent.ipv4 === null ? "IPv4 для preview не определён." : "IPv4 для preview: " + sourceCurrent.ipv4}</p>}
|
||
<p>Адрес справочный: при запуске определяется заново.</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── tool selector + config ── */}
|
||
<OpsPanel contentClassName="pt-4 pb-4 px-3 md:px-4 flex min-w-0 flex-col gap-4">
|
||
|
||
{/* tool chips */}
|
||
<div className="flex gap-2 flex-wrap">
|
||
{(Object.entries(TOOL_META) as [DiagTool, typeof TOOL_META[DiagTool]][]).map(([t, m]) => {
|
||
const active = tool === t
|
||
return (
|
||
<button key={t} type="button" aria-pressed={active} title={m.description} onClick={() => setTool(t)}
|
||
className={cn(
|
||
"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||
active
|
||
? "border-foreground bg-foreground text-background"
|
||
: "border-border text-muted-foreground hover:text-foreground hover:border-foreground/40",
|
||
)}>
|
||
<m.Icon aria-hidden="true" className={cn("size-3.5", active ? "" : m.color)} />
|
||
{m.label}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* main config row */}
|
||
<div className="flex flex-wrap items-end gap-3">
|
||
|
||
{/* target — all tools except bandwidth */}
|
||
{tool !== "bandwidth" && (
|
||
<div className="flex-1 min-w-[140px]">
|
||
<OptionLabel htmlFor="probe-target">
|
||
{tool === "dns" ? "Домен" : tool === "route" ? "Адрес назначения IPv4" : "Цель (IP или домен)"}
|
||
</OptionLabel>
|
||
<Input id="probe-target" ref={targetRef} maxLength={1024} value={target} onChange={e => setTarget(e.target.value)}
|
||
placeholder={tool === "dns" ? "google.com" : tool === "route" ? "8.8.8.8" : "8.8.8.8"}
|
||
aria-label={tool === "dns" ? "Домен" : tool === "route" ? "Адрес назначения IPv4" : "Цель диагностики"}
|
||
className="font-mono text-sm"
|
||
onKeyDown={e => e.key === "Enter" && runTest()}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* bandwidth: select GRE tunnel */}
|
||
{tool === "bandwidth" && (
|
||
<div>
|
||
<OptionLabel>GRE-туннель (цель)</OptionLabel>
|
||
<NativeSelect ariaLabel="GRE-туннель для BW-теста" value={bwTunnels.some(t => t.id === bwTunId) ? bwTunId : ""} onChange={setBwTunId} className="min-w-[180px]">
|
||
{!bwTunnels.some(t => t.id === bwTunId) && <option value="" disabled>Выберите GRE-туннель</option>}
|
||
{bwTunnels.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||
</NativeSelect>
|
||
</div>
|
||
)}
|
||
|
||
{/* inline quick options */}
|
||
{tool === "ping" && (
|
||
<>
|
||
<div>
|
||
<OptionLabel>Количество пакетов</OptionLabel>
|
||
<div className="flex flex-wrap rounded-lg border border-input min-h-8">
|
||
{[5, 10, 25, 100].map(n => <SegBtn key={n} value={n} current={pingCount} onClick={setPingCount}>{n}</SegBtn>)}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<OptionLabel>Размер (байт)</OptionLabel>
|
||
<div className="flex flex-wrap rounded-lg border border-input overflow-hidden min-h-8">
|
||
{[64, 128, 512, 1472].map(n => <SegBtn key={n} value={n} current={pingSize} onClick={setPingSize}>{n}</SegBtn>)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{tool === "traceroute" && (
|
||
<>
|
||
<div>
|
||
<OptionLabel>Протокол</OptionLabel>
|
||
<div className="flex rounded-lg border border-input overflow-hidden h-8">
|
||
{(["icmp", "udp", "tcp"] as TraceProto[]).map(p => <SegBtn key={p} value={p} current={traceProto} onClick={setTraceProto}>{p.toUpperCase()}</SegBtn>)}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-end gap-3 pb-0.5">
|
||
<div className="flex flex-col gap-1 min-w-0">
|
||
<OptionLabel>Имена хопов (use-dns)</OptionLabel>
|
||
<p className="text-[10px] text-muted-foreground leading-snug max-w-[220px]">
|
||
Как в RouterOS: резолвить IP промежуточных узлов в DNS-имена на самом MikroTik.
|
||
</p>
|
||
</div>
|
||
<FormToggle ariaLabel="Разрешать имена хопов на устройстве" checked={traceUseDns} onChange={setTraceUseDns} />
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{tool === "dns" && (
|
||
<div>
|
||
<OptionLabel>Тип записи</OptionLabel>
|
||
<div className="flex rounded-lg border border-input overflow-hidden h-8">
|
||
{(["A", "AAAA", "MX", "NS", "TXT", "CNAME", "PTR"] as DnsType[]).map(t => <SegBtn key={t} value={t} current={dnsType} onClick={setDnsType}>{t}</SegBtn>)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{tool === "bandwidth" && (
|
||
<>
|
||
<div>
|
||
<OptionLabel>Протокол</OptionLabel>
|
||
<div className="flex rounded-lg border border-input overflow-hidden h-8">
|
||
{(["tcp", "udp"] as const).map(p => <SegBtn key={p} value={p} current={bwProto} onClick={setBwProto}>{p.toUpperCase()}</SegBtn>)}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<OptionLabel>Длительность</OptionLabel>
|
||
<div className="flex rounded-lg border border-input overflow-hidden h-8">
|
||
{[5, 10, 30].map(n => <SegBtn key={n} value={n} current={bwDuration} onClick={setBwDuration}>{n}с</SegBtn>)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<Button ref={runButtonRef} type="button" aria-busy={runBusy}
|
||
onClick={() => void runTest()}
|
||
disabled={!canRun || (tool === "bandwidth" && (!bwTun?.enabled || !bwTun.remoteAddress.trim() || !greReady || (isLive && !canReadGre))) || runBusy || !srcServer?.enabled || (isLive && liveLoad !== "idle") || (tool === "bandwidth" && !bwTunnels.length)}
|
||
className="h-8 shrink-0 gap-1.5 self-end"
|
||
>
|
||
{runBusy ? <LoaderCircleIcon aria-hidden="true" className="size-3.5 motion-safe:animate-spin" /> : <PlayIcon aria-hidden="true" className="size-3.5" />}
|
||
Запустить
|
||
</Button>
|
||
</div>
|
||
|
||
{/* RouterOS command preview */}
|
||
<div className="flex min-w-0 items-center gap-2 rounded-lg bg-muted/30 px-3 py-2 border">
|
||
<TerminalIcon aria-hidden="true" className="size-3 text-muted-foreground shrink-0" />
|
||
<span className="hidden md:inline text-muted-foreground text-xs font-mono truncate max-w-24">[{tool === "dns" ? (isLive ? "backend" : "демо") : srcServer?.name}]</span>
|
||
<span className="hidden md:inline text-success text-xs font-mono shrink-0">$</span>
|
||
<span className="min-w-0 flex-1 text-foreground text-xs font-mono [overflow-wrap:anywhere]">{cmdPreview}</span>
|
||
<button type="button" aria-label="Скопировать параметры диагностики" onClick={() => void copyProbeText(cmdPreview)}
|
||
className="shrink-0 text-muted-foreground hover:text-foreground transition-colors ml-auto">
|
||
<CopyIcon aria-hidden="true" className="size-3" />
|
||
</button>
|
||
</div>
|
||
</OpsPanel>
|
||
|
||
{/* ── tabs ── */}
|
||
<div>
|
||
<div className="flex items-center gap-0 border-b">
|
||
{([
|
||
["history", "История тестов"],
|
||
["schedule", "Расписание"],
|
||
] as const).map(([t, label]) => (
|
||
<button key={t} type="button" aria-pressed={tab === t} onClick={() => setTab(t)}
|
||
className={cn(
|
||
"px-4 py-2 text-sm font-medium -mb-px border-b-2 transition-colors",
|
||
tab === t
|
||
? "border-foreground text-foreground"
|
||
: "border-transparent text-muted-foreground hover:text-foreground",
|
||
)}>
|
||
{label}
|
||
{t === "history" && tests.length > 0 && (
|
||
<span className="ml-1.5 text-[10px] font-mono px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
|
||
{tests.length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-4">
|
||
{/* history */}
|
||
{tab === "history" && (
|
||
tests.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground gap-2">
|
||
<TerminalIcon aria-hidden="true" className="size-8 opacity-20" />
|
||
<p className="text-sm">Запустите тест — результаты появятся здесь</p>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col gap-4">
|
||
{tests.map(test => {
|
||
const { Icon, color, label } = TOOL_META[test.tool]
|
||
return (
|
||
<Frame key={test.id} dense aria-busy={test.status === "running"} className="w-full h-[60dvh] min-h-0 flex flex-col overflow-hidden">
|
||
<FramePanel className="p-0 flex-1 min-h-0 flex flex-col overflow-hidden">
|
||
{/* header */}
|
||
<div className="shrink-0 flex flex-wrap items-center justify-between gap-2 px-3 py-2.5 border-b bg-muted/20">
|
||
<div className="flex flex-wrap items-center gap-2 min-w-0 w-full md:w-auto">
|
||
<Icon aria-hidden="true" className={cn("size-4 shrink-0", color)} />
|
||
<span className="text-sm font-medium">{label}</span>
|
||
<span className="min-w-0 max-w-[70%] text-xs font-mono text-muted-foreground truncate" title={test.target}>{test.target}</span>
|
||
<span className="w-full md:w-auto max-w-full text-xs text-muted-foreground truncate" title={test.tool === "dns" ? "DNS приложения" : test.srcServerName}>{test.tool === "dns" ? "DNS приложения" : "← " + test.srcServerName}</span>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2 min-w-0">
|
||
{test.status === "running" && (
|
||
<>
|
||
<span role="status" className="flex items-center gap-1 text-xs text-muted-foreground">
|
||
<span className="size-1.5 rounded-full bg-info motion-safe:animate-pulse" />
|
||
ожидаем ответ
|
||
</span>
|
||
<Button size="sm" variant="outline" type="button" className="h-11 md:h-7 px-2 text-xs"
|
||
onClick={() => stopTest(test.id)}>
|
||
<SquareIcon aria-hidden="true" className="size-3" />Стоп
|
||
</Button>
|
||
</>
|
||
)}
|
||
{test.status === "done" && <span role="status" className="text-xs text-muted-foreground">{test.source === "live" ? "ответ API" : "демо"}</span>}
|
||
{test.status === "cancelled" && <span role="status" className="text-[11px] text-muted-foreground">ожидание отменено</span>}
|
||
{test.status === "error" && (
|
||
<span role="alert" className="text-xs text-destructive">ошибка</span>
|
||
)}
|
||
<button type="button" aria-label={"Скопировать показанный вывод · " + label + " · " + test.id} onClick={() => void copyProbeText(test.lines.map(l => l.text).join("\n"))}
|
||
className="size-11 md:size-8 flex items-center justify-center rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:text-foreground hover:bg-muted transition-colors">
|
||
<CopyIcon aria-hidden="true" className="size-3.5" />
|
||
</button>
|
||
<button type="button" aria-label={"Удалить результат · " + label + " · " + test.id} onClick={() => clearTest(test.id)}
|
||
className="size-11 md:size-8 flex items-center justify-center rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:text-destructive hover:bg-destructive/10 transition-colors">
|
||
<Trash2Icon aria-hidden="true" className="size-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{/* terminal output */}
|
||
<div className="flex-1 min-h-0 p-3">
|
||
<TerminalOutput test={test} />
|
||
</div>
|
||
</FramePanel>
|
||
</Frame>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
)}
|
||
|
||
{/* schedule */}
|
||
{tab === "schedule" && (
|
||
isLive
|
||
? <ProbesSpeedSchedule base={backendUrl} serversForName={allServers} />
|
||
: (
|
||
<ScheduleTab
|
||
key={srcId}
|
||
rules={rules}
|
||
setRules={setRules}
|
||
serverOptions={allServers}
|
||
tunnelsForServer={sid => greTunnels.filter(t => t.serverId === sid)}
|
||
defaultSrc={srcId}
|
||
/>
|
||
)
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ServerRailLayout>
|
||
)
|
||
}
|