feat(guardrails.tsx): show configured guardrails on proxy ui

'

litellm/proxy/guardrails/guardrail_endpoints.py

@@ -79,9 +79,6 @@ async def list_guardrails():
     _guardrails_config = cast(Optional[list[dict]], config.get("guardrails"))
 
     if _guardrails_config is None:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail={"error": "No guardrails found in config"},
-        )
+        return _get_guardrails_list_response([])
 
     return _get_guardrails_list_response(_guardrails_config)

ui/litellm-dashboard/src/app/page.tsx

@@ -25,7 +25,7 @@ import Usage from "@/components/usage";
 import CacheDashboard from "@/components/cache_dashboard";
 import { setGlobalLitellmHeaderName } from "@/components/networking";
 import { Organization } from "@/components/networking";
-
+import GuardrailsPanel from "@/components/guardrails";
 function getCookie(name: string) {
   const cookieValue = document.cookie
     .split("; ")
@@ -309,6 +309,8 @@ export default function CreateKeyPage() {
                 />
               ) : page == "budgets" ? (
                 <BudgetPanel accessToken={accessToken} />
+              ) : page == "guardrails" ? (
+                <GuardrailsPanel accessToken={accessToken} />
               ) : page == "general-settings" ? (
                 <GeneralSettings
                   userID={userID}

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

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Card,
+  Text,
+} from "@tremor/react";
+import { getGuardrailsList } from "./networking";
+
+interface GuardrailsPanelProps {
+  accessToken: string | null;
+}
+
+interface GuardrailItem {
+  name: string;
+  mode: string;
+  status: "always_on" | "per_request";
+}
+
+const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
+  const [guardrailsList, setGuardrailsList] = useState<GuardrailItem[]>([]);
+
+  useEffect(() => {
+    if (!accessToken) {
+      return;
+    }
+    
+    const fetchGuardrails = async () => {
+      try {
+        const response = await getGuardrailsList(accessToken);
+        setGuardrailsList(response);
+      } catch (error) {
+        console.error('Error fetching guardrails:', error);
+      }
+    };
+
+    fetchGuardrails();
+  }, [accessToken]);
+
+  return (
+    <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
+      <Card>
+        <Text>Configured guardrails and their current status.</Text>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell>Guardrail Name</TableHeaderCell>
+              <TableHeaderCell>Mode</TableHeaderCell>
+              <TableHeaderCell>Status</TableHeaderCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {guardrailsList.map((guardrail: GuardrailItem, index: number) => (
+              <TableRow key={index}>
+                <TableCell>{guardrail.name}</TableCell>
+                <TableCell>{guardrail.mode}</TableCell>
+                <TableCell>
+                  {guardrail.status === 'always_on' ? 'Always On' : 'Per Request'}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Card>
+    </div>
+  );
+};
+
+export default GuardrailsPanel;

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

@@ -67,7 +67,7 @@ const menuItems: MenuItem[] = [
     children: [
       { key: "9", page: "caching", label: "Caching", icon: <DatabaseOutlined />, roles: all_admin_roles },
       { key: "10", page: "budgets", label: "Budgets", icon: <BankOutlined />, roles: all_admin_roles },
-      { key: "11", page: "budgets", label: "Guardrails", icon: <SafetyOutlined />, roles: all_admin_roles },
+      { key: "11", page: "guardrails", label: "Guardrails", icon: <SafetyOutlined />, roles: all_admin_roles },
     ]
   },
   {