458 lines
16 KiB
TypeScript
458 lines
16 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { HeadersTable } from "@/components/ui/headersTable";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { otelFormSchema, type OtelFormSchema } from "@/lib/types/schemas";
|
|
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Trash2 } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useForm, type Resolver } from "react-hook-form";
|
|
|
|
interface OtelFormFragmentProps {
|
|
currentConfig?: {
|
|
enabled?: boolean;
|
|
service_name?: string;
|
|
collector_url?: string;
|
|
headers?: Record<string, string>;
|
|
trace_type?: "genai_extension" | "vercel" | "open_inference";
|
|
protocol?: "http" | "grpc";
|
|
// TLS configuration
|
|
tls_ca_cert?: string;
|
|
insecure?: boolean;
|
|
// Metrics push configuration
|
|
metrics_enabled?: boolean;
|
|
metrics_endpoint?: string;
|
|
metrics_push_interval?: number;
|
|
};
|
|
onSave: (config: OtelFormSchema) => Promise<void>;
|
|
onDelete?: () => void;
|
|
isDeleting?: boolean;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function OtelFormFragment({
|
|
currentConfig: initialConfig,
|
|
onSave,
|
|
onDelete,
|
|
isDeleting = false,
|
|
isLoading = false,
|
|
}: OtelFormFragmentProps) {
|
|
const hasOtelAccess = useRbac(RbacResource.Observability, RbacOperation.Update);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const form = useForm<OtelFormSchema, any, OtelFormSchema>({
|
|
resolver: zodResolver(otelFormSchema) as Resolver<OtelFormSchema, any, OtelFormSchema>,
|
|
mode: "onChange",
|
|
reValidateMode: "onChange",
|
|
defaultValues: {
|
|
enabled: initialConfig?.enabled ?? true,
|
|
otel_config: {
|
|
service_name: initialConfig?.service_name ?? "bifrost",
|
|
collector_url: initialConfig?.collector_url ?? "",
|
|
headers: initialConfig?.headers ?? {},
|
|
trace_type: initialConfig?.trace_type ?? "genai_extension",
|
|
protocol: initialConfig?.protocol ?? "http",
|
|
tls_ca_cert: initialConfig?.tls_ca_cert ?? "",
|
|
insecure: initialConfig?.insecure ?? true,
|
|
metrics_enabled: initialConfig?.metrics_enabled ?? false,
|
|
metrics_endpoint: initialConfig?.metrics_endpoint ?? "",
|
|
metrics_push_interval: initialConfig?.metrics_push_interval ?? 15,
|
|
},
|
|
},
|
|
});
|
|
|
|
const onSubmit = (data: OtelFormSchema) => {
|
|
setIsSaving(true);
|
|
onSave(data).finally(() => setIsSaving(false));
|
|
};
|
|
|
|
// Re-run validation on collector_url when protocol changes so cross-field
|
|
// refinement in the schema is applied immediately
|
|
const protocol = form.watch("otel_config.protocol");
|
|
const metricsEnabled = form.watch("otel_config.metrics_enabled");
|
|
useEffect(() => {
|
|
if (form.getValues("enabled") === false) return;
|
|
form.trigger("otel_config.collector_url");
|
|
// Also re-validate metrics_endpoint when protocol changes
|
|
if (metricsEnabled) {
|
|
form.trigger("otel_config.metrics_endpoint");
|
|
}
|
|
}, [protocol, form, metricsEnabled]);
|
|
|
|
// Re-run validation on metrics_endpoint when metrics_enabled changes
|
|
useEffect(() => {
|
|
if (metricsEnabled) {
|
|
form.trigger("otel_config.metrics_endpoint");
|
|
}
|
|
}, [metricsEnabled, form]);
|
|
|
|
useEffect(() => {
|
|
// Reset form with new initial config when it changes
|
|
form.reset({
|
|
enabled: initialConfig?.enabled ?? true,
|
|
otel_config: {
|
|
service_name: initialConfig?.service_name ?? "bifrost",
|
|
collector_url: initialConfig?.collector_url || "",
|
|
headers: initialConfig?.headers || {},
|
|
trace_type: initialConfig?.trace_type || "genai_extension",
|
|
protocol: initialConfig?.protocol || "http",
|
|
tls_ca_cert: initialConfig?.tls_ca_cert ?? "",
|
|
insecure: initialConfig?.insecure ?? true,
|
|
metrics_enabled: initialConfig?.metrics_enabled ?? false,
|
|
metrics_endpoint: initialConfig?.metrics_endpoint ?? "",
|
|
metrics_push_interval: initialConfig?.metrics_push_interval ?? 15,
|
|
},
|
|
});
|
|
}, [form, initialConfig]);
|
|
|
|
const traceTypeOptions: { value: string; label: string; disabled?: boolean; disabledReason?: string }[] = [
|
|
{ value: "genai_extension", label: "OTel GenAI Extension (Recommended)" },
|
|
{ value: "vercel", label: "Vercel AI SDK", disabled: true, disabledReason: "Coming soon" },
|
|
{ value: "open_inference", label: "Arize OpenInference", disabled: true, disabledReason: "Coming soon" },
|
|
];
|
|
const protocolOptions: { value: string; label: string; disabled?: boolean; disabledReason?: string }[] = [
|
|
{ value: "http", label: "HTTP" },
|
|
{ value: "grpc", label: "GRPC" },
|
|
];
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
{/* OTEL Configuration */}
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.service_name"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<FormLabel>Service Name</FormLabel>
|
|
<FormDescription>If kept empty, the service name will be set to "bifrost"</FormDescription>
|
|
<FormControl>
|
|
<Input placeholder="bifrost" disabled={!hasOtelAccess} {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.collector_url"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<FormLabel>OTLP Collector URL</FormLabel>
|
|
<div className="text-muted-foreground text-xs">
|
|
<code>{form.watch("otel_config.protocol") === "http" ? "http(s)://<host>:<port>/v1/traces" : "<host>:<port>"}</code>
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder={
|
|
form.watch("otel_config.protocol") === "http"
|
|
? "https://otel-collector.example.com:4318/v1/traces"
|
|
: "otel-collector.example.com:4317"
|
|
}
|
|
disabled={!hasOtelAccess}
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.headers"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<FormControl>
|
|
<HeadersTable value={field.value || {}} onChange={field.onChange} disabled={!hasOtelAccess} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex flex-row gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.trace_type"
|
|
render={({ field }) => (
|
|
<FormItem className="flex-1">
|
|
<FormLabel>Format</FormLabel>
|
|
<Select onValueChange={field.onChange} value={field.value ?? traceTypeOptions[0].value} disabled={!hasOtelAccess}>
|
|
<FormControl>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select trace type" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{traceTypeOptions.map((option) => (
|
|
<SelectItem
|
|
key={option.value}
|
|
value={option.value}
|
|
disabled={option.disabled}
|
|
disabledReason={option.disabledReason}
|
|
>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.protocol"
|
|
render={({ field }) => (
|
|
<FormItem className="flex-1">
|
|
<FormLabel>Protocol</FormLabel>
|
|
<Select onValueChange={field.onChange} value={field.value} disabled={!hasOtelAccess}>
|
|
<FormControl>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select protocol" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{protocolOptions.map((option) => (
|
|
<SelectItem
|
|
key={option.value}
|
|
value={option.value}
|
|
disabled={option.disabled}
|
|
disabledReason={option.disabledReason}
|
|
>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* TLS Configuration */}
|
|
<div className="flex flex-col gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.insecure"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center gap-2">
|
|
<div className="flex w-full flex-row items-center gap-2">
|
|
<div className="flex flex-col gap-1">
|
|
<FormLabel>Insecure (Skip TLS)</FormLabel>
|
|
<FormDescription>
|
|
Skip TLS verification. Disable this to use TLS with system root CAs or a custom CA certificate.
|
|
</FormDescription>
|
|
</div>
|
|
<div className="ml-auto">
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={(checked) => {
|
|
field.onChange(checked);
|
|
if (checked) {
|
|
form.setValue("otel_config.tls_ca_cert", "");
|
|
}
|
|
}}
|
|
disabled={!hasOtelAccess}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
{!form.watch("otel_config.insecure") && (
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.tls_ca_cert"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<FormLabel>TLS CA Certificate Path</FormLabel>
|
|
<FormDescription>
|
|
File path to the CA certificate on the Bifrost server. Leave empty to use system root CAs.
|
|
</FormDescription>
|
|
<FormControl>
|
|
<Input placeholder="/path/to/ca.crt" disabled={!hasOtelAccess} {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metrics Push Configuration */}
|
|
<div className="space-y-4 border-t pt-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.metrics_enabled"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center gap-2">
|
|
<div className="flex w-full flex-row items-center gap-2">
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="flex flex-row items-center gap-2 text-sm font-medium">
|
|
Enable Metrics Export <Badge variant="secondary">BETA</Badge>
|
|
</h3>
|
|
<p className="text-muted-foreground text-xs">
|
|
Push metrics to an OTEL Collector for proper aggregation in cluster deployments
|
|
</p>
|
|
</div>
|
|
<div className="ml-auto">
|
|
<Switch
|
|
data-testid="otel-metrics-export-toggle"
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
disabled={!hasOtelAccess}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{form.watch("otel_config.metrics_enabled") && (
|
|
<div className="border-muted flex flex-col gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.metrics_endpoint"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full">
|
|
<FormLabel>Metrics Endpoint</FormLabel>
|
|
<div className="text-muted-foreground text-xs">
|
|
<code>{form.watch("otel_config.protocol") === "http" ? "http(s)://<host>:<port>/v1/metrics" : "<host>:<port>"}</code>
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder={
|
|
form.watch("otel_config.protocol") === "http" ? "https://otel-collector:4318/v1/metrics" : "otel-collector:4317"
|
|
}
|
|
disabled={!hasOtelAccess}
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="otel_config.metrics_push_interval"
|
|
render={({ field }) => (
|
|
<FormItem className="w-full max-w-xs">
|
|
<FormLabel>Push Interval (seconds)</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={300}
|
|
disabled={!hasOtelAccess}
|
|
{...field}
|
|
value={field.value ?? ""}
|
|
onChange={(e) => field.onChange(e.target.value === "" ? null : Number(e.target.value))}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>How often to push metrics (1-300 seconds)</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Form Actions */}
|
|
<div className="flex w-full flex-row items-center">
|
|
<FormField
|
|
control={form.control}
|
|
name="enabled"
|
|
render={({ field }) => (
|
|
<FormItem className="flex items-center gap-2 py-2">
|
|
<FormLabel className="text-muted-foreground text-sm font-medium">Enabled</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
disabled={!hasOtelAccess}
|
|
data-testid="otel-connector-enable-toggle"
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="ml-auto flex justify-end space-x-2 py-2">
|
|
{onDelete && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={onDelete}
|
|
disabled={isDeleting || !hasOtelAccess}
|
|
data-testid="otel-connector-delete-btn"
|
|
title="Delete connector"
|
|
aria-label="Delete connector"
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => {
|
|
form.reset({
|
|
enabled: initialConfig?.enabled ?? true,
|
|
otel_config: {
|
|
service_name: initialConfig?.service_name ?? "bifrost",
|
|
collector_url: initialConfig?.collector_url ?? "",
|
|
headers: initialConfig?.headers ?? {},
|
|
trace_type: initialConfig?.trace_type ?? "genai_extension",
|
|
protocol: initialConfig?.protocol ?? "http",
|
|
tls_ca_cert: initialConfig?.tls_ca_cert ?? "",
|
|
insecure: initialConfig?.insecure ?? true,
|
|
metrics_enabled: initialConfig?.metrics_enabled ?? false,
|
|
metrics_endpoint: initialConfig?.metrics_endpoint ?? "",
|
|
metrics_push_interval: initialConfig?.metrics_push_interval ?? 15,
|
|
},
|
|
});
|
|
}}
|
|
disabled={!hasOtelAccess || isLoading || !form.formState.isDirty}
|
|
>
|
|
Reset
|
|
</Button>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
type="submit"
|
|
disabled={!hasOtelAccess || !form.formState.isDirty || !form.formState.isValid}
|
|
isLoading={isSaving}
|
|
>
|
|
Save OTEL Configuration
|
|
</Button>
|
|
</TooltipTrigger>
|
|
{(!form.formState.isDirty || !form.formState.isValid) && (
|
|
<TooltipContent>
|
|
<p>
|
|
{!form.formState.isDirty && !form.formState.isValid
|
|
? "No changes made and validation errors present"
|
|
: !form.formState.isDirty
|
|
? "No changes made"
|
|
: "Please fix validation errors"}
|
|
</p>
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
} |