phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

ui - fix view user pagination

Browse source
This commit is contained in:
Ishaan Jaff 2024-10-07 12:15:29 +05:30
parent e007bb65b5
commit abe8059713
1 changed files with 26 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

59
ui/litellm-dashboard/src/components/view_users.tsx
View file

@ -52,6 +52,15 @@ interface ViewUserDashboardProps {
teams: any[] | null; teams: any[] | null;
setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>; setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
} }
interface UserListResponse {
users: any[] | null;
total: number;
page: number;
page_size: number;
total_pages: number;
}
const isLocal = process.env.NODE_ENV === "development"; const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) { if (isLocal != true) {
@ -67,6 +76,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
teams, teams,
setKeys, setKeys,
}) => { }) => {
const [userListResponse, setUserListResponse] = useState<UserListResponse | null>(null);
const [userData, setUserData] = useState<null | any[]>(null); const [userData, setUserData] = useState<null | any[]>(null);
const [endUsers, setEndUsers] = useState<null | any[]>(null); const [endUsers, setEndUsers] = useState<null | any[]>(null);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
@ -123,8 +133,11 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
currentPage, currentPage,
defaultPageSize defaultPageSize
); );
setUserListResponse(userDataResponse);
console.log("user data response:", userDataResponse); console.log("user data response:", userDataResponse);
setUserData(userDataResponse.users); setUserData(userDataResponse.users || []);
const availableUserRoles = await getPossibleUserRoles(accessToken); const availableUserRoles = await getPossibleUserRoles(accessToken);
setPossibleUIRoles(availableUserRoles); setPossibleUIRoles(availableUserRoles);
@ -149,27 +162,31 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
function renderPagination() { function renderPagination() {
if (!userData) return null; if (!userData) return null;
const totalPages = Math.ceil(userData.length / defaultPageSize); const totalPages = userListResponse?.total_pages || 0;
const handlePageChange = (newPage: number) => {
setUserData([]); // Clear current users
setCurrentPage(newPage);
};
return ( return (
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
Showing Page {currentPage + 1} of {totalPages} Showing Page {currentPage } of {totalPages}
</div> </div>
<div className="flex"> <div className="flex">
<button <button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-l focus:outline-none" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-l focus:outline-none"
disabled={currentPage === 0} disabled={currentPage === 1}
onClick={() => setCurrentPage(currentPage - 1)} onClick={() => handlePageChange(currentPage - 1)}
> >
&larr; Prev &larr; Prev
</button> </button>
<button <button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r focus:outline-none" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r focus:outline-none"
// disabled={currentPage === totalPages} disabled={currentPage === totalPages}
onClick={() => { onClick={() => handlePageChange(currentPage + 1)}
setCurrentPage(currentPage + 1);
}}
> >
Next &rarr; Next &rarr;
</button> </button>
@ -255,11 +272,6 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
> >
View Keys View Keys
</Icon> </Icon>
{/*
<Icon icon={TrashIcon} onClick= {() => {
setOpenDialogId(user.user_id)
setSelectedItem(user)
}}>View Keys</Icon> */}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
@ -271,25 +283,6 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
<div className="flex-1"></div> <div className="flex-1"></div>
<div className="flex-1 flex justify-between items-center"></div> <div className="flex-1 flex justify-between items-center"></div>
</div> </div>
{/* <Table className="max-h-[70vh] min-h-[500px]">
<TableHead>
<TableRow>
<TableHeaderCell>End User</TableHeaderCell>
<TableHeaderCell>Spend</TableHeaderCell>
<TableHeaderCell>Total Events</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{endUsers?.map((user: any, index: number) => (
<TableRow key={index}>
<TableCell>{user.end_user}</TableCell>
<TableCell>{user.total_spend}</TableCell>
<TableCell>{user.total_events}</TableCell>
</TableRow>
))}
</TableBody>
</Table> */}
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</TabGroup> </TabGroup>