223 lines
9.0 KiB
TypeScript
223 lines
9.0 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useState, type ReactNode } from "react"
|
|
import { Activity, Filter, HeartPulse, Server } from "lucide-react"
|
|
|
|
import { Badge } from "@/components/reui/badge"
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
|
import { cn } from "@/lib/utils"
|
|
import { useDataSource } from "@/lib/data-source"
|
|
import { filters, pingProbes, servers } from "@/lib/data"
|
|
import type { SidebarCountsDto } from "@/lib/sidebar-badges"
|
|
import { resolveApiUrl } from "@/shared/api/http-client"
|
|
|
|
import {can,ensureAuthConfig} from "@/lib/auth"
|
|
import {getSidebarCounts} from "@/shared/api/sidebar-counts"
|
|
|
|
type MonitorMetric = {
|
|
id: string
|
|
label: string
|
|
value: string
|
|
unit: string
|
|
percent: number|null
|
|
icon: ReactNode
|
|
tone: "success" | "warning" | "destructive" | "info"
|
|
alert: boolean
|
|
}
|
|
|
|
|
|
|
|
function toneColor(tone: MonitorMetric["tone"]) {
|
|
switch (tone) {
|
|
case "success":
|
|
return "var(--color-success)"
|
|
case "warning":
|
|
return "var(--color-warning)"
|
|
case "destructive":
|
|
return "var(--color-destructive)"
|
|
default:
|
|
return "var(--color-info)"
|
|
}
|
|
}
|
|
|
|
function MetricBar({ percent, color }: { percent: number; color: string }) {
|
|
return (
|
|
<div className="bg-muted h-1 w-full overflow-hidden rounded-full">
|
|
<div
|
|
className="h-full rounded-full"
|
|
style={{
|
|
width: `${Math.min(100, Math.max(0, percent))}%`,
|
|
backgroundColor: color,
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MetricCell({ metric }: { metric: MonitorMetric }) {
|
|
const color = toneColor(metric.tone)
|
|
return (
|
|
<div className="flex flex-col gap-2 p-3">
|
|
<div className="flex items-center justify-between gap-1">
|
|
<div className="flex min-w-0 items-center gap-1.5">
|
|
<div
|
|
className="flex size-5 shrink-0 items-center justify-center rounded-md"
|
|
style={{ backgroundColor: `${color}18`, color }}
|
|
>
|
|
{metric.icon}
|
|
</div>
|
|
<span className="text-muted-foreground truncate text-[11px]">{metric.label}</span>
|
|
</div>
|
|
<span className="shrink-0 text-xs font-semibold tabular-nums" style={{ color }}>
|
|
{metric.value}
|
|
<span className="text-muted-foreground ml-0.5 text-[10px] font-normal">{metric.unit}</span>
|
|
</span>
|
|
</div>
|
|
{metric.percent!==null?<MetricBar percent={metric.percent} color={color} />:null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** Live system monitor popover — app-shell-7. @see https://reui.io/preview/base/app-shell-7 */
|
|
export function SystemMonitorPopover() {
|
|
const { mode, backendUrl, prefsHydrated } = useDataSource()
|
|
const source=JSON.stringify([mode,backendUrl])
|
|
const [snapshot,setSnapshot]=useState<{source:string;healthOk:boolean|null;counts:SidebarCountsDto|null;receivedAt:string|null;countsError:string|null}|null>(null)
|
|
const data=snapshot?.source===source?snapshot:null,healthOk=mode!=="live"?true:data?.healthOk??null
|
|
const counts=mode!=="live"?{servers:servers.length,filterRules:filters.length,monitoringItems:pingProbes.length}:can("mm:dashboard:read")?data?.counts:null
|
|
useEffect(()=>{
|
|
if(!prefsHydrated||mode!=="live")return
|
|
let cancelled=false,revision=0,controller:AbortController|null=null
|
|
const load=async()=>{
|
|
controller?.abort();controller=new AbortController();const request=++revision,signal=controller.signal
|
|
const publish=(patch:Partial<NonNullable<typeof snapshot>>)=>{if(cancelled||request!==revision)return;setSnapshot(previous=>({...((previous?.source===source?previous:null)??{source,healthOk:null,counts:null,receivedAt:null,countsError:null}),...patch}))}
|
|
await Promise.allSettled([
|
|
(async()=>{try{const response=await fetch(resolveApiUrl(backendUrl,"/health"),{signal:AbortSignal.any([signal,AbortSignal.timeout(3000)]),cache:"no-store"});const raw=await response.json();publish({healthOk:response.ok&&raw?.status==="ok"})}catch{publish({healthOk:false})}})(),
|
|
(async()=>{await ensureAuthConfig();if(cancelled||request!==revision)return;if(!can("mm:dashboard:read")){publish({counts:null,countsError:"Нет доступа к сводке"});return}try{const result=await getSidebarCounts(backendUrl,AbortSignal.any([signal,AbortSignal.timeout(30_000)]));if(can("mm:dashboard:read"))publish({counts:result,receivedAt:new Date().toISOString(),countsError:null})}catch{publish({countsError:"Сводка не обновлена; показан последний успешный снимок, если он есть."})}})(),
|
|
])
|
|
}
|
|
void load();const timer=window.setInterval(load,30_000)
|
|
return()=>{cancelled=true;revision++;controller?.abort();window.clearInterval(timer)}
|
|
},[mode,backendUrl,prefsHydrated,source])
|
|
|
|
const serversCount=mode!=="live"||can("mm:servers:read")?counts?.servers:undefined
|
|
const filtersCount=mode!=="live"||can("mm:filters:read")?counts?.filterRules:undefined
|
|
const monitoringCount=mode!=="live"||can("mm:uptime:read")?counts?.monitoringItems:undefined
|
|
const apiOk = healthOk === true
|
|
|
|
const metrics = useMemo<MonitorMetric[]>(
|
|
() => [
|
|
{
|
|
id: "api",
|
|
label: "API",
|
|
value: healthOk == null ? "…" : apiOk ? "OK" : "—",
|
|
unit: "",
|
|
percent: healthOk===null?null:apiOk ? 100 : 0,
|
|
icon: <Activity className="size-3" aria-hidden />,
|
|
tone: apiOk ? "success" : "destructive",
|
|
alert: healthOk === false,
|
|
},
|
|
{
|
|
id: "servers",
|
|
label: "Серверы",
|
|
value: serversCount===undefined?"—":String(serversCount),
|
|
unit: "шт.",
|
|
percent: null,
|
|
icon: <Server className="size-3" aria-hidden />,
|
|
tone: (serversCount??0) > 0 ? "success" : "warning",
|
|
alert: false,
|
|
},
|
|
{
|
|
id: "filters",
|
|
label: "Фильтры",
|
|
value: filtersCount===undefined?"—":String(filtersCount),
|
|
unit: "шт.",
|
|
percent: null,
|
|
icon: <Filter className="size-3" aria-hidden />,
|
|
tone: "info",
|
|
alert: false,
|
|
},
|
|
{
|
|
id: "uptime",
|
|
label: "Мониторинг",
|
|
value: monitoringCount===undefined?"—":String(monitoringCount),
|
|
unit: "шт.",
|
|
percent: null,
|
|
icon: <HeartPulse className="size-3" aria-hidden />,
|
|
tone: (monitoringCount??0) > 0 ? "success" : "warning",
|
|
alert: false,
|
|
},
|
|
],
|
|
[apiOk, filtersCount, healthOk, monitoringCount, serversCount],
|
|
)
|
|
|
|
const spiking = metrics.some((m) => m.alert)
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger
|
|
render={
|
|
<button
|
|
type="button"
|
|
aria-label="Монитор системы"
|
|
className={cn(
|
|
"relative inline-flex h-8 items-center gap-1.5 rounded-md border px-2 transition-colors outline-none",
|
|
"border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
|
|
)}
|
|
/>
|
|
}
|
|
>
|
|
<span className="relative flex size-3.5 items-center justify-center">
|
|
<Activity
|
|
aria-hidden
|
|
className={cn(
|
|
"size-3.5 transition-colors",
|
|
spiking ? "text-destructive" : "text-muted-foreground",
|
|
)}
|
|
/>
|
|
{spiking ? (
|
|
<span className="bg-destructive/25 absolute inset-0 animate-ping rounded-full" aria-hidden />
|
|
) : null}
|
|
</span>
|
|
<span className="text-foreground hidden text-xs font-medium sm:inline">Система</span>
|
|
<Badge
|
|
variant={spiking ? "destructive-light" : apiOk?"success-light":"outline"}
|
|
size="xs"
|
|
className="h-4 px-1.5 text-[10px]"
|
|
>
|
|
{spiking?"Нет связи":apiOk?"API доступен":"Нет данных"}
|
|
</Badge>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent align="end" sideOffset={8} className="flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-0! p-0!">
|
|
<div className="border-border flex items-center justify-between border-b px-3 py-2.5">
|
|
<span className="text-foreground text-xs font-medium">Монитор MikrotikManager</span>
|
|
<span className="text-muted-foreground text-[11px] tabular-nums">
|
|
{mode!=="live"?"Демо":data?.receivedAt?new Date(data.receivedAt).toLocaleTimeString("ru-RU"):"Снимок не получен"}
|
|
</span>
|
|
</div>
|
|
{data?.countsError?<p role="status" className="px-3 py-2 text-xs text-muted-foreground">{data.countsError}</p>:null}
|
|
<div className="grid grid-cols-2">
|
|
{metrics.map((metric, i) => (
|
|
<div
|
|
key={metric.id}
|
|
className={cn(
|
|
i % 2 === 1 && "border-border border-l",
|
|
i >= 2 && "border-border border-t",
|
|
)}
|
|
>
|
|
<MetricCell metric={metric} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="border-border text-muted-foreground border-t px-3 py-2 text-[11px]">
|
|
Источник:{" "}
|
|
<span className="text-foreground font-medium">
|
|
{mode === "live" ? "API" : "мок"}
|
|
</span>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|