first commit
This commit is contained in:
Beyhan Oğur
189
ui/app/workspace/observability/fragments/maximFormFragment.tsx
Normal file
189
ui/app/workspace/observability/fragments/maximFormFragment.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { maximFormSchema, type MaximFormSchema } from "@/lib/types/schemas";
|
||||
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Eye, EyeOff, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm, type Resolver } from "react-hook-form";
|
||||
|
||||
interface MaximFormFragmentProps {
|
||||
initialConfig?: {
|
||||
enabled?: boolean;
|
||||
api_key?: string;
|
||||
log_repo_id?: string;
|
||||
};
|
||||
onSave: (config: MaximFormSchema) => Promise<void>;
|
||||
onDelete?: () => void;
|
||||
isDeleting?: boolean;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function MaximFormFragment({ initialConfig, onSave, onDelete, isDeleting = false, isLoading = false }: MaximFormFragmentProps) {
|
||||
const hasMaximAccess = useRbac(RbacResource.Observability, RbacOperation.Update);
|
||||
const [showApiKey, setShowApiKey] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const form = useForm<MaximFormSchema, any, MaximFormSchema>({
|
||||
resolver: zodResolver(maximFormSchema) as Resolver<MaximFormSchema, any, MaximFormSchema>,
|
||||
mode: "onChange",
|
||||
reValidateMode: "onChange",
|
||||
defaultValues: {
|
||||
enabled: initialConfig?.enabled ?? true,
|
||||
maxim_config: {
|
||||
api_key: initialConfig?.api_key ?? "",
|
||||
log_repo_id: initialConfig?.log_repo_id ?? "",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: MaximFormSchema) => {
|
||||
setIsSaving(true);
|
||||
onSave(data).finally(() => setIsSaving(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Reset form with new initial config when it changes
|
||||
form.reset({
|
||||
enabled: initialConfig?.enabled ?? true,
|
||||
maxim_config: {
|
||||
api_key: initialConfig?.api_key ?? "",
|
||||
log_repo_id: initialConfig?.log_repo_id ?? "",
|
||||
},
|
||||
});
|
||||
}, [form, initialConfig]);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="maxim_config.api_key"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>API Key</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showApiKey ? "text" : "password"}
|
||||
placeholder="Enter your Maxim API key"
|
||||
disabled={!hasMaximAccess}
|
||||
{...field}
|
||||
className="pr-10"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowApiKey(!showApiKey)}
|
||||
disabled={!hasMaximAccess}
|
||||
>
|
||||
{showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="maxim_config.log_repo_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Log Repository ID (Optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter log repository ID" disabled={!hasMaximAccess} {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<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={!hasMaximAccess}
|
||||
data-testid="maxim-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}
|
||||
title="Delete connector"
|
||||
aria-label="Delete connector"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
form.reset({
|
||||
enabled: initialConfig?.enabled ?? true,
|
||||
maxim_config: {
|
||||
api_key: initialConfig?.api_key ?? "",
|
||||
log_repo_id: initialConfig?.log_repo_id ?? "",
|
||||
},
|
||||
});
|
||||
}}
|
||||
disabled={!hasMaximAccess || isLoading || !form.formState.isDirty}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!hasMaximAccess || !form.formState.isDirty || !form.formState.isValid}
|
||||
isLoading={isSaving}
|
||||
>
|
||||
Save Maxim 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>
|
||||
);
|
||||
}
|
||||
458
ui/app/workspace/observability/fragments/otelFormFragment.tsx
Normal file
458
ui/app/workspace/observability/fragments/otelFormFragment.tsx
Normal file
@@ -0,0 +1,458 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,393 @@
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
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 { Input } from "@/components/ui/input";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { prometheusFormSchema, type PrometheusFormSchema } from "@/lib/types/schemas";
|
||||
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
|
||||
import { AlertTriangle, Copy, Eye, EyeOff, Info, Plus, Trash, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm, type Resolver } from "react-hook-form";
|
||||
|
||||
interface PrometheusFormFragmentProps {
|
||||
currentConfig?: {
|
||||
enabled?: boolean;
|
||||
push_gateway_url?: string;
|
||||
job_name?: string;
|
||||
instance_id?: string;
|
||||
push_interval?: number;
|
||||
basic_auth?: {
|
||||
username?: string;
|
||||
password?: string;
|
||||
};
|
||||
};
|
||||
onSave: (config: PrometheusFormSchema) => Promise<void>;
|
||||
onDelete?: () => void;
|
||||
isDeleting?: boolean;
|
||||
isLoading?: boolean;
|
||||
metricsEndpoint?: string;
|
||||
}
|
||||
|
||||
export function PrometheusFormFragment({
|
||||
currentConfig: initialConfig,
|
||||
onSave,
|
||||
onDelete,
|
||||
isDeleting = false,
|
||||
isLoading = false,
|
||||
metricsEndpoint,
|
||||
}: PrometheusFormFragmentProps) {
|
||||
const hasPrometheusAccess = useRbac(RbacResource.Observability, RbacOperation.Update);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const { copy, copied } = useCopyToClipboard();
|
||||
const [showBasicAuth, setShowBasicAuth] = useState(!!(initialConfig?.basic_auth?.username || initialConfig?.basic_auth?.password));
|
||||
|
||||
const form = useForm<PrometheusFormSchema, any, PrometheusFormSchema>({
|
||||
resolver: zodResolver(prometheusFormSchema) as Resolver<PrometheusFormSchema, any, PrometheusFormSchema>,
|
||||
mode: "onChange",
|
||||
reValidateMode: "onChange",
|
||||
defaultValues: {
|
||||
enabled: initialConfig?.enabled ?? true,
|
||||
prometheus_config: {
|
||||
push_gateway_url: initialConfig?.push_gateway_url ?? "",
|
||||
job_name: initialConfig?.job_name ?? "bifrost",
|
||||
instance_id: initialConfig?.instance_id ?? "",
|
||||
push_interval: initialConfig?.push_interval ?? 15,
|
||||
basic_auth_username: initialConfig?.basic_auth?.username ?? "",
|
||||
basic_auth_password: initialConfig?.basic_auth?.password ?? "",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: PrometheusFormSchema) => {
|
||||
setIsSaving(true);
|
||||
onSave(data).finally(() => setIsSaving(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.reset({
|
||||
enabled: initialConfig?.enabled ?? true,
|
||||
prometheus_config: {
|
||||
push_gateway_url: initialConfig?.push_gateway_url ?? "",
|
||||
job_name: initialConfig?.job_name ?? "bifrost",
|
||||
instance_id: initialConfig?.instance_id ?? "",
|
||||
push_interval: initialConfig?.push_interval ?? 15,
|
||||
basic_auth_username: initialConfig?.basic_auth?.username ?? "",
|
||||
basic_auth_password: initialConfig?.basic_auth?.password ?? "",
|
||||
},
|
||||
});
|
||||
setShowBasicAuth(!!(initialConfig?.basic_auth?.username || initialConfig?.basic_auth?.password));
|
||||
}, [form, initialConfig]);
|
||||
|
||||
const handleCopyEndpoint = () => {
|
||||
if (metricsEndpoint) {
|
||||
copy(metricsEndpoint);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveBasicAuth = () => {
|
||||
form.setValue("prometheus_config.basic_auth_username", "", { shouldDirty: true });
|
||||
form.setValue("prometheus_config.basic_auth_password", "", { shouldDirty: true });
|
||||
setShowBasicAuth(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Pull-based Scraping Section */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-sm font-medium">Pull-based Scraping</h3>
|
||||
<p className="text-muted-foreground text-xs">Prometheus can scrape metrics from the /metrics endpoint</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 rounded-md p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm font-medium">Metrics Endpoint</span>
|
||||
<code className="text-muted-foreground text-xs">{metricsEndpoint || "http://<bifrost-host>:<port>/metrics"}</code>
|
||||
</div>
|
||||
{metricsEndpoint && (
|
||||
<Button type="button" variant="outline" size="sm" onClick={handleCopyEndpoint} className="shrink-0">
|
||||
<Copy className="mr-2 h-3 w-3" />
|
||||
{copied ? "Copied!" : "Copy"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-2 text-xs">
|
||||
Configure your Prometheus server to scrape this endpoint. This is always available when Bifrost is running.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Push-based Section */}
|
||||
<div className="space-y-4 border-t pt-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="flex flex-row items-center gap-2 text-sm font-medium">
|
||||
Push-based (Push Gateway) <Badge variant="secondary">BETA</Badge>
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Push metrics to a Prometheus Push Gateway for proper aggregation in cluster deployments
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Warning note for multi-node deployments */}
|
||||
<Alert variant="info">
|
||||
<AlertTriangle className="" />
|
||||
<AlertDescription className="text-xs">
|
||||
If you are running multiple Bifrost nodes, use push gateway for accurate metrics. Pull-based /metrics scraping may miss nodes
|
||||
behind a load balancer.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prometheus_config.push_gateway_url"
|
||||
render={({ field }) => (
|
||||
<FormItem className="w-full">
|
||||
<FormLabel>Push Gateway URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="http://pushgateway:9091" disabled={!hasPrometheusAccess} {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>URL of your Prometheus Push Gateway</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prometheus_config.job_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Job Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="bifrost" disabled={!hasPrometheusAccess} {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Job label for metrics</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prometheus_config.push_interval"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Push Interval (seconds)</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={300}
|
||||
disabled={!hasPrometheusAccess}
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(parseInt(e.target.value) || 15)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>How often to push (1-300s)</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prometheus_config.instance_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="flex items-center gap-2">
|
||||
Instance ID
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="text-muted-foreground h-3 w-3" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-xs text-xs">
|
||||
Used to identify this Bifrost instance in metrics. If not set, hostname is used automatically.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Auto-generated from hostname"
|
||||
disabled={!hasPrometheusAccess}
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Basic Auth Section */}
|
||||
<div className="space-y-4 border-t pt-4">
|
||||
{!showBasicAuth ? (
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setShowBasicAuth(true)} disabled={!hasPrometheusAccess}>
|
||||
<Plus className="mr-2 h-3 w-3" />
|
||||
Add Basic Auth
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Basic Authentication</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleRemoveBasicAuth}
|
||||
disabled={!hasPrometheusAccess}
|
||||
className="text-muted-foreground hover:text-destructive h-auto p-1"
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="border-muted grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prometheus_config.basic_auth_username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Username" disabled={!hasPrometheusAccess} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prometheus_config.basic_auth_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Password"
|
||||
disabled={!hasPrometheusAccess}
|
||||
{...field}
|
||||
className="pr-10"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
disabled={!hasPrometheusAccess}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</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={!hasPrometheusAccess}
|
||||
data-testid="prometheus-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 || !hasPrometheusAccess}
|
||||
data-testid="prometheus-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,
|
||||
prometheus_config: {
|
||||
push_gateway_url: initialConfig?.push_gateway_url ?? "",
|
||||
job_name: initialConfig?.job_name ?? "bifrost",
|
||||
instance_id: initialConfig?.instance_id ?? "",
|
||||
push_interval: initialConfig?.push_interval ?? 15,
|
||||
basic_auth_username: initialConfig?.basic_auth?.username ?? "",
|
||||
basic_auth_password: initialConfig?.basic_auth?.password ?? "",
|
||||
},
|
||||
});
|
||||
setShowBasicAuth(!!(initialConfig?.basic_auth?.username || initialConfig?.basic_auth?.password));
|
||||
}}
|
||||
disabled={!hasPrometheusAccess || isLoading || !form.formState.isDirty}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!hasPrometheusAccess || !form.formState.isDirty || !form.formState.isValid}
|
||||
isLoading={isSaving}
|
||||
>
|
||||
Save Prometheus 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user