mirror of
https://github.com/tiennm99/litellm.git
synced 2026-07-11 01:05:19 +00:00
refactored code
This commit is contained in:
Ishaan Jaffer
@@ -1,422 +0,0 @@
|
||||
import { Drawer, Typography, Button, Descriptions, Card, Tag, Tooltip, Tabs, message } from "antd";
|
||||
import { CloseOutlined, CopyOutlined } from "@ant-design/icons";
|
||||
import { Row } from "@tanstack/react-table";
|
||||
import { LogEntry } from "./columns";
|
||||
import { formatNumberWithCommas } from "@/utils/dataUtils";
|
||||
import { truncateString } from "@/utils/textUtils";
|
||||
import GuardrailViewer from "./GuardrailViewer/GuardrailViewer";
|
||||
import { CostBreakdownViewer } from "./CostBreakdownViewer";
|
||||
import { ConfigInfoMessage } from "./ConfigInfoMessage";
|
||||
import { RequestResponsePanel } from "./RequestResponsePanel";
|
||||
import { VectorStoreViewer } from "./VectorStoreViewer";
|
||||
import { ErrorViewer } from "./ErrorViewer";
|
||||
import { JsonView, defaultStyles } from "react-json-view-lite";
|
||||
import "react-json-view-lite/dist/index.css";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface LogDetailsDrawerProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
logEntry: LogEntry | null;
|
||||
onOpenSettings?: () => void;
|
||||
}
|
||||
|
||||
export function LogDetailsDrawer({ open, onClose, logEntry, onOpenSettings }: LogDetailsDrawerProps) {
|
||||
if (!logEntry) return null;
|
||||
|
||||
// Helper function to clean metadata by removing specific fields
|
||||
const formatData = (input: any) => {
|
||||
if (typeof input === "string") {
|
||||
try {
|
||||
return JSON.parse(input);
|
||||
} catch {
|
||||
return input;
|
||||
}
|
||||
}
|
||||
return input;
|
||||
};
|
||||
|
||||
// Helper function to get raw request
|
||||
const getRawRequest = () => {
|
||||
// First check if proxy_server_request exists in metadata
|
||||
if (logEntry?.proxy_server_request) {
|
||||
return formatData(logEntry.proxy_server_request);
|
||||
}
|
||||
// Fall back to messages if proxy_server_request is empty
|
||||
return formatData(logEntry.messages);
|
||||
};
|
||||
|
||||
// Extract error information from metadata if available
|
||||
const metadata = logEntry.metadata || {};
|
||||
const hasError = metadata.status === "failure";
|
||||
const errorInfo = hasError ? metadata.error_information : null;
|
||||
|
||||
// Check if request/response data is missing
|
||||
const hasMessages =
|
||||
logEntry.messages &&
|
||||
(Array.isArray(logEntry.messages)
|
||||
? logEntry.messages.length > 0
|
||||
: Object.keys(logEntry.messages).length > 0);
|
||||
const hasResponse = logEntry.response && Object.keys(formatData(logEntry.response)).length > 0;
|
||||
const missingData = !hasMessages && !hasResponse;
|
||||
|
||||
// Format the response with error details if present
|
||||
const formattedResponse = () => {
|
||||
if (hasError && errorInfo) {
|
||||
return {
|
||||
error: {
|
||||
message: errorInfo.error_message || "An error occurred",
|
||||
type: errorInfo.error_class || "error",
|
||||
code: errorInfo.error_code || "unknown",
|
||||
param: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
return formatData(logEntry.response);
|
||||
};
|
||||
|
||||
// Extract vector store request metadata if available
|
||||
const hasVectorStoreData =
|
||||
metadata.vector_store_request_metadata &&
|
||||
Array.isArray(metadata.vector_store_request_metadata) &&
|
||||
metadata.vector_store_request_metadata.length > 0;
|
||||
|
||||
// Extract guardrail information from metadata if available
|
||||
const guardrailInfo = logEntry.metadata?.guardrail_information;
|
||||
const guardrailEntries = Array.isArray(guardrailInfo) ? guardrailInfo : guardrailInfo ? [guardrailInfo] : [];
|
||||
const hasGuardrailData = guardrailEntries.length > 0;
|
||||
|
||||
// Calculate total masked entities if guardrail data exists
|
||||
const totalMaskedEntities = guardrailEntries.reduce((sum, entry) => {
|
||||
const maskedCounts = entry?.masked_entity_count;
|
||||
if (!maskedCounts) {
|
||||
return sum;
|
||||
}
|
||||
return (
|
||||
sum +
|
||||
Object.values(maskedCounts).reduce<number>((acc, count) => (typeof count === "number" ? acc + count : acc), 0)
|
||||
);
|
||||
}, 0);
|
||||
|
||||
const primaryGuardrailLabel =
|
||||
guardrailEntries.length === 1
|
||||
? guardrailEntries[0]?.guardrail_name ?? "-"
|
||||
: guardrailEntries.length > 1
|
||||
? `${guardrailEntries.length} guardrails`
|
||||
: "-";
|
||||
|
||||
const handleCopyRequestId = () => {
|
||||
navigator.clipboard.writeText(logEntry.request_id);
|
||||
message.success("Request ID copied to clipboard");
|
||||
};
|
||||
|
||||
const copyToClipboard = async (text: string, label: string) => {
|
||||
try {
|
||||
// Try modern clipboard API first
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
message.success(`${label} copied to clipboard`);
|
||||
return true;
|
||||
} else {
|
||||
// Fallback for non-secure contexts
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.opacity = "0";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
const successful = document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
if (!successful) {
|
||||
throw new Error("execCommand failed");
|
||||
}
|
||||
message.success(`${label} copied to clipboard`);
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Copy failed:", error);
|
||||
message.error(`Failed to copy ${label}`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={null}
|
||||
placement="right"
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
width="60%"
|
||||
closable={false}
|
||||
mask={true}
|
||||
maskClosable={true}
|
||||
styles={{
|
||||
body: { padding: 0, overflow: "hidden" },
|
||||
header: { display: "none" },
|
||||
}}
|
||||
>
|
||||
{/* Custom Header with Request ID prominently displayed */}
|
||||
<div
|
||||
style={{
|
||||
padding: "16px 24px",
|
||||
borderBottom: "1px solid #f0f0f0",
|
||||
backgroundColor: "#fff",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{/* Request ID at top - like Langfuse trace ID */}
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px", flex: 1, minWidth: 0 }}>
|
||||
<Tooltip title={logEntry.request_id}>
|
||||
<Text
|
||||
strong
|
||||
style={{
|
||||
fontSize: "16px",
|
||||
fontFamily: "monospace",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{logEntry.request_id}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<Tooltip title="Copy Request ID">
|
||||
<Button type="text" size="small" icon={<CopyOutlined />} onClick={handleCopyRequestId} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Button type="text" icon={<CloseOutlined />} onClick={onClose} />
|
||||
</div>
|
||||
|
||||
{/* Status and timestamp row */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||
<Tag color={metadata.status === "failure" ? "error" : "success"}>
|
||||
{metadata.status === "failure" ? "Failure" : "Success"}
|
||||
</Tag>
|
||||
<Text type="secondary" style={{ fontSize: "13px" }}>
|
||||
{logEntry.startTime}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable content area */}
|
||||
<div style={{ height: "calc(100vh - 100px)", overflowY: "auto", padding: "24px" }}>
|
||||
{/* Request Details Section */}
|
||||
<Card title="Request Details" size="small" style={{ marginBottom: "16px" }}>
|
||||
<Descriptions column={2} size="small">
|
||||
<Descriptions.Item label="Model">{logEntry.model}</Descriptions.Item>
|
||||
<Descriptions.Item label="Provider">{logEntry.custom_llm_provider || "-"}</Descriptions.Item>
|
||||
<Descriptions.Item label="Call Type">{logEntry.call_type}</Descriptions.Item>
|
||||
<Descriptions.Item label="Model ID">{logEntry.model_id}</Descriptions.Item>
|
||||
<Descriptions.Item label="API Base">
|
||||
<Tooltip title={logEntry.api_base || "-"}>
|
||||
<span
|
||||
style={{
|
||||
maxWidth: "200px",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
{logEntry.api_base || "-"}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Descriptions.Item>
|
||||
{logEntry.requester_ip_address && (
|
||||
<Descriptions.Item label="IP Address">{logEntry.requester_ip_address}</Descriptions.Item>
|
||||
)}
|
||||
{hasGuardrailData && (
|
||||
<Descriptions.Item label="Guardrail">
|
||||
<span>{primaryGuardrailLabel}</span>
|
||||
{totalMaskedEntities > 0 && (
|
||||
<Tag color="blue" style={{ marginLeft: "8px" }}>
|
||||
{totalMaskedEntities} masked
|
||||
</Tag>
|
||||
)}
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* Metrics Section */}
|
||||
<Card title="Metrics" size="small" style={{ marginBottom: "16px" }}>
|
||||
<Descriptions column={2} size="small">
|
||||
<Descriptions.Item label="Tokens">
|
||||
{logEntry.total_tokens} ({logEntry.prompt_tokens} prompt + {logEntry.completion_tokens} completion)
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Cost">${formatNumberWithCommas(logEntry.spend || 0, 6)}</Descriptions.Item>
|
||||
<Descriptions.Item label="Duration">{logEntry.duration} s</Descriptions.Item>
|
||||
<Descriptions.Item label="Cache Hit">{logEntry.cache_hit}</Descriptions.Item>
|
||||
<Descriptions.Item label="Cache Read Tokens">
|
||||
{formatNumberWithCommas(metadata?.additional_usage_values?.cache_read_input_tokens || 0)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Cache Creation Tokens">
|
||||
{formatNumberWithCommas(metadata?.additional_usage_values?.cache_creation_input_tokens || 0)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Start Time">{logEntry.startTime}</Descriptions.Item>
|
||||
<Descriptions.Item label="End Time">{logEntry.endTime}</Descriptions.Item>
|
||||
{metadata?.litellm_overhead_time_ms !== undefined && (
|
||||
<Descriptions.Item label="LiteLLM Overhead">{metadata.litellm_overhead_time_ms} ms</Descriptions.Item>
|
||||
)}
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* Cost Breakdown - Show if cost breakdown data is available */}
|
||||
<CostBreakdownViewer costBreakdown={metadata?.cost_breakdown} totalSpend={logEntry.spend || 0} />
|
||||
|
||||
{/* Configuration Info Message - Show when data is missing */}
|
||||
<ConfigInfoMessage show={missingData} onOpenSettings={onOpenSettings} />
|
||||
|
||||
{/* Request/Response JSON - Using Tabs */}
|
||||
<Card title="Request & Response" size="small" style={{ marginBottom: "16px" }}>
|
||||
<Tabs
|
||||
defaultActiveKey="request"
|
||||
items={[
|
||||
{
|
||||
key: "request",
|
||||
label: "Request",
|
||||
children: (
|
||||
<div style={{ position: "relative" }}>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
style={{ position: "absolute", top: "8px", right: "8px", zIndex: 1 }}
|
||||
onClick={() => copyToClipboard(JSON.stringify(getRawRequest(), null, 2), "Request")}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
<div
|
||||
style={{
|
||||
maxHeight: "500px",
|
||||
overflowY: "auto",
|
||||
backgroundColor: "#fafafa",
|
||||
padding: "12px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
<div className="[&_[role='tree']]:bg-white [&_[role='tree']]:text-slate-900">
|
||||
<JsonView data={getRawRequest()} style={defaultStyles} clickToExpandNode={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "response",
|
||||
label: "Response",
|
||||
children: (
|
||||
<div style={{ position: "relative" }}>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
style={{ position: "absolute", top: "8px", right: "8px", zIndex: 1 }}
|
||||
onClick={() => copyToClipboard(JSON.stringify(formattedResponse(), null, 2), "Response")}
|
||||
disabled={!hasResponse}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
<div
|
||||
style={{
|
||||
maxHeight: "500px",
|
||||
overflowY: "auto",
|
||||
backgroundColor: "#fafafa",
|
||||
padding: "12px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
{hasResponse ? (
|
||||
<div className="[&_[role='tree']]:bg-white [&_[role='tree']]:text-slate-900">
|
||||
<JsonView data={formattedResponse()} style={defaultStyles} clickToExpandNode />
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ textAlign: "center", padding: "20px", color: "#999", fontStyle: "italic" }}>
|
||||
Response data not available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Guardrail Data - Show only if present */}
|
||||
{hasGuardrailData && (
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<GuardrailViewer data={guardrailInfo} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Vector Store Request Data - Show only if present */}
|
||||
{hasVectorStoreData && (
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<VectorStoreViewer data={metadata.vector_store_request_metadata} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Card - Only show for failures */}
|
||||
{hasError && errorInfo && (
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<ErrorViewer errorInfo={errorInfo} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags Card - Only show if there are tags */}
|
||||
{logEntry.request_tags && Object.keys(logEntry.request_tags).length > 0 && (
|
||||
<Card title="Request Tags" size="small" style={{ marginBottom: "16px" }}>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
|
||||
{Object.entries(logEntry.request_tags).map(([key, value]) => (
|
||||
<Tag key={key}>
|
||||
{key}: {String(value)}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Metadata Card - Only show if there's metadata */}
|
||||
{logEntry.metadata && Object.keys(logEntry.metadata).length > 0 && (
|
||||
<Card
|
||||
title="Metadata"
|
||||
size="small"
|
||||
style={{ marginBottom: "16px" }}
|
||||
extra={
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => copyToClipboard(JSON.stringify(logEntry.metadata, null, 2), "Metadata")}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<pre
|
||||
style={{
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto",
|
||||
fontSize: "12px",
|
||||
fontFamily: "monospace",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(logEntry.metadata, null, 2)}
|
||||
</pre>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import { Button, Tag, Tooltip, Typography } from "antd";
|
||||
import { CloseOutlined, CopyOutlined, UpOutlined, DownOutlined } from "@ant-design/icons";
|
||||
import moment from "moment";
|
||||
import { LogEntry } from "../columns";
|
||||
import {
|
||||
DRAWER_HEADER_PADDING,
|
||||
COLOR_BORDER,
|
||||
COLOR_BACKGROUND,
|
||||
SPACING_MEDIUM,
|
||||
SPACING_LARGE,
|
||||
FONT_SIZE_HEADER,
|
||||
FONT_SIZE_MEDIUM,
|
||||
FONT_FAMILY_MONO,
|
||||
SPACING_SMALL,
|
||||
} from "./constants";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface DrawerHeaderProps {
|
||||
log: LogEntry;
|
||||
onClose: () => void;
|
||||
onCopyRequestId: () => void;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
statusLabel: string;
|
||||
statusColor: "error" | "success";
|
||||
environment: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Header component for the log details drawer.
|
||||
* Displays request ID, navigation controls, status, environment, and timestamp.
|
||||
*/
|
||||
export function DrawerHeader({
|
||||
log,
|
||||
onClose,
|
||||
onCopyRequestId,
|
||||
onPrevious,
|
||||
onNext,
|
||||
statusLabel,
|
||||
statusColor,
|
||||
environment,
|
||||
}: DrawerHeaderProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: DRAWER_HEADER_PADDING,
|
||||
borderBottom: `1px solid ${COLOR_BORDER}`,
|
||||
backgroundColor: COLOR_BACKGROUND,
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{/* Row 1: Request ID + Actions */}
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: SPACING_MEDIUM }}>
|
||||
<RequestIdSection requestId={log.request_id} onCopy={onCopyRequestId} />
|
||||
<NavigationSection onPrevious={onPrevious} onNext={onNext} onClose={onClose} />
|
||||
</div>
|
||||
|
||||
{/* Row 2: Status + Env + Timestamp */}
|
||||
<StatusBar log={log} statusLabel={statusLabel} statusColor={statusColor} environment={environment} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Request ID display with copy button
|
||||
*/
|
||||
function RequestIdSection({ requestId, onCopy }: { requestId: string; onCopy: () => void }) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: SPACING_MEDIUM, flex: 1, minWidth: 0 }}>
|
||||
<Tooltip title={requestId}>
|
||||
<Text
|
||||
strong
|
||||
style={{
|
||||
fontSize: FONT_SIZE_HEADER,
|
||||
fontFamily: FONT_FAMILY_MONO,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{requestId}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<Tooltip title="Copy Request ID">
|
||||
<Button type="text" size="small" icon={<CopyOutlined />} onClick={onCopy} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation controls (previous, next, close)
|
||||
*/
|
||||
function NavigationSection({
|
||||
onPrevious,
|
||||
onNext,
|
||||
onClose,
|
||||
}: {
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: SPACING_SMALL }}>
|
||||
<Tooltip title="Previous (K)">
|
||||
<Button type="text" size="small" icon={<UpOutlined />} onClick={onPrevious} />
|
||||
</Tooltip>
|
||||
<Tooltip title="Next (J)">
|
||||
<Button type="text" size="small" icon={<DownOutlined />} onClick={onNext} />
|
||||
</Tooltip>
|
||||
|
||||
<div style={{ width: 1, height: 20, background: COLOR_BORDER, margin: `0 ${SPACING_MEDIUM}px` }} />
|
||||
|
||||
<Button type="text" icon={<CloseOutlined />} onClick={onClose} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Status bar with tags and timestamp
|
||||
*/
|
||||
function StatusBar({
|
||||
log,
|
||||
statusLabel,
|
||||
statusColor,
|
||||
environment,
|
||||
}: {
|
||||
log: LogEntry;
|
||||
statusLabel: string;
|
||||
statusColor: "error" | "success";
|
||||
environment: string;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: SPACING_LARGE }}>
|
||||
<Tag color={statusColor}>{statusLabel}</Tag>
|
||||
<Tag>Env: {environment}</Tag>
|
||||
<Text type="secondary" style={{ fontSize: FONT_SIZE_MEDIUM }}>
|
||||
{moment(log.startTime).format("MMM D, YYYY h:mm:ss A")}
|
||||
<span style={{ marginLeft: SPACING_MEDIUM }}>({moment(log.startTime).fromNow()})</span>
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Typography } from "antd";
|
||||
import { JsonView, defaultStyles } from "react-json-view-lite";
|
||||
import "react-json-view-lite/dist/index.css";
|
||||
import {
|
||||
JSON_MAX_HEIGHT,
|
||||
FONT_SIZE_SMALL,
|
||||
COLOR_BG_LIGHT,
|
||||
SPACING_LARGE,
|
||||
FONT_FAMILY_MONO,
|
||||
VIEW_MODE_JSON,
|
||||
} from "./constants";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export type ViewMode = "formatted" | "json";
|
||||
|
||||
interface JsonViewerProps {
|
||||
data: any;
|
||||
mode: ViewMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays JSON data in either formatted tree view or raw JSON format.
|
||||
* Formatted view uses an interactive tree, JSON view shows raw stringified output.
|
||||
*/
|
||||
export function JsonViewer({ data, mode }: JsonViewerProps) {
|
||||
if (!data) return <Text type="secondary">No data</Text>;
|
||||
|
||||
if (mode === VIEW_MODE_JSON) {
|
||||
return (
|
||||
<pre
|
||||
style={{
|
||||
margin: 0,
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
maxHeight: JSON_MAX_HEIGHT,
|
||||
overflow: "auto",
|
||||
fontSize: FONT_SIZE_SMALL,
|
||||
background: COLOR_BG_LIGHT,
|
||||
padding: SPACING_LARGE,
|
||||
borderRadius: 4,
|
||||
fontFamily: FONT_FAMILY_MONO,
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(data, null, 2)}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
// Formatted tree view
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
maxHeight: JSON_MAX_HEIGHT,
|
||||
overflow: "auto",
|
||||
background: COLOR_BG_LIGHT,
|
||||
padding: SPACING_LARGE,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<div className="[&_[role='tree']]:bg-white [&_[role='tree']]:text-slate-900">
|
||||
<JsonView data={data} style={defaultStyles} clickToExpandNode={true} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,516 @@
|
||||
import { useState } from "react";
|
||||
import { Drawer, Typography, Button, Descriptions, Card, Tag, Tabs, Radio, Alert, message } from "antd";
|
||||
import { CopyOutlined } from "@ant-design/icons";
|
||||
import moment from "moment";
|
||||
import { LogEntry } from "../columns";
|
||||
import { formatNumberWithCommas } from "@/utils/dataUtils";
|
||||
import GuardrailViewer from "../GuardrailViewer/GuardrailViewer";
|
||||
import { CostBreakdownViewer } from "../CostBreakdownViewer";
|
||||
import { ConfigInfoMessage } from "../ConfigInfoMessage";
|
||||
import { VectorStoreViewer } from "../VectorStoreViewer";
|
||||
import { TruncatedValue } from "./TruncatedValue";
|
||||
import { TokenFlow } from "./TokenFlow";
|
||||
import { JsonViewer, ViewMode } from "./JsonViewer";
|
||||
import { DrawerHeader } from "./DrawerHeader";
|
||||
import { copyToClipboard } from "./clipboardUtils";
|
||||
import { useKeyboardNavigation } from "./useKeyboardNavigation";
|
||||
import {
|
||||
DRAWER_WIDTH,
|
||||
DRAWER_CONTENT_PADDING,
|
||||
API_BASE_MAX_WIDTH,
|
||||
METADATA_MAX_HEIGHT,
|
||||
TAB_REQUEST,
|
||||
TAB_RESPONSE,
|
||||
VIEW_MODE_FORMATTED,
|
||||
FONT_SIZE_SMALL,
|
||||
FONT_FAMILY_MONO,
|
||||
SPACING_XLARGE,
|
||||
MESSAGE_REQUEST_ID_COPIED,
|
||||
} from "./constants";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export interface LogDetailsDrawerProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
logEntry: LogEntry | null;
|
||||
onOpenSettings?: () => void;
|
||||
allLogs?: LogEntry[];
|
||||
onSelectLog?: (log: LogEntry) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Right-side drawer panel for displaying detailed log information.
|
||||
* Features:
|
||||
* - Request ID prominently displayed with copy functionality
|
||||
* - Keyboard navigation (J/K for next/prev, Escape to close)
|
||||
* - Formatted and JSON view toggle for request/response
|
||||
* - Smart display of cache fields (hidden when zero)
|
||||
* - Error alerts for failed requests
|
||||
* - Collapsible sections for guardrails, vector store, metadata
|
||||
*/
|
||||
export function LogDetailsDrawer({
|
||||
open,
|
||||
onClose,
|
||||
logEntry,
|
||||
onOpenSettings,
|
||||
allLogs = [],
|
||||
onSelectLog,
|
||||
}: LogDetailsDrawerProps) {
|
||||
const [activeTab, setActiveTab] = useState<typeof TAB_REQUEST | typeof TAB_RESPONSE>(TAB_REQUEST);
|
||||
const [jsonViewMode, setJsonViewMode] = useState<ViewMode>(VIEW_MODE_FORMATTED);
|
||||
|
||||
// Keyboard navigation
|
||||
const { selectNextLog, selectPreviousLog } = useKeyboardNavigation({
|
||||
isOpen: open,
|
||||
currentLog: logEntry,
|
||||
allLogs,
|
||||
onClose,
|
||||
onSelectLog,
|
||||
});
|
||||
|
||||
if (!logEntry) return null;
|
||||
|
||||
const metadata = logEntry.metadata || {};
|
||||
const hasError = metadata.status === "failure";
|
||||
const errorInfo = hasError ? metadata.error_information : null;
|
||||
|
||||
// Check if request/response data is present
|
||||
const hasMessages = checkHasMessages(logEntry.messages);
|
||||
const hasResponse = checkHasResponse(logEntry.response);
|
||||
const missingData = !hasMessages && !hasResponse;
|
||||
|
||||
// Guardrail data
|
||||
const guardrailInfo = metadata?.guardrail_information;
|
||||
const guardrailEntries = normalizeGuardrailEntries(guardrailInfo);
|
||||
const hasGuardrailData = guardrailEntries.length > 0;
|
||||
const totalMaskedEntities = calculateTotalMaskedEntities(guardrailEntries);
|
||||
const primaryGuardrailLabel = getGuardrailLabel(guardrailEntries);
|
||||
|
||||
// Vector store data
|
||||
const hasVectorStoreData = checkHasVectorStoreData(metadata);
|
||||
|
||||
// Status display values
|
||||
const statusLabel = metadata.status === "failure" ? "Failure" : "Success";
|
||||
const statusColor = metadata.status === "failure" ? ("error" as const) : ("success" as const);
|
||||
const environment = metadata?.user_api_key_team_alias || "default";
|
||||
|
||||
const handleCopyRequestId = () => {
|
||||
navigator.clipboard.writeText(logEntry.request_id);
|
||||
message.success(MESSAGE_REQUEST_ID_COPIED);
|
||||
};
|
||||
|
||||
const getRawRequest = () => {
|
||||
return formatData(logEntry.proxy_server_request || logEntry.messages);
|
||||
};
|
||||
|
||||
const getFormattedResponse = () => {
|
||||
if (hasError && errorInfo) {
|
||||
return {
|
||||
error: {
|
||||
message: errorInfo.error_message || "An error occurred",
|
||||
type: errorInfo.error_class || "error",
|
||||
code: errorInfo.error_code || "unknown",
|
||||
param: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
return formatData(logEntry.response);
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={null}
|
||||
placement="right"
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
width={DRAWER_WIDTH}
|
||||
closable={false}
|
||||
mask={true}
|
||||
maskClosable={true}
|
||||
styles={{
|
||||
body: { padding: 0, overflow: "hidden" },
|
||||
header: { display: "none" },
|
||||
}}
|
||||
>
|
||||
<DrawerHeader
|
||||
log={logEntry}
|
||||
onClose={onClose}
|
||||
onCopyRequestId={handleCopyRequestId}
|
||||
onPrevious={selectPreviousLog}
|
||||
onNext={selectNextLog}
|
||||
statusLabel={statusLabel}
|
||||
statusColor={statusColor}
|
||||
environment={environment}
|
||||
/>
|
||||
|
||||
<div style={{ height: "calc(100vh - 100px)", overflowY: "auto", padding: DRAWER_CONTENT_PADDING }}>
|
||||
{/* Error Alert - Show prominently at top for failures */}
|
||||
{hasError && errorInfo && (
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
message="Request Failed"
|
||||
description={<ErrorDescription errorInfo={errorInfo} />}
|
||||
style={{ marginBottom: SPACING_XLARGE }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Tags - Only show if present */}
|
||||
{logEntry.request_tags && Object.keys(logEntry.request_tags).length > 0 && (
|
||||
<TagsSection tags={logEntry.request_tags} />
|
||||
)}
|
||||
|
||||
{/* Request Details Section */}
|
||||
<Card title="Request Details" size="small" style={{ marginBottom: SPACING_XLARGE }}>
|
||||
<Descriptions column={2} size="small">
|
||||
<Descriptions.Item label="Model">{logEntry.model}</Descriptions.Item>
|
||||
<Descriptions.Item label="Provider">{logEntry.custom_llm_provider || "-"}</Descriptions.Item>
|
||||
<Descriptions.Item label="Call Type">{logEntry.call_type}</Descriptions.Item>
|
||||
<Descriptions.Item label="Model ID">
|
||||
<TruncatedValue value={logEntry.model_id} />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="API Base">
|
||||
<TruncatedValue value={logEntry.api_base} maxWidth={API_BASE_MAX_WIDTH} />
|
||||
</Descriptions.Item>
|
||||
{logEntry.requester_ip_address && (
|
||||
<Descriptions.Item label="IP Address">{logEntry.requester_ip_address}</Descriptions.Item>
|
||||
)}
|
||||
{hasGuardrailData && (
|
||||
<Descriptions.Item label="Guardrail">
|
||||
<GuardrailLabel label={primaryGuardrailLabel} maskedCount={totalMaskedEntities} />
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* Metrics Section */}
|
||||
<MetricsSection logEntry={logEntry} metadata={metadata} />
|
||||
|
||||
{/* Cost Breakdown - Show if cost breakdown data is available */}
|
||||
<CostBreakdownViewer costBreakdown={metadata?.cost_breakdown} totalSpend={logEntry.spend || 0} />
|
||||
|
||||
{/* Configuration Info Message - Show when data is missing */}
|
||||
<ConfigInfoMessage show={missingData} onOpenSettings={onOpenSettings} />
|
||||
|
||||
{/* Request/Response JSON - Using Tabs with View Toggle */}
|
||||
<RequestResponseSection
|
||||
activeTab={activeTab}
|
||||
jsonViewMode={jsonViewMode}
|
||||
hasResponse={hasResponse}
|
||||
onTabChange={setActiveTab}
|
||||
onViewModeChange={setJsonViewMode}
|
||||
onCopy={(data, label) => copyToClipboard(JSON.stringify(data, null, 2), label)}
|
||||
getRawRequest={getRawRequest}
|
||||
getFormattedResponse={getFormattedResponse}
|
||||
/>
|
||||
|
||||
{/* Guardrail Data - Show only if present */}
|
||||
{hasGuardrailData && (
|
||||
<div style={{ marginBottom: SPACING_XLARGE }}>
|
||||
<GuardrailViewer data={guardrailInfo} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Vector Store Request Data - Show only if present */}
|
||||
{hasVectorStoreData && (
|
||||
<div style={{ marginBottom: SPACING_XLARGE }}>
|
||||
<VectorStoreViewer data={metadata.vector_store_request_metadata} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata Card - Only show if there's metadata */}
|
||||
{logEntry.metadata && Object.keys(logEntry.metadata).length > 0 && (
|
||||
<MetadataSection metadata={logEntry.metadata} onCopy={(data) => copyToClipboard(data, "Metadata")} />
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Components
|
||||
// ============================================================================
|
||||
|
||||
function ErrorDescription({ errorInfo }: { errorInfo: any }) {
|
||||
return (
|
||||
<div>
|
||||
{errorInfo.error_code && (
|
||||
<div>
|
||||
<Text strong>Error Code:</Text> {errorInfo.error_code}
|
||||
</div>
|
||||
)}
|
||||
{errorInfo.error_message && (
|
||||
<div>
|
||||
<Text strong>Message:</Text> {errorInfo.error_message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TagsSection({ tags }: { tags: Record<string, any> }) {
|
||||
return (
|
||||
<div style={{ marginBottom: SPACING_XLARGE }}>
|
||||
<Text strong style={{ display: "block", marginBottom: 8 }}>
|
||||
Tags
|
||||
</Text>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
{Object.entries(tags).map(([key, value]) => (
|
||||
<Tag key={key}>
|
||||
{key}: {String(value)}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GuardrailLabel({ label, maskedCount }: { label: string; maskedCount: number }) {
|
||||
return (
|
||||
<>
|
||||
<span>{label}</span>
|
||||
{maskedCount > 0 && (
|
||||
<Tag color="blue" style={{ marginLeft: 8 }}>
|
||||
{maskedCount} masked
|
||||
</Tag>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricsSection({ logEntry, metadata }: { logEntry: LogEntry; metadata: Record<string, any> }) {
|
||||
const hasCacheActivity =
|
||||
logEntry.cache_hit ||
|
||||
(metadata?.additional_usage_values?.cache_read_input_tokens &&
|
||||
metadata.additional_usage_values.cache_read_input_tokens > 0);
|
||||
|
||||
return (
|
||||
<Card title="Metrics" size="small" style={{ marginBottom: SPACING_XLARGE }}>
|
||||
<Descriptions column={2} size="small">
|
||||
<Descriptions.Item label="Tokens">
|
||||
<TokenFlow
|
||||
prompt={logEntry.prompt_tokens}
|
||||
completion={logEntry.completion_tokens}
|
||||
total={logEntry.total_tokens}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Cost">${formatNumberWithCommas(logEntry.spend || 0, 8)}</Descriptions.Item>
|
||||
<Descriptions.Item label="Duration">{logEntry.duration?.toFixed(3)} s</Descriptions.Item>
|
||||
|
||||
{/* Only show cache fields if there's cache activity */}
|
||||
{hasCacheActivity && (
|
||||
<>
|
||||
<Descriptions.Item label="Cache Hit">
|
||||
<Tag color={logEntry.cache_hit ? "green" : "default"}>{logEntry.cache_hit || "None"}</Tag>
|
||||
</Descriptions.Item>
|
||||
{metadata?.additional_usage_values?.cache_read_input_tokens > 0 && (
|
||||
<Descriptions.Item label="Cache Read Tokens">
|
||||
{formatNumberWithCommas(metadata.additional_usage_values.cache_read_input_tokens)}
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
{metadata?.additional_usage_values?.cache_creation_input_tokens > 0 && (
|
||||
<Descriptions.Item label="Cache Creation Tokens">
|
||||
{formatNumberWithCommas(metadata.additional_usage_values.cache_creation_input_tokens)}
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{metadata?.litellm_overhead_time_ms !== undefined && (
|
||||
<Descriptions.Item label="LiteLLM Overhead">
|
||||
{metadata.litellm_overhead_time_ms.toFixed(2)} ms
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
|
||||
<Descriptions.Item label="Start Time">
|
||||
{moment(logEntry.startTime).format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="End Time">
|
||||
{moment(logEntry.endTime).format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface RequestResponseSectionProps {
|
||||
activeTab: typeof TAB_REQUEST | typeof TAB_RESPONSE;
|
||||
jsonViewMode: ViewMode;
|
||||
hasResponse: boolean;
|
||||
onTabChange: (key: typeof TAB_REQUEST | typeof TAB_RESPONSE) => void;
|
||||
onViewModeChange: (mode: ViewMode) => void;
|
||||
onCopy: (data: any, label: string) => void;
|
||||
getRawRequest: () => any;
|
||||
getFormattedResponse: () => any;
|
||||
}
|
||||
|
||||
function RequestResponseSection({
|
||||
activeTab,
|
||||
jsonViewMode,
|
||||
hasResponse,
|
||||
onTabChange,
|
||||
onViewModeChange,
|
||||
onCopy,
|
||||
getRawRequest,
|
||||
getFormattedResponse,
|
||||
}: RequestResponseSectionProps) {
|
||||
const handleCopy = () => {
|
||||
const data = activeTab === TAB_REQUEST ? getRawRequest() : getFormattedResponse();
|
||||
const label = activeTab === TAB_REQUEST ? "Request" : "Response";
|
||||
onCopy(data, label);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Request & Response"
|
||||
size="small"
|
||||
style={{ marginBottom: SPACING_XLARGE }}
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={(key) => onTabChange(key as typeof TAB_REQUEST | typeof TAB_RESPONSE)}
|
||||
tabBarExtraContent={
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, paddingRight: SPACING_XLARGE }}>
|
||||
{/* View Mode Toggle */}
|
||||
<Radio.Group size="small" value={jsonViewMode} onChange={(e) => onViewModeChange(e.target.value)}>
|
||||
<Radio.Button value={VIEW_MODE_FORMATTED}>Formatted</Radio.Button>
|
||||
<Radio.Button value="json">JSON</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
{/* Copy Button */}
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={handleCopy}
|
||||
disabled={activeTab === TAB_RESPONSE && !hasResponse}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
items={[
|
||||
{
|
||||
key: TAB_REQUEST,
|
||||
label: "Request",
|
||||
children: (
|
||||
<div style={{ padding: SPACING_XLARGE }}>
|
||||
<JsonViewer data={getRawRequest()} mode={jsonViewMode} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: TAB_RESPONSE,
|
||||
label: "Response",
|
||||
children: (
|
||||
<div style={{ padding: SPACING_XLARGE }}>
|
||||
{hasResponse ? (
|
||||
<JsonViewer data={getFormattedResponse()} mode={jsonViewMode} />
|
||||
) : (
|
||||
<div style={{ textAlign: "center", padding: 20, color: "#999", fontStyle: "italic" }}>
|
||||
Response data not available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
style={{ padding: `0 ${SPACING_XLARGE}px` }}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function MetadataSection({ metadata, onCopy }: { metadata: Record<string, any>; onCopy: (data: string) => void }) {
|
||||
return (
|
||||
<Card
|
||||
title="Metadata"
|
||||
size="small"
|
||||
style={{ marginBottom: SPACING_XLARGE }}
|
||||
extra={
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => onCopy(JSON.stringify(metadata, null, 2))}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<pre
|
||||
style={{
|
||||
maxHeight: METADATA_MAX_HEIGHT,
|
||||
overflowY: "auto",
|
||||
fontSize: FONT_SIZE_SMALL,
|
||||
fontFamily: FONT_FAMILY_MONO,
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(metadata, null, 2)}
|
||||
</pre>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
function formatData(input: any) {
|
||||
if (typeof input === "string") {
|
||||
try {
|
||||
return JSON.parse(input);
|
||||
} catch {
|
||||
return input;
|
||||
}
|
||||
}
|
||||
return input;
|
||||
}
|
||||
|
||||
function checkHasMessages(messages: any): boolean {
|
||||
if (!messages) return false;
|
||||
if (Array.isArray(messages)) return messages.length > 0;
|
||||
if (typeof messages === "object") return Object.keys(messages).length > 0;
|
||||
return false;
|
||||
}
|
||||
|
||||
function checkHasResponse(response: any): boolean {
|
||||
if (!response) return false;
|
||||
return Object.keys(formatData(response)).length > 0;
|
||||
}
|
||||
|
||||
function normalizeGuardrailEntries(guardrailInfo: any): any[] {
|
||||
if (Array.isArray(guardrailInfo)) return guardrailInfo;
|
||||
if (guardrailInfo) return [guardrailInfo];
|
||||
return [];
|
||||
}
|
||||
|
||||
function calculateTotalMaskedEntities(entries: any[]): number {
|
||||
return entries.reduce((sum, entry) => {
|
||||
const maskedCounts = entry?.masked_entity_count;
|
||||
if (!maskedCounts) return sum;
|
||||
return (
|
||||
sum +
|
||||
Object.values(maskedCounts).reduce<number>((acc, count) => (typeof count === "number" ? acc + count : acc), 0)
|
||||
);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function getGuardrailLabel(entries: any[]): string {
|
||||
if (entries.length === 0) return "-";
|
||||
if (entries.length === 1) return entries[0]?.guardrail_name ?? "-";
|
||||
return `${entries.length} guardrails`;
|
||||
}
|
||||
|
||||
function checkHasVectorStoreData(metadata: Record<string, any>): boolean {
|
||||
return (
|
||||
metadata.vector_store_request_metadata &&
|
||||
Array.isArray(metadata.vector_store_request_metadata) &&
|
||||
metadata.vector_store_request_metadata.length > 0
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { Typography } from "antd";
|
||||
import { COLOR_SECONDARY, FONT_FAMILY_MONO, FONT_SIZE_MEDIUM, SPACING_SMALL, SPACING_MEDIUM } from "./constants";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface TokenFlowProps {
|
||||
prompt?: number;
|
||||
completion?: number;
|
||||
total?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays token usage in a flow format: "prompt → completion (Σ total)"
|
||||
* Makes it easy to see the relationship between input, output, and total tokens.
|
||||
*/
|
||||
export function TokenFlow({ prompt = 0, completion = 0, total = 0 }: TokenFlowProps) {
|
||||
return (
|
||||
<Text style={{ fontFamily: FONT_FAMILY_MONO, fontSize: FONT_SIZE_MEDIUM }}>
|
||||
{prompt.toLocaleString()}
|
||||
<span style={{ color: COLOR_SECONDARY, margin: `0 ${SPACING_SMALL}px` }}>→</span>
|
||||
{completion.toLocaleString()}
|
||||
<span style={{ color: COLOR_SECONDARY, marginLeft: SPACING_MEDIUM }}>
|
||||
(Σ {total.toLocaleString()})
|
||||
</span>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Typography, Tooltip } from "antd";
|
||||
import { DEFAULT_MAX_WIDTH, FONT_FAMILY_MONO, FONT_SIZE_SMALL } from "./constants";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface TruncatedValueProps {
|
||||
value?: string;
|
||||
maxWidth?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a truncated value with tooltip and copy functionality.
|
||||
* Useful for displaying long IDs, URLs, or other text that may overflow.
|
||||
*/
|
||||
export function TruncatedValue({ value, maxWidth = DEFAULT_MAX_WIDTH }: TruncatedValueProps) {
|
||||
if (!value) return <Text type="secondary">-</Text>;
|
||||
|
||||
return (
|
||||
<Tooltip title={value}>
|
||||
<Text
|
||||
copyable={{ text: value, tooltips: ["Copy", "Copied!"] }}
|
||||
style={{
|
||||
maxWidth,
|
||||
display: "inline-block",
|
||||
verticalAlign: "bottom",
|
||||
fontFamily: FONT_FAMILY_MONO,
|
||||
fontSize: FONT_SIZE_SMALL,
|
||||
}}
|
||||
ellipsis
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { message } from "antd";
|
||||
import { MESSAGE_COPY_SUCCESS } from "./constants";
|
||||
|
||||
/**
|
||||
* Copies text to clipboard with fallback for non-secure contexts.
|
||||
* Shows success/error message to user.
|
||||
*
|
||||
* @param text - Text to copy to clipboard
|
||||
* @param label - Label for the copied content (e.g., "Request", "Metadata")
|
||||
* @returns Promise<boolean> - true if copy succeeded, false otherwise
|
||||
*/
|
||||
export async function copyToClipboard(text: string, label: string): Promise<boolean> {
|
||||
try {
|
||||
// Try modern clipboard API first
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
message.success(`${label} ${MESSAGE_COPY_SUCCESS}`);
|
||||
return true;
|
||||
} else {
|
||||
// Fallback for non-secure contexts (like 0.0.0.0)
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.opacity = "0";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
const successful = document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
if (!successful) {
|
||||
throw new Error("execCommand failed");
|
||||
}
|
||||
message.success(`${label} ${MESSAGE_COPY_SUCCESS}`);
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Copy failed:", error);
|
||||
message.error(`Failed to copy ${label}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// Drawer configuration constants
|
||||
export const DRAWER_WIDTH = "60%";
|
||||
export const DRAWER_HEADER_PADDING = "16px 24px";
|
||||
export const DRAWER_CONTENT_PADDING = "24px";
|
||||
|
||||
// Truncation and display limits
|
||||
export const DEFAULT_MAX_WIDTH = 180;
|
||||
export const API_BASE_MAX_WIDTH = 200;
|
||||
export const JSON_MAX_HEIGHT = 400;
|
||||
export const METADATA_MAX_HEIGHT = 300;
|
||||
|
||||
// Tab keys
|
||||
export const TAB_REQUEST = "request" as const;
|
||||
export const TAB_RESPONSE = "response" as const;
|
||||
|
||||
// View modes
|
||||
export const VIEW_MODE_FORMATTED = "formatted" as const;
|
||||
export const VIEW_MODE_JSON = "json" as const;
|
||||
|
||||
// Keyboard shortcuts
|
||||
export const KEY_ESCAPE = "Escape";
|
||||
export const KEY_J_LOWER = "j";
|
||||
export const KEY_J_UPPER = "J";
|
||||
export const KEY_K_LOWER = "k";
|
||||
export const KEY_K_UPPER = "K";
|
||||
|
||||
// Typography
|
||||
export const FONT_FAMILY_MONO = "monospace";
|
||||
export const FONT_SIZE_SMALL = 12;
|
||||
export const FONT_SIZE_MEDIUM = 13;
|
||||
export const FONT_SIZE_HEADER = 16;
|
||||
|
||||
// Colors
|
||||
export const COLOR_BORDER = "#f0f0f0";
|
||||
export const COLOR_BACKGROUND = "#fff";
|
||||
export const COLOR_SECONDARY = "#8c8c8c";
|
||||
export const COLOR_BG_LIGHT = "#fafafa";
|
||||
|
||||
// Spacing
|
||||
export const SPACING_SMALL = 4;
|
||||
export const SPACING_MEDIUM = 8;
|
||||
export const SPACING_LARGE = 12;
|
||||
export const SPACING_XLARGE = 16;
|
||||
export const SPACING_XXLARGE = 24;
|
||||
|
||||
// Messages
|
||||
export const MESSAGE_COPY_SUCCESS = "copied to clipboard";
|
||||
export const MESSAGE_REQUEST_ID_COPIED = "Request ID copied to clipboard";
|
||||
@@ -0,0 +1,2 @@
|
||||
export { LogDetailsDrawer } from "./LogDetailsDrawer";
|
||||
export type { LogDetailsDrawerProps } from "./LogDetailsDrawer";
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
import { useEffect } from "react";
|
||||
import { LogEntry } from "../columns";
|
||||
import { KEY_ESCAPE, KEY_J_LOWER, KEY_J_UPPER, KEY_K_LOWER, KEY_K_UPPER } from "./constants";
|
||||
|
||||
interface UseKeyboardNavigationProps {
|
||||
isOpen: boolean;
|
||||
currentLog: LogEntry | null;
|
||||
allLogs: LogEntry[];
|
||||
onClose: () => void;
|
||||
onSelectLog?: (log: LogEntry) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook for keyboard navigation in the log details drawer.
|
||||
* Handles J/K for next/previous and Escape for close.
|
||||
*
|
||||
* Keyboard shortcuts:
|
||||
* - J: Navigate to next log
|
||||
* - K: Navigate to previous log
|
||||
* - Escape: Close drawer
|
||||
*/
|
||||
export function useKeyboardNavigation({
|
||||
isOpen,
|
||||
currentLog,
|
||||
allLogs,
|
||||
onClose,
|
||||
onSelectLog,
|
||||
}: UseKeyboardNavigationProps) {
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Don't trigger if user is typing in an input
|
||||
if (isUserTyping(e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isOpen) return;
|
||||
|
||||
switch (e.key) {
|
||||
case KEY_ESCAPE:
|
||||
onClose();
|
||||
break;
|
||||
case KEY_J_LOWER:
|
||||
case KEY_J_UPPER:
|
||||
selectNextLog();
|
||||
break;
|
||||
case KEY_K_LOWER:
|
||||
case KEY_K_UPPER:
|
||||
selectPreviousLog();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [isOpen, currentLog, allLogs]);
|
||||
|
||||
const selectNextLog = () => {
|
||||
if (!currentLog || !allLogs.length || !onSelectLog) return;
|
||||
|
||||
const currentIndex = allLogs.findIndex((l) => l.request_id === currentLog.request_id);
|
||||
if (currentIndex < allLogs.length - 1) {
|
||||
onSelectLog(allLogs[currentIndex + 1]);
|
||||
}
|
||||
};
|
||||
|
||||
const selectPreviousLog = () => {
|
||||
if (!currentLog || !allLogs.length || !onSelectLog) return;
|
||||
|
||||
const currentIndex = allLogs.findIndex((l) => l.request_id === currentLog.request_id);
|
||||
if (currentIndex > 0) {
|
||||
onSelectLog(allLogs[currentIndex - 1]);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
selectNextLog,
|
||||
selectPreviousLog,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the user is currently typing in an input field.
|
||||
* Used to prevent keyboard shortcuts from interfering with text input.
|
||||
*/
|
||||
function isUserTyping(target: EventTarget | null): boolean {
|
||||
return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
|
||||
}
|
||||
@@ -368,6 +368,10 @@ export default function SpendLogsTable({
|
||||
// Optionally keep selectedLog for animation purposes
|
||||
};
|
||||
|
||||
const handleSelectLog = (log: LogEntry) => {
|
||||
setSelectedLog(log);
|
||||
};
|
||||
|
||||
// Function to extract unique error codes from logs
|
||||
const extractErrorCodes = (logs: LogEntry[], searchText: string = "") => {
|
||||
const errorCodes = new Set<string>();
|
||||
@@ -776,6 +780,8 @@ export default function SpendLogsTable({
|
||||
onClose={handleCloseDrawer}
|
||||
logEntry={selectedLog}
|
||||
onOpenSettings={() => setIsSpendLogsSettingsModalVisible(true)}
|
||||
allLogs={filteredData}
|
||||
onSelectLog={handleSelectLog}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user