From 1daea28c619bc4a8ac434ae1f22ef61405aad947 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 8 Aug 2024 18:50:17 -0700
Subject: [PATCH] sort providers alphabetical order

---
 .../src/components/model_dashboard.tsx        | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index 53006c573a0..2d4fbe36f5b 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -303,6 +303,9 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   const [availableModelGroups, setAvailableModelGroups] = useState<
     Array<string>
   >([]);
+  const [availableProviders, setavailableProviders] = useState<
+  Array<string>
+>([]);
   const [selectedModelGroup, setSelectedModelGroup] = useState<string | null>(
     null
   );
@@ -619,7 +622,6 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
         setModelData(modelDataResponse);
 
         // loop through modelDataResponse and get all`model_name` values
-
         let all_model_groups: Set<string> = new Set();
         for (let i = 0; i < modelDataResponse.data.length; i++) {
           const model = modelDataResponse.data[i];
@@ -776,6 +778,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     return <div>Loading...</div>;
   }
   let all_models_on_proxy: any[] = [];
+  let all_providers: string[] = [];
 
   // loop through model data and edit each row
   for (let i = 0; i < modelData.data.length; i++) {
@@ -849,6 +852,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     modelData.data[i].input_cost = input_cost;
     modelData.data[i].output_cost = output_cost;
     modelData.data[i].litellm_model_name = litellm_model_name;
+    all_providers.push(provider);
 
     // Convert Cost in terms of Cost per 1M tokens
     if (modelData.data[i].input_cost) {
@@ -874,6 +878,22 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   }
   // when users click request access show pop up to allow them to request access
 
+  // sort modelData.data by provider alphabetically, check if provider exists and is not null / undefined
+  if (modelData.data && modelData.data.length > 0) {
+    modelData.data.sort((a: any, b: any) => {
+      if (a.provider && b.provider) {
+        return a.provider.localeCompare(b.provider);
+      } else if (a.provider && !b.provider) {
+        return -1;
+      } else if (!a.provider && b.provider) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+  }
+
+
   if (userRole && userRole == "Admin Viewer") {
     const { Title, Paragraph } = Typography;
     return (