phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-27 03:34:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat ui - modelExceptionsCall

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-30 16:56:45 -07:00
parent a2a8fef8f4
commit ce1817380e
2 changed files with 65 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@ import {
} from "@tremor/react";
import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react";
import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react";
import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall, modelUpdateCall, modelMetricsCall } from "./networking";
import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall, modelUpdateCall, modelMetricsCall, modelExceptionsCall } from "./networking";
import { BarChart } from "@tremor/react";
import {
Button as Button2,
@ -202,6 +202,8 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
const [selectedModelGroup, setSelectedModelGroup] = useState<string | null>(null);
const [modelLatencyMetrics, setModelLatencyMetrics] = useState<any[]>([]);
const [modelMetrics, setModelMetrics] = useState<any[]>([]);
const [modelExceptions, setModelExceptions] = useState<any[]>([]);
const [allExceptions, setAllExceptions] = useState<any[]>([]);
const EditModelModal: React.FC<EditModelModalProps> = ({ visible, onCancel, model, onSubmit }) => {
const [form] = Form.useForm();
@ -461,6 +463,17 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
setModelMetrics(modelMetricsResponse);
setModelLatencyMetrics(sortedByLatency);
const modelExceptionsResponse = await modelExceptionsCall(
accessToken,
userID,
userRole,
null
)
console.log("Model exceptions response:", modelExceptionsResponse);
setModelExceptions(modelExceptionsResponse.data);
setAllExceptions(modelExceptionsResponse.exception_types);
} catch (error) {
console.error("There was an error fetching the model data", error);
}
@ -1017,6 +1030,20 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
tickGap={5}
/>
</Card>
<Card className="mt-4">
<Title>Exceptions per Model</Title>
<BarChart
className="h-72"
data={modelExceptions}
index="model_group"
categories={allExceptions}
stack={true}
colors={['indigo-300', 'rose-200', '#ffcc33']}
yAxisWidth={30}
/>
</Card>
<Card className="mt-4">
<Title>Latency Per Model</Title>
<BarChart

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

@ -474,6 +474,43 @@ export const modelMetricsCall = async (
}
};
export const modelExceptionsCall = async (
accessToken: String,
userID: String,
userRole: String,
modelGroup: String | null,
) => {
/**
* Get all models on proxy
*/
try {
let url = proxyBaseUrl ? `${proxyBaseUrl}/model/metrics/exceptions` : `/model/metrics/exceptions`;
const response = await fetch(url, {
method: "GET",
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
});
if (!response.ok) {
const errorData = await response.text();
message.error(errorData, 20);
throw new Error("Network response was not ok");
}
const data = await response.json();
// message.info("Received model data");
return data;
// Handle success - you might want to update some state or UI based on the created key
} catch (error) {
console.error("Failed to create key:", error);
throw error;
}
};
export const modelAvailableCall = async (
accessToken: String,
userID: String,