diff --git a/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx b/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx index 72133a2ff9b..d1353037582 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx @@ -4,7 +4,7 @@ import { SyncOutlined } from "@ant-design/icons"; import { Button, Switch } from "antd"; import { QUICK_SELECT_OPTIONS } from "./constants"; import { getTimeRangeDisplay } from "./logs_utils"; -import type { PaginatedResponse } from "."; +import type { PaginatedResponse } from "./log_filter_logic"; interface LogsTableToolbarProps { searchTerm: string; @@ -15,8 +15,6 @@ interface LogsTableToolbarProps { onEndTimeChange: (value: string) => void; isCustomDate: boolean; onIsCustomDateChange: (value: boolean) => void; - selectedTimeInterval: { value: number; unit: string }; - onSelectedTimeIntervalChange: (value: { value: number; unit: string }) => void; isLiveTail: boolean; onIsLiveTailChange: (value: boolean) => void; currentPage: number; @@ -37,8 +35,6 @@ export function LogsTableToolbar({ onEndTimeChange, isCustomDate, onIsCustomDateChange, - selectedTimeInterval, - onSelectedTimeIntervalChange, isLiveTail, onIsLiveTailChange, currentPage, @@ -50,6 +46,7 @@ export function LogsTableToolbar({ filteredLogs, }: LogsTableToolbarProps) { const [quickSelectOpen, setQuickSelectOpen] = useState(false); + const [selectedTimeInterval, setSelectedTimeInterval] = useState<{ value: number; unit: string }>({ value: 24, unit: "hours" }); const quickSelectRef = useRef(null); useEffect(() => { @@ -127,7 +124,7 @@ export function LogsTableToolbar({ .subtract(option.value, option.unit as any) .format("YYYY-MM-DDTHH:mm"), ); - onSelectedTimeIntervalChange({ value: option.value, unit: option.unit }); + setSelectedTimeInterval({ value: option.value, unit: option.unit }); onIsCustomDateChange(false); setQuickSelectOpen(false); }} diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx index 1777827a154..e0d327a2335 100644 --- a/ui/litellm-dashboard/src/components/view_logs/index.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx @@ -1,5 +1,5 @@ import moment from "moment"; -import { useCallback, useDeferredValue, useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { SettingOutlined } from "@ant-design/icons"; import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react"; import { Button } from "antd"; @@ -28,14 +28,6 @@ interface SpendLogsTableProps { premiumUser: boolean; } -export interface PaginatedResponse { - data: LogEntry[]; - total: number; - page: number; - page_size: number; - total_pages: number; -} - export default function SpendLogsTable({ accessToken, token, @@ -77,10 +69,6 @@ export default function SpendLogsTable({ sessionStorage.setItem("isLiveTail", JSON.stringify(isLiveTail)); }, [isLiveTail]); - const [selectedTimeInterval, setSelectedTimeInterval] = useState<{ value: number; unit: string }>({ - value: 24, - unit: "hours", - }); useEffect(() => { const fetchKeyInfo = async () => { @@ -131,19 +119,11 @@ export default function SpendLogsTable({ currentPage, }); - // Defer the transition from "Fetching" to "Fetch" so the button stays loading until - // the table has rendered with the new data (avoids the visual gap where the button - // exits loading state before the table updates) - const isFetchingDeferred = useDeferredValue(logsQuery.isFetching); - const isButtonLoading = logsQuery.isFetching || isFetchingDeferred; - const handleFilterReset = useCallback(() => { handleFilterResetFromHook(); - // Reset custom time range to default (last 24 hours) setStartTime(moment().subtract(24, "hours").format("YYYY-MM-DDTHH:mm")); setEndTime(moment().format("YYYY-MM-DDTHH:mm")); setIsCustomDate(false); - setSelectedTimeInterval({ value: 24, unit: "hours" }); setCurrentPage(1); }, [handleFilterResetFromHook]); @@ -279,15 +259,13 @@ export default function SpendLogsTable({ onEndTimeChange={setEndTime} isCustomDate={isCustomDate} onIsCustomDateChange={setIsCustomDate} - selectedTimeInterval={selectedTimeInterval} - onSelectedTimeIntervalChange={setSelectedTimeInterval} isLiveTail={isLiveTail} onIsLiveTailChange={setIsLiveTail} currentPage={currentPage} onCurrentPageChange={setCurrentPage} pageSize={pageSize} isLoading={logsQuery.isLoading} - isButtonLoading={isButtonLoading} + isButtonLoading={logsQuery.isFetching} onRefetch={() => logsQuery.refetch()} filteredLogs={filteredLogs} /> diff --git a/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx b/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx index 04b8d409056..147c00a8994 100644 --- a/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx @@ -5,8 +5,15 @@ import { Team } from "../key_team_helpers/key_list"; import { keepPreviousData, useQuery } from "@tanstack/react-query"; import { fetchAllTeams } from "../../components/key_team_helpers/filter_helpers"; import { defaultPageSize } from "../constants"; -import { PaginatedResponse } from "."; -import type { LogsSortField } from "./columns"; +import type { LogEntry, LogsSortField } from "./columns"; + +export interface PaginatedResponse { + data: LogEntry[]; + total: number; + page: number; + page_size: number; + total_pages: number; +} function useDebouncedValue(value: T, delayMs: number): T { const [debounced, setDebounced] = useState(value);