fix(ui): поднять очередь проблем и уточнить сводку дашборда

2026-09-20 12:04:45 +07:00
1 parent fe9df167ec
commit 4ec32765df
@@ -36,24 +36,34 @@ function fmtIntRu(n: number): string {
 }

 function AttentionRows({ rows }: { rows: AttentionRow[] }) {
+  function renderRow(row: AttentionRow) {
+    return (
+      <Link
+        key={row.id}
+        href={row.href}
+        className="hover:bg-muted/40 focus-visible:ring-ring flex min-w-0 items-start justify-between gap-2 rounded-md px-1 py-1.5 focus-visible:ring-2"
+      >
+        <span className="min-w-0 wrap-anywhere text-sm font-medium">{row.title}</span>
+        <Badge
+          size="sm"
+          variant={row.tone === "warning" ? "warning-light" : "destructive-light"}
+          className="shrink-0"
+        >
+          {row.hint}
+        </Badge>
+      </Link>
+    )
+  }
+
  return (
    <div className="flex flex-col gap-0.5">
-      {rows.map((row) => (
-        <Link
-          key={row.id}
-          href={row.href}
-          className="hover:bg-muted/40 flex min-w-0 items-center justify-between gap-2 rounded-md px-1 py-1.5"
-        >
-          <span className="truncate text-sm font-medium">{row.title}</span>
-          <Badge
-            size="sm"
-            variant={row.tone === "warning" ? "warning-light" : "destructive-light"}
-            className="shrink-0"
-          >
-            {row.hint}
-          </Badge>
-        </Link>
-      ))}
+      {rows.slice(0, 5).map(renderRow)}
+      {rows.length > 5 && (
+        <details>
+          <summary className="cursor-pointer rounded-md px-1 py-2 text-xs text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring">Ещё {rows.length - 5}</summary>
+          {rows.slice(5).map(renderRow)}
+        </details>
+      )}
    </div>
  )
 }
