diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 2569b22c45..e796444514 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -215,6 +215,7 @@ export default function CreateKeyPage() { userEmail={userEmail} setProxySettings={setProxySettings} proxySettings={proxySettings} + accessToken={accessToken} />
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx index 9bdc0fe9b7..b64f72c547 100644 --- a/ui/litellm-dashboard/src/components/navbar.tsx +++ b/ui/litellm-dashboard/src/components/navbar.tsx @@ -1,5 +1,5 @@ import Link from "next/link"; -import React from "react"; +import React, { useState, useEffect } from "react"; import type { MenuProps } from "antd"; import { Dropdown } from "antd"; import { Organization } from "@/components/networking"; @@ -9,6 +9,8 @@ import { LogoutOutlined } from '@ant-design/icons'; import { clearTokenCookies } from "@/utils/cookieUtils"; +import { fetchProxySettings } from "@/utils/proxyUtils"; + interface NavbarProps { userID: string | null; userEmail: string | null; @@ -16,6 +18,7 @@ interface NavbarProps { premiumUser: boolean; setProxySettings: React.Dispatch>; proxySettings: any; + accessToken: string | null; } const Navbar: React.FC = ({ @@ -24,10 +27,30 @@ const Navbar: React.FC = ({ userRole, premiumUser, proxySettings, + setProxySettings, + accessToken, }) => { const isLocal = process.env.NODE_ENV === "development"; const imageUrl = isLocal ? "http://localhost:4000/get_image" : "/get_image"; - let logoutUrl = proxySettings?.PROXY_LOGOUT_URL || ""; + const [logoutUrl, setLogoutUrl] = useState(""); + + useEffect(() => { + const initializeProxySettings = async () => { + if (accessToken) { + const settings = await fetchProxySettings(accessToken); + console.log("response from fetchProxySettings", settings); + if (settings) { + setProxySettings(settings); + } + } + }; + + initializeProxySettings(); + }, [accessToken]); + + useEffect(() => { + setLogoutUrl(proxySettings?.PROXY_LOGOUT_URL || ""); + }, [proxySettings]); const handleLogout = () => { clearTokenCookies(); diff --git a/ui/litellm-dashboard/src/utils/proxyUtils.ts b/ui/litellm-dashboard/src/utils/proxyUtils.ts new file mode 100644 index 0000000000..32e14baddb --- /dev/null +++ b/ui/litellm-dashboard/src/utils/proxyUtils.ts @@ -0,0 +1,13 @@ +import { getProxyUISettings } from "@/components/networking"; + +export const fetchProxySettings = async (accessToken: string | null) => { + if (!accessToken) return null; + + try { + const proxySettings = await getProxyUISettings(accessToken); + return proxySettings; + } catch (error) { + console.error("Error fetching proxy settings:", error); + return null; + } +}; \ No newline at end of file