From f2dc261efc276a7857550adcd7943e586ccee213 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 15 May 2025 15:38:18 -0700
Subject: [PATCH] [Feat] UI: Add support for Deleting Guardrail on UI (#10869)

* show id on guardrails UI

* feat: show guardrail_id on UI

* guardrailToDelete

* ui - add DELETE guardrail

* Update ui/litellm-dashboard/src/components/guardrails.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update ui/litellm-dashboard/src/components/guardrails.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix ui linting

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../proxy/guardrails/guardrail_endpoints.py   |  1 +
 litellm/types/guardrails.py                   |  1 +
 .../src/components/guardrails.tsx             | 25 ++++++++++-------
 .../components/guardrails/guardrail_table.tsx | 27 ++++++++-----------
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/litellm/proxy/guardrails/guardrail_endpoints.py b/litellm/proxy/guardrails/guardrail_endpoints.py
index 9e4cf4c3c0..cb4f01e719 100644
--- a/litellm/proxy/guardrails/guardrail_endpoints.py
+++ b/litellm/proxy/guardrails/guardrail_endpoints.py
@@ -151,6 +151,7 @@ async def list_guardrails_v2():
         for guardrail in guardrails:
             guardrail_configs.append(
                 GuardrailInfoResponse(
+                    guardrail_id=guardrail.get("guardrail_id"),
                     guardrail_name=guardrail.get("guardrail_name"),
                     litellm_params=guardrail.get("litellm_params"),
                     guardrail_info=guardrail.get("guardrail_info"),
diff --git a/litellm/types/guardrails.py b/litellm/types/guardrails.py
index 5def9835cf..0d1c132952 100644
--- a/litellm/types/guardrails.py
+++ b/litellm/types/guardrails.py
@@ -288,6 +288,7 @@ class GuardrailLiteLLMParamsResponse(BaseModel):
 
 
 class GuardrailInfoResponse(BaseModel):
+    guardrail_id: Optional[str] = None
     guardrail_name: str
     litellm_params: GuardrailLiteLLMParamsResponse
     guardrail_info: Optional[Dict]
diff --git a/ui/litellm-dashboard/src/components/guardrails.tsx b/ui/litellm-dashboard/src/components/guardrails.tsx
index 1b8b8fd43e..354ad43f0e 100644
--- a/ui/litellm-dashboard/src/components/guardrails.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails.tsx
@@ -82,6 +82,7 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
   const handleDeleteConfirm = async () => {
     if (!guardrailToDelete || !accessToken) return;
     
+    // Log removed to maintain clean production code
     setIsDeleting(true);
     try {
       await deleteGuardrailCall(accessToken, guardrailToDelete.id);
@@ -127,16 +128,20 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
         onSuccess={handleSuccess}
       />
 
-      <Modal
-        title="Delete Guardrail"
-        open={guardrailToDelete !== null}
-        onOk={handleDeleteConfirm}
-        onCancel={handleDeleteCancel}
-        confirmLoading={isDeleting}
-        okText="Delete"
-        okButtonProps={{ danger: true }}
-      >
-      </Modal>
+      {guardrailToDelete && (
+        <Modal
+          title="Delete Guardrail"
+          open={guardrailToDelete !== null}
+          onOk={handleDeleteConfirm}
+          onCancel={handleDeleteCancel}
+          confirmLoading={isDeleting}
+          okText="Delete"
+          okButtonProps={{ danger: true }}
+        >
+          <p>Are you sure you want to delete guardrail: {guardrailToDelete.name} ?</p>
+          <p>This action cannot be undone.</p>
+        </Modal>
+      )}
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx b/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
index b52c29d6c3..754bd8d1ac 100644
--- a/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
@@ -82,6 +82,17 @@ const GuardrailTable: React.FC<GuardrailTableProps> = ({
   };
 
   const columns: ColumnDef<GuardrailItem>[] = [
+    {
+      header: "Guardrail ID",
+      accessorKey: "guardrail_id",
+      cell: (info: any) => (
+        <Tooltip title={String(info.getValue() || "")}>
+          <span className="font-mono text-xs max-w-[15ch] truncate block">
+            {String(info.getValue() || "")}
+          </span>
+        </Tooltip>
+      ),
+    },
     {
       header: "Name",
       accessorKey: "guardrail_name",
@@ -132,22 +143,6 @@ const GuardrailTable: React.FC<GuardrailTableProps> = ({
         );
       },
     },
-    {
-      header: "Status",
-      accessorKey: "litellm_params.default_on",
-      cell: ({ row }) => {
-        const guardrail = row.original;
-        return (
-          <div className={`inline-flex rounded-full px-2 py-1 text-xs font-medium
-              ${guardrail.litellm_params.default_on 
-              ? 'bg-green-100 text-green-800'  // Always On styling
-              : 'bg-gray-100 text-gray-800'    // Per Request styling
-              }`}>
-              {guardrail.litellm_params.default_on ? 'Always On' : 'Per Request'}
-          </div>
-        );
-      },
-    },
     {
       header: "Created At",
       accessorKey: "created_at",