mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-29 22:06:38 +08:00
ryan
945 lines
32 KiB
TypeScript
945 lines
32 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useState } from 'react';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { Loader2, Trash2 } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { toast } from 'sonner';
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { formatDateTime } from '@/lib/utils';
|
|
import type {
|
|
NodeHealthEvent,
|
|
NodeItem,
|
|
NodeSystemProfile,
|
|
} from '@/lib/services/openflare';
|
|
import { NodeService } from '@/lib/services/openflare';
|
|
|
|
import { CapacityTrendChart } from '../../components/dashboard/capacity-trend-chart';
|
|
import { TrafficTrendChart } from '../../components/dashboard/traffic-trend-chart';
|
|
import { DiskIOTrendChart } from './disk-io-trend-chart';
|
|
import { DistributionList } from './distribution-list';
|
|
import { NetworkTrendChart } from './network-trend-chart';
|
|
import { NodeStatusBadge } from './node-status-badge';
|
|
import {
|
|
formatBytes,
|
|
formatMetricCount,
|
|
formatPercent,
|
|
formatRelativeTime,
|
|
formatUptime,
|
|
formatUsageRatio,
|
|
getErrorMessage,
|
|
getHealthEventLabel,
|
|
getHealthEventTone,
|
|
getNodeStatusLabel,
|
|
getNodeStatusTone,
|
|
getOpenrestyStatusLabel,
|
|
getOpenrestyStatusTone,
|
|
isMeaningfulTime,
|
|
} from './node-utils';
|
|
|
|
type HealthEventFilter = 'all' | 'active' | 'resolved';
|
|
type NodeObservabilityVariant = 'edge' | 'compact';
|
|
|
|
function MetricBar({
|
|
label,
|
|
value,
|
|
progress,
|
|
hint,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
progress?: number | null;
|
|
hint?: string;
|
|
}) {
|
|
return (
|
|
<div className='space-y-2 rounded-lg border px-3 py-3'>
|
|
<div className='flex items-start justify-between gap-3'>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{label}
|
|
</p>
|
|
{hint ? (
|
|
<p className='mt-1 text-xs text-muted-foreground'>{hint}</p>
|
|
) : null}
|
|
</div>
|
|
<p className='text-sm font-medium'>{value}</p>
|
|
</div>
|
|
{progress !== null && progress !== undefined ? (
|
|
<div className='h-2 overflow-hidden rounded-full bg-muted'>
|
|
<div
|
|
className='h-full rounded-full bg-primary transition-[width]'
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SummaryStat({
|
|
label,
|
|
value,
|
|
hint,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
hint: string;
|
|
}) {
|
|
return (
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader className='pb-2'>
|
|
<CardDescription>{label}</CardDescription>
|
|
<CardTitle className='text-base font-semibold'>{value}</CardTitle>
|
|
<p className='text-sm text-muted-foreground'>{hint}</p>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function SystemProfileCard({
|
|
profile,
|
|
nodeName,
|
|
}: {
|
|
profile: NodeSystemProfile;
|
|
nodeName: string;
|
|
}) {
|
|
const t = useTranslations('nodes');
|
|
return (
|
|
<div className='grid gap-4 md:grid-cols-2'>
|
|
<div className='space-y-4 rounded-lg border px-4 py-4'>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.hostname')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>{profile.hostname || nodeName}</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.os')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>
|
|
{profile.os_name || 'unknown'}
|
|
{profile.os_version ? ` ${profile.os_version}` : ''}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.kernelArch')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>
|
|
{profile.kernel_version || 'unknown'} ·{' '}
|
|
{profile.architecture || 'unknown'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.uptime')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>
|
|
{formatUptime(profile.uptime_seconds, t)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='space-y-4 rounded-lg border px-4 py-4'>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.cpu')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>{profile.cpu_model || 'unknown'}</p>
|
|
<p className='mt-1 text-xs text-muted-foreground'>
|
|
{t('obs.cpuCores', { count: profile.cpu_cores || 0 })}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.totalMemory')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>
|
|
{formatBytes(profile.total_memory_bytes)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.totalStorage')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>
|
|
{formatBytes(profile.total_disk_bytes)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.reportedAt')}
|
|
</p>
|
|
<p className='mt-2 text-sm'>
|
|
{isMeaningfulTime(profile.reported_at)
|
|
? formatDateTime(profile.reported_at)
|
|
: '—'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HealthEventTimeline({
|
|
events,
|
|
allEventsCount,
|
|
healthEventFilter,
|
|
onFilterChange,
|
|
onCleanup,
|
|
cleanupPending,
|
|
}: {
|
|
events: NodeHealthEvent[];
|
|
allEventsCount: number;
|
|
healthEventFilter: HealthEventFilter;
|
|
onFilterChange: (filter: HealthEventFilter) => void;
|
|
onCleanup: () => void;
|
|
cleanupPending: boolean;
|
|
}) {
|
|
const t = useTranslations('nodes');
|
|
return (
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader className='flex-row items-center justify-between space-y-0'>
|
|
<div>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.eventsTitle')}
|
|
</CardTitle>
|
|
<CardDescription>{t('obs.eventsDesc')}</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
className='h-7 text-xs text-destructive hover:text-destructive'
|
|
disabled={cleanupPending || allEventsCount === 0}
|
|
onClick={onCleanup}
|
|
>
|
|
<Trash2 className='size-3.5 mr-1' />
|
|
{t('obs.cleanupLogs')}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className='space-y-4'>
|
|
{allEventsCount > 0 ? (
|
|
<>
|
|
<div className='flex flex-wrap gap-2'>
|
|
{(
|
|
[
|
|
['all', t('obs.filterAll')],
|
|
['active', t('obs.filterActive')],
|
|
['resolved', t('obs.filterResolved')],
|
|
] as const
|
|
).map(([filter, label]) => (
|
|
<Button
|
|
key={filter}
|
|
type='button'
|
|
variant={
|
|
healthEventFilter === filter ? 'secondary' : 'outline'
|
|
}
|
|
size='sm'
|
|
className='h-7 text-xs rounded-full'
|
|
onClick={() => onFilterChange(filter)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{events.length === 0 ? (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.filterEmpty')}
|
|
</p>
|
|
) : null}
|
|
|
|
{events.slice(0, 8).map((event) => (
|
|
<div
|
|
key={`${event.event_type}-${event.last_triggered_at}-${event.status}`}
|
|
className='rounded-lg border px-4 py-3'
|
|
>
|
|
<div className='flex flex-wrap items-center gap-2'>
|
|
<NodeStatusBadge
|
|
label={getHealthEventLabel(event)}
|
|
tone={getHealthEventTone(event)}
|
|
/>
|
|
<NodeStatusBadge
|
|
label={
|
|
event.status === 'active'
|
|
? t('obs.filterActive')
|
|
: t('obs.filterResolved')
|
|
}
|
|
tone={event.status === 'active' ? 'warning' : 'success'}
|
|
/>
|
|
</div>
|
|
<p className='mt-2 text-sm text-muted-foreground'>
|
|
{event.message || t('obs.noMessage')}
|
|
</p>
|
|
<div className='mt-2 grid gap-1 text-xs text-muted-foreground md:grid-cols-3'>
|
|
<p>
|
|
{t('obs.firstTriggered')}
|
|
{isMeaningfulTime(event.first_triggered_at)
|
|
? ` ${formatDateTime(event.first_triggered_at)}`
|
|
: ' —'}
|
|
</p>
|
|
<p>
|
|
{t('obs.lastTriggered')}
|
|
{isMeaningfulTime(event.last_triggered_at)
|
|
? ` ${formatDateTime(event.last_triggered_at)}`
|
|
: ' —'}
|
|
</p>
|
|
<p>
|
|
{t('obs.resolvedAt')}
|
|
{isMeaningfulTime(event.resolved_at) && event.resolved_at
|
|
? ` ${formatDateTime(event.resolved_at)}`
|
|
: ' —'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
) : (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.noEvents')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export function NodeObservability({
|
|
nodeId,
|
|
node,
|
|
variant = 'edge',
|
|
connectionHint,
|
|
}: {
|
|
nodeId: number;
|
|
node?: NodeItem;
|
|
variant?: NodeObservabilityVariant;
|
|
connectionHint?: string;
|
|
}) {
|
|
const t = useTranslations('nodes');
|
|
const tc = useTranslations('common');
|
|
const resolvedConnectionHint = connectionHint ?? t('edge.connectionHint');
|
|
const queryClient = useQueryClient();
|
|
const [healthEventFilter, setHealthEventFilter] =
|
|
useState<HealthEventFilter>('all');
|
|
const [cleanupOpen, setCleanupOpen] = useState(false);
|
|
|
|
const observabilityQuery = useQuery({
|
|
queryKey: ['openflare', 'node-observability', nodeId],
|
|
queryFn: () =>
|
|
NodeService.getObservability(nodeId, { hours: 24, limit: 48 }),
|
|
refetchInterval: 30000,
|
|
});
|
|
|
|
const cleanupMutation = useMutation({
|
|
mutationFn: () => NodeService.cleanupHealthEvents(nodeId),
|
|
onSuccess: async (result) => {
|
|
toast.success(
|
|
result.deleted_count > 0
|
|
? t('obs.cleaned', { count: result.deleted_count })
|
|
: t('obs.nothingToClean'),
|
|
);
|
|
setCleanupOpen(false);
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({
|
|
queryKey: ['openflare', 'node-observability', nodeId],
|
|
}),
|
|
queryClient.invalidateQueries({
|
|
queryKey: ['openflare', 'dashboard', 'overview'],
|
|
}),
|
|
]);
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error, t('requestFailed'))),
|
|
});
|
|
|
|
const observability = observabilityQuery.data ?? null;
|
|
const profile = observability?.profile ?? null;
|
|
const latestMetric = observability?.metric_snapshots?.[0] ?? null;
|
|
const activeHealthEvents = useMemo(
|
|
() =>
|
|
observability?.health_events.filter(
|
|
(event) => event.status === 'active',
|
|
) ?? [],
|
|
[observability?.health_events],
|
|
);
|
|
const resolvedHealthEvents = useMemo(
|
|
() =>
|
|
observability?.health_events.filter(
|
|
(event) => event.status === 'resolved',
|
|
) ?? [],
|
|
[observability?.health_events],
|
|
);
|
|
const filteredHealthEvents = useMemo(() => {
|
|
switch (healthEventFilter) {
|
|
case 'active':
|
|
return activeHealthEvents;
|
|
case 'resolved':
|
|
return resolvedHealthEvents;
|
|
default:
|
|
return observability?.health_events ?? [];
|
|
}
|
|
}, [
|
|
activeHealthEvents,
|
|
healthEventFilter,
|
|
observability?.health_events,
|
|
resolvedHealthEvents,
|
|
]);
|
|
|
|
const trafficSummary = observability?.analytics?.traffic ?? null;
|
|
const healthSummary = observability?.analytics?.health ?? null;
|
|
const distributions = observability?.analytics?.distributions;
|
|
const statusCodeDistribution = useMemo(
|
|
() =>
|
|
(distributions?.status_codes ?? []).map((item) => ({
|
|
label: item.key,
|
|
value: item.value,
|
|
})),
|
|
[distributions?.status_codes],
|
|
);
|
|
const topDomains = useMemo(
|
|
() =>
|
|
(distributions?.top_domains ?? []).map((item) => ({
|
|
label: item.key,
|
|
value: item.value,
|
|
})),
|
|
[distributions?.top_domains],
|
|
);
|
|
const topSourceCountry = distributions?.source_countries?.[0] ?? null;
|
|
const latestHealthEvent = activeHealthEvents[0] ?? null;
|
|
const dominantStatusCode = statusCodeDistribution[0] ?? null;
|
|
const dominantDomain = topDomains[0] ?? null;
|
|
const memoryUsageRatio = formatUsageRatio(
|
|
latestMetric?.memory_used_bytes,
|
|
latestMetric?.memory_total_bytes,
|
|
);
|
|
const storageUsageRatio = formatUsageRatio(
|
|
latestMetric?.storage_used_bytes,
|
|
latestMetric?.storage_total_bytes,
|
|
);
|
|
const trends = observability?.trends;
|
|
const nodeName = node?.name ?? observability?.node_id ?? String(nodeId);
|
|
|
|
if (observabilityQuery.isLoading) {
|
|
return (
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardContent className='flex items-center justify-center py-10 text-sm text-muted-foreground'>
|
|
<Loader2 className='size-4 mr-2 animate-spin' />
|
|
{t('obs.loading')}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (observabilityQuery.isError) {
|
|
return (
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardContent className='py-6'>
|
|
<p className='text-sm text-destructive'>
|
|
{getErrorMessage(observabilityQuery.error, t('requestFailed'))}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (variant === 'compact') {
|
|
return (
|
|
<div className='space-y-6'>
|
|
<div className='grid gap-4 md:grid-cols-3'>
|
|
<SummaryStat
|
|
label={t('obs.diag')}
|
|
value={
|
|
activeHealthEvents.length
|
|
? t('obs.activeIssues', { count: activeHealthEvents.length })
|
|
: t('obs.stable')
|
|
}
|
|
hint={
|
|
latestHealthEvent
|
|
? getHealthEventLabel(latestHealthEvent)
|
|
: t('obs.noActiveEvents')
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label={t('obs.systemCore')}
|
|
value={profile?.hostname || '—'}
|
|
hint={
|
|
profile
|
|
? `${profile.os_name || '—'} · ${profile.architecture || '—'}`
|
|
: '—'
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label={t('obs.uptime')}
|
|
value={formatUptime(profile?.uptime_seconds, t)}
|
|
hint={t('obs.uptimeFromProfile')}
|
|
/>
|
|
</div>
|
|
|
|
<div className='grid gap-6 xl:grid-cols-2'>
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.profileTitle')}
|
|
</CardTitle>
|
|
<CardDescription>{t('obs.profileDesc')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{profile ? (
|
|
<SystemProfileCard profile={profile} nodeName={nodeName} />
|
|
) : (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.noProfile')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.snapshotTitle')}
|
|
</CardTitle>
|
|
<CardDescription>{t('obs.snapshotDesc')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{latestMetric ? (
|
|
<div className='grid gap-3 sm:grid-cols-2'>
|
|
<MetricBar
|
|
label={t('obs.cpu')}
|
|
value={formatPercent(latestMetric.cpu_usage_percent)}
|
|
progress={latestMetric.cpu_usage_percent}
|
|
hint={
|
|
isMeaningfulTime(latestMetric.captured_at)
|
|
? t('obs.snapshotAgo', {
|
|
time: formatRelativeTime(
|
|
latestMetric.captured_at,
|
|
t,
|
|
),
|
|
})
|
|
: undefined
|
|
}
|
|
/>
|
|
<MetricBar
|
|
label={t('obs.memory')}
|
|
value={`${formatBytes(latestMetric.memory_used_bytes)} / ${formatBytes(latestMetric.memory_total_bytes)}`}
|
|
progress={memoryUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label={t('obs.storage')}
|
|
value={`${formatBytes(latestMetric.storage_used_bytes)} / ${formatBytes(latestMetric.storage_total_bytes)}`}
|
|
progress={storageUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label={t('obs.connections')}
|
|
value={formatMetricCount(
|
|
latestMetric.openresty_connections,
|
|
)}
|
|
progress={null}
|
|
hint={resolvedConnectionHint}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.noSnapshot')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<HealthEventTimeline
|
|
events={filteredHealthEvents}
|
|
allEventsCount={observability?.health_events.length ?? 0}
|
|
healthEventFilter={healthEventFilter}
|
|
onFilterChange={setHealthEventFilter}
|
|
onCleanup={() => setCleanupOpen(true)}
|
|
cleanupPending={cleanupMutation.isPending}
|
|
/>
|
|
|
|
<AlertDialog open={cleanupOpen} onOpenChange={setCleanupOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{t('obs.cleanupTitle')}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{t('obs.cleanupDesc')}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={cleanupMutation.isPending}>
|
|
{tc('cancel')}
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className='bg-destructive text-white hover:bg-destructive/90'
|
|
disabled={cleanupMutation.isPending}
|
|
onClick={() => cleanupMutation.mutate()}
|
|
>
|
|
{cleanupMutation.isPending
|
|
? t('obs.cleaning')
|
|
: t('obs.confirmCleanup')}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='space-y-6'>
|
|
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
|
|
<SummaryStat
|
|
label={t('obs.diag')}
|
|
value={
|
|
activeHealthEvents.length
|
|
? t('obs.activeIssues', { count: activeHealthEvents.length })
|
|
: t('obs.stable')
|
|
}
|
|
hint={
|
|
latestHealthEvent
|
|
? getHealthEventLabel(latestHealthEvent)
|
|
: t('obs.noActiveEvents')
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label={t('obs.windowRequests')}
|
|
value={formatMetricCount(trafficSummary?.request_count)}
|
|
hint={
|
|
trafficSummary
|
|
? t('obs.windowVisitorsHint', {
|
|
visitors: formatMetricCount(
|
|
trafficSummary.unique_visitor_count,
|
|
),
|
|
rate: trafficSummary.error_rate_percent.toFixed(1),
|
|
})
|
|
: t('obs.noWindowSummary')
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label={t('obs.capacityPressure')}
|
|
value={
|
|
healthSummary?.has_capacity_risk
|
|
? t('obs.needsAttention')
|
|
: t('obs.normalRange')
|
|
}
|
|
hint={
|
|
latestMetric
|
|
? t('obs.cpuStorage', {
|
|
cpu: formatPercent(latestMetric.cpu_usage_percent),
|
|
storage: formatPercent(storageUsageRatio),
|
|
})
|
|
: t('obs.noResourceSnapshot')
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label={t('obs.sourceSignal')}
|
|
value={topSourceCountry?.key ?? '—'}
|
|
hint={
|
|
topSourceCountry
|
|
? t('obs.requestTimes', {
|
|
count: topSourceCountry.value.toLocaleString('zh-CN'),
|
|
})
|
|
: t('obs.noSourceDist')
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className='grid gap-6 xl:grid-cols-3'>
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.systemInfo')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{profile ? (
|
|
<SystemProfileCard profile={profile} nodeName={nodeName} />
|
|
) : (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.noProfileLong')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.realtimeResources')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{latestMetric ? (
|
|
<div className='grid gap-3 sm:grid-cols-2'>
|
|
<MetricBar
|
|
label={t('obs.cpu')}
|
|
value={formatPercent(latestMetric.cpu_usage_percent)}
|
|
progress={latestMetric.cpu_usage_percent}
|
|
hint={
|
|
isMeaningfulTime(latestMetric.captured_at)
|
|
? t('obs.snapshotAgo', {
|
|
time: formatRelativeTime(latestMetric.captured_at, t),
|
|
})
|
|
: undefined
|
|
}
|
|
/>
|
|
<MetricBar
|
|
label={t('obs.memory')}
|
|
value={`${formatBytes(latestMetric.memory_used_bytes)} / ${formatBytes(latestMetric.memory_total_bytes)}`}
|
|
progress={memoryUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label={t('obs.storage')}
|
|
value={`${formatBytes(latestMetric.storage_used_bytes)} / ${formatBytes(latestMetric.storage_total_bytes)}`}
|
|
progress={storageUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label={t('obs.connections')}
|
|
value={formatMetricCount(latestMetric.openresty_connections)}
|
|
progress={null}
|
|
hint={resolvedConnectionHint}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.noSnapshotLong')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.networkTraffic')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='space-y-4'>
|
|
{latestMetric ? (
|
|
<>
|
|
{node ? (
|
|
<div className='flex flex-wrap gap-2'>
|
|
<NodeStatusBadge
|
|
label={getNodeStatusLabel(node.status, t)}
|
|
tone={getNodeStatusTone(node.status)}
|
|
/>
|
|
<NodeStatusBadge
|
|
label={getOpenrestyStatusLabel(node.openresty_status, t)}
|
|
tone={getOpenrestyStatusTone(node.openresty_status)}
|
|
/>
|
|
<NodeStatusBadge
|
|
label={
|
|
activeHealthEvents.length
|
|
? t('obs.activeIssues', {
|
|
count: activeHealthEvents.length,
|
|
})
|
|
: t('obs.noActiveIssue')
|
|
}
|
|
tone={activeHealthEvents.length ? 'warning' : 'success'}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className='grid gap-3 sm:grid-cols-2'>
|
|
<div className='rounded-lg border px-3 py-3 sm:col-span-2'>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.openrestyConn')}
|
|
</p>
|
|
<div className='mt-3 space-y-2 text-sm text-muted-foreground'>
|
|
<p>
|
|
{t('obs.currentConn')}
|
|
{latestMetric.openresty_connections ?? 0}
|
|
</p>
|
|
<p className='text-xs'>{t('obs.throughputHint')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='grid gap-3 sm:grid-cols-2'>
|
|
<div className='rounded-lg border px-3 py-3'>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.windowVisitors')}
|
|
</p>
|
|
<p className='mt-3 text-2xl font-semibold'>
|
|
{formatMetricCount(trafficSummary?.unique_visitor_count)}
|
|
</p>
|
|
<p className='mt-2 text-sm text-muted-foreground'>
|
|
{trafficSummary
|
|
? t('obs.reqQps', {
|
|
requests: formatMetricCount(
|
|
trafficSummary.request_count,
|
|
),
|
|
qps: trafficSummary.estimated_qps.toFixed(2),
|
|
})
|
|
: t('obs.noTrafficSummary')}
|
|
</p>
|
|
</div>
|
|
<div className='rounded-lg border px-3 py-3'>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.windowErrors')}
|
|
</p>
|
|
<p className='mt-3 text-2xl font-semibold'>
|
|
{formatMetricCount(trafficSummary?.error_count)}
|
|
</p>
|
|
<p className='mt-2 text-sm text-muted-foreground'>
|
|
{trafficSummary
|
|
? t('obs.errorRate', {
|
|
rate: trafficSummary.error_rate_percent.toFixed(1),
|
|
})
|
|
: t('obs.noErrorSummary')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className='text-sm text-muted-foreground'>
|
|
{t('obs.noNetworkSnapshot')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className='grid gap-6 xl:grid-cols-2'>
|
|
<TrafficTrendChart
|
|
points={trends?.traffic_24h ?? []}
|
|
description={t('obs.trafficTrendDesc')}
|
|
/>
|
|
<CapacityTrendChart
|
|
points={trends?.capacity_24h ?? []}
|
|
description={t('obs.capacityTrendDesc')}
|
|
/>
|
|
</div>
|
|
|
|
<div className='grid gap-6 xl:grid-cols-2'>
|
|
<NetworkTrendChart points={trends?.network_24h ?? []} />
|
|
<DiskIOTrendChart points={trends?.disk_io_24h ?? []} />
|
|
</div>
|
|
|
|
<div className='grid gap-6 xl:grid-cols-[0.95fr_1.05fr]'>
|
|
<Card className='border-dashed shadow-none'>
|
|
<CardHeader>
|
|
<CardTitle className='text-base font-semibold'>
|
|
{t('obs.structureTitle')}
|
|
</CardTitle>
|
|
<CardDescription>{t('obs.structureDesc')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='mb-6 grid gap-4 md:grid-cols-3'>
|
|
<div className='rounded-lg border px-4 py-4'>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.mainStatus')}
|
|
</p>
|
|
<p className='mt-3 text-2xl font-semibold'>
|
|
{dominantStatusCode?.label ?? '—'}
|
|
</p>
|
|
<p className='mt-2 text-sm text-muted-foreground'>
|
|
{dominantStatusCode
|
|
? t('obs.times', { count: dominantStatusCode.value })
|
|
: t('obs.noStatusDist')}
|
|
</p>
|
|
</div>
|
|
<div className='rounded-lg border px-4 py-4'>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.topDomain')}
|
|
</p>
|
|
<p className='mt-3 truncate text-2xl font-semibold'>
|
|
{dominantDomain?.label ?? '—'}
|
|
</p>
|
|
<p className='mt-2 text-sm text-muted-foreground'>
|
|
{dominantDomain
|
|
? t('obs.times', { count: dominantDomain.value })
|
|
: t('obs.noDomainDist')}
|
|
</p>
|
|
</div>
|
|
<div className='rounded-lg border px-4 py-4'>
|
|
<p className='text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.resolvedEvents')}
|
|
</p>
|
|
<p className='mt-3 text-2xl font-semibold'>
|
|
{resolvedHealthEvents.length}
|
|
</p>
|
|
<p className='mt-2 text-sm text-muted-foreground'>
|
|
{t('obs.resolvedHint')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='grid gap-6 xl:grid-cols-2'>
|
|
<div>
|
|
<p className='mb-4 text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.statusDist')}
|
|
</p>
|
|
<DistributionList
|
|
items={statusCodeDistribution}
|
|
emptyMessage={t('obs.noStatusDist')}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p className='mb-4 text-xs text-muted-foreground uppercase tracking-wide'>
|
|
{t('obs.topDomain')}
|
|
</p>
|
|
<DistributionList
|
|
items={topDomains}
|
|
emptyMessage={t('obs.noDomainDist')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<HealthEventTimeline
|
|
events={filteredHealthEvents}
|
|
allEventsCount={observability?.health_events.length ?? 0}
|
|
healthEventFilter={healthEventFilter}
|
|
onFilterChange={setHealthEventFilter}
|
|
onCleanup={() => setCleanupOpen(true)}
|
|
cleanupPending={cleanupMutation.isPending}
|
|
/>
|
|
</div>
|
|
|
|
<AlertDialog open={cleanupOpen} onOpenChange={setCleanupOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{t('obs.cleanupTitle')}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{t('obs.cleanupDesc')}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={cleanupMutation.isPending}>
|
|
{tc('cancel')}
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className='bg-destructive text-white hover:bg-destructive/90'
|
|
disabled={cleanupMutation.isPending}
|
|
onClick={() => cleanupMutation.mutate()}
|
|
>
|
|
{cleanupMutation.isPending
|
|
? t('obs.cleaning')
|
|
: t('obs.confirmCleanup')}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
}
|