[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>

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"),

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]

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>
   );
 };

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",