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

build(ui/litellm-dashboard): initial commit of litellm dashboard

Browse source
This commit is contained in:
Krrish Dholakia 2024-01-27 12:12:48 -08:00
parent 8d4749b94a
commit af8b35d556
20 changed files with 7710 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
ui/litellm-dashboard/src/app/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

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

@ -0,0 +1,33 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
/* @media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
} */
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}

22
ui/litellm-dashboard/src/app/layout.tsx Normal file
View file

@ -0,0 +1,22 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

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

@ -0,0 +1,22 @@
import React from 'react';
import CreateKey from "../components/create_key_button"
import ViewKeyTable from "../components/view_key_table"
import Navbar from "../components/navbar"
import { Grid, Col } from "@tremor/react";
const CreateKeyPage = () => {
return (
<div className='h-screen'>
<Navbar/>
<Grid numItems={1} className="gap-0 p-10 h-[75vh]">
<Col numColSpan={1}>
<ViewKeyTable/>
<CreateKey/>
</Col>
</Grid>
</div>
);
};
export default CreateKeyPage;

21
ui/litellm-dashboard/src/components/create_key_button.tsx Normal file
View file

@ -0,0 +1,21 @@
'use client';
import React from 'react';
import { Button, TextInput } from '@tremor/react';
import { Card, Metric, Text } from "@tremor/react";
export default function CreateKey() {
const handleClick = () => {
console.log('Hello World');
};
return (
// <Card className="max-w-xs mx-auto" decoration="top" decorationColor="indigo">
// <Text className='mb-4'>Key Name</Text>
// <TextInput className='mb-4' placeholder="My test key"></TextInput>
// </Card>
<Button className="mx-auto" onClick={handleClick}>+ Create New Key</Button>
);
}

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

@ -0,0 +1,26 @@
import Link from 'next/link';
import Image from 'next/image'
import React, { useState } from 'react';
function Navbar() {
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">
<div className="flex flex-col items-center">
<Link href="/">
<button className="text-gray-800 text-2xl px-4 py-1 rounded text-center">🚅 LiteLLM</button>
</Link>
</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>
</div>
</nav>
)
}
export default Navbar;

81
ui/litellm-dashboard/src/components/view_key_table.tsx Normal file
View file

@ -0,0 +1,81 @@
'use client';
import { StatusOnlineIcon } from "@heroicons/react/outline";
import {
Badge,
Card,
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableRow,
Text,
Title,
} from "@tremor/react";
const data = [
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
},
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
},
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
},
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
},
];
export default function ViewKeyTable() {
return (
<Card className="flex-auto overflow-y-auto max-h-[50vh] mb-4">
<Title>API Keys</Title>
<Table className="mt-5">
<TableHead>
<TableRow>
<TableHeaderCell>Alias</TableHeaderCell>
<TableHeaderCell>Secret Key</TableHeaderCell>
<TableHeaderCell>Spend</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((item) => (
<TableRow key={item.token}>
<TableCell>{item.key_alias}</TableCell>
<TableCell>
<Text>{item.key_name}</Text>
</TableCell>
<TableCell>
<Text>{item.spend}</Text>
</TableCell>
<TableCell>
<Badge color="emerald" icon={StatusOnlineIcon}>
{item.expires}
</Badge>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
)};