mirror of
https://github.com/BerriAI/litellm.git
synced 2025-04-25 18:54:30 +00:00
(beta ui - spend logs view fixes & Improvements 1) (#8062)
* ui 1 - show correct msg on no logs * fix dup country col * backend - allow filtering by team_id and api_key * fix ui_view_spend_logs * ui update query params * working team id and key hash filters * fix filter ref - don't hold on them as they are * fix _model_custom_llm_provider_matches_wildcard_pattern * fix test test_stream_chunk_builder_openai_audio_output_usage - use direct dict comparison
This commit is contained in:
Ishaan Jaff
GitHub
parent
311997ee40
commit
ae7b042bc2
6 changed files with 246 additions and 181 deletions
|
|
@ -1627,7 +1627,19 @@ async def ui_view_spend_logs( # noqa: PLR0915
|
|||
),
|
||||
request_id: Optional[str] = fastapi.Query(
|
||||
default=None,
|
||||
description="request_id to get spend logs for specific request_id. If none passed then pass spend logs for all requests",
|
||||
description="request_id to get spend logs for specific request_id",
|
||||
),
|
||||
team_id: Optional[str] = fastapi.Query(
|
||||
default=None,
|
||||
description="Filter spend logs by team_id",
|
||||
),
|
||||
min_spend: Optional[float] = fastapi.Query(
|
||||
default=None,
|
||||
description="Filter logs with spend greater than or equal to this value",
|
||||
),
|
||||
max_spend: Optional[float] = fastapi.Query(
|
||||
default=None,
|
||||
description="Filter logs with spend less than or equal to this value",
|
||||
),
|
||||
start_date: Optional[str] = fastapi.Query(
|
||||
default=None,
|
||||
|
|
@ -1674,46 +1686,70 @@ async def ui_view_spend_logs( # noqa: PLR0915
|
|||
param="None",
|
||||
code=status.HTTP_400_BAD_REQUEST,
|
||||
)
|
||||
# Convert the date strings to datetime objects
|
||||
start_date_obj = datetime.strptime(start_date, "%Y-%m-%d %H:%M:%S")
|
||||
end_date_obj = datetime.strptime(end_date, "%Y-%m-%d %H:%M:%S")
|
||||
|
||||
# Convert to ISO format strings for Prisma
|
||||
start_date_iso = start_date_obj.isoformat() + "Z" # Add Z to indicate UTC
|
||||
end_date_iso = end_date_obj.isoformat() + "Z" # Add Z to indicate UTC
|
||||
try:
|
||||
# Convert the date strings to datetime objects
|
||||
start_date_obj = datetime.strptime(start_date, "%Y-%m-%d %H:%M:%S")
|
||||
end_date_obj = datetime.strptime(end_date, "%Y-%m-%d %H:%M:%S")
|
||||
|
||||
# Calculate skip value for pagination
|
||||
skip = (page - 1) * page_size
|
||||
# Convert to ISO format strings for Prisma
|
||||
start_date_iso = start_date_obj.isoformat() + "Z" # Add Z to indicate UTC
|
||||
end_date_iso = end_date_obj.isoformat() + "Z" # Add Z to indicate UTC
|
||||
|
||||
# Get total count of records
|
||||
total_records = await prisma_client.db.litellm_spendlogs.count(
|
||||
where={
|
||||
# Build where conditions
|
||||
where_conditions: dict[str, Any] = {
|
||||
"startTime": {"gte": start_date_iso, "lte": end_date_iso},
|
||||
}
|
||||
)
|
||||
|
||||
# Get paginated data
|
||||
data = await prisma_client.db.litellm_spendlogs.find_many(
|
||||
where={
|
||||
"startTime": {"gte": start_date_iso, "lte": end_date_iso},
|
||||
},
|
||||
order={
|
||||
"startTime": "desc",
|
||||
},
|
||||
skip=skip,
|
||||
take=page_size,
|
||||
)
|
||||
if team_id is not None:
|
||||
where_conditions["team_id"] = team_id
|
||||
|
||||
# Calculate total pages
|
||||
total_pages = (total_records + page_size - 1) // page_size
|
||||
if api_key is not None:
|
||||
where_conditions["api_key"] = api_key
|
||||
|
||||
return {
|
||||
"data": data,
|
||||
"total": total_records,
|
||||
"page": page,
|
||||
"page_size": page_size,
|
||||
"total_pages": total_pages,
|
||||
}
|
||||
if user_id is not None:
|
||||
where_conditions["user"] = user_id
|
||||
|
||||
if request_id is not None:
|
||||
where_conditions["request_id"] = request_id
|
||||
|
||||
if min_spend is not None or max_spend is not None:
|
||||
where_conditions["spend"] = {}
|
||||
if min_spend is not None:
|
||||
where_conditions["spend"]["gte"] = min_spend
|
||||
if max_spend is not None:
|
||||
where_conditions["spend"]["lte"] = max_spend
|
||||
# Calculate skip value for pagination
|
||||
skip = (page - 1) * page_size
|
||||
|
||||
# Get total count of records
|
||||
total_records = await prisma_client.db.litellm_spendlogs.count(
|
||||
where=where_conditions,
|
||||
)
|
||||
|
||||
# Get paginated data
|
||||
data = await prisma_client.db.litellm_spendlogs.find_many(
|
||||
where=where_conditions,
|
||||
order={
|
||||
"startTime": "desc",
|
||||
},
|
||||
skip=skip,
|
||||
take=page_size,
|
||||
)
|
||||
|
||||
# Calculate total pages
|
||||
total_pages = (total_records + page_size - 1) // page_size
|
||||
|
||||
return {
|
||||
"data": data,
|
||||
"total": total_records,
|
||||
"page": page,
|
||||
"page_size": page_size,
|
||||
"total_pages": total_pages,
|
||||
}
|
||||
except Exception as e:
|
||||
verbose_proxy_logger.exception(f"Error in ui_view_spend_logs: {e}")
|
||||
raise handle_exception_on_proxy(e)
|
||||
|
||||
|
||||
@router.get(
|
||||
|
|
|
|||
|
|
@ -721,22 +721,14 @@ def test_stream_chunk_builder_openai_audio_output_usage():
|
|||
print(f"response usage: {response.usage}")
|
||||
check_non_streaming_response(response)
|
||||
print(f"response: {response}")
|
||||
for k, v in usage_obj.model_dump(exclude_none=True).items():
|
||||
print(k, v)
|
||||
response_usage_value = getattr(response.usage, k) # type: ignore
|
||||
print(f"response_usage_value: {response_usage_value}")
|
||||
print(f"type: {type(response_usage_value)}")
|
||||
if isinstance(response_usage_value, BaseModel):
|
||||
response_usage_value_dict = response_usage_value.model_dump(
|
||||
exclude_none=True
|
||||
)
|
||||
if isinstance(v, dict):
|
||||
for key, value in v.items():
|
||||
assert response_usage_value_dict[key] == value
|
||||
else:
|
||||
assert response_usage_value_dict == v
|
||||
else:
|
||||
assert response_usage_value == v
|
||||
# Convert both usage objects to dictionaries for easier comparison
|
||||
usage_dict = usage_obj.model_dump(exclude_none=True)
|
||||
response_usage_dict = response.usage.model_dump(exclude_none=True)
|
||||
|
||||
# Simple dictionary comparison
|
||||
assert (
|
||||
usage_dict == response_usage_dict
|
||||
), f"\nExpected: {usage_dict}\nGot: {response_usage_dict}"
|
||||
|
||||
|
||||
def test_stream_chunk_builder_empty_initial_chunk():
|
||||
|
|
|
|||
|
|
@ -1553,12 +1553,14 @@ export const userSpendLogsCall = async (
|
|||
export const uiSpendLogsCall = async (
|
||||
accessToken: String,
|
||||
api_key?: string,
|
||||
user_id?: string,
|
||||
team_id?: string,
|
||||
request_id?: string,
|
||||
start_date?: string,
|
||||
end_date?: string,
|
||||
page?: number,
|
||||
page_size?: number,
|
||||
min_spend?: number,
|
||||
max_spend?: number,
|
||||
) => {
|
||||
try {
|
||||
// Construct base URL
|
||||
|
|
@ -1567,7 +1569,9 @@ export const uiSpendLogsCall = async (
|
|||
// Add query parameters if they exist
|
||||
const queryParams = new URLSearchParams();
|
||||
if (api_key) queryParams.append('api_key', api_key);
|
||||
if (user_id) queryParams.append('user_id', user_id);
|
||||
if (team_id) queryParams.append('team_id', team_id);
|
||||
if (min_spend) queryParams.append('min_spend', min_spend.toString());
|
||||
if (max_spend) queryParams.append('max_spend', max_spend.toString());
|
||||
if (request_id) queryParams.append('request_id', request_id);
|
||||
if (start_date) queryParams.append('start_date', start_date);
|
||||
if (end_date) queryParams.append('end_date', end_date);
|
||||
|
|
@ -1595,7 +1599,7 @@ export const uiSpendLogsCall = async (
|
|||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Spend Logs UI Response:", data);
|
||||
console.log("Spend Logs Response:", data);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch spend logs:", error);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { CountryCell } from "./country_cell";
|
|||
export type LogEntry = {
|
||||
request_id: string;
|
||||
api_key: string;
|
||||
team_id: string;
|
||||
model: string;
|
||||
api_base?: string;
|
||||
call_type: string;
|
||||
|
|
@ -155,11 +156,6 @@ export const columns: ColumnDef<LogEntry>[] = [
|
|||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "Country",
|
||||
accessorKey: "requester_ip_address",
|
||||
cell: (info: any) => <CountryCell ipAddress={info.getValue()} />,
|
||||
},
|
||||
];
|
||||
|
||||
const formatMessage = (message: any): string => {
|
||||
|
|
|
|||
|
|
@ -29,14 +29,13 @@ export default function SpendLogsTable({
|
|||
userID,
|
||||
}: SpendLogsTableProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [keyNameFilter, setKeyNameFilter] = useState("");
|
||||
const [teamNameFilter, setTeamNameFilter] = useState("");
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [showColumnDropdown, setShowColumnDropdown] = useState(false);
|
||||
const [selectedColumn, setSelectedColumn] = useState("Key Name");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize] = useState(50);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const filtersRef = useRef<HTMLDivElement>(null);
|
||||
const quickSelectRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// New state variables for Start and End Time
|
||||
const [startTime, setStartTime] = useState<string>(
|
||||
|
|
@ -49,6 +48,11 @@ export default function SpendLogsTable({
|
|||
// Add these new state variables at the top with other useState declarations
|
||||
const [isCustomDate, setIsCustomDate] = useState(false);
|
||||
const [quickSelectOpen, setQuickSelectOpen] = useState(false);
|
||||
const [tempTeamId, setTempTeamId] = useState("");
|
||||
const [tempKeyHash, setTempKeyHash] = useState("");
|
||||
const [selectedTeamId, setSelectedTeamId] = useState("");
|
||||
const [selectedKeyHash, setSelectedKeyHash] = useState("");
|
||||
const [selectedFilter, setSelectedFilter] = useState("Team ID");
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
|
|
@ -59,6 +63,18 @@ export default function SpendLogsTable({
|
|||
) {
|
||||
setShowColumnDropdown(false);
|
||||
}
|
||||
if (
|
||||
filtersRef.current &&
|
||||
!filtersRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setShowFilters(false);
|
||||
}
|
||||
if (
|
||||
quickSelectRef.current &&
|
||||
!quickSelectRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setQuickSelectOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
|
|
@ -67,12 +83,19 @@ export default function SpendLogsTable({
|
|||
}, []);
|
||||
|
||||
const logs = useQuery<PaginatedResponse>({
|
||||
queryKey: ["logs", "table", currentPage, pageSize, startTime, endTime],
|
||||
queryKey: [
|
||||
"logs",
|
||||
"table",
|
||||
currentPage,
|
||||
pageSize,
|
||||
startTime,
|
||||
endTime,
|
||||
selectedTeamId,
|
||||
selectedKeyHash,
|
||||
],
|
||||
queryFn: async () => {
|
||||
if (!accessToken || !token || !userRole || !userID) {
|
||||
console.log(
|
||||
"got None values for one of accessToken, token, userRole, userID",
|
||||
);
|
||||
console.log("Missing required auth parameters");
|
||||
return {
|
||||
data: [],
|
||||
total: 0,
|
||||
|
|
@ -85,20 +108,17 @@ export default function SpendLogsTable({
|
|||
const formattedStartTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss");
|
||||
const formattedEndTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const data = await uiSpendLogsCall(
|
||||
return await uiSpendLogsCall(
|
||||
accessToken,
|
||||
token,
|
||||
userRole,
|
||||
userID,
|
||||
selectedKeyHash || undefined,
|
||||
selectedTeamId || undefined,
|
||||
undefined, // This parameter might be setting a default min_spend
|
||||
formattedStartTime,
|
||||
formattedEndTime,
|
||||
currentPage,
|
||||
pageSize,
|
||||
pageSize
|
||||
);
|
||||
|
||||
return data;
|
||||
},
|
||||
// Refetch when startTime or endTime changes
|
||||
enabled: !!accessToken && !!token && !!userRole && !!userID,
|
||||
});
|
||||
|
||||
|
|
@ -116,21 +136,12 @@ export default function SpendLogsTable({
|
|||
log.request_id.includes(searchTerm) ||
|
||||
log.model.includes(searchTerm) ||
|
||||
(log.user && log.user.includes(searchTerm));
|
||||
const matchesKeyName =
|
||||
!keyNameFilter ||
|
||||
(log.metadata?.user_api_key_alias &&
|
||||
log.metadata.user_api_key_alias
|
||||
.toLowerCase()
|
||||
.includes(keyNameFilter.toLowerCase()));
|
||||
const matchesTeamName =
|
||||
!teamNameFilter ||
|
||||
(log.metadata?.user_api_key_team_alias &&
|
||||
log.metadata.user_api_key_team_alias
|
||||
.toLowerCase()
|
||||
.includes(teamNameFilter.toLowerCase()));
|
||||
return matchesSearch && matchesKeyName && matchesTeamName;
|
||||
|
||||
// No need for additional filtering since we're now handling this in the API call
|
||||
return matchesSearch;
|
||||
}) || [];
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h1 className="text-xl font-semibold mb-4">Traces</h1>
|
||||
|
|
@ -160,7 +171,7 @@ export default function SpendLogsTable({
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<div className="relative" ref={filtersRef}>
|
||||
<button
|
||||
className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
|
|
@ -183,100 +194,123 @@ export default function SpendLogsTable({
|
|||
|
||||
{showFilters && (
|
||||
<div className="absolute left-0 mt-2 w-[500px] bg-white rounded-lg shadow-lg border p-4 z-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Where</span>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() =>
|
||||
setShowColumnDropdown(!showColumnDropdown)
|
||||
}
|
||||
className="px-3 py-1.5 border rounded-md bg-white text-sm min-w-[160px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-left flex justify-between items-center"
|
||||
>
|
||||
{selectedColumn}
|
||||
<svg
|
||||
className="h-4 w-4 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Where</span>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowColumnDropdown(!showColumnDropdown)}
|
||||
className="px-3 py-1.5 border rounded-md bg-white text-sm min-w-[160px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-left flex justify-between items-center"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
{selectedFilter}
|
||||
<svg
|
||||
className="h-4 w-4 text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{showColumnDropdown && (
|
||||
<div className="absolute left-0 mt-1 w-[160px] bg-white border rounded-md shadow-lg z-50">
|
||||
{["Team ID", "Key Hash"].map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 flex items-center gap-2 ${
|
||||
selectedFilter === option
|
||||
? "bg-blue-50 text-blue-600"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedFilter(option);
|
||||
setShowColumnDropdown(false);
|
||||
if (option === "Team ID") {
|
||||
setTempKeyHash("");
|
||||
} else {
|
||||
setTempTeamId("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{selectedFilter === option && (
|
||||
<svg
|
||||
className="h-4 w-4 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter value..."
|
||||
className="px-3 py-1.5 border rounded-md text-sm flex-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
value={selectedFilter === "Team ID" ? tempTeamId : tempKeyHash}
|
||||
onChange={(e) => {
|
||||
if (selectedFilter === "Team ID") {
|
||||
setTempTeamId(e.target.value);
|
||||
} else {
|
||||
setTempKeyHash(e.target.value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="p-1 hover:bg-gray-100 rounded-md"
|
||||
onClick={() => {
|
||||
setTempTeamId("");
|
||||
setTempKeyHash("");
|
||||
}}
|
||||
>
|
||||
<span className="text-gray-500">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
className="px-3 py-1.5 text-sm border rounded-md hover:bg-gray-50"
|
||||
onClick={() => {
|
||||
setTempTeamId("");
|
||||
setTempKeyHash("");
|
||||
setShowFilters(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
setSelectedTeamId(tempTeamId);
|
||||
setSelectedKeyHash(tempKeyHash);
|
||||
setCurrentPage(1); // Reset to first page when applying new filters
|
||||
setShowFilters(false);
|
||||
}}
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
{showColumnDropdown && (
|
||||
<div className="absolute left-0 mt-1 w-[160px] bg-white border rounded-md shadow-lg z-50">
|
||||
{["Key Name", "Team Name"].map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 flex items-center gap-2 ${
|
||||
selectedColumn === option
|
||||
? "bg-blue-50 text-blue-600"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedColumn(option);
|
||||
setShowColumnDropdown(false);
|
||||
if (option === "Key Name") {
|
||||
setTeamNameFilter("");
|
||||
} else {
|
||||
setKeyNameFilter("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{selectedColumn === option && (
|
||||
<svg
|
||||
className="h-4 w-4 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter value..."
|
||||
className="px-3 py-1.5 border rounded-md text-sm flex-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
value={keyNameFilter || teamNameFilter}
|
||||
onChange={(e) => {
|
||||
if (selectedColumn === "Key Name") {
|
||||
setKeyNameFilter(e.target.value);
|
||||
} else {
|
||||
setTeamNameFilter(e.target.value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="p-1 hover:bg-gray-100 rounded-md"
|
||||
onClick={() => {
|
||||
setKeyNameFilter("");
|
||||
setTeamNameFilter("");
|
||||
setShowFilters(false);
|
||||
}}
|
||||
>
|
||||
<span className="text-gray-500">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="relative" ref={quickSelectRef}>
|
||||
<button
|
||||
onClick={() => setQuickSelectOpen(!quickSelectOpen)}
|
||||
className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ interface DataTableProps<TData, TValue> {
|
|||
columns: ColumnDef<TData, TValue>[];
|
||||
renderSubComponent: (props: { row: Row<TData> }) => React.ReactElement;
|
||||
getRowCanExpand: (row: Row<TData>) => boolean;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({
|
||||
|
|
@ -29,6 +30,7 @@ export function DataTable<TData, TValue>({
|
|||
columns,
|
||||
getRowCanExpand,
|
||||
renderSubComponent,
|
||||
isLoading = false,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const table = useReactTable({
|
||||
data,
|
||||
|
|
@ -60,7 +62,15 @@ export function DataTable<TData, TValue>({
|
|||
))}
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.length > 0 ? (
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<p>🚅 Loading logs...</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : table.getRowModel().rows.length > 0 ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<Fragment key={row.id}>
|
||||
<TableRow>
|
||||
|
|
@ -87,14 +97,7 @@ export function DataTable<TData, TValue>({
|
|||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<p>No SpendLogs messages available.</p>
|
||||
<p className="text-sm mt-2">
|
||||
To enable this, set{" "}
|
||||
<code>
|
||||
`general_settings.store_prompts_in_spend_logs: true`
|
||||
</code>{" "}
|
||||
in your config.yaml
|
||||
</p>
|
||||
<p>No logs found</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue