192 lines
7.5 KiB
TypeScript
192 lines
7.5 KiB
TypeScript
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>
|
|
);
|
|
} |