build(ui): add enterprise cta

litellm/proxy/_types.py

@@ -837,6 +837,7 @@ class ConfigList(LiteLLMBase):
     field_value: Any
     stored_in_db: Optional[bool]
     field_default_value: Any
+    premium_field: bool = False
 
 
 class ConfigGeneralSettings(LiteLLMBase):

litellm/proxy/proxy_server.py

@@ -9918,6 +9918,9 @@ async def alerting_settings(
                 field_value=_slack_alerting_args_dict.get(field_name, None),
                 stored_in_db=_stored_in_db,
                 field_default_value=field_info.default,
+                premium_field=(
+                    True if field_name == "region_outage_alert_ttl" else False
+                ),
             )
             return_val.append(_response_obj)
     return return_val

ui/litellm-dashboard/src/app/page.tsx

@@ -182,6 +182,7 @@ const CreateKeyPage = () => {
               userID={userID}
               userRole={userRole}
               accessToken={accessToken}
+              premiumUser={premiumUser}
             />
           ) : page == "budgets" ? (
             <BudgetPanel accessToken={accessToken} />

ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx

@@ -25,13 +25,18 @@ interface alertingSettingsItem {
   field_default_value: any;
   field_description: string;
   stored_in_db: boolean | null;
+  premium_field: boolean;
 }
 
 interface AlertingSettingsProps {
   accessToken: string | null;
+  premiumUser: boolean;
 }
 
-const AlertingSettings: React.FC<AlertingSettingsProps> = ({ accessToken }) => {
+const AlertingSettings: React.FC<AlertingSettingsProps> = ({
+  accessToken,
+  premiumUser,
+}) => {
   const [alertingSettings, setAlertingSettings] = useState<
     alertingSettingsItem[]
   >([]);
@@ -116,6 +121,7 @@ const AlertingSettings: React.FC<AlertingSettingsProps> = ({ accessToken }) => {
       handleInputChange={handleInputChange}
       handleResetField={handleResetField}
       handleSubmit={handleSubmit}
+      premiumUser={premiumUser}
     />
   );
 };

ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx

@@ -9,6 +9,7 @@ interface AlertingSetting {
   field_type: string;
   field_value: any;
   stored_in_db: boolean | null;
+  premium_field: boolean;
 }
 
 interface DynamicFormProps {
@@ -16,6 +17,7 @@ interface DynamicFormProps {
   handleInputChange: (fieldName: string, newValue: any) => void;
   handleResetField: (fieldName: string, index: number) => void;
   handleSubmit: (formValues: Record<string, any>) => void;
+  premiumUser: boolean;
 }
 
 const DynamicForm: React.FC<DynamicFormProps> = ({
@@ -23,19 +25,27 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   handleInputChange,
   handleResetField,
   handleSubmit,
+  premiumUser,
 }) => {
   const [form] = Form.useForm();
 
   const onFinish = () => {
     const formData = form.getFieldsValue();
-    handleSubmit(formData);
+    const isEmpty = Object.values(formData).some(
+      (value) => value === "" || value === null || value === undefined
+    );
+    if (!isEmpty) {
+      handleSubmit(formData);
+    } else {
+      console.log("Some form fields are empty.");
+    }
   };
 
   return (
     <Form form={form} onFinish={onFinish} labelAlign="left">
       {alertingSettings.map((value, index) => (
         <TableRow key={index}>
-          <TableCell>
+          <TableCell align="center">
             <Text>{value.field_name}</Text>
             <p
               style={{
@@ -48,22 +58,52 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
               {value.field_description}
             </p>
           </TableCell>
-          <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)}
-                />
-              ) : (
-                <Input
-                  value={value.field_value}
-                  onChange={(e) => handleInputChange(value.field_name, e)}
-                />
-              )}
-            </TableCell>
-          </Form.Item>
+          {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)}
+                    />
+                  ) : (
+                    <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">
+              <TableCell>
+                {value.field_type === "Integer" ? (
+                  <InputNumber
+                    step={1}
+                    value={value.field_value}
+                    onChange={(e) => handleInputChange(value.field_name, e)}
+                    className="p-0"
+                  />
+                ) : (
+                  <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">

ui/litellm-dashboard/src/components/model_metrics/time_to_first_token.tsx

@@ -27,9 +27,9 @@ const TimeToFirstToken: React.FC<TimeToFirstTokenProps> = ({
     />
   ) : (
     <div>
-      <Callout title="Premium Feature" color="teal" className="mt-2 mb-4">
-        Premium features are available for users with a specific license, please
-        contact LiteLLM to unlock this limitation.
+      <Callout title="✨ Enterprise Feature" color="teal" className="mt-2 mb-4">
+        Enterprise features are available for users with a specific license,
+        please contact LiteLLM to unlock this limitation.
       </Callout>
       <Button variant="primary">
         <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">

ui/litellm-dashboard/src/components/navbar.tsx

@@ -88,7 +88,7 @@ const Navbar: React.FC<NavbarProps> = ({
                 textDecoration: "underline",
               }}
             >
-              Request hosted proxy
+              Get enterpise license
             </a>
           </div>
         ) : null}

ui/litellm-dashboard/src/components/settings.tsx

@@ -36,6 +36,7 @@ interface SettingsPageProps {
   accessToken: string | null;
   userRole: string | null;
   userID: string | null;
+  premiumUser: boolean;
 }
 
 interface AlertingVariables {
@@ -88,6 +89,7 @@ const Settings: React.FC<SettingsPageProps> = ({
   accessToken,
   userRole,
   userID,
+  premiumUser,
 }) => {
   const [callbacks, setCallbacks] =
     useState<AlertingObject[]>(defaultLoggingObject);
@@ -460,12 +462,32 @@ const Settings: React.FC<SettingsPageProps> = ({
                       ([key, value], index) => (
                         <TableRow key={index}>
                           <TableCell>
-                            <Switch
-                              id="switch"
-                              name="switch"
-                              checked={isAlertOn(key)}
-                              onChange={() => handleSwitchChange(key)}
-                            />
+                            {key == "region_outage_alerts" ? (
+                              premiumUser ? (
+                                <Switch
+                                  id="switch"
+                                  name="switch"
+                                  checked={isAlertOn(key)}
+                                  onChange={() => handleSwitchChange(key)}
+                                />
+                              ) : (
+                                <Button className="flex items-center justify-center">
+                                  <a
+                                    href="https://forms.gle/W3U4PZpJGFHWtHyA9"
+                                    target="_blank"
+                                  >
+                                    ✨ Enterprise Feature
+                                  </a>
+                                </Button>
+                              )
+                            ) : (
+                              <Switch
+                                id="switch"
+                                name="switch"
+                                checked={isAlertOn(key)}
+                                onChange={() => handleSwitchChange(key)}
+                              />
+                            )}
                           </TableCell>
                           <TableCell>
                             <Text>{value}</Text>
@@ -499,7 +521,10 @@ const Settings: React.FC<SettingsPageProps> = ({
               </Card>
             </TabPanel>
             <TabPanel>
-              <AlertingSettings accessToken={accessToken} />
+              <AlertingSettings
+                accessToken={accessToken}
+                premiumUser={premiumUser}
+              />
             </TabPanel>
           </TabPanels>
         </TabGroup>