scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-10 22:41:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 129

Merge pull request #1800 from BerriAI/litellm_ui_read_user_role

Browse source 
[UI] Show UserID, user_role on UI
This commit is contained in:
Ishaan Jaff 2024-02-03 12:23:15 -08:00 • committed by GitHub
commit 6acc462d2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 32 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/litellm-dashboard/src/app/globals.css
View file

@ -4,7 +4,7 @@
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-start-rgb: 255, 255, 255;
--background-end-rgb: 255, 255, 255;
}

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

@ -4,8 +4,7 @@ import UserDashboard from "../components/user_dashboard";
const CreateKeyPage = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<div className="flex min-h-screen flex-col items-center">
<Navbar />
<div className="flex min-h-screen flex-col ">
<UserDashboard />
</div>
</Suspense>

25
ui/litellm-dashboard/src/components/navbar.tsx
View file

@ -1,7 +1,20 @@
"use client";
import Link from 'next/link';
import Image from 'next/image'
import React, { useState } from 'react';
function Navbar() {
import { useSearchParams } from "next/navigation";
import { Button, Text, Metric,Title, TextInput, Grid, Col } from "@tremor/react";
// Define the props type
interface NavbarProps {
userID: string | null;
}
const Navbar: React.FC<NavbarProps> = ({ userID }) => {
const searchParams = useSearchParams();
const token = searchParams.get("token");
console.log("User ID:", userID);
return (
<nav className="left-0 right-0 top-0 flex justify-between items-center h-12">
<div className="text-left mx-4 my-2 absolute top-0 left-0">
@ -12,13 +25,11 @@ function Navbar() {
</div>
</div>
<div className="text-right mx-4 my-2 absolute top-0 right-0">
<a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">
<button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 mr-2 text-center">Docs</button>
</a>
<a href="https://calendly.com/d/4mp-gd3-k5k/berriai-1-1-onboarding-litellm-hosted-version" target="_blank" rel="noopener noreferrer">
<button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 text-center">Schedule Demo</button>
</a>
<Button color="white">
<Title>{userID}</Title>
</Button>
</div>
</nav>
)
}

3
ui/litellm-dashboard/src/components/networking.tsx
View file

@ -3,7 +3,8 @@
*/
import { message } from 'antd';
const proxyBaseUrl = null
// const proxyBaseUrl = null;
const proxyBaseUrl = "http://localhost:4000" // http://localhost:4000
export const keyCreateCall = async (
accessToken: string,

12
ui/litellm-dashboard/src/components/user_dashboard.tsx
View file

@ -5,10 +5,12 @@ import { Grid, Col, Card, Text } from "@tremor/react";
import CreateKey from "./create_key_button";
import ViewKeyTable from "./view_key_table";
import EnterProxyUrl from "./enter_proxy_url";
import Navbar from "./navbar";
import { useSearchParams } from "next/navigation";
import { jwtDecode } from "jwt-decode";
const proxyBaseUrl = null
// const proxyBaseUrl = null;
const proxyBaseUrl = "http://localhost:4000" // http://localhost:4000
const UserDashboard = () => {
const [data, setData] = useState<null | any[]>(null); // Keep the initialization of state here
@ -67,7 +69,11 @@ const UserDashboard = () => {
return (
<Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
<div>
<Navbar
userID={userID}
/>
<Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
<Col numColSpan={1}>
<ViewKeyTable
userID={userID}
@ -83,6 +89,8 @@ const UserDashboard = () => {
/>
</Col>
</Grid>
</div>
);
};