ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): use antd grid for guardrails monitor metrics

Browse Source 
Replace Tailwind grid wrappers with antd Row/Col in Guardrails Monitor overview and detail metric sections to keep layout primitives consistent with the ongoing antd migration.
This commit is contained in:
Ryan Crabbe 2026-04-15 11:34:44 -07:00
parent b599c8bfd4
commit 48aa776032
No known key found for this signature in database
2 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx
View File

@ -5,7 +5,7 @@ import {
WarningOutlined,
} from "@ant-design/icons";
import { useQuery } from "@tanstack/react-query";
import { Button, Spin, Tabs } from "antd";
import { Button, Col, Row, Spin, Tabs } from "antd";
import React, { useMemo, useState } from "react";
import {
getGuardrailsUsageDetail,
@ -171,11 +171,11 @@ export function GuardrailDetail({
{activeTab === "overview" && (
<div className="space-y-6 mt-4">
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<div className="min-w-0">
<Row gutter={[16, 16]}>
<Col xs={12} md={8}>
<MetricCard label="Requests Evaluated" value={data.requestsEvaluated.toLocaleString()} />
</div>
<div className="min-w-0">
</Col>
<Col xs={12} md={8}>
<MetricCard
label="Fail Rate"
value={`${data.failRate}%`}
@ -185,8 +185,8 @@ export function GuardrailDetail({
subtitle={`${Math.round((data.requestsEvaluated * data.failRate) / 100).toLocaleString()} blocked`}
icon={data.failRate > 15 ? <WarningOutlined className="text-red-400" /> : undefined}
/>
</div>
<div className="min-w-0">
</Col>
<Col xs={12} md={8}>
<MetricCard
label="Avg. latency added"
value={data.avgLatency != null ? `${Math.round(data.avgLatency)}ms` : "—"}
@ -201,8 +201,8 @@ export function GuardrailDetail({
}
subtitle={data.avgLatency != null ? "Per request (avg)" : "No data"}
/>
</div>
</div>
</Col>
</Row>
<LogViewer
guardrailName={data.name}

26
ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx
View File

@ -6,7 +6,7 @@ import {
WarningOutlined,
} from "@ant-design/icons";
import { useQuery } from "@tanstack/react-query";
import { Button, Card, Spin, Table, Typography } from "antd";
import { Button, Card, Col, Row, Spin, Table, Typography } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useMemo, useState } from "react";
import { getGuardrailsUsageOverview } from "@/components/networking";
@ -217,27 +217,27 @@ export function GuardrailsOverview({
</div>
</div>
<div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6 items-stretch">
<div className="flex flex-col min-w-0">
<Row gutter={[16, 16]} className="mb-6">
<Col xs={12} sm={12} md={8} flex="1 0 20%">
<MetricCard label="Total Evaluations" value={metrics.totalRequests.toLocaleString()} />
</div>
<div className="flex flex-col min-w-0">
</Col>
<Col xs={12} sm={12} md={8} flex="1 0 20%">
<MetricCard
label="Blocked Requests"
value={metrics.totalBlocked.toLocaleString()}
valueColor="text-red-600"
icon={<WarningOutlined className="text-red-400" />}
/>
</div>
<div className="flex flex-col min-w-0">
</Col>
<Col xs={12} sm={12} md={8} flex="1 0 20%">
<MetricCard
label="Pass Rate"
value={`${metrics.passRate}%`}
valueColor="text-green-600"
icon={<RiseOutlined className="text-green-400" />}
/>
</div>
<div className="flex flex-col min-w-0">
</Col>
<Col xs={12} sm={12} md={8} flex="1 0 20%">
<MetricCard
label="Avg. latency added"
value={`${metrics.avgLatency}ms`}
@ -249,11 +249,11 @@ export function GuardrailsOverview({
: "text-green-600"
}
/>
</div>
<div className="flex flex-col min-w-0">
</Col>
<Col xs={12} sm={12} md={8} flex="1 0 20%">
<MetricCard label="Active Guardrails" value={metrics.count} />
</div>
</div>
</Col>
</Row>
<div className="mb-6">
<ScoreChart data={chartData} />