@@ -77,15 +87,15 @@ export default function DashboardPage() {
            items={[
              {
                id: "fleet",
-                label: "Флот",
+                label: "Серверы онлайн",
                value: dash.availability.servers ? `${dash.onlineCount} / ${dash.totalServers}` : "—",
                hint: !dash.availability.servers ? "нет данных" : !dash.isLive
                  ? "демо"
                  : offline > 0
-                    ? `${offline} offline`
+                    ? `${offline} не в сети`
                    : dash.totalServers > 0
-                      ? "все online"
-                      : "нет узлов",
+                      ? "все в сети"
+                      : "нет серверов",
                href: "/servers",
                icon: <ServerIcon />,
                iconClassName: "text-muted-foreground",
@@ -93,9 +103,9 @@ export default function DashboardPage() {
              },
              {
                id: "overlay",
-                label: "Оверлей",
+                label: "Туннели работают",
                value: dash.availability.overlay ? String(dash.overlay.up) : "—",
-                hint: !dash.availability.overlay ? "не все источники доступны" : dash.overlay.total > 0 ? `${dash.overlay.down} down` : "нет туннелей",
+                hint: !dash.availability.overlay ? "не все источники доступны" : dash.overlay.total > 0 ? `Не работают: ${dash.overlay.down}` : "нет туннелей",
                href: "/gre",
                icon: <CableIcon />,
                iconClassName: "text-info",
@@ -103,18 +113,18 @@ export default function DashboardPage() {
              },
              {
                id: "bgp",
-                label: "BGP Rx",
+                label: "Префиксы BGP",
                value: dash.bgp ? fmtIntRu(dash.bgp.prefixSum) : "—",
-                hint: dash.bgp ? `${dash.bgp.establishedCount} Established` : "нет данных",
+                hint: dash.bgp ? `Сессий установлено: ${dash.bgp.establishedCount}` : "нет данных",
                href: "/bgp",
                icon: <GitMergeIcon />,
                iconClassName: "text-primary",
              },
              {
                id: "health",
-                label: "Здоровье",
+                label: "Проверки с проблемами",
                value: dash.availability.probes ? String(health) : "—",
-                hint: dash.availability.probes ? `${dash.probeDown} down · ${dash.probeWarn} warn` : "нет данных",
+                hint: dash.availability.probes ? `${dash.probeDown} ошибок · ${dash.probeWarn} предупреждений` : "нет данных",
                href: "/uptime",
                icon: <BellIcon />,
                iconClassName: health > 0 ? "text-destructive" : "text-muted-foreground",
@@ -123,13 +133,169 @@ export default function DashboardPage() {
            ]}
          />

+          <section aria-labelledby="dashboard-attention-title" className="flex min-w-0 flex-col gap-2">
+            <h2 id="dashboard-attention-title" className="text-sm font-semibold">Требует внимания</h2>
+            <AttentionQueue
+              className="lg:grid-cols-3"
+              columns={[
+                {
+                  id: "nodes",
+                  title: "Серверы",
+                  icon: ServerIcon,
+                  count: dash.attentionServers.length,
+                  countVariant: "warning-light",
+                  emptyTitle: dash.reliable.servers ? (dash.totalServers > 0 ? "Серверы без проблем" : "Нет серверов") : "Состояние не подтверждено",
+                  emptyDescription: dash.reliable.servers ? "Нет включённых серверов с ошибками доступности." : "Проверьте состояние источников выше.",
+                  children: <AttentionRows rows={dash.attentionServers} />,
+                },
+                {
+                  id: "overlay",
+                  title: "Туннели",
+                  icon: CableIcon,
+                  iconClassName: "text-info",
+                  count: dash.attentionOverlay.length,
+                  countVariant: "destructive-light",
+                  emptyTitle: dash.reliable.overlay ? (dash.overlay.total > 0 ? "Туннели работают" : "Нет туннелей") : "Состояние не подтверждено",
+                  emptyDescription: dash.reliable.overlay ? "В GRE, WireGuard и VXLAN проблем не обнаружено." : "Проверьте состояние источников выше.",
+                  children: <AttentionRows rows={dash.attentionOverlay} />,
+                },
+                {
+                  id: "probes",
+                  title: "Проверки",
+                  icon: HeartPulseIcon,
+                  iconClassName: "text-destructive",
+                  count: dash.attentionProbes.length,
+                  countVariant: "destructive-light",
+                  emptyTitle: dash.reliable.probes ? (dash.probeCount > 0 ? "Проверки без ошибок" : "Нет активных проверок") : "Состояние не подтверждено",
+                  emptyDescription: dash.reliable.probes ? "Нет ошибок и предупреждений активных проверок." : "Проверьте состояние источников выше.",
+                  children: <AttentionRows rows={dash.attentionProbes} />,
+                },
+              ]}
+            />
+          </section>
+
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-[2fr_1fr]">
+            <OpsPanel
+              title="Задержка до серверов"
+              description={
+                dash.latency.kind === "mock" || dash.latency.kind === "live"
+                  ? dash.latency.subtitle
+                  : dash.latency.kind === "loading"
+                    ? "Загрузка…"
+                    : "Нет серии RTT"
+              }
+              contentClassName="px-3 pb-3"
+            >
+              {dash.latency.kind === "loading" && (
+                <div className="bg-muted/50 h-[220px] w-full animate-pulse rounded-md" />
+              )}
+              {dash.latency.kind === "empty" && (
+                <p className="text-muted-foreground px-4 py-10 text-center text-sm">{dash.latency.message}</p>
+              )}
+              {(dash.latency.kind === "mock" || dash.latency.kind === "live") && (
+                <LatencyChart series={dash.latency.series} labels={dash.latency.labels} />
+              )}
+            </OpsPanel>
+
+            <OpsPanel
+              title="Последние события"
+              description="Система и BGP"
+              headerRight={
+                <Link href="/alerts" className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-7 text-xs")}>
+                  Все →
+                </Link>
+              }
+            >
+              <DashboardEventsTimeline
+                events={dash.recentEvents}
+                loading={dash.eventsLoading}
+                error={dash.eventsError}
+              />
+            </OpsPanel>
+          </div>
+
+          <div>
+            <OpsPanel
+              title="Пропускная способность"
+              description={dash.traffic?.demo ? "Суммарный RX / TX · демо" : "Суммарный RX / TX серверов · 1 ч"}
+              headerRight={
+                dash.traffic ? (
+                  <div className="flex items-center gap-3 text-xs">
+                    {dash.traffic.demo ? <Badge variant="outline" size="sm">демо</Badge> : null}
+                    <span className="tabular-nums">RX {fmtRate(dash.traffic.rxNow)}</span>
+                    <span className="tabular-nums">TX {fmtRate(dash.traffic.txNow)}</span>
+                    <Link href="/traffic" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
+                      Трафик →
+                    </Link>
+                  </div>
+                ) : null
+              }
+              contentClassName="px-3 pb-3"
+            >
+              {dash.loading && !dash.traffic ? (
+                <div className="bg-muted/50 h-[220px] w-full animate-pulse rounded-md" />
+              ) : !dash.traffic ? (
+                <p className="text-muted-foreground px-4 py-10 text-center text-sm">
+                  Нет данных трафика за последний час.{" "}
+                  <Link href="/traffic" className="underline underline-offset-2">
+                    Открыть трафик
+                  </Link>
+                </p>
+              ) : (
+                <TrafficRxTxChart rx={dash.traffic.rx} tx={dash.traffic.tx} range="1h" embedded />
+              )}
+            </OpsPanel>
+
+
+          </div>
+
+          <InternetPathPanel
+            model={dash.internetPath}
+            loading={dash.internetPathLoading}
+            error={dash.isLive ? dash.internetPathError : null}
+          />
+
+          <OpsPanel
+            title="Активные пробы"
+            description={
+              <span className={dash.error && dash.isLive ? "text-destructive" : undefined}>{dash.probesSubtitle}</span>
+            }
+            headerRight={
+              <Link href="/uptime" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
+                Мониторинг →
+              </Link>
+            }
+            contentClassName="px-0 pb-0"
+          >
+            {dash.activeProbes.length === 0 && !dash.probesLoading ? (
+              <EmptyState
+                className="py-10"
+                title={dash.availability.probes ? "Нет проб на дашборде" : "Данные проб недоступны"}
+                description={dash.availability.probes ? "Включите пробу и отметьте ★ на странице мониторинга." : "Повторите обновление данных."}
+                action={
+                  <Link href="/uptime" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+                    Открыть мониторинг
+                  </Link>
+                }
+              />
+            ) : (
+              <DashboardActiveProbesDataGrid
+                probes={dash.activeProbes}
+                catalog={dash.servers}
+                isLoading={dash.probesLoading}
+                emptyDescription="Нет проб с звездой на дашборде."
+              />
+            )}
+          </OpsPanel>
+
          <QuickActionGrid
-            description="Разделы операционного контура"
+            title="Быстрые переходы"
+            description="Другие разделы управления сетью"
            actions={[
              {
                id: "traffic",
                title: "Трафик",
-                description: "RX/TX флота и IPFIX",
+                description: "Приём, передача и потоки IPFIX",
                href: "/traffic",
                icon: <ActivityIcon />,
                iconClassName: "text-info",
@@ -177,155 +343,6 @@ export default function DashboardPage() {
            ]}
          />

-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-[2fr_1fr]">
-            <OpsPanel
-              title="Задержка до серверов"
-              description={
-                dash.latency.kind === "mock" || dash.latency.kind === "live"
-                  ? dash.latency.subtitle
-                  : dash.latency.kind === "loading"
-                    ? "Загрузка…"
-                    : "Нет серии RTT"
-              }
-              contentClassName="px-3 pb-3"
-            >
-              {dash.latency.kind === "loading" && (
-                <div className="bg-muted/50 h-[220px] w-full animate-pulse rounded-md" />
-              )}
-              {dash.latency.kind === "empty" && (
-                <p className="text-muted-foreground px-4 py-10 text-center text-sm">{dash.latency.message}</p>
-              )}
-              {(dash.latency.kind === "mock" || dash.latency.kind === "live") && (
-                <LatencyChart series={dash.latency.series} labels={dash.latency.labels} />
-              )}
-            </OpsPanel>
-
-            <OpsPanel
-              title="Последние события"
-              description="Система и BGP"
-              headerRight={
-                <Link href="/alerts" className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-7 text-xs")}>
-                  Все →
-                </Link>
-              }
-            >
-              <DashboardEventsTimeline
-                events={dash.recentEvents}
-                loading={dash.eventsLoading}
-                error={dash.eventsError}
-              />
-            </OpsPanel>
-          </div>
-
-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-[3fr_2fr]">
-            <OpsPanel
-              title="Пропускная способность"
-              description={dash.traffic?.demo ? "Суммарный RX / TX · демо" : "Суммарный RX / TX флота · 1 ч"}
-              headerRight={
-                dash.traffic ? (
-                  <div className="flex items-center gap-3 text-xs">
-                    {dash.traffic.demo ? <Badge variant="outline" size="sm">демо</Badge> : null}
-                    <span className="tabular-nums">RX {fmtRate(dash.traffic.rxNow)}</span>
-                    <span className="tabular-nums">TX {fmtRate(dash.traffic.txNow)}</span>
-                    <Link href="/traffic" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
-                      Трафик →
-                    </Link>
-                  </div>
-                ) : null
-              }
-              contentClassName="px-3 pb-3"
-            >
-              {dash.loading && !dash.traffic ? (
-                <div className="bg-muted/50 h-[220px] w-full animate-pulse rounded-md" />
-              ) : !dash.traffic ? (
-                <p className="text-muted-foreground px-4 py-10 text-center text-sm">
-                  Нет данных трафика за последний час.{" "}
-                  <Link href="/traffic" className="underline underline-offset-2">
-                    Открыть трафик
-                  </Link>
-                </p>
-              ) : (
-                <TrafficRxTxChart rx={dash.traffic.rx} tx={dash.traffic.tx} range="1h" embedded />
-              )}
-            </OpsPanel>
-
-            <AttentionQueue
-              className="@3xl:grid-cols-1"
-              columns={[
-                {
-                  id: "nodes",
-                  title: "Узлы",
-                  icon: ServerIcon,
-                  count: dash.attentionServers.length,
-                  countVariant: "warning-light",
-                  emptyTitle: dash.reliable.servers ? "Все online" : "Состояние не подтверждено",
-                  emptyDescription: dash.reliable.servers ? "Нет офлайн или degraded узлов." : "Проверьте состояние источников выше.",
-                  children: <AttentionRows rows={dash.attentionServers} />,
-                },
-                {
-                  id: "overlay",
-                  title: "Оверлей",
-                  icon: CableIcon,
-                  iconClassName: "text-info",
-                  count: dash.attentionOverlay.length,
-                  countVariant: "destructive-light",
-                  emptyTitle: dash.reliable.overlay ? "Туннели up" : "Состояние не подтверждено",
-                  emptyDescription: dash.reliable.overlay ? "GRE и WireGuard в норме." : "Проверьте состояние источников выше.",
-                  children: <AttentionRows rows={dash.attentionOverlay} />,
-                },
-                {
-                  id: "probes",
-                  title: "Пробы",
-                  icon: HeartPulseIcon,
-                  iconClassName: "text-destructive",
-                  count: dash.attentionProbes.length,
-                  countVariant: "destructive-light",
-                  emptyTitle: dash.reliable.probes ? "Пробы up" : "Состояние не подтверждено",
-                  emptyDescription: dash.reliable.probes ? "Нет down или warn." : "Проверьте состояние источников выше.",
-                  children: <AttentionRows rows={dash.attentionProbes} />,
-                },
-              ]}
-            />
-          </div>
-
-          <InternetPathPanel
-            model={dash.internetPath}
-            loading={dash.internetPathLoading}
-            error={dash.isLive ? dash.internetPathError : null}
-          />
-
-          <OpsPanel
-            title="Активные пробы"
-            description={
-              <span className={dash.error && dash.isLive ? "text-destructive" : undefined}>{dash.probesSubtitle}</span>
-            }
-            headerRight={
-              <Link href="/uptime" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
-                Мониторинг →
-              </Link>
-            }
-            contentClassName="px-0 pb-0"
-          >
-            {dash.activeProbes.length === 0 && !dash.probesLoading ? (
-              <EmptyState
-                className="py-10"
-                title={dash.availability.probes ? "Нет проб на дашборде" : "Данные проб недоступны"}
-                description={dash.availability.probes ? "Включите пробу и отметьте ★ на странице мониторинга." : "Повторите обновление данных."}
-                action={
-                  <Link href="/uptime" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-                    Открыть мониторинг
-                  </Link>
-                }
-              />
-            ) : (
-              <DashboardActiveProbesDataGrid
-                probes={dash.activeProbes}
-                catalog={dash.servers}
-                isLoading={dash.probesLoading}
-                emptyDescription="Нет проб с звездой на дашборде."
-              />
-            )}
-          </OpsPanel>
        </div>
      </div>
    </div>