feat(dashboard): собрать ops-дашборд на ReUI Frame с живыми данными

Co-authored-by: Cursor <[email protected]>

components/dashboard/dashboard-events-timeline.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import Link from "next/link"
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+} from "@/components/reui/timeline"
+import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
+import { cn } from "@/lib/utils"
+import type { EventItem } from "@mmapp/contracts/events"
+
+function formatEventAge(iso: string): string {
+  const ts = Date.parse(iso)
+  if (!Number.isFinite(ts)) return "—"
+  const diffMs = Math.max(0, Date.now() - ts)
+  const minutes = Math.floor(diffMs / 60_000)
+  if (minutes < 1) return "сейчас"
+  if (minutes < 60) return `${minutes}м`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}ч`
+  const days = Math.floor(hours / 24)
+  return `${days}д`
+}
+
+const LEVEL_DOT: Record<EventItem["level"], string> = {
+  critical: "border-destructive bg-destructive/20 group-data-completed/timeline-item:border-destructive",
+  warning: "border-warning bg-warning/20 group-data-completed/timeline-item:border-warning",
+  info: "border-info bg-info/20 group-data-completed/timeline-item:border-info",
+}
+
+/**
+ * Compact activity timeline.
+ * Preview: https://reui.io/preview/base/timeline-3
+ * Docs: https://reui.io/docs/components/base/timeline
+ */
+export function DashboardEventsTimeline({
+  events,
+  loading,
+  error,
+}: {
+  events: EventItem[]
+  loading?: boolean
+  error?: string | null
+}) {
+  if (loading && events.length === 0) {
+    return <p className="text-muted-foreground px-5 py-6 text-sm">Загрузка событий…</p>
+  }
+  if (error && events.length === 0) {
+    return (
+      <div className="px-5 py-4">
+        <Alert variant="destructive">
+          <AlertTitle>События недоступны</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      </div>
+    )
+  }
+  if (events.length === 0) {
+    return (
+      <p className="text-muted-foreground px-5 py-6 text-sm">
+        Событий пока нет.{" "}
+        <Link href="/alerts" className="underline underline-offset-2">
+          Оповещения
+        </Link>
+      </p>
+    )
+  }
+
+  return (
+    <Timeline defaultValue={events.length} className="px-5 py-4">
+      {events.map((event, index) => (
+        <TimelineItem key={event.id} step={index + 1}>
+          <TimelineHeader>
+            <TimelineSeparator />
+            <TimelineDate>{formatEventAge(event.createdAt)}</TimelineDate>
+            <TimelineTitle className="text-[13px] leading-tight">{event.title}</TimelineTitle>
+            <TimelineIndicator className={cn(LEVEL_DOT[event.level])} />
+          </TimelineHeader>
+          <TimelineContent className="text-xs leading-snug">{event.message}</TimelineContent>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  )
+}

components/dashboard/internet-path-map.tsx

@@ -2,8 +2,6 @@
 
 import { useMemo, useState } from "react"
 import { Flag } from "@/components/flag"
-import { OpsPanel } from "@/components/ops-panel"
-import { StatusBadge } from "@/components/status-badge"
 import { cn } from "@/lib/utils"
 import type { InternetPathViewModel } from "@/lib/dashboard-internet-path"
 import { Maximize2Icon, ZoomInIcon, ZoomOutIcon } from "lucide-react"
@@ -167,7 +165,7 @@ function ServerNode({
   )
 }
 
-export function InternetPathMapCard({ model }: { model: InternetPathViewModel | null }) {
+export function InternetPathMapCanvas({ model }: { model: InternetPathViewModel | null }) {
   const [zoom, setZoom] = useState(1)
   const [pan, setPan] = useState({ x: 0, y: 0 })
   const [isDragging, setIsDragging] = useState(false)
@@ -226,22 +224,7 @@ export function InternetPathMapCard({ model }: { model: InternetPathViewModel |
   }
 
   return (
-    <OpsPanel
-      title="Internet path map"
-      description="Основной и текущий путь трафика HomeRouter → Internet"
-      headerRight={
-          <StatusBadge
-            status={
-              model?.pathState === "healthy"
-                ? "online"
-                : model?.pathState === "failover"
-                  ? "degraded"
-                  : "offline"
-            }
-          />
-      }
-      contentClassName="px-5 pb-4"
-    >
+    <div className="flex flex-col gap-3">
         {!model && (
           <div className="h-[240px] rounded-md border border-dashed border-border grid place-items-center text-sm text-muted-foreground">
             Недостаточно данных для построения маршрута
@@ -412,6 +395,6 @@ export function InternetPathMapCard({ model }: { model: InternetPathViewModel |
             )}
           </div>
         )}
-    </OpsPanel>
+    </div>
   )
 }

components/dashboard/internet-path-panel.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { ChevronDownIcon } from "lucide-react"
+import { OpsPanel } from "@/components/ops-panel"
+import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
+import { buttonVariants } from "@/components/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { cn } from "@/lib/utils"
+import type { InternetPathViewModel } from "@/lib/dashboard-internet-path"
+import { InternetPathMapCanvas } from "@/components/dashboard/internet-path-map"
+import { InternetPathSummary } from "@/components/dashboard/internet-path-summary"
+
+const PATH_MAP_OPEN_LS = "mm:dashboard-path-map-open"
+
+function readMapOpen(): boolean {
+  if (typeof window === "undefined") return true
+  try {
+    const raw = localStorage.getItem(PATH_MAP_OPEN_LS)
+    if (raw === "0") return false
+    if (raw === "1") return true
+  } catch {
+    /* ignore */
+  }
+  return true
+}
+
+export function InternetPathPanel({
+  model,
+  loading,
+  error,
+}: {
+  model: InternetPathViewModel | null
+  loading?: boolean
+  error?: string | null
+}) {
+  const [open, setOpen] = useState(true)
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    queueMicrotask(() => {
+      setOpen(readMapOpen())
+      setHydrated(true)
+    })
+  }, [])
+
+  function handleOpenChange(next: boolean) {
+    setOpen(next)
+    try {
+      localStorage.setItem(PATH_MAP_OPEN_LS, next ? "1" : "0")
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return (
+    <OpsPanel
+      title="Internet path"
+      description="Home → WAN → JH → Exit"
+      headerRight={
+        <Link href="/network-map" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
+          Карта сети →
+        </Link>
+      }
+      contentClassName="flex flex-col gap-3 px-5 pb-4"
+    >
+      {error ? (
+        <Alert variant="destructive">
+          <AlertTitle>Не удалось загрузить путь</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : null}
+      {loading && !model ? (
+        <div className="h-20 animate-pulse rounded-md bg-muted/40" />
+      ) : (
+        <InternetPathSummary model={model} />
+      )}
+
+      <Collapsible open={hydrated ? open : true} onOpenChange={handleOpenChange}>
+        <CollapsibleTrigger
+          className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-7 w-fit gap-1.5 text-xs")}
+        >
+          <ChevronDownIcon className={cn("size-3.5 transition-transform", open && "rotate-180")} />
+          {open ? "Скрыть карту" : "Показать карту"}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <InternetPathMapCanvas model={model} />
+        </CollapsibleContent>
+      </Collapsible>
+    </OpsPanel>
+  )
+}

components/dashboard/internet-path-summary.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import type { ReactNode } from "react"
+import Link from "next/link"
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
+import { StatusBadge } from "@/components/status-badge"
+import { Flag } from "@/components/flag"
+import type { InternetPathViewModel } from "@/lib/dashboard-internet-path"
+import type { ServerStatus } from "@/lib/data"
+import { cn } from "@/lib/utils"
+import { ArrowRightIcon, HomeIcon, RadioIcon, ServerIcon, GlobeIcon } from "lucide-react"
+
+function pathStateToServerStatus(state: InternetPathViewModel["pathState"]): ServerStatus {
+  if (state === "healthy") return "online"
+  if (state === "failover" || state === "degraded") return "degraded"
+  return "offline"
+}
+
+function HopChip({
+  label,
+  name,
+  country,
+  icon,
+  iconClassName,
+}: {
+  label: string
+  name: string
+  country?: string
+  icon: ReactNode
+  iconClassName?: string
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-2 rounded-md border border-border/60 px-2 py-1.5">
+      <IconTile variant="elevated" size="sm" className={cn("shrink-0", iconClassName)} aria-hidden="true">
+        {icon}
+      </IconTile>
+      <div className="min-w-0">
+        <p className="text-muted-foreground text-[10px] font-medium uppercase tracking-wide">{label}</p>
+        <p className="flex items-center gap-1 truncate text-sm font-medium">
+          {country ? <Flag code={country} className="shrink-0" /> : null}
+          <span className="truncate">{name}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Compact live path strip (Frame-friendly). Canvas lives separately.
+ * Preview: https://reui.io/preview/base/stats-12
+ * Docs: https://reui.io/docs/components/base/icon-tile
+ */
+export function InternetPathSummary({ model }: { model: InternetPathViewModel | null }) {
+  if (!model) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        Недостаточно данных для пути. Добавьте home-router и проверьте{" "}
+        <Link href="/network-map" className="underline underline-offset-2">
+          карту сети
+        </Link>
+        .
+      </p>
+    )
+  }
+
+  const hop = model.currentHop ?? model.primaryHop
+  const wanName = hop?.wan.name ?? model.activeWanUplink?.name ?? "WAN"
+  const wanIsp = hop?.wan.isp ?? model.activeWanUplink?.isp ?? "—"
+  const ping = hop?.wanJhMetrics.pingMs
+  const dl = hop?.wanJhMetrics.dlMbps
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <StatusBadge status={pathStateToServerStatus(model.pathState)} />
+        {model.pathState === "failover" ? (
+          <Badge variant="warning-light" size="sm">failover</Badge>
+        ) : null}
+        {ping != null ? (
+          <Badge variant="outline" size="sm" className="tabular-nums">
+            {ping} мс
+          </Badge>
+        ) : null}
+        {dl != null ? (
+          <Badge variant="outline" size="sm" className="tabular-nums">
+            {Math.round(dl)} ↓ Мбит/с
+          </Badge>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-2 @3xl:flex-row @3xl:items-center">
+        <HopChip
+          label="Home"
+          name={model.homeRouter.name}
+          country={model.homeRouter.country}
+          icon={<HomeIcon />}
+          iconClassName="text-success"
+        />
+        <ArrowRightIcon className="text-muted-foreground hidden size-4 shrink-0 @3xl:block" aria-hidden="true" />
+        <HopChip
+          label="WAN"
+          name={`${wanName} · ${wanIsp}`}
+          icon={<RadioIcon />}
+          iconClassName="text-info"
+        />
+        <ArrowRightIcon className="text-muted-foreground hidden size-4 shrink-0 @3xl:block" aria-hidden="true" />
+        <HopChip
+          label="JH"
+          name={hop?.jumpHost.name ?? model.fallbackJumpHost?.name ?? "—"}
+          country={hop?.jumpHost.country ?? model.fallbackJumpHost?.country}
+          icon={<ServerIcon />}
+          iconClassName="text-primary"
+        />
+        <ArrowRightIcon className="text-muted-foreground hidden size-4 shrink-0 @3xl:block" aria-hidden="true" />
+        <HopChip
+          label="Exit"
+          name={hop?.exitNode.name ?? model.fallbackExitNode?.name ?? "—"}
+          country={hop?.exitNode.country ?? model.fallbackExitNode?.country}
+          icon={<GlobeIcon />}
+          iconClassName="text-muted-foreground"
+        />
+      </div>
+
+      <p className="text-muted-foreground text-xs leading-relaxed">
+        {model.currentPath?.reason ?? model.primaryPath?.reason ?? "Текущий путь не определён"}
+      </p>
+    </div>
+  )
+}