diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index 815de3507..7270b0d22 100644 --- a/ui/litellm-dashboard/src/components/view_users.tsx +++ b/ui/litellm-dashboard/src/components/view_users.tsx @@ -19,12 +19,16 @@ import { TabPanel, Select, SelectItem, + Dialog, + DialogPanel, + Icon } from "@tremor/react"; import { userInfoCall, adminTopEndUsersCall } from "./networking"; import { Badge, BadgeDelta, Button } from "@tremor/react"; import RequestAccess from "./request_model_access"; import CreateUser from "./create_user_button"; import Paragraph from "antd/es/skeleton/Paragraph"; +import InformationCircleIcon from "@heroicons/react/outline/InformationCircleIcon"; interface ViewUserDashboardProps { accessToken: string | null; @@ -46,6 +50,8 @@ const ViewUserDashboard: React.FC = ({ const [userData, setUserData] = useState(null); const [endUsers, setEndUsers] = useState(null); const [currentPage, setCurrentPage] = useState(0); + const [openDialogId, setOpenDialogId] = React.useState(null); + const [selectedItem, setSelectedItem] = useState(null); const defaultPageSize = 25; useEffect(() => { @@ -159,10 +165,10 @@ const ViewUserDashboard: React.FC = ({ User ID User Email - User Role User Models User Spend ($ USD) User Max Budget ($ USD) + User API Key Aliases @@ -170,9 +176,7 @@ const ViewUserDashboard: React.FC = ({ {user.user_id} {user.user_email} - - {user.user_role ? user.user_role : ""} - + {user.models && user.models.length > 0 ? user.models @@ -182,6 +186,23 @@ const ViewUserDashboard: React.FC = ({ {user.max_budget ? user.max_budget : "Unlimited"} + + + {user && user.key_aliases + ? user.key_aliases.filter((key: any) => key !== null).length > 0 + ? {user.key_aliases.filter((key: any) => key !== null).join(', ') } + : No Keys + : No Keys} + {/* {user.key_aliases.filter(key => key !== null).length} Keys */} + {/* { + setOpenDialogId(user.user_id) + setSelectedItem(user) + }}>View Keys */} + + + + + ))} @@ -238,7 +259,29 @@ const ViewUserDashboard: React.FC = ({ {renderPagination()} + {/* { + setOpenDialogId(null); + }} + +> + +
+ Key Aliases + + + {selectedItem && selectedItem.key_aliases + ? selectedItem.key_aliases.filter(key => key !== null).length > 0 + ? selectedItem.key_aliases.filter(key => key !== null).join(', ') + : 'No Keys' + : "No Keys"} +
+
+
*/} + + ); };