128 lines
5.0 KiB
TypeScript
128 lines
5.0 KiB
TypeScript
import { Card } from '@/libs/frontend-ui-primitives'
|
|
import { useUiMode } from './UiModeContext'
|
|
import type { MissionControlSubsystemStatus } from '@/services/api/missionControl'
|
|
import { formatRelativeAge } from '@/utils/format'
|
|
|
|
function subsystemLabel(key: string): string {
|
|
const labels: Record<string, string> = {
|
|
rpc_head: 'RPC head',
|
|
tx_index: 'Transaction index',
|
|
stats_summary: 'Stats summary',
|
|
bridge_relay_monitoring: 'Bridge relay monitoring',
|
|
freshness_queries: 'Freshness queries',
|
|
}
|
|
|
|
return labels[key] || key.replace(/_/g, ' ')
|
|
}
|
|
|
|
function normalizeStatus(status?: string | null): string {
|
|
const normalized = String(status || '').toLowerCase()
|
|
if (!normalized) return 'unknown'
|
|
if (normalized === 'ok') return 'operational'
|
|
return normalized
|
|
}
|
|
|
|
function statusClasses(status?: string | null): string {
|
|
const normalized = normalizeStatus(status)
|
|
if (['degraded', 'down', 'stale'].includes(normalized)) {
|
|
return 'border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-200'
|
|
}
|
|
if (['warning', 'partial', 'paused'].includes(normalized)) {
|
|
return 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-200'
|
|
}
|
|
if (normalized === 'operational') {
|
|
return 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-200'
|
|
}
|
|
return 'border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-200'
|
|
}
|
|
|
|
function compactMeta(subsystem: MissionControlSubsystemStatus): string {
|
|
const parts = [
|
|
subsystem.source || null,
|
|
subsystem.completeness || null,
|
|
subsystem.confidence || null,
|
|
].filter(Boolean)
|
|
|
|
return parts.length > 0 ? parts.join(' · ') : 'No supporting freshness metadata'
|
|
}
|
|
|
|
export default function SubsystemPosturePanel({
|
|
subsystems,
|
|
title = 'Subsystem Posture',
|
|
scopeLabel,
|
|
preferredKeys,
|
|
className = '',
|
|
}: {
|
|
subsystems?: Record<string, MissionControlSubsystemStatus> | null
|
|
title?: string
|
|
scopeLabel?: string
|
|
preferredKeys?: string[]
|
|
className?: string
|
|
}) {
|
|
const { mode } = useUiMode()
|
|
|
|
const orderedEntries = Object.entries(subsystems || {})
|
|
.filter(([key]) => !preferredKeys || preferredKeys.includes(key))
|
|
.sort(([leftKey], [rightKey]) => {
|
|
const leftIndex = preferredKeys ? preferredKeys.indexOf(leftKey) : -1
|
|
const rightIndex = preferredKeys ? preferredKeys.indexOf(rightKey) : -1
|
|
if (leftIndex !== -1 || rightIndex !== -1) {
|
|
return (leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex) - (rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex)
|
|
}
|
|
return leftKey.localeCompare(rightKey)
|
|
})
|
|
|
|
if (orderedEntries.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const normalizedClassName = className ? ` ${className}` : ''
|
|
|
|
return (
|
|
<Card className={`border border-gray-200 bg-white/80 dark:border-gray-800 dark:bg-gray-950/40${normalizedClassName}`} title={title}>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="text-sm leading-6 text-gray-600 dark:text-gray-400">
|
|
{scopeLabel || 'These subsystem signals come from the same backend freshness model used to explain chain and transaction visibility.'}
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
|
{orderedEntries.map(([key, subsystem]) => {
|
|
const status = normalizeStatus(subsystem.status)
|
|
return (
|
|
<div
|
|
key={key}
|
|
className="rounded-2xl border border-gray-200 bg-gray-50/70 p-4 dark:border-gray-800 dark:bg-gray-900/40"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
|
{subsystemLabel(key)}
|
|
</div>
|
|
<div className="mt-1 text-base font-semibold capitalize text-gray-900 dark:text-white">
|
|
{status}
|
|
</div>
|
|
</div>
|
|
<span className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide ${statusClasses(status)}`}>
|
|
{status}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
{subsystem.updated_at ? `Updated ${formatRelativeAge(subsystem.updated_at)}` : 'Update time unavailable'}
|
|
</div>
|
|
<div className="mt-2 text-xs leading-5 text-gray-500 dark:text-gray-400">
|
|
{compactMeta(subsystem)}
|
|
</div>
|
|
{mode === 'guided' && subsystem.provenance ? (
|
|
<div className="mt-2 text-xs leading-5 text-gray-500 dark:text-gray-400">
|
|
Provenance: {subsystem.provenance.replace(/_/g, ' ')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|