From 0dfcf325b4d9a2460ababbd336c54d7a3c3e2d9f Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Mon, 10 Feb 2025 17:35:36 -0800
Subject: [PATCH] fix(guardrails.tsx): show guardrail name, status, mode on ui

---
 .../src/components/guardrails.tsx             | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/guardrails.tsx b/ui/litellm-dashboard/src/components/guardrails.tsx
index 48ee730af33..d603d656a04 100644
--- a/ui/litellm-dashboard/src/components/guardrails.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails.tsx
@@ -20,9 +20,13 @@ interface GuardrailsResponse {
 }
 
 interface GuardrailItem {
-  name: string;
-  mode: string;
-  status: "always_on" | "per_request";
+    guardrail_name: string | null;
+    litellm_params: {
+        guardrail: string;
+        mode: string;
+        default_on: boolean;
+    };
+    guardrail_info: Record<string, any> | null;
 }
 
 const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
@@ -35,10 +39,9 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
     
     const fetchGuardrails = async () => {
       try {
-        const response = await getGuardrailsList(accessToken);
-        const data: GuardrailsResponse = await response.json();
-
-        setGuardrailsList(data.guardrails);
+        const response: GuardrailsResponse = await getGuardrailsList(accessToken);
+        console.log(`guardrails: ${JSON.stringify(response)}`);
+        setGuardrailsList(response.guardrails);
 
       } catch (error) {
         console.error('Error fetching guardrails:', error);
@@ -79,10 +82,10 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
             ) : (
               guardrailsList?.map((guardrail: GuardrailItem, index: number) => (
                 <TableRow key={index}>
-                <TableCell>{guardrail.name}</TableCell>
-                <TableCell>{guardrail.mode}</TableCell>
+                <TableCell>{guardrail.guardrail_name}</TableCell>
+                <TableCell>{guardrail.litellm_params.mode}</TableCell>
                 <TableCell>
-                  {guardrail.status === 'always_on' ? 'Always On' : 'Per Request'}
+                  {guardrail.litellm_params.default_on ? 'Always On' : 'Per Request'}
                 </TableCell>
                 </TableRow>
               ))