litellm/ui/litellm-dashboard/src/components/leftnav.tsx
2024-07-19 15:49:12 -07:00

119 lines
3.6 KiB
TypeScript

import { Layout, Menu } from "antd";
import Link from "next/link";
import { List } from "postcss/lib/list";
import { Text } from "@tremor/react";
const { Sider } = Layout;
// Define the props type
interface SidebarProps {
setPage: React.Dispatch<React.SetStateAction<string>>;
userRole: string;
defaultSelectedKey: string[] | null;
}
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="9" onClick={() => setPage("caching")}>
<Text>Caching</Text>
</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
return (
<Layout style={{ minHeight: "100vh", maxWidth: "145px" }}>
<Sider width={145}>
<Menu
mode="inline"
defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]}
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>
</Menu.Item>
) : null}
{userRole == "Admin" ? (
<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("admin-panel")}>
<Text>Admin Settings</Text>
</Menu.Item>
) : null}
<Menu.Item key="13" onClick={() => setPage("api_ref")}>
<Text>API Reference</Text>
</Menu.Item>
<Menu.Item key="15" onClick={() => setPage("model-hub")}>
<Text>Model Hub</Text>
</Menu.Item>
</Menu>
</Sider>
</Layout>
);
};
export default Sidebar;