fix(config): добавить новые зависимости и обновить конфигурацию компонентов

2026-06-30 21:30:40 +07:00
parent 009011a917
commit a1a9124f3d
80 changed files with 13310 additions and 1587 deletions
@@ -0,0 +1,130 @@
+"use client"
+
+import { useState } from "react"
+import { cn } from "@/lib/utils"
+import { ClipboardCopyIcon } from "lucide-react"
+import type { BgpSessionRow } from "@/lib/bgp/types"
+import { fmtBgpNum, rscBgpSnippet } from "@/lib/bgp/helpers"
+
+function CapChip({ cap }: { cap: string }) {
+  return (
+    <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium border bg-muted/60 text-muted-foreground border-border/60">
+      {cap}
+    </span>
+  )
+}
+
+function PrefixBar({ rx, tx, active }: { rx: number; tx: number; active: number }) {
+  const max = Math.max(rx, 1)
+  return (
+    <div className="flex flex-col gap-1.5 text-[10px] font-mono">
+      {[
+        { label: "Получено", val: rx, color: "bg-[var(--chart-rx)]", w: rx / max },
+        { label: "Активных", val: active, color: "bg-[var(--chart-1)]", w: active / max },
+        { label: "Отправлено", val: tx, color: "bg-[var(--chart-tx)]", w: Math.min(tx / max, 1) },
+      ].map((r) => (
+        <div key={r.label} className="flex items-center gap-2">
+          <span className="w-20 text-muted-foreground shrink-0">{r.label}</span>
+          <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              className={cn("h-full rounded-full", r.color)}
+              style={{ width: `${Math.max(r.w * 100, r.val > 0 ? 2 : 0)}%` }}
+            />
+          </div>
+          <span className="w-14 text-right tabular-nums">{fmtBgpNum(r.val)}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function BgpSessionDetail({ session }: { session: BgpSessionRow }) {
+  const [copied, setCopied] = useState(false)
+
+  function copy() {
+    navigator.clipboard.writeText(rscBgpSnippet(session)).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1800)
+    })
+  }
+
+  return (
+    <div className="px-4 pb-4 pt-2 bg-muted/20 border-t border-border/60">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+        {[
+          { label: "Router ID", value: session.routerId },
+          { label: "Hold / KA", value: `${session.holdTime}s / ${session.keepalive}s` },
+          { label: "AFI/SAFI", value: session.afi },
+          {
+            label: "Сообщения ↓/↑",
+            value: `${fmtBgpNum(session.inputMessages)} / ${fmtBgpNum(session.outputMessages)}`,
+          },
+        ].map(({ label, value }) => (
+          <div key={label}>
+            <p className="text-[10px] text-muted-foreground mb-0.5">{label}</p>
+            <p className="text-xs font-mono font-medium">{value}</p>
+          </div>
+        ))}
+      </div>
+
+      {session.state === "Established" && (
+        <div className="mb-4">
+          <p className="text-[10px] text-muted-foreground mb-2 uppercase tracking-wider font-semibold">
+            Префиксы
+          </p>
+          <PrefixBar
+            rx={session.prefixesRx}
+            tx={session.prefixesTx}
+            active={session.prefixesActive}
+          />
+        </div>
+      )}
+
+      {session.capabilities.length > 0 && (
+        <div className="mb-4">
+          <p className="text-[10px] text-muted-foreground mb-1.5 uppercase tracking-wider font-semibold">
+            Capabilities
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {session.capabilities.map((c) => (
+              <CapChip key={c} cap={c} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {session.lastError && (
+        <div className="mb-4 flex items-center gap-2 rounded-md border border-red-500/20 bg-red-500/5 px-3 py-2">
+          <span className="size-1.5 rounded-full bg-red-500 shrink-0" />
+          <p className="text-xs font-mono text-red-500">{session.lastError}</p>
+        </div>
+      )}
+
+      <div className="mt-2">
+        <p className="text-[10px] text-muted-foreground mb-1.5 uppercase tracking-wider font-semibold">
+          RouterOS Export
+        </p>
+        <div className="rounded-md bg-[#0a0f1a] border border-white/8 px-3 py-2.5 flex items-start justify-between gap-3">
+          <pre className="text-[10px] font-mono text-[#94a3b8] leading-relaxed whitespace-pre-wrap flex-1 min-w-0">
+            {rscBgpSnippet(session)}
+          </pre>
+          <button
+            type="button"
+            onClick={copy}
+            className={cn(
+              "shrink-0 flex items-center gap-1 text-[10px] px-2 py-1 rounded border transition-colors",
+              copied
+                ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-400"
+                : "border-white/10 text-white/40 hover:text-white/70 hover:border-white/20",
+            )}
+          >
+            <ClipboardCopyIcon className="size-3" />
+            {copied ? "Скопировано" : "Копировать"}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { BgpSessionDetail }