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

fix(ui): sync date picker preset with the current usage range

Browse source 
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
jesus 2026-09-27 08:06:59 +00:00
parent d9bc1a3a18
commit 129c909f65
3 changed files with 58 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
View file

@ -493,7 +493,11 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
isOrgAdmin={isOrgAdmin}
/>
<div className="flex items-center gap-2">
<AdvancedDatePicker value={dateValue} onValueChange={handleDateChange} />
<AdvancedDatePicker
value={dateValue}
onValueChange={handleDateChange}
presetShortLabel={urlParams.range}
/>
<Button variant="outline" onClick={() => void copyToClipboard(window.location.href, "Link copied")}>
<Link2 />
Copy Share Link

48
ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
View file

@ -195,6 +195,54 @@ describe("AdvancedDatePicker", () => {
});
});
it("resets the preset label when the parent switches to a custom range", async () => {
const { container, rerender } = render(
<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />,
);
openDropdown(container);
fireEvent.click(screen.getByText("Today"));
fireEvent.click(screen.getByRole("button", { name: "Apply" }));
expect(mockOnValueChange).toHaveBeenNthCalledWith(1, expect.anything(), "today");
await waitFor(() => {
expect(mockOnValueChange).toHaveBeenNthCalledWith(2, expect.anything(), "today");
});
mockOnValueChange.mockClear();
const customValue = {
from: new Date("2025-02-01T00:00:00.000Z"),
to: new Date("2025-02-10T23:59:59.999Z"),
};
rerender(<AdvancedDatePicker value={customValue} onValueChange={mockOnValueChange} presetShortLabel={null} />);
openDropdown(container);
fireEvent.click(screen.getByRole("button", { name: "Apply" }));
expect(mockOnValueChange).toHaveBeenNthCalledWith(1, expect.anything(), null);
await waitFor(() => {
expect(mockOnValueChange).toHaveBeenNthCalledWith(2, expect.anything(), null);
});
});
it("preserves the parent preset label when applying an unchanged range", async () => {
const value = {
from: moment().subtract(30, "days").startOf("day").toDate(),
to: moment().endOf("day").toDate(),
};
const { container } = render(
<AdvancedDatePicker value={value} onValueChange={mockOnValueChange} presetShortLabel="30d" />,
);
openDropdown(container);
fireEvent.click(screen.getByRole("button", { name: "Apply" }));
expect(mockOnValueChange).toHaveBeenNthCalledWith(1, expect.anything(), "30d");
await waitFor(() => {
expect(mockOnValueChange).toHaveBeenNthCalledWith(2, expect.anything(), "30d");
});
});
it("should select relative time option", () => {
const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);

7
ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
View file

@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
interface AdvancedDatePickerProps {
value: DateRangePickerValue;
onValueChange: (value: DateRangePickerValue, presetShortLabel: string | null) => void;
presetShortLabel?: string | null;
label?: string;
className?: string;
showTimeRange?: boolean;
@ -78,6 +79,7 @@ export function matchRelativeTimeOption(value: DateRangePickerValue): RelativeTi
const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
value,
onValueChange,
presetShortLabel = null,
label = "Select Time Range",
className,
showTimeRange = true,
@ -136,7 +138,8 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
setEndDate(moment(value.to).format("YYYY-MM-DD"));
}
setTempValue(value);
}, [value]);
setPickedPreset(presetShortLabel ?? null);
}, [value, presetShortLabel]);
// Close dropdown when clicking outside
useEffect(() => {
@ -270,7 +273,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
// Reset selected option
const matchingOption = getMatchingOption(value);
setSelectedOption(matchingOption);
setPickedPreset(null);
setPickedPreset(presetShortLabel ?? null);
setIsOpen(false);
};