xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-08-14 06:30:57 +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
web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
+36 -9
View File
@@ -28,6 +28,12 @@ import {
ApiRespBoxStatus, ApiRespBoxStatus,
BoxSessionInfo, BoxSessionInfo,
} from '@/app/infra/entities/api'; } from '@/app/infra/entities/api';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { httpClient } from '@/app/infra/http/HttpClient'; import { httpClient } from '@/app/infra/http/HttpClient';
function StatusDot({ ok }: { ok: boolean | null }) { function StatusDot({ ok }: { ok: boolean | null }) {
@@ -141,6 +147,7 @@ export default function SystemStatusCard({
<DialogTitle>{t('monitoring.systemStatus')}</DialogTitle> <DialogTitle>{t('monitoring.systemStatus')}</DialogTitle>
</DialogHeader> </DialogHeader>
<TooltipProvider>
<div className="space-y-5 overflow-y-auto flex-1 pr-1"> <div className="space-y-5 overflow-y-auto flex-1 pr-1">
{/* Plugin Runtime */} {/* Plugin Runtime */}
<div className="space-y-2"> <div className="space-y-2">
@@ -257,18 +264,30 @@ export default function SystemStatusCard({
key={session.session_id} key={session.session_id}
className="rounded-lg border p-3 space-y-2" 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" /> <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"> <span className="font-mono font-semibold text-foreground truncate text-sm">
{session.session_id} {session.session_id}
</span> </span>
</TooltipTrigger>
<TooltipContent>
{session.session_id}
</TooltipContent>
</Tooltip>
</div> </div>
<div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs"> <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" /> <Image className="w-3 h-3 flex-shrink-0" />
<Tooltip>
<TooltipTrigger asChild>
<span className="text-foreground font-mono truncate"> <span className="text-foreground font-mono truncate">
{session.image} {session.image}
</span> </span>
</TooltipTrigger>
<TooltipContent>{session.image}</TooltipContent>
</Tooltip>
</div> </div>
<div className="flex items-center gap-1.5 text-muted-foreground"> <div className="flex items-center gap-1.5 text-muted-foreground">
<HardDrive className="w-3 h-3 flex-shrink-0" /> <HardDrive className="w-3 h-3 flex-shrink-0" />
@@ -289,17 +308,22 @@ export default function SystemStatusCard({
</span> </span>
</div> </div>
{session.host_path && ( {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" /> <FolderOpen className="w-3 h-3 flex-shrink-0" />
<span <Tooltip>
className="text-foreground font-mono truncate" <TooltipTrigger asChild>
title={session.host_path} <span className="text-foreground font-mono truncate">
> {session.host_path} : {session.mount_path}{' '}
{session.mount_path}{' '}
<span className="text-muted-foreground"> <span className="text-muted-foreground">
({session.host_path_mode}) ({session.host_path_mode})
</span> </span>
</span> </span>
</TooltipTrigger>
<TooltipContent>
{session.host_path} : {session.mount_path} (
{session.host_path_mode})
</TooltipContent>
</Tooltip>
</div> </div>
)} )}
<div className="flex items-center gap-1.5 text-muted-foreground"> <div className="flex items-center gap-1.5 text-muted-foreground">
@@ -307,7 +331,9 @@ export default function SystemStatusCard({
<span> <span>
{t('monitoring.boxSessionCreated')}:{' '} {t('monitoring.boxSessionCreated')}:{' '}
<span className="text-foreground"> <span className="text-foreground">
{new Date(session.created_at).toLocaleString()} {new Date(
session.created_at,
).toLocaleString()}
</span> </span>
</span> </span>
</div> </div>
@@ -330,6 +356,7 @@ export default function SystemStatusCard({
</div> </div>
</div> </div>
</div> </div>
</TooltipProvider>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>