scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

fix(guardrails.tsx): style improvements

Browse source
This commit is contained in:
Krrish Dholakia 2025-02-10 16:53:55 -08:00
parent c7a3e5b4b2
commit 93595826fb
1 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ui/litellm-dashboard/src/components/guardrails.tsx
View file

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