Skip to content

refactor(logs): ♻️ remove hardcoded max-width from provider column and optimize flex ratios #817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lynricsy wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

refactor(logs): ♻️ remove hardcoded max-width from provider column and optimize flex ratios #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions src/app/[locale]/dashboard/logs/_components/provider-chain-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ import { getFake200ReasonKey } from "./fake200-reason";
interface ProviderChainPopoverProps {
chain: ProviderChainItem[];
finalProvider: string;
/** Whether a cost badge is displayed, affects name max width */
hasCostBadge?: boolean;
/** Callback when a chain item is clicked in the popover */
onChainItemClick?: (chainIndex: number) => void;
}
Expand Down Expand Up @@ -121,13 +119,12 @@ function getItemStatus(item: ProviderChainItem): {
export function ProviderChainPopover({
chain,
finalProvider,
hasCostBadge = false,
onChainItemClick,
}: ProviderChainPopoverProps) {
const t = useTranslations("dashboard");
const tChain = useTranslations("provider-chain");

// “假 200”识别发生在 SSE 流式结束后：此时响应内容可能已透传给客户端，但内部会按失败统计/熔断。
// "假 200"识别发生在 SSE 流式结束后：此时响应内容可能已透传给客户端，但内部会按失败统计/熔断。
const hasFake200PostStreamFailure = chain.some(
(item) => typeof item.errorMessage === "string" && item.errorMessage.startsWith("FAKE_200_")
);
Expand All @@ -143,9 +140,6 @@ export function ProviderChainPopover({
// Fallback for empty string
const displayName = finalProvider || "-";

// Determine max width based on whether cost badge is present
const maxWidthClass = hasCostBadge ? "max-w-[140px]" : "max-w-[180px]";

// Check if this is a session reuse
const isSessionReuse =
chain[0]?.reason === "session_reuse" || chain[0]?.selectionMethod === "session_reuse";
Expand All @@ -164,7 +158,7 @@ export function ProviderChainPopover({
const singleRequestItem = chain.find(isActualRequest);

return (
<div className={`${maxWidthClass} min-w-0 w-full`}>
<div className="min-w-0 w-full">
<TooltipProvider>
<Tooltip delayDuration={300}>
<TooltipTrigger asChild>
Expand Down
1 change: 0 additions & 1 deletion src/app/[locale]/dashboard/logs/_components/usage-logs-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,6 @@ export function UsageLogsTable({
log.providerName ||
tChain("circuit.unknown")
}
hasCostBadge={hasCostBadge}
onChainItemClick={(chainIndex) => {
setDialogState({
logId: log.id,
Expand Down
45 changes: 22 additions & 23 deletions src/app/[locale]/dashboard/logs/_components/virtualized-logs-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,81 +212,81 @@ export function VirtualizedLogsTable({
{/* Fixed header */}
<div className="bg-muted/40 border-b sticky top-0 z-10">
<div className="flex items-center h-9 text-xs font-medium text-muted-foreground uppercase tracking-wider">
<div className="flex-[0.6] min-w-[56px] pl-3 truncate" title={t("logs.columns.time")}>
<div className="flex-[0.4] min-w-[56px] pl-3 truncate" title={t("logs.columns.time")}>
{t("logs.columns.time")}
</div>
{hideUserColumn ? null : (
<div
className="flex-[0.8] min-w-[50px] px-1.5 truncate"
className="flex-[1] min-w-[50px] px-1.5 truncate"
title={t("logs.columns.user")}
>
{t("logs.columns.user")}
</div>
)}
{hideKeyColumn ? null : (
<div
className="flex-[0.6] min-w-[50px] px-1.5 truncate"
className="flex-[0.8] min-w-[50px] px-1.5 truncate"
title={t("logs.columns.key")}
>
{t("logs.columns.key")}
</div>
)}
{hideSessionIdColumn ? null : (
<div
className="flex-[0.8] min-w-[80px] px-1.5 truncate"
className="flex-[1] min-w-[80px] px-1.5 truncate"
title={t("logs.columns.sessionId")}
>
{t("logs.columns.sessionId")}
</div>
)}
{hideProviderColumn ? null : (
<div
className="flex-[1.5] min-w-[100px] px-1.5 truncate"
className="flex-[2] min-w-[100px] px-1.5 truncate"
title={t("logs.columns.provider")}
>
{t("logs.columns.provider")}
</div>
)}
<div
className="flex-[1] min-w-[80px] px-1.5 truncate"
className="flex-[1.5] min-w-[80px] px-1.5 truncate"
title={t("logs.columns.model")}
>
{t("logs.columns.model")}
</div>
{hideTokensColumn ? null : (
<div
className="flex-[0.7] min-w-[70px] text-right px-1.5 truncate"
className="flex-[0.5] min-w-[70px] text-right px-1.5 truncate"
title={t("logs.columns.tokens")}
>
{t("logs.columns.tokens")}
</div>
)}
{hideCacheColumn ? null : (
<div
className="flex-[0.8] min-w-[70px] text-right px-1.5 truncate"
className="flex-[0.5] min-w-[70px] text-right px-1.5 truncate"
title={t("logs.columns.cache")}
>
{t("logs.columns.cache")}
</div>
)}
{hideCostColumn ? null : (
<div
className="flex-[0.7] min-w-[60px] text-right px-1.5 truncate"
className="flex-[0.4] min-w-[60px] text-right px-1.5 truncate"
title={t("logs.columns.cost")}
>
{t("logs.columns.cost")}
</div>
)}
{hidePerformanceColumn ? null : (
<div
className="flex-[0.8] min-w-[80px] text-right px-1.5 truncate"
className="flex-[0.6] min-w-[80px] text-right px-1.5 truncate"
title={t("logs.columns.performance")}
>
{t("logs.columns.performance")}
</div>
)}
<div
className="flex-[0.7] min-w-[70px] pr-3 truncate"
className="flex-[0.4] min-w-[70px] pr-3 truncate"
title={t("logs.columns.status")}
>
{t("logs.columns.status")}
Expand Down Expand Up @@ -349,14 +349,14 @@ export function VirtualizedLogsTable({
)}
>
{/* Time */}
<div className="flex-[0.6] min-w-[56px] font-mono text-xs truncate pl-3">
<div className="flex-[0.4] min-w-[56px] font-mono text-xs truncate pl-3">
<RelativeTime date={log.createdAt} fallback="-" format="short" />
</div>

{/* User */}
{hideUserColumn ? null : (
<div
className="flex-[0.8] min-w-[50px] text-sm truncate px-1.5"
className="flex-[1] min-w-[50px] text-sm truncate px-1.5"
title={log.userName}
>
{log.userName}
Expand All @@ -366,7 +366,7 @@ export function VirtualizedLogsTable({
{/* Key */}
{hideKeyColumn ? null : (
<div
className="flex-[0.6] min-w-[50px] font-mono text-xs truncate px-1.5"
className="flex-[0.8] min-w-[50px] font-mono text-xs truncate px-1.5"
title={log.keyName}
>
{log.keyName}
Expand All @@ -375,7 +375,7 @@ export function VirtualizedLogsTable({

{/* Session ID */}
{hideSessionIdColumn ? null : (
<div className="flex-[0.8] min-w-[80px] px-1.5">
<div className="flex-[1] min-w-[80px] px-1.5">
{log.sessionId ? (
<TooltipProvider>
<Tooltip delayDuration={300}>
Expand Down Expand Up @@ -404,7 +404,7 @@ export function VirtualizedLogsTable({

{/* Provider */}
{hideProviderColumn ? null : (
<div className="flex-[1.5] min-w-[100px] px-1.5">
<div className="flex-[2] min-w-[100px] px-1.5">
{log.blockedBy ? (
<span className="inline-flex items-center gap-1 rounded-md bg-orange-100 dark:bg-orange-950 px-2 py-1 text-xs font-medium text-orange-700 dark:text-orange-300">
<span className="h-1.5 w-1.5 rounded-full bg-orange-600 dark:bg-orange-400" />
Expand Down Expand Up @@ -468,7 +468,6 @@ export function VirtualizedLogsTable({
log.providerName ||
tChain("circuit.unknown")
}
hasCostBadge={hasCostBadge}
onChainItemClick={(chainIndex) => {
setDialogState({
logId: log.id,
Expand Down Expand Up @@ -502,7 +501,7 @@ export function VirtualizedLogsTable({
)}

{/* Model */}
<div className="flex-[1] min-w-[80px] font-mono text-xs px-1.5">
<div className="flex-[1.5] min-w-[80px] font-mono text-xs px-1.5">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
Expand All @@ -526,7 +525,7 @@ export function VirtualizedLogsTable({

{/* Tokens */}
{hideTokensColumn ? null : (
<div className="flex-[0.7] min-w-[70px] text-right font-mono text-xs px-1.5">
<div className="flex-[0.5] min-w-[70px] text-right font-mono text-xs px-1.5">
<TooltipProvider>
<Tooltip delayDuration={250}>
<TooltipTrigger asChild>
Expand Down Expand Up @@ -554,7 +553,7 @@ export function VirtualizedLogsTable({

{/* Cache */}
{hideCacheColumn ? null : (
<div className="flex-[0.8] min-w-[70px] text-right font-mono text-xs px-1.5">
<div className="flex-[0.5] min-w-[70px] text-right font-mono text-xs px-1.5">
<TooltipProvider>
<Tooltip delayDuration={250}>
<TooltipTrigger asChild>
Expand Down Expand Up @@ -622,7 +621,7 @@ export function VirtualizedLogsTable({

{/* Cost */}
{hideCostColumn ? null : (
<div className="flex-[0.7] min-w-[60px] text-right font-mono text-xs px-1.5">
<div className="flex-[0.4] min-w-[60px] text-right font-mono text-xs px-1.5">
{isNonBilling ? (
"-"
) : log.costUsd != null ? (
Expand Down Expand Up @@ -669,7 +668,7 @@ export function VirtualizedLogsTable({

{/* Performance */}
{hidePerformanceColumn ? null : (
<div className="flex-[0.8] min-w-[80px] text-right font-mono text-xs px-1.5">
<div className="flex-[0.6] min-w-[80px] text-right font-mono text-xs px-1.5">
{(() => {
const rate = calculateOutputRate(
log.outputTokens,
Expand Down Expand Up @@ -728,7 +727,7 @@ export function VirtualizedLogsTable({
)}

{/* Status */}
<div className="flex-[0.7] min-w-[70px] pr-3">
<div className="flex-[0.4] min-w-[70px] pr-3">
<ErrorDetailsDialog
statusCode={log.statusCode}
errorMessage={log.errorMessage}
Expand Down
Loading