Denozordec
653bc6cc91
Обновлены переводы на русский язык для компонентов, включая карточки мониторинга, сетевые панели и настройки. Исправлены описания и метки для улучшения пользовательского интерфейса, а также добавлены новые элементы для поддержки локализации в компонентах, таких как DataGrid и ResourcePage.
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { DonutBreakdownCard } from '@/components/patterns/donut-breakdown-card'
|
||
import { SegmentedProgressCard } from '@/components/patterns/segmented-progress-card'
|
||
import { peerSessionBreakdown } from '@/lib/metrics'
|
||
import { aggregateNetworkMetrics } from '@/queries/overview'
|
||
import type { PeerRow, SpeakerRow } from '@/types/api'
|
||
|
||
export function NetworkOverviewAnalyticsCard({
|
||
peers,
|
||
speakers,
|
||
loading,
|
||
}: {
|
||
peers: PeerRow[]
|
||
speakers: SpeakerRow[]
|
||
loading?: boolean
|
||
}) {
|
||
const net = aggregateNetworkMetrics(peers, speakers)
|
||
const slices = peerSessionBreakdown(peers)
|
||
const speakersPct =
|
||
net.speakersTotal > 0 ? Math.round((net.speakersOnline / net.speakersTotal) * 100) : 0
|
||
|
||
if (loading) {
|
||
return (
|
||
<DonutBreakdownCard
|
||
title="Сводка BGP"
|
||
description="Установленные сессии и спикеры"
|
||
slices={[]}
|
||
centerLabel="Пиры"
|
||
/>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="grid gap-4 lg:grid-cols-2">
|
||
<DonutBreakdownCard
|
||
title="Сводка BGP"
|
||
description="Распределение состояний пиров"
|
||
slices={slices}
|
||
centerLabel="Пиры"
|
||
badge={net.peersMismatch > 0 ? `${net.peersMismatch} расхождений` : 'в норме'}
|
||
/>
|
||
<SegmentedProgressCard
|
||
title="Спикеры"
|
||
description="Доступность агентов"
|
||
primary={{
|
||
value: `${net.speakersOnline}/${net.speakersTotal}`,
|
||
label: 'В сети',
|
||
percent: speakersPct,
|
||
}}
|
||
secondary={{
|
||
value: net.speakersTotal - net.speakersOnline,
|
||
label: 'Не в сети',
|
||
percent: 100 - speakersPct,
|
||
}}
|
||
footer={`Пиры установлены: ${net.peersEstablished}/${net.peersEnabled}`}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|