scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-09 03:18:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 188

Add Type filter to policy templates UI

Browse source
This commit is contained in:
Ishaan Jaffer 2026-02-17 16:08:18 -08:00
parent a34dbb34fb
commit 08ea3c9826
1 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
ui/litellm-dashboard/src/components/policies/policy_templates.tsx
View file

@ -117,16 +117,25 @@ const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, access
const [templates, setTemplates] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [selectedRegion, setSelectedRegion] = useState<string>("All");
const [selectedType, setSelectedType] = useState<string>("All");
const availableRegions = useMemo(() => {
const regions = new Set(templates.map(t => t.region || "Global"));
return ["All", ...Array.from(regions).sort()];
}, [templates]);
const availableTypes = useMemo(() => {
const types = new Set(templates.map(t => t.type || "General"));
return ["All", ...Array.from(types).sort()];
}, [templates]);
const filteredTemplates = useMemo(() => {
if (selectedRegion === "All") return templates;
return templates.filter(t => (t.region || "Global") === selectedRegion);
}, [templates, selectedRegion]);
return templates.filter(t => {
const regionMatch = selectedRegion === "All" || (t.region || "Global") === selectedRegion;
const typeMatch = selectedType === "All" || (t.type || "General") === selectedType;
return regionMatch && typeMatch;
});
}, [templates, selectedRegion, selectedType]);
useEffect(() => {
const fetchTemplates = async () => {
@ -169,19 +178,37 @@ const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, access
</div>
</div>
<div className="flex items-center gap-3 mb-4">
<span className="text-sm font-medium text-gray-700">Region:</span>
<Radio.Group
value={selectedRegion}
onChange={(e) => setSelectedRegion(e.target.value)}
buttonStyle="solid"
>
{availableRegions.map(region => (
<Radio.Button key={region} value={region}>
{region}
</Radio.Button>
))}
</Radio.Group>
<div className="flex items-center gap-6 mb-4">
<div className="flex items-center gap-3">
<span className="text-sm font-medium text-gray-700">Region:</span>
<Radio.Group
value={selectedRegion}
onChange={(e) => setSelectedRegion(e.target.value)}
buttonStyle="solid"
>
{availableRegions.map(region => (
<Radio.Button key={region} value={region}>
{region}
</Radio.Button>
))}
</Radio.Group>
</div>
{availableTypes.length > 2 && (
<div className="flex items-center gap-3">
<span className="text-sm font-medium text-gray-700">Type:</span>
<Radio.Group
value={selectedType}
onChange={(e) => setSelectedType(e.target.value)}
buttonStyle="solid"
>
{availableTypes.map(type => (
<Radio.Button key={type} value={type}>
{type}
</Radio.Button>
))}
</Radio.Group>
</div>
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">