diff --git a/ui/litellm-dashboard/eslint-metrics.json b/ui/litellm-dashboard/eslint-metrics.json index ded6ab97e1e..37bad071081 100644 --- a/ui/litellm-dashboard/eslint-metrics.json +++ b/ui/litellm-dashboard/eslint-metrics.json @@ -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 diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json index fe8f182c106..ca0ceea4166 100644 --- a/ui/litellm-dashboard/eslint-suppressions.json +++ b/ui/litellm-dashboard/eslint-suppressions.json @@ -1309,9 +1309,6 @@ } }, "src/components/alerting/dynamic_form.tsx": { - "no-nested-ternary": { - "count": 4 - }, "no-restricted-imports": { "count": 1 } diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx index 29dc398ee6a..33df174070e 100644 --- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx +++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx @@ -60,6 +60,77 @@ const DynamicForm: React.FC = ({ return ""; }; + const renderFieldInput = (value: AlertingSetting): React.ReactNode => { + if (value.field_type === "Integer") { + return ( + handleInputChange(value.field_name, e)} + className="p-0" + /> + ); + } + if (value.field_type === "Boolean") { + return ( + { + handleInputChange(value.field_name, checked); + form.setFieldsValue({ [value.field_name]: checked }); + }} + /> + ); + } + if (value.field_type === "List") { + return ( + handleInputChange(value.field_name, e.target.value)} + placeholder="e.g. 0.8, 0.85, 0.95" + /> + ); + } + return handleInputChange(value.field_name, e)} />; + }; + + const renderSettingCell = (value: AlertingSetting): React.ReactNode => { + if (value.premium_field && !premiumUser) { + return ( + + + + ); + } + return ( + + {renderFieldInput(value)} + + ); + }; + + const renderStoredBadge = (storedInDb: boolean | null): React.ReactNode => { + if (storedInDb === true) { + return ( + + In DB + + ); + } + if (storedInDb === false) { + return In Config; + } + return Not Set; + }; + return (
{alertingSettings.map((value, index) => ( @@ -77,86 +148,8 @@ const DynamicForm: React.FC = ({ {value.field_description}

- {value.premium_field ? ( - premiumUser ? ( - - - {value.field_type === "Integer" ? ( - handleInputChange(value.field_name, e)} - /> - ) : value.field_type === "Boolean" ? ( - handleInputChange(value.field_name, checked)} - /> - ) : value.field_type === "List" ? ( - handleInputChange(value.field_name, e.target.value)} - placeholder="e.g. 0.8, 0.85, 0.95" - /> - ) : ( - handleInputChange(value.field_name, e)} /> - )} - - - ) : ( - - - - ) - ) : ( - - - {value.field_type === "Integer" ? ( - handleInputChange(value.field_name, e)} - className="p-0" - /> - ) : value.field_type === "Boolean" ? ( - { - handleInputChange(value.field_name, checked); - form.setFieldsValue({ [value.field_name]: checked }); - }} - /> - ) : value.field_type === "List" ? ( - handleInputChange(value.field_name, e.target.value)} - placeholder="e.g. 0.8, 0.85, 0.95" - /> - ) : ( - handleInputChange(value.field_name, e)} /> - )} - - - )} - - {value.stored_in_db == true ? ( - - In DB - - ) : value.stored_in_db == false ? ( - In Config - ) : ( - Not Set - )} - + {renderSettingCell(value)} + {renderStoredBadge(value.stored_in_db)} handleResetField(value.field_name, index)}> Reset