From f7150cdba21943818df77ec7583cdb1883b3b83f Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 3 May 2024 20:52:30 -0700 Subject: [PATCH 01/10] ui - slect start and end date --- .../src/components/model_dashboard.tsx | 46 +++++++++++++------ 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index f50447381..cdc8f2767 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -16,7 +16,7 @@ import { AccordionHeader, AccordionBody, } from "@tremor/react"; -import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react"; +import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon, DateRangePicker } from "@tremor/react"; import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react"; import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall, modelUpdateCall, modelMetricsCall, modelExceptionsCall, modelMetricsSlowResponsesCall } from "./networking"; import { BarChart, AreaChart } from "@tremor/react"; @@ -1118,20 +1118,36 @@ const handleEditSubmit = async (formValues: Record) => { -

View how requests were load balanced within a model group

- + {/*

View how requests were load balanced within a model group

*/} + + + + + + + + + + + + + + + + + From fccdb92c6b2ffd34b8e7aef78d492055f3a531b9 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 3 May 2024 21:20:19 -0700 Subject: [PATCH 02/10] fix - select startTime and endTime on UI --- litellm/proxy/proxy_server.py | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/litellm/proxy/proxy_server.py b/litellm/proxy/proxy_server.py index 27a05ca21..4bb8dee7f 100644 --- a/litellm/proxy/proxy_server.py +++ b/litellm/proxy/proxy_server.py @@ -7552,7 +7552,7 @@ async def model_metrics( FROM "LiteLLM_SpendLogs" WHERE - "startTime" >= NOW() - INTERVAL '30 days' + "startTime" BETWEEN $2::timestamp AND $3::timestamp AND "model" = $1 AND "cache_hit" != 'True' GROUP BY api_base, @@ -7653,6 +7653,8 @@ FROM WHERE "model" = $2 AND "cache_hit" != 'True' + AND "startTime" >= $3::timestamp + AND "startTime" <= $4::timestamp GROUP BY api_base ORDER BY @@ -7660,7 +7662,7 @@ ORDER BY """ db_response = await prisma_client.db.query_raw( - sql_query, alerting_threshold, _selected_model_group + sql_query, alerting_threshold, _selected_model_group, startTime, endTime ) if db_response is not None: From d806fe3513c9548fab002763689dce0fc8bc84a2 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 3 May 2024 21:21:28 -0700 Subject: [PATCH 03/10] startTime and endTime on UI --- ui/litellm-dashboard/src/components/networking.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 53779c64b..32d13fa1f 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -441,6 +441,8 @@ export const modelMetricsCall = async ( userID: String, userRole: String, modelGroup: String | null, + startTime: String, + endTime: String ) => { /** * Get all models on proxy @@ -448,7 +450,7 @@ export const modelMetricsCall = async ( try { let url = proxyBaseUrl ? `${proxyBaseUrl}/model/metrics` : `/model/metrics`; if (modelGroup) { - url = `${url}?_selected_model_group=${modelGroup}` + url = `${url}?_selected_model_group=${modelGroup}&startTime=${startTime}&endTime=${endTime}` } // message.info("Requesting model data"); const response = await fetch(url, { @@ -481,6 +483,8 @@ export const modelMetricsSlowResponsesCall = async ( userID: String, userRole: String, modelGroup: String | null, + startTime: String, + endTime: String ) => { /** * Get all models on proxy @@ -488,8 +492,9 @@ export const modelMetricsSlowResponsesCall = async ( try { let url = proxyBaseUrl ? `${proxyBaseUrl}/model/metrics/slow_responses` : `/model/metrics/slow_responses`; if (modelGroup) { - url = `${url}?_selected_model_group=${modelGroup}` + url = `${url}?_selected_model_group=${modelGroup}&startTime=${startTime}&endTime=${endTime}` } + // message.info("Requesting model data"); const response = await fetch(url, { method: "GET", @@ -520,14 +525,17 @@ export const modelExceptionsCall = async ( userID: String, userRole: String, modelGroup: String | null, + startTime: String, + endTime: String ) => { /** * Get all models on proxy */ try { let url = proxyBaseUrl ? `${proxyBaseUrl}/model/metrics/exceptions` : `/model/metrics/exceptions`; + if (modelGroup) { - url = `${url}?_selected_model_group=${modelGroup}` + url = `${url}?_selected_model_group=${modelGroup}&startTime=${startTime}&endTime=${endTime}` } const response = await fetch(url, { method: "GET", From ed714a9d6ea7fcf4771eb7fef79a7e0e4598975b Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 3 May 2024 21:21:41 -0700 Subject: [PATCH 04/10] ui select model and start and endtime --- .../src/components/model_dashboard.tsx | 64 +++++++------------ 1 file changed, 23 insertions(+), 41 deletions(-) diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index cdc8f2767..b3ff5cef3 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -17,7 +17,7 @@ import { AccordionBody, } from "@tremor/react"; import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon, DateRangePicker } from "@tremor/react"; -import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react"; +import { Select, SelectItem, MultiSelect, MultiSelectItem, DateRangePickerValue } from "@tremor/react"; import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall, modelUpdateCall, modelMetricsCall, modelExceptionsCall, modelMetricsSlowResponsesCall } from "./networking"; import { BarChart, AreaChart } from "@tremor/react"; import { @@ -206,6 +206,10 @@ const ModelDashboard: React.FC = ({ const [allExceptions, setAllExceptions] = useState([]); const [failureTableData, setFailureTableData] = useState([]); const [slowResponsesData, setSlowResponsesData] = useState([]); + const [dateValue, setDateValue] = useState({ + from: new Date(), + to: new Date(), + }); const EditModelModal: React.FC = ({ visible, onCancel, model, onSubmit }) => { const [form] = Form.useForm(); @@ -492,40 +496,6 @@ const handleEditSubmit = async (formValues: Record) => { setSlowResponsesData(slowResponses); - // let modelMetricsData = modelMetricsResponse.data; - // let successdeploymentToSuccess: Record = {}; - // for (let i = 0; i < modelMetricsData.length; i++) { - // let element = modelMetricsData[i]; - // let _model_name = element.model; - // let _num_requests = element.num_requests; - // successdeploymentToSuccess[_model_name] = _num_requests - // } - // console.log("successdeploymentToSuccess:", successdeploymentToSuccess) - - // let failureTableData = []; - // let _failureData = modelExceptionsResponse.data; - // for (let i = 0; i < _failureData.length; i++) { - // const model = _failureData[i]; - // let _model_name = model.model; - // let total_exceptions = model.total_exceptions; - // let total_Requests = successdeploymentToSuccess[_model_name]; - // if (total_Requests == null) { - // total_Requests = 0 - // } - // let _data = { - // model: _model_name, - // total_exceptions: total_exceptions, - // total_Requests: total_Requests, - // failure_rate: total_Requests / total_exceptions - // } - // failureTableData.push(_data); - // // sort failureTableData by failure_rate - // failureTableData.sort((a, b) => b.failure_rate - a.failure_rate); - - // setFailureTableData(failureTableData); - // console.log("failureTableData:", failureTableData); - // } - } catch (error) { console.error("There was an error fetching the model data", error); } @@ -678,16 +648,17 @@ const handleEditSubmit = async (formValues: Record) => { }; - const updateModelMetrics = async (modelGroup: string | null) => { + const updateModelMetrics = async (modelGroup: string | null, startTime: Date, endTime: Date) => { console.log("Updating model metrics for group:", modelGroup); if (!accessToken || !userID || !userRole) { return } + console.log("inside updateModelMetrics - startTime:", startTime, "endTime:", endTime) setSelectedModelGroup(modelGroup); // If you want to store the selected model group in state try { - const modelMetricsResponse = await modelMetricsCall(accessToken, userID, userRole, modelGroup); + const modelMetricsResponse = await modelMetricsCall(accessToken, userID, userRole, modelGroup, startTime.toISOString(), endTime.toISOString()); console.log("Model metrics response:", modelMetricsResponse); // Assuming modelMetricsResponse now contains the metric data for the specified model group @@ -698,7 +669,9 @@ const handleEditSubmit = async (formValues: Record) => { accessToken, userID, userRole, - modelGroup + modelGroup, + startTime.toISOString(), + endTime.toISOString() ) console.log("Model exceptions response:", modelExceptionsResponse); setModelExceptions(modelExceptionsResponse.data); @@ -709,7 +682,9 @@ const handleEditSubmit = async (formValues: Record) => { accessToken, userID, userRole, - modelGroup + modelGroup, + startTime.toISOString(), + endTime.toISOString() ) console.log("slowResponses:", slowResponses) @@ -1122,7 +1097,14 @@ const handleEditSubmit = async (formValues: Record) => { - + { + setDateValue(value); + updateModelMetrics(selectedModelGroup, value.from, value.to); // Call updateModelMetrics with the new date range + }} + /> {availableModelGroups.map((group, idx) => ( Date: Fri, 3 May 2024 21:59:22 -0700 Subject: [PATCH 06/10] ui - view logs by model group and time --- .../src/components/model_dashboard.tsx | 14 +++++++------- ui/litellm-dashboard/src/components/networking.tsx | 12 ++++++------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index 1a9da3b4e..5d2effa1f 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -474,7 +474,7 @@ const handleEditSubmit = async (formValues: Record) => { accessToken, userID, userRole, - null, + selectedModelGroup, dateValue.from?.toISOString(), dateValue.to?.toISOString() ); @@ -491,7 +491,7 @@ const handleEditSubmit = async (formValues: Record) => { accessToken, userID, userRole, - null, + selectedModelGroup, dateValue.from?.toISOString(), dateValue.to?.toISOString() ) @@ -504,7 +504,7 @@ const handleEditSubmit = async (formValues: Record) => { accessToken, userID, userRole, - null, + selectedModelGroup, dateValue.from?.toISOString(), dateValue.to?.toISOString() ) @@ -666,9 +666,9 @@ const handleEditSubmit = async (formValues: Record) => { }; - const updateModelMetrics = async (modelGroup: string | null, startTime: Date, endTime: Date) => { + const updateModelMetrics = async (modelGroup: string | null, startTime: Date | undefined, endTime: Date | undefined) => { console.log("Updating model metrics for group:", modelGroup); - if (!accessToken || !userID || !userRole) { + if (!accessToken || !userID || !userRole || !startTime || !endTime) { return } console.log("inside updateModelMetrics - startTime:", startTime, "endTime:", endTime) @@ -1127,8 +1127,8 @@ const handleEditSubmit = async (formValues: Record) => {