@@ -83,17 +92,26 @@ const PresidioDetectedEntities = ({ entities }: PresidioDetectedEntitiesProps) =
- Entity Type:
+
+ {t("viewLogs.presidioDetectedEntities.entityTypeLabel")}
+
{entity.entity_type}
- Position:
+
+ {t("viewLogs.presidioDetectedEntities.positionLabel")}
+
- Characters {entity.start}-{entity.end}
+ {t("viewLogs.presidioDetectedEntities.characters", {
+ start: entity.start,
+ end: entity.end,
+ })}
- Confidence:
+
+ {t("viewLogs.presidioDetectedEntities.confidenceLabel")}
+
{entity.score.toFixed(2)}
@@ -102,11 +120,15 @@ const PresidioDetectedEntities = ({ entities }: PresidioDetectedEntitiesProps) =
{entity.recognition_metadata && (
<>
- Recognizer:
+
+ {t("viewLogs.presidioDetectedEntities.recognizerLabel")}
+
{entity.recognition_metadata.recognizer_name}
-
Identifier:
+
+ {t("viewLogs.presidioDetectedEntities.identifierLabel")}
+
{entity.recognition_metadata.recognizer_identifier}
@@ -115,7 +137,9 @@ const PresidioDetectedEntities = ({ entities }: PresidioDetectedEntitiesProps) =
)}
{entity.analysis_explanation && (
- Explanation:
+
+ {t("viewLogs.presidioDetectedEntities.explanationLabel")}
+
{entity.analysis_explanation}
)}
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.tsx
index 9aa13c3832a..fa2822820b8 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.tsx
@@ -6,6 +6,7 @@
import { useState } from "react";
import { Typography } from "antd";
import { DownOutlined, RightOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
const { Text } = Typography;
@@ -16,6 +17,7 @@ interface CollapsibleMessageProps {
}
export function CollapsibleMessage({ label, content, defaultExpanded = false }: CollapsibleMessageProps) {
+ const { t } = useTranslation();
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
const [isHovered, setIsHovered] = useState(false);
const charCount = content?.length || 0;
@@ -52,7 +54,7 @@ export function CollapsibleMessage({ label, content, defaultExpanded = false }:
{label}
- ({charCount.toLocaleString()} chars)
+ {t("viewLogs.collapsibleMessage.charCount", { count: charCount.toLocaleString() })}
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/DrawerHeader.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/DrawerHeader.tsx
index 8c0b679a846..4a1d2471471 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/DrawerHeader.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/DrawerHeader.tsx
@@ -1,6 +1,7 @@
import { Button, Space, Tag, Tooltip, Typography } from "antd";
import { CloseOutlined, UpOutlined, DownOutlined } from "@ant-design/icons";
import moment from "moment";
+import { useTranslation } from "react-i18next";
import { LogEntry } from "../columns";
import { getProviderLogoAndName } from "../../provider_info_helpers";
import {
@@ -40,6 +41,7 @@ export function DrawerHeader({
statusColor,
environment,
}: DrawerHeaderProps) {
+ const { t } = useTranslation();
const provider = log.custom_llm_provider || "";
const providerInfo = provider ? getProviderLogoAndName(provider) : null;
@@ -87,12 +89,13 @@ function ModelProviderSection({
providerLogo?: string;
providerName?: string;
}) {
+ const { t } = useTranslation();
return (
{providerLogo && (
{
const target = e.target as HTMLImageElement;
@@ -118,12 +121,16 @@ function ModelProviderSection({
* Request ID display with copy functionality
*/
function RequestIdSection({ requestId }: { requestId: string }) {
+ const { t } = useTranslation();
return (
void;
onClose: () => void;
}) {
+ const { t } = useTranslation();
const keyboardShortcutStyle = {
border: "1px solid #d9d9d9",
borderRadius: 4,
@@ -173,7 +181,7 @@ function NavigationSection({
J
-
+
} onClick={onClose} />
@@ -194,10 +202,11 @@ function StatusBar({
statusColor: "error" | "success";
environment: string;
}) {
+ const { t } = useTranslation();
return (
{statusLabel}
- Env: {environment}
+ {t("viewLogs.drawerHeader.envTag", { env: environment })}
{moment(log.startTime).format("MMM D, YYYY h:mm:ss A")}
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.tsx
index b6c5048513c..26e1bb513d4 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.tsx
@@ -6,6 +6,7 @@
import { useState } from "react";
import { Typography } from "antd";
import { DownOutlined, RightOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
import { ParsedMessage } from "./prettyMessagesTypes";
import { SimpleMessageBlock } from "./SimpleMessageBlock";
@@ -16,6 +17,7 @@ interface HistoryTreeProps {
}
export function HistoryTree({ messages }: HistoryTreeProps) {
+ const { t } = useTranslation();
const [isExpanded, setIsExpanded] = useState(false);
const [isHovered, setIsHovered] = useState(false);
@@ -48,7 +50,7 @@ export function HistoryTree({ messages }: HistoryTreeProps) {
)}
- HISTORY ({messages.length} message{messages.length !== 1 ? "s" : ""})
+ {t("viewLogs.historyTree.history_other", { count: messages.length })}
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
index 6463abf89d4..2ffb3f7df97 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
@@ -1,6 +1,7 @@
import { Typography } from "antd";
import { JsonView, defaultStyles } from "react-json-view-lite";
import "react-json-view-lite/dist/index.css";
+import { useTranslation } from "react-i18next";
import { JSON_MAX_HEIGHT, COLOR_BG_LIGHT, SPACING_LARGE } from "./constants";
const { Text } = Typography;
@@ -15,7 +16,8 @@ interface JsonViewerProps {
* Uses an interactive tree component for easy navigation.
*/
export function JsonViewer({ data }: JsonViewerProps) {
- if (!data) return No data;
+ const { t } = useTranslation();
+ if (!data) return {t("common.noData")};
return (