diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index 08b9211c12..40c3557474 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -192,6 +192,8 @@ const ModelDashboard: React.FC = ({ const [healthCheckResponse, setHealthCheckResponse] = useState(''); const [editModalVisible, setEditModalVisible] = useState(false); const [selectedModel, setSelectedModel] = useState(null); + const [availableModelGroups, setAvailableModelGroups] = useState>([]); + const [selectedModelGroup, setSelectedModelGroup] = useState(null); const EditModelModal: React.FC = ({ visible, onCancel, model, onSubmit }) => { const [form] = Form.useForm(); @@ -406,7 +408,16 @@ const handleEditSubmit = async (formValues: Record) => { console.log("Model data response:", modelDataResponse.data); setModelData(modelDataResponse); - + // loop through modelDataResponse and get all`model_name` values + + let all_model_groups: Set = new Set(); + for (let i = 0; i < modelDataResponse.data.length; i++) { + const model = modelDataResponse.data[i]; + all_model_groups.add(model.model_name) + } + console.log("all_model_groups:", all_model_groups) + let _array_model_groups = Array.from(all_model_groups) + setAvailableModelGroups(_array_model_groups); // if userRole is Admin, show the pending requests if (userRole === "Admin" && accessToken) { @@ -623,12 +634,35 @@ const handleEditSubmit = async (formValues: Record) => { +
+ Filter by Public Model Name + +
- Model Name + Public Model Name Provider @@ -649,7 +683,11 @@ const handleEditSubmit = async (formValues: Record) => { - {modelData.data.map((model: any, index: number) => ( + { modelData.data + .filter((model: any) => + selectedModelGroup === "all" || model.model_name === selectedModelGroup || selectedModelGroup === null || selectedModelGroup === undefined || selectedModelGroup === "" + ) + .map((model: any, index: number) => ( {model.model_name}