add delete button with modal

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;
 
 interface ModelDashboardProps {
@@ -223,11 +224,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 providerEnumValue = Providers[provider as keyof typeof Providers];
@@ -406,7 +402,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>