Merge pull request #25803 from BerriAI/litellm_guardrails-monitor-antd-layout

refactor(ui): reduce Tremor usage in Guardrails Monitor layout

ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailDetail.tsx

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

ui/litellm-dashboard/src/components/GuardrailsMonitor/GuardrailsOverview.tsx

@@ -6,8 +6,7 @@ import {
   WarningOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@tanstack/react-query";
-import { Card, Col, Grid, Title } from "@tremor/react";
-import { Button, Spin, Table } 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";
@@ -218,11 +217,11 @@ export function GuardrailsOverview({
         </div>
       </div>
 
-      <Grid numItems={2} numItemsLg={5} className="gap-4 mb-6 items-stretch">
-        <Col className="flex flex-col">
+      <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()} />
         </Col>
-        <Col className="flex flex-col">
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard
             label="Blocked Requests"
             value={metrics.totalBlocked.toLocaleString()}
@@ -230,7 +229,7 @@ export function GuardrailsOverview({
             icon={<WarningOutlined className="text-red-400" />}
           />
         </Col>
-        <Col className="flex flex-col">
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard
             label="Pass Rate"
             value={`${metrics.passRate}%`}
@@ -238,7 +237,7 @@ export function GuardrailsOverview({
             icon={<RiseOutlined className="text-green-400" />}
           />
         </Col>
-        <Col className="flex flex-col">
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
           <MetricCard
             label="Avg. latency added"
             value={`${metrics.avgLatency}ms`}
@@ -251,19 +250,19 @@ export function GuardrailsOverview({
             }
           />
         </Col>
-        <Col className="flex flex-col">
-          <MetricCard
-            label="Active Guardrails"
-            value={metrics.count}
-          />
+        <Col xs={12} sm={12} md={8} flex="1 0 20%">
+          <MetricCard label="Active Guardrails" value={metrics.count} />
         </Col>
-      </Grid>
+      </Row>
 
       <div className="mb-6">
         <ScoreChart data={chartData} />
       </div>
 
-      <Card className="bg-white border border-gray-200 rounded-lg">
+      <Card
+        className="border border-gray-200 rounded-lg bg-white"
+        styles={{ body: { padding: 0 } }}
+      >
         {(isLoading || error) && (
           <div className="px-6 py-4 border-b border-gray-200 flex items-center gap-2">
             {isLoading && <Spin size="small" />}
@@ -272,9 +271,9 @@ export function GuardrailsOverview({
         )}
         <div className="px-6 py-4 border-b border-gray-200 flex items-start justify-between gap-4">
           <div>
-            <Title className="text-base font-semibold text-gray-900">
+            <Typography.Title level={5} className="!mb-0 text-gray-900">
               Guardrail Performance
-            </Title>
+            </Typography.Title>
             <p className="text-xs text-gray-500 mt-0.5">
               Click a guardrail to view details, logs, and configuration
             </p>

ui/litellm-dashboard/src/components/GuardrailsMonitor/ScoreChart.tsx

@@ -11,6 +11,7 @@ interface ScoreChartProps {
 
 export function ScoreChart({ data }: ScoreChartProps) {
   const chartData = data && data.length > 0 ? data : [];
+
   return (
     <Card className="bg-white border border-gray-200">
       <Title className="text-base font-semibold text-gray-900 mb-4">