mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-26 15:34:26 +00:00
dadachann
53b20e2b13
Normalize monitoring API responses before rendering so empty or error payloads with data:null cannot crash the dashboard. Also guard chart, token, and box session arrays before reading length/map.
412 lines
17 KiB
TypeScript
412 lines
17 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
Plug,
|
|
Box,
|
|
CircleCheck,
|
|
CircleX,
|
|
Loader2,
|
|
Info,
|
|
Container,
|
|
Clock,
|
|
Cpu,
|
|
HardDrive,
|
|
Network,
|
|
Image,
|
|
FolderOpen,
|
|
} from 'lucide-react';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
ApiRespPluginSystemStatus,
|
|
ApiRespBoxStatus,
|
|
BoxSessionInfo,
|
|
} from '@/app/infra/entities/api';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip';
|
|
import { httpClient } from '@/app/infra/http/HttpClient';
|
|
|
|
type StatusState = 'ok' | 'disabled' | 'failed' | null;
|
|
|
|
function StatusDot({ state }: { state: StatusState }) {
|
|
if (state === null)
|
|
return <span className="w-2 h-2 rounded-full bg-muted-foreground/40" />;
|
|
if (state === 'ok')
|
|
return <span className="w-2 h-2 rounded-full bg-green-500" />;
|
|
if (state === 'disabled')
|
|
return <span className="w-2 h-2 rounded-full bg-muted-foreground/60" />;
|
|
return <span className="w-2 h-2 rounded-full bg-red-500" />;
|
|
}
|
|
|
|
interface SystemStatusCardProps {
|
|
refreshKey?: number;
|
|
}
|
|
|
|
export default function SystemStatusCard({
|
|
refreshKey,
|
|
}: SystemStatusCardProps) {
|
|
const { t } = useTranslation();
|
|
const [pluginStatus, setPluginStatus] =
|
|
useState<ApiRespPluginSystemStatus | null>(null);
|
|
const [boxStatus, setBoxStatus] = useState<ApiRespBoxStatus | null>(null);
|
|
const [boxSessions, setBoxSessions] = useState<BoxSessionInfo[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
|
|
const fetchStatus = useCallback(async () => {
|
|
try {
|
|
const [plugin, box] = await Promise.all([
|
|
httpClient.getPluginSystemStatus().catch(() => null),
|
|
httpClient.getBoxStatus().catch(() => null),
|
|
]);
|
|
const sessions = box?.hidden
|
|
? []
|
|
: await httpClient.getBoxSessions().catch(() => [] as BoxSessionInfo[]);
|
|
setPluginStatus(plugin);
|
|
setBoxStatus(box);
|
|
setBoxSessions(Array.isArray(sessions) ? sessions : []);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchStatus();
|
|
const interval = setInterval(fetchStatus, 30_000);
|
|
return () => clearInterval(interval);
|
|
}, [fetchStatus, refreshKey]);
|
|
|
|
const pluginOk = pluginStatus
|
|
? pluginStatus.is_enable && pluginStatus.is_connected
|
|
: null;
|
|
const pluginState: StatusState = pluginStatus
|
|
? pluginStatus.is_enable && pluginStatus.is_connected
|
|
? 'ok'
|
|
: !pluginStatus.is_enable
|
|
? 'disabled'
|
|
: 'failed'
|
|
: null;
|
|
const boxOk = boxStatus ? boxStatus.available : null;
|
|
const hideBoxRuntime = boxStatus?.hidden === true;
|
|
// Box has three observable states: connected (ok), disabled by config
|
|
// (enabled = false → distinct gray dot + "disabled" hint), and configured
|
|
// but failed (red dot + connector_error). The dashboard must distinguish
|
|
// them so operators can tell intentional-off from misconfigured.
|
|
const boxState: StatusState = boxStatus
|
|
? boxStatus.available
|
|
? 'ok'
|
|
: boxStatus.enabled === false
|
|
? 'disabled'
|
|
: 'failed'
|
|
: null;
|
|
|
|
const handleOpenDialog = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
fetchStatus();
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card className="transition-all duration-300">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{t('monitoring.systemStatus')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-2">
|
|
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Card className="transition-all duration-300 group">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{t('monitoring.systemStatus')}
|
|
</CardTitle>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 text-muted-foreground hover:text-foreground"
|
|
onClick={handleOpenDialog}
|
|
>
|
|
<Info className="w-4 h-4" />
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<StatusDot state={pluginState} />
|
|
<Plug className="w-3.5 h-3.5 text-muted-foreground" />
|
|
<span className="text-sm">{t('monitoring.pluginRuntime')}</span>
|
|
</div>
|
|
{!hideBoxRuntime && (
|
|
<div className="flex items-center gap-2">
|
|
<StatusDot state={boxState} />
|
|
<Box className="w-3.5 h-3.5 text-muted-foreground" />
|
|
<span className="text-sm">{t('monitoring.boxRuntime')}</span>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('monitoring.systemStatus')}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<TooltipProvider>
|
|
<div className="space-y-5 overflow-y-auto flex-1 pr-1">
|
|
{/* Plugin Runtime */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Plug className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm font-semibold">
|
|
{t('monitoring.pluginRuntime')}
|
|
</span>
|
|
</div>
|
|
<div className="ml-6 text-sm space-y-1">
|
|
<div className="flex items-center gap-1.5">
|
|
{pluginOk ? (
|
|
<CircleCheck className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<CircleX className="w-4 h-4 text-red-500" />
|
|
)}
|
|
<span
|
|
className={
|
|
pluginOk
|
|
? 'text-green-600 font-medium'
|
|
: 'text-red-500 font-medium'
|
|
}
|
|
>
|
|
{pluginOk
|
|
? t('monitoring.connected')
|
|
: pluginStatus && !pluginStatus.is_enable
|
|
? t('monitoring.disabled')
|
|
: t('monitoring.disconnected')}
|
|
</span>
|
|
</div>
|
|
{pluginStatus && !pluginStatus.is_enable && (
|
|
<p className="text-muted-foreground text-xs">
|
|
{t('monitoring.pluginDisabled')}
|
|
</p>
|
|
)}
|
|
{pluginStatus &&
|
|
!pluginOk &&
|
|
pluginStatus.is_enable &&
|
|
pluginStatus.plugin_connector_error &&
|
|
pluginStatus.plugin_connector_error !== 'ok' && (
|
|
<p className="text-red-400 text-xs break-all">
|
|
{pluginStatus.plugin_connector_error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{!hideBoxRuntime && (
|
|
<>
|
|
<div className="border-t" />
|
|
|
|
{/* Box Runtime */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Box className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm font-semibold">
|
|
{t('monitoring.boxRuntime')}
|
|
</span>
|
|
</div>
|
|
<div className="ml-6 text-sm space-y-1">
|
|
<div className="flex items-center gap-1.5">
|
|
{boxState === 'ok' ? (
|
|
<CircleCheck className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<CircleX
|
|
className={
|
|
boxState === 'disabled'
|
|
? 'w-4 h-4 text-muted-foreground'
|
|
: 'w-4 h-4 text-red-500'
|
|
}
|
|
/>
|
|
)}
|
|
<span
|
|
className={
|
|
boxState === 'ok'
|
|
? 'text-green-600 font-medium'
|
|
: boxState === 'disabled'
|
|
? 'text-muted-foreground font-medium'
|
|
: 'text-red-500 font-medium'
|
|
}
|
|
>
|
|
{boxState === 'ok'
|
|
? t('monitoring.connected')
|
|
: boxState === 'disabled'
|
|
? t('monitoring.disabled')
|
|
: t('monitoring.disconnected')}
|
|
</span>
|
|
</div>
|
|
{boxState === 'disabled' && (
|
|
<p className="text-muted-foreground text-xs">
|
|
{t('monitoring.boxDisabled')}
|
|
</p>
|
|
)}
|
|
{boxState === 'failed' && boxStatus?.connector_error && (
|
|
<p className="text-red-400 text-xs break-all">
|
|
{boxStatus.connector_error}
|
|
</p>
|
|
)}
|
|
{boxStatus && (
|
|
<div className="text-muted-foreground text-xs space-y-0.5">
|
|
{boxStatus.backend && (
|
|
<p>
|
|
{t('monitoring.boxBackend')}:{' '}
|
|
<span className="text-foreground font-mono">
|
|
{boxStatus.backend.name}
|
|
</span>
|
|
</p>
|
|
)}
|
|
<p>
|
|
{t('monitoring.boxProfile')}:{' '}
|
|
<span className="text-foreground font-mono">
|
|
{boxStatus.profile}
|
|
</span>
|
|
</p>
|
|
{boxOk && boxStatus.active_sessions !== undefined && (
|
|
<p>
|
|
{t('monitoring.boxSandboxes')}:{' '}
|
|
<span className="text-foreground font-mono">
|
|
{boxStatus.active_sessions}
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Active Sandboxes */}
|
|
{boxSessions.length > 0 && (
|
|
<div className="mt-3 space-y-2">
|
|
{boxSessions.map((session) => (
|
|
<div
|
|
key={session.session_id}
|
|
className="rounded-lg border p-3 space-y-2"
|
|
>
|
|
<div className="flex items-center gap-1.5 min-w-0">
|
|
<Container className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="font-mono font-semibold text-foreground truncate text-sm">
|
|
{session.session_id}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{session.session_id}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
|
|
<div className="flex items-center gap-1.5 text-muted-foreground min-w-0">
|
|
<Image className="w-3 h-3 flex-shrink-0" />
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="text-foreground font-mono truncate">
|
|
{session.image}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{session.image}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-muted-foreground">
|
|
<HardDrive className="w-3 h-3 flex-shrink-0" />
|
|
<span className="text-foreground">
|
|
{session.backend_name}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-muted-foreground">
|
|
<Cpu className="w-3 h-3 flex-shrink-0" />
|
|
<span className="text-foreground">
|
|
{session.cpus} CPU / {session.memory_mb} MB
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-muted-foreground">
|
|
<Network className="w-3 h-3 flex-shrink-0" />
|
|
<span className="text-foreground">
|
|
{session.network}
|
|
</span>
|
|
</div>
|
|
{session.host_path && (
|
|
<div className="flex items-center gap-1.5 text-muted-foreground col-span-2 min-w-0">
|
|
<FolderOpen className="w-3 h-3 flex-shrink-0" />
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="text-foreground font-mono truncate">
|
|
{session.host_path} :{' '}
|
|
{session.mount_path}{' '}
|
|
<span className="text-muted-foreground">
|
|
({session.host_path_mode})
|
|
</span>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{session.host_path} :{' '}
|
|
{session.mount_path} (
|
|
{session.host_path_mode})
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-1.5 text-muted-foreground">
|
|
<Clock className="w-3 h-3 flex-shrink-0" />
|
|
<span>
|
|
{t('monitoring.boxSessionCreated')}:{' '}
|
|
<span className="text-foreground">
|
|
{new Date(
|
|
session.created_at,
|
|
).toLocaleString()}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-muted-foreground">
|
|
<Clock className="w-3 h-3 flex-shrink-0" />
|
|
<span>
|
|
{t('monitoring.boxSessionLastUsed')}:{' '}
|
|
<span className="text-foreground">
|
|
{new Date(
|
|
session.last_used_at,
|
|
).toLocaleString()}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</TooltipProvider>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|