first commit
This commit is contained in:
Beyhan Oğur
192
ui/app/workspace/config/views/modelSettingsView.tsx
Normal file
192
ui/app/workspace/config/views/modelSettingsView.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { getErrorMessage, useForcePricingSyncMutation, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
|
||||
import { DefaultCoreConfig } from "@/lib/types/config";
|
||||
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface ModelSettingsFormData {
|
||||
pricing_datasheet_url: string;
|
||||
pricing_sync_interval_hours: number;
|
||||
routing_chain_max_depth: number;
|
||||
}
|
||||
|
||||
export default function ModelSettingsView() {
|
||||
const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
|
||||
const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
|
||||
const frameworkConfig = bifrostConfig?.framework_config;
|
||||
const clientConfig = bifrostConfig?.client_config;
|
||||
const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
|
||||
const [forcePricingSync, { isLoading: isForceSyncing }] = useForcePricingSyncMutation();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isDirty },
|
||||
reset,
|
||||
watch,
|
||||
} = useForm<ModelSettingsFormData>({
|
||||
defaultValues: {
|
||||
pricing_datasheet_url: "",
|
||||
pricing_sync_interval_hours: 24,
|
||||
routing_chain_max_depth: DefaultCoreConfig.routing_chain_max_depth,
|
||||
},
|
||||
});
|
||||
|
||||
const formValues = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (!bifrostConfig || isDirty) return;
|
||||
reset({
|
||||
pricing_datasheet_url: frameworkConfig?.pricing_url || "",
|
||||
pricing_sync_interval_hours: Math.round((frameworkConfig?.pricing_sync_interval ?? 0) / 3600) || 24,
|
||||
routing_chain_max_depth: clientConfig?.routing_chain_max_depth ?? DefaultCoreConfig.routing_chain_max_depth,
|
||||
});
|
||||
}, [frameworkConfig?.pricing_url, frameworkConfig?.pricing_sync_interval, clientConfig?.routing_chain_max_depth, isDirty, reset]);
|
||||
|
||||
const hasChanges = useMemo(() => {
|
||||
if (!bifrostConfig || !isDirty) return false;
|
||||
const serverUrl = frameworkConfig?.pricing_url || "";
|
||||
const serverInterval = Math.round((frameworkConfig?.pricing_sync_interval ?? 0) / 3600);
|
||||
const serverDepth = clientConfig?.routing_chain_max_depth ?? DefaultCoreConfig.routing_chain_max_depth;
|
||||
return (
|
||||
formValues.pricing_datasheet_url !== serverUrl ||
|
||||
formValues.pricing_sync_interval_hours !== serverInterval ||
|
||||
formValues.routing_chain_max_depth !== serverDepth
|
||||
);
|
||||
}, [bifrostConfig, frameworkConfig, clientConfig, formValues, isDirty]);
|
||||
|
||||
const onSubmit = async (data: ModelSettingsFormData) => {
|
||||
try {
|
||||
await updateCoreConfig({
|
||||
...bifrostConfig!,
|
||||
framework_config: {
|
||||
...frameworkConfig,
|
||||
id: bifrostConfig?.framework_config.id || 0,
|
||||
pricing_url: data.pricing_datasheet_url,
|
||||
pricing_sync_interval: data.pricing_sync_interval_hours * 3600,
|
||||
},
|
||||
client_config: {
|
||||
...clientConfig!,
|
||||
routing_chain_max_depth: data.routing_chain_max_depth,
|
||||
},
|
||||
}).unwrap();
|
||||
toast.success("Model settings updated successfully.");
|
||||
reset(data);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
};
|
||||
|
||||
const handleForceSync = async () => {
|
||||
try {
|
||||
await forcePricingSync().unwrap();
|
||||
toast.success("Pricing sync triggered successfully.");
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl space-y-4" data-testid="model-settings-view">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold tracking-tight">Model Settings</h2>
|
||||
<p className="text-muted-foreground text-sm">Configure pricing and routing behaviour.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Pricing Datasheet URL */}
|
||||
<div className="space-y-2 rounded-sm border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="pricing-datasheet-url">Pricing Datasheet URL</Label>
|
||||
<p className="text-muted-foreground text-sm">URL to a custom pricing datasheet. Leave empty to use default pricing.</p>
|
||||
</div>
|
||||
<Input
|
||||
id="pricing-datasheet-url"
|
||||
type="text"
|
||||
placeholder="https://example.com/pricing.json"
|
||||
data-testid="pricing-datasheet-url-input"
|
||||
{...register("pricing_datasheet_url", {
|
||||
pattern: {
|
||||
value: /^(https?:\/\/)?((localhost|(\d{1,3}\.){3}\d{1,3})(:\d+)?|([\da-z\.-]+)\.([a-z\.]{2,6}))[\/\w \.-]*\/?$/,
|
||||
message: "Please enter a valid URL.",
|
||||
},
|
||||
validate: {
|
||||
checkIfHttp: (value) => {
|
||||
if (!value) return true;
|
||||
return value.startsWith("http://") || value.startsWith("https://") || "URL must start with http:// or https://";
|
||||
},
|
||||
},
|
||||
})}
|
||||
className={errors.pricing_datasheet_url ? "border-destructive" : ""}
|
||||
/>
|
||||
{errors.pricing_datasheet_url && <p className="text-destructive text-sm">{errors.pricing_datasheet_url.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Pricing Sync Interval */}
|
||||
<div className="space-y-2 rounded-sm border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="pricing-sync-interval">Pricing Sync Interval (hours)</Label>
|
||||
<p className="text-muted-foreground text-sm">How often to sync pricing data from the datasheet URL.</p>
|
||||
</div>
|
||||
<Input
|
||||
id="pricing-sync-interval"
|
||||
type="number"
|
||||
data-testid="pricing-sync-interval-input"
|
||||
className={errors.pricing_sync_interval_hours ? "border-destructive" : ""}
|
||||
{...register("pricing_sync_interval_hours", {
|
||||
required: "Pricing sync interval is required",
|
||||
min: { value: 1, message: "Sync interval must be at least 1 hour" },
|
||||
max: { value: 8760, message: "Sync interval cannot exceed 8760 hours (1 year)" },
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
/>
|
||||
{errors.pricing_sync_interval_hours && <p className="text-destructive text-sm">{errors.pricing_sync_interval_hours.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Routing Chain Max Depth */}
|
||||
<div className="flex items-center justify-between rounded-sm border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="routing-chain-max-depth">Routing Chain Max Depth</Label>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Maximum number of chained routing rule evaluations per request. Prevents infinite loops from circular rule definitions.
|
||||
</p>
|
||||
</div>
|
||||
<Input
|
||||
id="routing-chain-max-depth"
|
||||
type="number"
|
||||
className={`w-24 ${errors.routing_chain_max_depth ? "border-destructive" : ""}`}
|
||||
data-testid="routing-chain-max-depth-input"
|
||||
{...register("routing_chain_max_depth", {
|
||||
required: "Routing chain max depth is required",
|
||||
min: { value: 1, message: "Must be at least 1" },
|
||||
max: { value: 100, message: "Cannot exceed 100" },
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{errors.routing_chain_max_depth && <p className="text-destructive text-sm">{errors.routing_chain_max_depth.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={handleForceSync}
|
||||
disabled={isForceSyncing || isLoading || hasChanges || !hasSettingsUpdateAccess}
|
||||
data-testid="pricing-force-sync-btn"
|
||||
>
|
||||
{isForceSyncing ? "Syncing..." : "Force Sync Now"}
|
||||
</Button>
|
||||
<Button type="submit" disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess} data-testid="model-settings-save-btn">
|
||||
{isLoading ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user