Merge pull request #3015 from zJuuu/model-id-as-key

[Fix] Set model_id in db on model creation + modal on model deletion

litellm/proxy/proxy_server.py

@@ -7004,6 +7004,7 @@ async def add_new_model(
                     ).decode("utf-8")
             await prisma_client.db.litellm_proxymodeltable.create(
                 data={
+                    "model_id": model_params.model_info.id,
                     "model_name": model_params.model_name,
                     "litellm_params": model_params.litellm_params.model_dump_json(exclude_none=True),  # type: ignore
                     "model_info": model_params.model_info.model_dump_json(  # type: ignore
@@ -7278,9 +7279,19 @@ async def delete_model(model_info: ModelInfoDelete):
             - store keys separately
             """
             # encrypt litellm params #
-            await prisma_client.db.litellm_proxymodeltable.delete(
+            result = await prisma_client.db.litellm_proxymodeltable.delete(
                 where={"model_id": model_info.id}
             )
+            
+            if result is None:
+                raise HTTPException(
+                    status_code=400,
+                    detail={
+                        "error": f"Model with id={model_info.id} not found in db"
+                    },
+                )
+            
+            return {"message": f"Model: {result.model_id} deleted successfully"}
         else:
             raise HTTPException(
                 status_code=500,
@@ -7288,7 +7299,7 @@ async def delete_model(model_info: ModelInfoDelete):
                     "error": "Set `'STORE_MODEL_IN_DB='True'` in your env to enable this feature."
                 },
             )
-        return {"message": "Model deleted successfully"}
+        
 
     except Exception as e:
         if isinstance(e, HTTPException):

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

@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useState } from "react";
+import { Grid, Col, Icon } from "@tremor/react";
+import { Title } from "@tremor/react";
+import {
+    Modal,
+    message,
+} from "antd";
+import { modelDeleteCall } from "./networking";
+import { TrashIcon } from "@heroicons/react/outline";
+
+interface DeleteModelProps {
+    modelID: string;
+    accessToken: string;
+}
+
+const DeleteModelButton: React.FC<DeleteModelProps> = ({
+    modelID,
+    accessToken,
+}) => {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    const handleDelete = async () => {
+        try {
+            message.info("Making API Call");
+            setIsModalVisible(true);
+            const response = await modelDeleteCall(accessToken, modelID);
+
+            console.log("model delete Response:", response);
+            message.success(`Model ${modelID} deleted successfully`);
+            setIsModalVisible(false);
+        } catch (error) {
+            console.error("Error deleting the model:", error);
+        }
+    };
+
+    return (
+        <div>
+            <Icon
+                onClick={() => setIsModalVisible(true)}
+                icon={TrashIcon}
+                size="sm"
+            />
+
+            <Modal
+                open={isModalVisible}
+                onOk={handleDelete}
+                okType="danger"
+                onCancel={() => setIsModalVisible(false)}
+            >
+                <Grid numItems={1} className="gap-2 w-full">
+
+                    <Title>Delete Model</Title>
+                    <Col numColSpan={1}>
+                        <p>
+                            Are you sure you want to delete this model? This action is irreversible.
+                        </p>
+                    </Col>
+                    <Col numColSpan={1}>
+                        <p>
+                            Model ID: <b>{modelID}</b>
+                        </p>
+                    </Col>
+                </Grid>
+            </Modal>
+        </div>
+    );
+};
+
+export default DeleteModelButton;

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

@@ -35,6 +35,7 @@ import RequestAccess from "./request_model_access";
 import { Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { InformationCircleIcon, PencilAltIcon, PencilIcon, StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
+import DeleteModelButton from "./delete_model_button";
 const { Title: Title2, Link } = Typography;
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';
@@ -261,11 +262,6 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     );
   }
 
-  const handleDelete = async (model_id: string) => {
-    await modelDeleteCall(accessToken, model_id)
-  };
-
-
   const setProviderModelsFn = (provider: string) => {
     console.log(`received provider string: ${provider}`)
     const providerKey = Object.keys(Providers).find(key => (Providers as {[index: string]: any})[key] === provider);
@@ -480,7 +476,9 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                   <TableCell>{model.input_cost}</TableCell>
                   <TableCell>{model.output_cost}</TableCell>
                   <TableCell>{model.max_tokens}</TableCell>
-                  <TableCell><Icon icon={TrashIcon} size="sm" onClick={() => handleDelete(model.model_info.id)}/></TableCell>
+                  <TableCell>
+                          <DeleteModelButton modelID={model.model_info.id} accessToken={accessToken} />
+                        </TableCell>
                 </TableRow>
               ))}
             </TableBody>