fix(guardrails.tsx): style improvements

Author: krrishdholakia

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

@@ -15,6 +15,10 @@ interface GuardrailsPanelProps {
   accessToken: string | null;
 }
 
+interface GuardrailsResponse {
+    guardrails: GuardrailItem[];
+}
+
 interface GuardrailItem {
   name: string;
   mode: string;
@@ -32,7 +36,10 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
     const fetchGuardrails = async () => {
       try {
         const response = await getGuardrailsList(accessToken);
-        setGuardrailsList(response);
+        const data: GuardrailsResponse = await response.json();
+
+        setGuardrailsList(data.guardrails);
+
       } catch (error) {
         console.error('Error fetching guardrails:', error);
       }
@@ -43,8 +50,18 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
 
   return (
     <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
+        <Text className="mb-4">
+        Configured guardrails and their current status. Setup guardrails in config.yaml.{" "}
+        <a 
+            href="https://docs.litellm.ai/docs/proxy/guardrails/quick_start" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="text-blue-500 hover:text-blue-700 underline"
+        >
+            Docs
+        </a>
+        </Text>
       <Card>
-        <Text>Configured guardrails and their current status.</Text>
         <Table>
           <TableHead>
             <TableRow>
@@ -55,15 +72,21 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
           </TableHead>
 
           <TableBody>
-            {guardrailsList.map((guardrail: GuardrailItem, index: number) => (
-              <TableRow key={index}>
+            { (!guardrailsList || guardrailsList.length === 0) ? (
+              <TableRow>
+                <TableCell colSpan={3} className="mt-4 text-gray-500 text-center py-4">No guardrails configured</TableCell>
+              </TableRow>
+            ) : (
+              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>
-            ))}
+                </TableRow>
+              ))
+            )}
           </TableBody>
         </Table>
       </Card>