fix -show num rate limit errors

ui/litellm-dashboard/src/components/model_dashboard.tsx

@@ -113,8 +113,8 @@ interface RetryPolicyObject {
 
 
 interface GlobalExceptionActivityData {
-  sum_num_exceptions: number;
+  sum_num_rate_limit_exceptions: number;
-  daily_data: { date: string; num_exceptions: number; }[];
+  daily_data: { date: string; num_rate_limit_exceptions: number; }[];
 }
 
 
@@ -310,7 +310,8 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     useState<RetryPolicyObject | null>(null);
   const [defaultRetry, setDefaultRetry] = useState<number>(0);
 
-  const [globalExceptionData, setGlobalExceptionData] = useState<GlobalExceptionActivityData[]>([]);
+  const [globalExceptionData, setGlobalExceptionData] =  useState<GlobalExceptionActivityData>({} as GlobalExceptionActivityData);
+  const [globalExceptionPerDeployment, setGlobalExceptionPerDeployment] = useState<any[]>([]);
 
   function formatCreatedAt(createdAt: string | null) {
     if (createdAt) {
@@ -654,14 +655,29 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
           dateValue.to?.toISOString()
         );
 
-        const dailExceptions = await adminGlobalActivityExceptions(
+        const dailyExceptions = await adminGlobalActivityExceptions(
           accessToken,
+          dateValue.from?.toISOString().split('T')[0],
+          dateValue.to?.toISOString().split('T')[0],
           _initial_model_group,
-          dateValue.from?.toISOString(),
-          dateValue.to?.toISOString()
         );
 
+        setGlobalExceptionData(dailyExceptions);
 
+        const dailyExceptionsPerDeplyment = await adminGlobalActivityExceptionsPerDeployment(
+          accessToken,
+          dateValue.from?.toISOString().split('T')[0],
+          dateValue.to?.toISOString().split('T')[0],
+          _initial_model_group,
+        )
+
+        setGlobalExceptionPerDeployment(dailyExceptionsPerDeplyment);
+
+        console.log("dailyExceptions:", dailyExceptions);
+
+        console.log("dailyExceptionsPerDeplyment:", dailyExceptionsPerDeplyment);
+
+      
         console.log("slowResponses:", slowResponses);
 
         setSlowResponsesData(slowResponses);
@@ -924,6 +940,30 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
       console.log("slowResponses:", slowResponses);
 
       setSlowResponsesData(slowResponses);
+
+
+      if (modelGroup) {
+        const dailyExceptions = await adminGlobalActivityExceptions(
+          accessToken,
+          startTime?.toISOString().split('T')[0],
+          endTime?.toISOString().split('T')[0],
+          modelGroup,
+        );
+  
+        setGlobalExceptionData(dailyExceptions);
+  
+        const dailyExceptionsPerDeplyment = await adminGlobalActivityExceptionsPerDeployment(
+          accessToken,
+          startTime?.toISOString().split('T')[0],
+          endTime?.toISOString().split('T')[0],
+          modelGroup,
+        )
+  
+        setGlobalExceptionPerDeployment(dailyExceptionsPerDeplyment);
+
+      }
+
+      
     } catch (error) {
       console.error("Failed to fetch model metrics", error);
     }
@@ -1801,17 +1841,110 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                 </Card>
               </Col>
             </Grid>
-            <Card className="mt-4">
+
-              <Title>Exceptions per Model</Title>
+            <Grid numItems={1} className="gap-2 w-full mt-2">
-              <BarChart
+                <Card>
-                className="h-72"
+                <Title>All Up Rate Limit Errors (429) for {selectedModelGroup}</Title>
-                data={modelExceptions}
+                <Grid numItems={1}>
-                index="model"
+                <Col>
-                categories={allExceptions}
+                <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Num Rate Limit Errors { (globalExceptionData.sum_num_rate_limit_exceptions)}</Subtitle>
-                stack={true}
+                <BarChart
-                yAxisWidth={30}
+                    className="h-40"
-              />
+                    data={globalExceptionData.daily_data}
-            </Card>
+                    index="date"
+                    colors={['rose']}
+                    categories={['num_rate_limit_exceptions']}
+                    onValueChange={(v) => console.log(v)}
+                  />
+                  </Col>
+                  <Col>
+
+                {/* <BarChart
+                    className="h-40"
+                    data={modelExceptions}
+                    index="model"
+                    categories={allExceptions}
+                    stack={true}
+                    yAxisWidth={30}
+              /> */}
+      
+
+                </Col>
+
+                </Grid>
+                
+
+                </Card>
+
+                {
+                  premiumUser ? ( 
+                    <>
+                    {globalExceptionPerDeployment.map((globalActivity, index) => (
+                <Card key={index}>
+                  <Title>{globalActivity.api_base ? globalActivity.api_base : "Unknown API Base"}</Title>
+                  <Grid numItems={1}>
+                    <Col>
+                      <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Num Rate Limit Errors (429) {(globalActivity.sum_num_rate_limit_exceptions)}</Subtitle>
+                      <BarChart
+                        className="h-40"
+                        data={globalActivity.daily_data}
+                        index="date"
+                        colors={['rose']}
+                        categories={['num_rate_limit_exceptions']}
+          
+                        onValueChange={(v) => console.log(v)}
+                      />
+                      
+                    </Col>
+                  </Grid>
+                </Card>
+              ))}
+                    </>
+                  ) : 
+                  <>
+                  {globalExceptionPerDeployment && globalExceptionPerDeployment.length > 0 &&
+                    globalExceptionPerDeployment.slice(0, 1).map((globalActivity, index) => (
+                      <Card key={index}>
+                        <Title>✨ Rate Limit Errors by Deployment</Title>
+                        <p className="mb-2 text-gray-500 italic text-[12px]">Upgrade to see exceptions for all deployments</p>
+                        <Button variant="primary" className="mb-2">
+                          <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
+                            Get Free Trial
+                          </a>
+                        </Button>
+                        <Card>
+                        <Title>{globalActivity.api_base}</Title>
+                        <Grid numItems={1}>
+                          <Col>
+                            <Subtitle
+                              style={{
+                                fontSize: "15px",
+                                fontWeight: "normal",
+                                color: "#535452",
+                              }}
+                            >
+                              Num Rate Limit Errors {(globalActivity.sum_num_rate_limit_exceptions)}
+                            </Subtitle>
+                            <BarChart
+                                className="h-40"
+                                data={globalActivity.daily_data}
+                                index="date"
+                                colors={['rose']}
+                                categories={['num_rate_limit_exceptions']}
+                  
+                                onValueChange={(v) => console.log(v)}
+                              />
+                          </Col>
+                          
+                          
+                        </Grid>
+                        </Card>
+                      </Card>
+                    ))}
+                </>
+                }              
+              </Grid>
+              
           </TabPanel>
           <TabPanel>
             <div className="flex items-center">

ui/litellm-dashboard/src/components/networking.tsx

@@ -1246,7 +1246,8 @@ export const adminGlobalActivityExceptions = async (
 export const adminGlobalActivityExceptionsPerDeployment = async (
   accessToken: String,
   startTime: String | undefined,
-  endTime: String | undefined
+  endTime: String | undefined,
+  modelGroup: String,
 ) => {
   try {
     let url = proxyBaseUrl
@@ -1257,6 +1258,10 @@ export const adminGlobalActivityExceptionsPerDeployment = async (
       url += `?start_date=${startTime}&end_date=${endTime}`;
     }
 
+    if (modelGroup) {
+      url += `&model_group=${modelGroup}`;
+    }
+
     const requestOptions: {
       method: string;
       headers: {