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

(Admin UI) - Remain on Current Tab when user clicks refresh (#6777)

Browse source 
* UI - fix, remain on current tab after refresh

* leftnav - remain on current tab after refresh
This commit is contained in:
Ishaan Jaff 2024-11-16 19:55:41 -08:00 • committed by GitHub
parent 627d6a6614
commit 4ed270506a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 68 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

9
litellm/model_prices_and_context_window_backup.json
View file

@ -4162,6 +4162,15 @@
"litellm_provider": "openrouter",
"mode": "chat"
},
"openrouter/qwen/qwen-2.5-coder-32b-instruct": {
"max_tokens": 33792,
"max_input_tokens": 33792,
"max_output_tokens": 33792,
"input_cost_per_token": 0.00000018,
"output_cost_per_token": 0.00000018,
"litellm_provider": "openrouter",
"mode": "chat"
},
"j2-ultra": {
"max_tokens": 8192,
"max_input_tokens": 8192,

14
ui/litellm-dashboard/src/app/page.tsx
View file

@ -82,7 +82,17 @@ const CreateKeyPage = () => {
const invitation_id = searchParams.get("invitation_id");
const token = getCookie('token');
const [page, setPage] = useState("api-keys");
const [page, setPage] = useState(() => {
if (typeof window !== 'undefined') {
return localStorage.getItem('selectedPage') || "api-keys";
}
return "api-keys";
});
useEffect(() => {
localStorage.setItem('selectedPage', page);
}, [page]);
const [accessToken, setAccessToken] = useState<string | null>(null);
useEffect(() => {
@ -165,7 +175,7 @@ const CreateKeyPage = () => {
<Sidebar
setPage={setPage}
userRole={userRole}
defaultSelectedKey={null}
defaultSelectedKey={page}
/>
</div>

144
ui/litellm-dashboard/src/components/leftnav.tsx
View file

@ -9,118 +9,68 @@ const { Sider } = Layout;
interface SidebarProps {
setPage: React.Dispatch<React.SetStateAction<string>>;
userRole: string;
defaultSelectedKey: string[] | null;
defaultSelectedKey: string;
}
// Create a more comprehensive menu item configuration
interface MenuItem {
key: string;
page: string;
label: string;
roles?: string[];
}
const old_admin_roles = ["Admin", "Admin Viewer"];
const v2_admin_role_names = ["proxy_admin", "proxy_admin_viewer", "org_admin"];
const all_admin_roles = [...old_admin_roles, ...v2_admin_role_names];
const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"];
// Note: If a menu item does not have a role, it is visible to all roles.
const menuItems: MenuItem[] = [
{ key: "1", page: "api-keys", label: "Virtual Keys" }, // all roles
{ key: "3", page: "llm-playground", label: "Test Key" }, // all roles
{ key: "2", page: "models", label: "Models", roles: all_admin_roles },
{ key: "4", page: "usage", label: "Usage"}, // all roles
{ key: "6", page: "teams", label: "Teams", roles: all_admin_roles },
{ key: "5", page: "users", label: "Internal Users", roles: all_admin_roles },
{ key: "8", page: "settings", label: "Logging & Alerts", roles: all_admin_roles },
{ key: "9", page: "caching", label: "Caching", roles: all_admin_roles },
{ key: "10", page: "budgets", label: "Budgets", roles: all_admin_roles },
{ key: "11", page: "general-settings", label: "Router Settings", roles: all_admin_roles },
{ key: "12", page: "pass-through-settings", label: "Pass-Through", roles: all_admin_roles },
{ key: "13", page: "admin-panel", label: "Admin Settings", roles: all_admin_roles },
{ key: "14", page: "api_ref", label: "API Reference" }, // all roles
{ key: "16", page: "model-hub", label: "Model Hub" }, // all roles
];
// The Sidebar component can now be simplified to:
const Sidebar: React.FC<SidebarProps> = ({
setPage,
userRole,
defaultSelectedKey,
}) => {
if (userRole == "Admin Viewer") {
return (
<Layout style={{ minHeight: "100vh", maxWidth: "120px" }}>
<Sider width={120}>
<Menu
mode="inline"
defaultSelectedKeys={
defaultSelectedKey ? defaultSelectedKey : ["4"]
}
style={{ height: "100%", borderRight: 0 }}
>
<Menu.Item key="1" onClick={() => setPage("usage")}>
Usage
</Menu.Item>
<Menu.Item key="6" onClick={() => setPage("teams")}>
<Text>Teams</Text>
</Menu.Item>
<Menu.Item key="9" onClick={() => setPage("caching")}>
<Text>Caching</Text>
</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
// Find the menu item that matches the default page to get its key
const selectedMenuItem = menuItems.find(item => item.page === defaultSelectedKey);
const selectedMenuKey = selectedMenuItem?.key || "1";
const filteredMenuItems = menuItems.filter(item =>
!item.roles || item.roles.includes(userRole)
);
return (
<Layout style={{ minHeight: "100vh", maxWidth: "145px" }}>
<Sider width={145}>
<Layout style={{ minHeight: "100vh", maxWidth: userRole === "Admin Viewer" ? "120px" : "145px" }}>
<Sider width={userRole === "Admin Viewer" ? 120 : 145}>
<Menu
mode="inline"
defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]}
selectedKeys={[selectedMenuKey]}
style={{ height: "100%", borderRight: 0 }}
>
<Menu.Item key="1" onClick={() => setPage("api-keys")}>
<Text>Virtual Keys</Text>
</Menu.Item>
<Menu.Item key="3" onClick={() => setPage("llm-playground")}>
<Text>Test Key</Text>
</Menu.Item>
{userRole == "Admin" ? (
<Menu.Item key="2" onClick={() => setPage("models")}>
<Text>Models</Text>
{filteredMenuItems.map(item => (
<Menu.Item key={item.key} onClick={() => setPage(item.page)}>
<Text>{item.label}</Text>
</Menu.Item>
) : null}
{rolesAllowedToSeeUsage.includes(userRole) ? (
<Menu.Item key="4" onClick={() => setPage("usage")}>
<Text>Usage</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="6" onClick={() => setPage("teams")}>
<Text>Teams</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="5" onClick={() => setPage("users")}>
<Text>Internal Users</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="8" onClick={() => setPage("settings")}>
<Text>Logging & Alerts</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="9" onClick={() => setPage("caching")}>
<Text>Caching</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="10" onClick={() => setPage("budgets")}>
<Text>Budgets</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="11" onClick={() => setPage("general-settings")}>
<Text>Router Settings</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="12" onClick={() => setPage("pass-through-settings")}>
<Text>Pass-Through</Text>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<Menu.Item key="13" onClick={() => setPage("admin-panel")}>
<Text>Admin Settings</Text>
</Menu.Item>
) : null}
<Menu.Item key="14" onClick={() => setPage("api_ref")}>
<Text>API Reference</Text>
</Menu.Item>
<Menu.Item key="16" onClick={() => setPage("model-hub")}>
<Text>Model Hub</Text>
</Menu.Item>
))}
</Menu>
</Sider>
</Layout>