23 lines
2.0 KiB
TypeScript
23 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import {OpsPanel} from "@/components/ops-panel"
|
|
import {Button} from "@/components/ui/button"
|
|
import type {useAlertsTargets} from "@/hooks/use-alerts-targets"
|
|
|
|
export function AlertsTargetsStatus({catalogs}:{catalogs:ReturnType<typeof useAlertsTargets>}){
|
|
const rows=[{key:"bgp" as const,label:"BGP",note:"API не сообщает о полноте опроса устройств."},{key:"servers" as const,label:"Серверы",note:"Подписи устройств для целей GRE."},{key:"gre" as const,label:"GRE",note:"Без статуса API состояние туннеля неизвестно."}]
|
|
return <OpsPanel title="Каталоги целей" description="Обновляются независимо от правил и журнала." contentClassName="divide-y">
|
|
{rows.map(({key,label,note})=>{const state=catalogs[key];const count=key==="gre"?catalogs.gre.data?.tunnels.length:key==="bgp"?catalogs.bgp.data?.length:catalogs.servers.data?.length
|
|
return <section key={key} aria-label={"Каталог "+label} className="flex flex-wrap items-start justify-between gap-3 px-5 py-3">
|
|
<div className="min-w-0 flex-1 basis-48 space-y-1 break-words">
|
|
<p className="text-sm font-medium">{label}</p>
|
|
<p role="status" className="text-xs text-muted-foreground">{state.loading?"Обновление…":state.data===undefined?"Данные ещё не получены.":"Получено объектов: "+count}{state.receivedAt?" Последний успешный ответ: "+new Date(state.receivedAt).toLocaleString("ru-RU"):""}</p>
|
|
{state.error?<p role="alert" className="text-xs text-destructive">{state.error}{state.data!==undefined?". Показан последний успешный каталог.":""}</p>:null}
|
|
<p className="text-xs text-muted-foreground">{note}</p>
|
|
</div>
|
|
<Button type="button" size="sm" variant="outline" disabled={state.loading} onClick={()=>void state.refresh()} aria-label={"Обновить каталог "+label}>Обновить</Button>
|
|
</section>
|
|
})}
|
|
</OpsPanel>
|
|
}
|