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

fix(ui): replace nested ternaries in alerting form with render helpers

Browse source 
The alerting settings form used nested ternary chains to pick the input
component per field type and to render the premium and stored-in-db cells.
Adding the List field type pushed the field-type chain past the point
where no-nested-ternary surfaced unsuppressed errors on CI.

Extract renderFieldInput, renderSettingCell, and renderStoredBadge, each
using early returns, which also removes the field-type block that was
duplicated across the premium and non-premium branches. Prune the now-stale
no-nested-ternary suppression for the file and refresh eslint-metrics.json
for the post-merge no-large-inline-object-arg count.
This commit is contained in:
Dimitris Spachos 2026-07-09 11:18:00 +03:00
parent 0659ea48ab
commit 226170bf9d
3 changed files with 74 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/litellm-dashboard/eslint-metrics.json
View file

@ -1,7 +1,7 @@
{
"@typescript-eslint/no-explicit-any": 1982,
"complexity": 128,
"local/no-large-inline-object-arg": 512,
"local/no-large-inline-object-arg": 519,
"local/no-long-condition-chain": 233,
"max-depth": 59,
"no-console": 15

3
ui/litellm-dashboard/eslint-suppressions.json
View file

@ -1309,9 +1309,6 @@
}
},
"src/components/alerting/dynamic_form.tsx": {
"no-nested-ternary": {
"count": 4
},
"no-restricted-imports": {
"count": 1
}

153
ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
View file

@ -60,6 +60,77 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
return "";
};
const renderFieldInput = (value: AlertingSetting): React.ReactNode => {
if (value.field_type === "Integer") {
return (
<InputNumber
step={1}
value={value.field_value}
onChange={(e) => handleInputChange(value.field_name, e)}
className="p-0"
/>
);
}
if (value.field_type === "Boolean") {
return (
<Switch
checked={value.field_value}
onChange={(checked) => {
handleInputChange(value.field_name, checked);
form.setFieldsValue({ [value.field_name]: checked });
}}
/>
);
}
if (value.field_type === "List") {
return (
<Input
value={listDisplayValue(value.field_value)}
onChange={(e) => handleInputChange(value.field_name, e.target.value)}
placeholder="e.g. 0.8, 0.85, 0.95"
/>
);
}
return <Input value={value.field_value} onChange={(e) => handleInputChange(value.field_name, e)} />;
};
const renderSettingCell = (value: AlertingSetting): React.ReactNode => {
if (value.premium_field && !premiumUser) {
return (
<TableCell>
<Button className="flex items-center justify-center">
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
✨ Enterprise Feature
</a>
</Button>
</TableCell>
);
}
return (
<Form.Item
name={value.field_name}
className="mb-0"
valuePropName={value.field_type === "Boolean" ? "checked" : "value"}
>
<TableCell>{renderFieldInput(value)}</TableCell>
</Form.Item>
);
};
const renderStoredBadge = (storedInDb: boolean | null): React.ReactNode => {
if (storedInDb === true) {
return (
<Badge icon={CheckCircleIcon} className="text-white">
In DB
</Badge>
);
}
if (storedInDb === false) {
return <Badge className="text-gray bg-white outline-solid">In Config</Badge>;
}
return <Badge className="text-gray bg-white outline-solid">Not Set</Badge>;
};
return (
<Form form={form} onFinish={onFinish} labelAlign="left">
{alertingSettings.map((value, index) => (
@ -77,86 +148,8 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
{value.field_description}
</p>
</TableCell>
{value.premium_field ? (
premiumUser ? (
<Form.Item name={value.field_name}>
<TableCell>
{value.field_type === "Integer" ? (
<InputNumber
step={1}
value={value.field_value}
onChange={(e) => handleInputChange(value.field_name, e)}
/>
) : value.field_type === "Boolean" ? (
<Switch
checked={value.field_value}
onChange={(checked) => handleInputChange(value.field_name, checked)}
/>
) : value.field_type === "List" ? (
<Input
value={listDisplayValue(value.field_value)}
onChange={(e) => handleInputChange(value.field_name, e.target.value)}
placeholder="e.g. 0.8, 0.85, 0.95"
/>
) : (
<Input value={value.field_value} onChange={(e) => handleInputChange(value.field_name, e)} />
)}
</TableCell>
</Form.Item>
) : (
<TableCell>
<Button className="flex items-center justify-center">
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
✨ Enterprise Feature
</a>
</Button>
</TableCell>
)
) : (
<Form.Item
name={value.field_name}
className="mb-0"
valuePropName={value.field_type === "Boolean" ? "checked" : "value"}
>
<TableCell>
{value.field_type === "Integer" ? (
<InputNumber
step={1}
value={value.field_value}
onChange={(e) => handleInputChange(value.field_name, e)}
className="p-0"
/>
) : value.field_type === "Boolean" ? (
<Switch
checked={value.field_value}
onChange={(checked) => {
handleInputChange(value.field_name, checked);
form.setFieldsValue({ [value.field_name]: checked });
}}
/>
) : value.field_type === "List" ? (
<Input
value={listDisplayValue(value.field_value)}
onChange={(e) => handleInputChange(value.field_name, e.target.value)}
placeholder="e.g. 0.8, 0.85, 0.95"
/>
) : (
<Input value={value.field_value} onChange={(e) => handleInputChange(value.field_name, e)} />
)}
</TableCell>
</Form.Item>
)}
<TableCell>
{value.stored_in_db == true ? (
<Badge icon={CheckCircleIcon} className="text-white">
In DB
</Badge>
) : value.stored_in_db == false ? (
<Badge className="text-gray bg-white outline-solid">In Config</Badge>
) : (
<Badge className="text-gray bg-white outline-solid">Not Set</Badge>
)}
</TableCell>
{renderSettingCell(value)}
<TableCell>{renderStoredBadge(value.stored_in_db)}</TableCell>
<TableCell>
<Icon icon={TrashIcon} color="red" onClick={() => handleResetField(value.field_name, index)}>
Reset