xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 03:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add tooltips for truncated fields in system status dialog

Browse Source 
Wrap session_id, image, and mount path fields with Tooltip components
so hovering over truncated text shows the full value.
This commit is contained in:
Junyan Qin
2026-04-19 15:31:20 +08:00
committed by WangCham
parent fe9aed4ec9
commit db135f217f
1 changed files with 201 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
View File

@@ -28,6 +28,12 @@ import {
ApiRespBoxStatus,
BoxSessionInfo,
} from '@/app/infra/entities/api';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { httpClient } from '@/app/infra/http/HttpClient';
function StatusDot({ ok }: { ok: boolean | null }) {
@@ -141,6 +147,7 @@ export default function SystemStatusCard({
<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">
@@ -257,18 +264,30 @@ export default function SystemStatusCard({
key={session.session_id}
className="rounded-lg border p-3 space-y-2"
>
<div className="flex items-center gap-1.5">
<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">
<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" />
@@ -289,17 +308,22 @@ export default function SystemStatusCard({
</span>
</div>
{session.host_path && (
<div className="flex items-center gap-1.5 text-muted-foreground col-span-2">
<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" />
<span
className="text-foreground font-mono truncate"
title={session.host_path}
>
{session.mount_path}{' '}
<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">
@@ -307,7 +331,9 @@ export default function SystemStatusCard({
<span>
{t('monitoring.boxSessionCreated')}:{' '}
<span className="text-foreground">
{new Date(session.created_at).toLocaleString()}
{new Date(
session.created_at,
).toLocaleString()}
</span>
</span>
</div>
@@ -330,6 +356,7 @@ export default function SystemStatusCard({
</div>
</div>
</div>
</TooltipProvider>
</DialogContent>
</Dialog>
</>