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

fix - show token hashes on ui

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-11 12:42:14 -07:00
parent b146336e79
commit 69afc14a82
3 changed files with 67 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ui/litellm-dashboard/src/components/model_dashboard.tsx
View file

@ -152,7 +152,7 @@ const handleSubmit = async (formValues: Record<string, any>, accessToken: string
litellmExtraParams = JSON.parse(value); litellmExtraParams = JSON.parse(value);
} }
catch (error) { catch (error) {
message.error("Failed to parse LiteLLM Extra Params: " + error, 20); message.error("Failed to parse LiteLLM Extra Params: " + error, 10);
throw new Error("Failed to parse litellm_extra_params: " + error); throw new Error("Failed to parse litellm_extra_params: " + error);
} }
for (const [key, value] of Object.entries(litellmExtraParams)) { for (const [key, value] of Object.entries(litellmExtraParams)) {
@ -188,7 +188,7 @@ const handleSubmit = async (formValues: Record<string, any>, accessToken: string
} catch (error) { } catch (error) {
message.error("Failed to create model: " + error, 20); message.error("Failed to create model: " + error, 10);
} }
} }

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

@ -43,7 +43,7 @@ export const modelCreateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -78,7 +78,7 @@ export const modelDeleteCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -120,7 +120,7 @@ export const keyCreateCall = async (
try { try {
formValues.metadata = JSON.parse(formValues.metadata); formValues.metadata = JSON.parse(formValues.metadata);
} catch (error) { } catch (error) {
message.error("Failed to parse metadata: " + error, 20); message.error("Failed to parse metadata: " + error, 10);
throw new Error("Failed to parse metadata: " + error); throw new Error("Failed to parse metadata: " + error);
} }
} }
@ -141,7 +141,7 @@ export const keyCreateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -183,7 +183,7 @@ export const userCreateCall = async (
try { try {
formValues.metadata = JSON.parse(formValues.metadata); formValues.metadata = JSON.parse(formValues.metadata);
} catch (error) { } catch (error) {
message.error("Failed to parse metadata: " + error, 20); message.error("Failed to parse metadata: " + error, 10);
throw new Error("Failed to parse metadata: " + error); throw new Error("Failed to parse metadata: " + error);
} }
} }
@ -204,7 +204,7 @@ export const userCreateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -237,7 +237,7 @@ export const keyDeleteCall = async (accessToken: String, user_key: String) => {
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to delete key: " + errorData, 20); message.error("Failed to delete key: " + errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -269,7 +269,7 @@ export const teamDeleteCall = async (accessToken: String, teamID: String) => {
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to delete team: " + errorData, 20); message.error("Failed to delete team: " + errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -314,7 +314,7 @@ export const userInfoCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -350,7 +350,7 @@ export const teamInfoCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -385,7 +385,7 @@ export const getTotalSpendCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -420,7 +420,7 @@ export const modelInfoCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -463,7 +463,7 @@ export const modelMetricsCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -506,7 +506,7 @@ export const modelMetricsSlowResponsesCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -547,7 +547,7 @@ export const modelExceptionsCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -583,7 +583,7 @@ export const modelAvailableCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -612,7 +612,7 @@ export const keySpendLogsCall = async (accessToken: String, token: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -641,7 +641,7 @@ export const teamSpendLogsCall = async (accessToken: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -670,7 +670,7 @@ export const tagsSpendLogsCall = async (accessToken: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -710,7 +710,7 @@ export const userSpendLogsCall = async (
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -740,7 +740,7 @@ export const adminSpendLogsCall = async (accessToken: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -770,7 +770,7 @@ export const adminTopKeysCall = async (accessToken: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -825,7 +825,7 @@ export const adminTopEndUsersCall = async (
const response = await fetch(url, requestOptions); const response = await fetch(url, requestOptions);
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -855,7 +855,7 @@ export const adminTopModelsCall = async (accessToken: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -886,7 +886,7 @@ export const keyInfoCall = async (accessToken: String, keys: String[]) => {
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -912,7 +912,7 @@ export const spendUsersCall = async (accessToken: String, userID: String) => {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -950,7 +950,7 @@ export const userRequestModelCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to delete key: " + errorData, 20); message.error("Failed to delete key: " + errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -980,7 +980,7 @@ export const userGetRequesedtModelsCall = async (accessToken: String) => {
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to delete key: " + errorData, 20); message.error("Failed to delete key: " + errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -1020,7 +1020,7 @@ export const userGetAllUsersCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to delete key: " + errorData, 20); message.error("Failed to delete key: " + errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
const data = await response.json(); const data = await response.json();
@ -1055,7 +1055,7 @@ export const teamCreateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1092,7 +1092,7 @@ export const keyUpdateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to update key: " + errorData, 20); message.error("Failed to update key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1127,7 +1127,7 @@ export const teamUpdateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to update team: " + errorData, 20); message.error("Failed to update team: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1162,7 +1162,7 @@ export const modelUpdateCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to update model: " + errorData, 20); message.error("Failed to update model: " + errorData, 10);
console.error("Error update from the server:", errorData); console.error("Error update from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1207,7 +1207,7 @@ export const teamMemberAddCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1247,7 +1247,7 @@ export const userUpdateUserCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error("Failed to create key: " + errorData, 20); message.error("Failed to create key: " + errorData, 10);
console.error("Error response from the server:", errorData); console.error("Error response from the server:", errorData);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1287,7 +1287,7 @@ export const PredictedSpendLogsCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1398,7 +1398,7 @@ export const getCallbacksCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }
@ -1441,7 +1441,7 @@ export const setCallbacksCall = async (
if (!response.ok) { if (!response.ok) {
const errorData = await response.text(); const errorData = await response.text();
message.error(errorData, 20); message.error(errorData, 10);
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");
} }

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

@ -83,7 +83,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
const [isButtonClicked, setIsButtonClicked] = useState(false); const [isButtonClicked, setIsButtonClicked] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [keyToDelete, setKeyToDelete] = useState<string | null>(null); const [keyToDelete, setKeyToDelete] = useState<string | null>(null);
const [openDialogId, setOpenDialogId] = React.useState<null | number>(null);
const [selectedItem, setSelectedItem] = useState<ItemData | null>(null); const [selectedItem, setSelectedItem] = useState<ItemData | null>(null);
const [spendData, setSpendData] = useState<{ day: string; spend: number }[] | null>( const [spendData, setSpendData] = useState<{ day: string; spend: number }[] | null>(
null null
@ -91,6 +90,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
const [predictedSpendString, setPredictedSpendString] = useState(""); const [predictedSpendString, setPredictedSpendString] = useState("");
const [editModalVisible, setEditModalVisible] = useState(false); const [editModalVisible, setEditModalVisible] = useState(false);
const [infoDialogVisible, setInfoDialogVisible] = useState(false);
const [selectedToken, setSelectedToken] = useState<ItemData | null>(null); const [selectedToken, setSelectedToken] = useState<ItemData | null>(null);
const [userModels, setUserModels] = useState([]); const [userModels, setUserModels] = useState([]);
const initialKnownTeamIDs: Set<string> = new Set(); const initialKnownTeamIDs: Set<string> = new Set();
@ -327,47 +327,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
}; };
// call keySpendLogsCall and set the data
const fetchData = async (item: ItemData | null) => {
try {
if (accessToken == null || item == null) {
return;
}
console.log(`accessToken: ${accessToken}; token: ${item.token}`);
const response = await keySpendLogsCall(accessToken, item.token);
console.log("Response:", response);
setSpendData(response);
// predict spend based on response
try {
const predictedSpend = await PredictedSpendLogsCall(accessToken, response);
console.log("Response2:", predictedSpend);
// append predictedSpend to data
const combinedData = [...response, ...predictedSpend.response];
setSpendData(combinedData);
setPredictedSpendString(predictedSpend.predicted_spend)
console.log("Combined Data:", combinedData);
} catch (error) {
console.error("There was an error fetching the predicted data", error);
}
// setPredictedSpend(predictedSpend);
} catch (error) {
console.error("There was an error fetching the data", error);
}
};
useEffect(() => {
fetchData(selectedItem);
}, [selectedItem]);
const handleDelete = async (token: any) => { const handleDelete = async (token: any) => {
console.log("handleDelete:", token); console.log("handleDelete:", token);
if (token.token == null) { if (token.token == null) {
@ -414,13 +373,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
if (data == null) { if (data == null) {
return; return;
} }
// useEffect(() => {
// if (openDialogId !== null && selectedItem !== null) {
// fetchData(selectedItem);
// }
// }, [openDialogId, selectedItem]);
console.log("RERENDER TRIGGERED"); console.log("RERENDER TRIGGERED");
return ( return (
<div> <div>
@ -563,27 +515,27 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<TableCell> <TableCell>
<Icon <Icon
onClick={() => { onClick={() => {
setSelectedItem(item); setSelectedToken(item);
setOpenDialogId(item.id); setInfoDialogVisible(true);
}} }}
icon={InformationCircleIcon} icon={InformationCircleIcon}
size="sm" size="sm"
/> />
<Dialog <Modal
open={openDialogId !== null} open={infoDialogVisible}
onClose={() => { onCancel={() => {
setOpenDialogId(null); setInfoDialogVisible(false);
setSelectedItem(null); setSelectedToken(null);
}} }}
static={true} footer={null}
width={800}
> >
<DialogPanel style={{ width: "600px", maxWidth: "600px" }}>
{selectedItem && ( {selectedToken && (
<> <>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 mt-8">
<Card> <Card>
<p className="text-tremor-default font-medium text-tremor-content dark:text-dark-tremor-content"> <p className="text-tremor-default font-medium text-tremor-content dark:text-dark-tremor-content">
Spend Spend
@ -592,9 +544,9 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<p className="text-tremor font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> <p className="text-tremor font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
{(() => { {(() => {
try { try {
return parseFloat(selectedItem.spend).toFixed(4); return parseFloat(selectedToken.spend).toFixed(4);
} catch (error) { } catch (error) {
return selectedItem.spend; return selectedToken.spend;
} }
})()} })()}
@ -607,8 +559,8 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
</p> </p>
<div className="mt-2 flex items-baseline space-x-2.5"> <div className="mt-2 flex items-baseline space-x-2.5">
<p className="text-tremor font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> <p className="text-tremor font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
{selectedItem.max_budget != null ? ( {selectedToken.max_budget != null ? (
<>{selectedItem.max_budget}</> <>{selectedToken.max_budget}</>
) : ( ) : (
<>Unlimited</> <>Unlimited</>
)} )}
@ -621,9 +573,9 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
</p> </p>
<div className="mt-2 flex items-baseline space-x-2.5"> <div className="mt-2 flex items-baseline space-x-2.5">
<p className="text-tremor-default font-small text-tremor-content-strong dark:text-dark-tremor-content-strong"> <p className="text-tremor-default font-small text-tremor-content-strong dark:text-dark-tremor-content-strong">
{selectedItem.expires != null ? ( {selectedToken.expires != null ? (
<> <>
{new Date(selectedItem.expires).toLocaleString(undefined, { {new Date(selectedToken.expires).toLocaleString(undefined, {
day: 'numeric', day: 'numeric',
month: 'long', month: 'long',
year: 'numeric', year: 'numeric',
@ -642,28 +594,26 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<Card className="my-4"> <Card className="my-4">
<Title>Token Name</Title> <Title>Token Name</Title>
<Text className="my-1">{selectedItem.key_alias ? selectedItem.key_alias : selectedItem.key_name}</Text> <Text className="my-1">{selectedToken.key_alias ? selectedToken.key_alias : selectedToken.key_name}</Text>
<Title>Token ID</Title> <Title>Token ID</Title>
<Text className="my-1 text-[12px]">{selectedItem.token}</Text> <Text className="my-1 text-[12px]">{selectedToken.token}</Text>
<Title>Metadata</Title> <Title>Metadata</Title>
<Text className="my-1"><pre>{JSON.stringify(selectedItem.metadata)} </pre></Text> <Text className="my-1"><pre>{JSON.stringify(selectedToken.metadata)} </pre></Text>
</Card> </Card>
<Button <Button
variant="light"
className="mx-auto flex items-center" className="mx-auto flex items-center"
onClick={() => { onClick={() => {
setOpenDialogId(null); setInfoDialogVisible(false);
setSelectedItem(null); setSelectedToken(null);
}} }}
> >
Close Close
</Button> </Button>
</> </>
)} )}
</DialogPanel>
</Dialog> </Modal>
<Icon <Icon
icon={PencilAltIcon} icon={PencilAltIcon}
size="sm" size="sm"