mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
feat(logs): tooltip improvements (break out, no delay)
This commit is contained in:
@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
|
|||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipContent,
|
TooltipContent,
|
||||||
|
TooltipPortal,
|
||||||
TooltipProvider,
|
TooltipProvider,
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
@@ -46,22 +47,28 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const tooltip = (color: string, timestamp: string | null) => {
|
const tooltip = (color: string, timestamp: string) => {
|
||||||
return (
|
const square = (
|
||||||
<TooltipProvider>
|
<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
|
||||||
|
);
|
||||||
|
return timestamp ? (
|
||||||
|
<TooltipProvider delayDuration={0} disableHoverableContent>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>{square}</TooltipTrigger>
|
||||||
<div
|
<TooltipPortal>
|
||||||
className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)}
|
<TooltipContent
|
||||||
/>
|
sideOffset={5}
|
||||||
</TooltipTrigger>
|
className="bg-popover border-border z-[99999]"
|
||||||
<TooltipContent>
|
>
|
||||||
<p className="text text-xs text-muted-foreground break-all max-w-md">
|
<p className="text text-xs text-muted-foreground break-all max-w-md">
|
||||||
{timestamp || "--- No time found ---"}
|
<pre>{timestamp}</pre>
|
||||||
</p>
|
</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
|
</TooltipPortal>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
|
) : (
|
||||||
|
square
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -89,7 +96,6 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
<Badge
|
<Badge
|
||||||
variant={variant}
|
variant={variant}
|
||||||
className="w-14 justify-center text-[10px] px-1 py-0"
|
className="w-14 justify-center text-[10px] px-1 py-0"
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
|
|||||||
|
|
||||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||||
|
|
||||||
|
const TooltipPortal = TooltipPrimitive.Portal;
|
||||||
|
|
||||||
const TooltipContent = React.forwardRef<
|
const TooltipContent = React.forwardRef<
|
||||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||||
@@ -25,4 +27,10 @@ const TooltipContent = React.forwardRef<
|
|||||||
));
|
));
|
||||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||||
|
|
||||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
export {
|
||||||
|
Tooltip,
|
||||||
|
TooltipTrigger,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipPortal,
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user