scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-06 02:48:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

feat(ui): add agent traces view to the Logs page

Browse source
This commit is contained in:
Ishaan Jaff 2026-09-30 00:40:11 -07:00
parent 69ed633ac4
commit 18dabb6314
No known key found for this signature in database
1 changed files with 58 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.tsx
View file

@ -25,6 +25,7 @@ import { useLogDetailRouting } from "./logDetailRouting";
import { LogDetailsDrawer } from "./LogDetailsDrawer";
import { LiveTailBanner, LogsTableToolbar } from "./LogsTableToolbar";
import { RequestLogsTable } from "./RequestLogsTable";
import { AgentTracesSection, LogsViewSwitch, type LogsView } from "./TraceView/AgentTracesSection";
const PAGE_SIZE = DEFAULT_PAGE_SIZE_OPTIONS[0];
const DEFAULT_INTERVAL = { value: 24, unit: "hours" };
@ -53,6 +54,7 @@ export default function RequestLogsPanel({ accessToken, token, userRole, userID,
const [selectedKeyIdInfoView, setSelectedKeyIdInfoView] = useState<string | null>(null);
const [selectedLog, setSelectedLog] = useState<LogEntry | null>(null);
const [logsView, setLogsView] = useState<LogsView>("all");
const {
logId: urlLogId,
@ -96,7 +98,7 @@ export default function RequestLogsPanel({ accessToken, token, userRole, userID,
userRole,
userID,
columnFilters: queryColumnFilters,
activeTab: isActive ? "request logs" : "inactive",
activeTab: isActive && logsView !== "traces" ? "request logs" : "inactive",
isLiveTail,
excludeInternalHealthChecks,
startTime,
@ -286,53 +288,71 @@ export default function RequestLogsPanel({ accessToken, token, userRole, userID,
);
}
const logsToolbar = (
<LogsTableToolbar
startTime={startTime}
onStartTimeChange={setStartTime}
endTime={endTime}
onEndTimeChange={setEndTime}
isCustomDate={isCustomDate}
onIsCustomDateChange={setIsCustomDate}
selectedTimeInterval={selectedTimeInterval}
onSelectedTimeIntervalChange={setSelectedTimeInterval}
isLiveTail={isLiveTail}
onIsLiveTailChange={setIsLiveTail}
excludeInternalHealthChecks={excludeInternalHealthChecks}
onExcludeInternalHealthChecksChange={handleExcludeInternalHealthChecksChange}
onResetToFirstPage={resetToFirstPage}
onResetFilters={handleResetFilters}
/>
);
return (
<AutoRouterModelGroupsProvider>
<div className="flex items-center justify-between mb-4">
<h1 className="text-xl font-semibold">Request Logs</h1>
<LogsViewSwitch value={logsView} onChange={setLogsView} />
</div>
{isLiveTail && pagination.pageIndex === 0 && <LiveTailBanner onStop={() => setIsLiveTail(false)} />}
<RequestLogsTable
data={rows}
rowCount={rowCount}
isLoading={logsQuery.isLoading}
isRefreshing={logsQuery.isFetching}
pagination={pagination}
onPaginationChange={handlePaginationChange}
sorting={sorting}
onSortingChange={handleSortingChange}
columnFilters={columnFilters}
onColumnFiltersChange={handleColumnFiltersChange}
searchValue={searchTerm}
onSearchChange={handleSearchChange}
onRefresh={() => void logsQuery.refetch()}
onRowClick={handleRowClick}
onKeyHashClick={handleKeyHashClick}
onSessionClick={handleSessionClick}
teams={allTeams ?? []}
logsWindow={logsWindow}
toolbarChildren={
<LogsTableToolbar
startTime={startTime}
onStartTimeChange={setStartTime}
endTime={endTime}
onEndTimeChange={setEndTime}
isCustomDate={isCustomDate}
onIsCustomDateChange={setIsCustomDate}
selectedTimeInterval={selectedTimeInterval}
onSelectedTimeIntervalChange={setSelectedTimeInterval}
isLiveTail={isLiveTail}
onIsLiveTailChange={setIsLiveTail}
excludeInternalHealthChecks={excludeInternalHealthChecks}
onExcludeInternalHealthChecksChange={handleExcludeInternalHealthChecksChange}
onResetToFirstPage={resetToFirstPage}
onResetFilters={handleResetFilters}
/>
}
{logsView === "traces" && <div className="mb-3">{logsToolbar}</div>}
<AgentTracesSection
view={logsView}
accessToken={accessToken}
isActive={isActive}
startTime={startTime}
endTime={endTime}
isCustomDate={isCustomDate}
isLiveTail={isLiveTail}
onOpenRequestLog={openLog}
/>
{logsView !== "traces" && (
<RequestLogsTable
data={rows}
rowCount={rowCount}
isLoading={logsQuery.isLoading}
isRefreshing={logsQuery.isFetching}
pagination={pagination}
onPaginationChange={handlePaginationChange}
sorting={sorting}
onSortingChange={handleSortingChange}
columnFilters={columnFilters}
onColumnFiltersChange={handleColumnFiltersChange}
searchValue={searchTerm}
onSearchChange={handleSearchChange}
onRefresh={() => void logsQuery.refetch()}
onRowClick={handleRowClick}
onKeyHashClick={handleKeyHashClick}
onSessionClick={handleSessionClick}
teams={allTeams ?? []}
logsWindow={logsWindow}
toolbarChildren={logsToolbar}
/>
)}
<LogDetailsDrawer
open={isDrawerOpen}
onClose={closeUrlLog}