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>
|
||||
);
|
||||
}
|
||||
16
ui/app/workspace/observability/layout.tsx
Normal file
16
ui/app/workspace/observability/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { NoPermissionView } from "@/components/noPermissionView";
|
||||
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
||||
import ObservabilityPage from "./page";
|
||||
|
||||
function RouteComponent() {
|
||||
const hasObservabilityAccess = useRbac(RbacResource.Observability, RbacOperation.View);
|
||||
if (!hasObservabilityAccess) {
|
||||
return <NoPermissionView entity="observability settings" />;
|
||||
}
|
||||
return <ObservabilityPage />;
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/workspace/observability")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
9
ui/app/workspace/observability/page.tsx
Normal file
9
ui/app/workspace/observability/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import ObservabilityView from "./views/observabilityView";
|
||||
|
||||
export default function ObservabilityPage() {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<ObservabilityView />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
181
ui/app/workspace/observability/views/observabilityView.tsx
Normal file
181
ui/app/workspace/observability/views/observabilityView.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import FullPageLoader from "@/components/fullPageLoader";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { setSelectedPlugin, useAppDispatch, useGetPluginsQuery } from "@/lib/store";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useQueryState } from "nuqs";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import BigQueryView from "./plugins/bigqueryView";
|
||||
import DatadogView from "./plugins/datadogView";
|
||||
import MaximView from "./plugins/maximView";
|
||||
import NewrelicView from "./plugins/newRelicView";
|
||||
import OtelView from "./plugins/otelView";
|
||||
import PrometheusView from "./plugins/prometheusView";
|
||||
|
||||
type SupportedPlatform = {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: React.ReactNode;
|
||||
tag?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const supportedPlatformsList = (resolvedTheme: string): SupportedPlatform[] => [
|
||||
{
|
||||
id: "otel",
|
||||
name: "Open Telemetry",
|
||||
icon: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width={21} height={21}>
|
||||
<path
|
||||
fill="#f5a800"
|
||||
d="M67.648 69.797c-5.246 5.25-5.246 13.758 0 19.008 5.25 5.246 13.758 5.246 19.004 0 5.25-5.25 5.25-13.758 0-19.008-5.246-5.246-13.754-5.246-19.004 0Zm14.207 14.219a6.649 6.649 0 0 1-9.41 0 6.65 6.65 0 0 1 0-9.407 6.649 6.649 0 0 1 9.41 0c2.598 2.586 2.598 6.809 0 9.407ZM86.43 3.672l-8.235 8.234a4.17 4.17 0 0 0 0 5.875l32.149 32.149a4.17 4.17 0 0 0 5.875 0l8.234-8.235c1.61-1.61 1.61-4.261 0-5.87L92.29 3.671a4.159 4.159 0 0 0-5.86 0ZM28.738 108.895a3.763 3.763 0 0 0 0-5.31l-4.183-4.187a3.768 3.768 0 0 0-5.313 0l-8.644 8.649-.016.012-2.371-2.375c-1.313-1.313-3.45-1.313-4.75 0-1.313 1.312-1.313 3.449 0 4.75l14.246 14.242a3.353 3.353 0 0 0 4.746 0c1.3-1.313 1.313-3.45 0-4.746l-2.375-2.375.016-.012Zm0 0"
|
||||
/>
|
||||
<path
|
||||
fill="#425cc7"
|
||||
d="M72.297 27.313 54.004 45.605c-1.625 1.625-1.625 4.301 0 5.926L65.3 62.824c7.984-5.746 19.18-5.035 26.363 2.153l9.148-9.149c1.622-1.625 1.622-4.297 0-5.922L78.22 27.313a4.185 4.185 0 0 0-5.922 0ZM60.55 67.585l-6.672-6.672c-1.563-1.562-4.125-1.562-5.684 0l-23.53 23.54a4.036 4.036 0 0 0 0 5.687l13.331 13.332a4.036 4.036 0 0 0 5.688 0l15.132-15.157c-3.199-6.609-2.625-14.593 1.735-20.73Zm0 0"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "prometheus",
|
||||
name: "Prometheus",
|
||||
icon: <img alt="Prometheus" src="/images/prometheus-logo.svg" width={21} height={21} className="-ml-0.5" />,
|
||||
},
|
||||
{
|
||||
id: "maxim",
|
||||
name: "Maxim",
|
||||
icon: <img alt="Maxim" src={`/maxim-logo${resolvedTheme === "dark" ? "-dark" : ""}.webp`} width={19} height={19} />,
|
||||
},
|
||||
{
|
||||
id: "datadog",
|
||||
name: "Datadog",
|
||||
icon: <img alt="Datadog" src="/images/datadog-logo.webp" width={32} height={32} className="-ml-0.5" />,
|
||||
},
|
||||
{
|
||||
id: "bigquery",
|
||||
name: "BigQuery",
|
||||
icon: <img alt="BigQuery" src="/images/bigquery-logo.svg" width={21} height={21} className="-ml-0.5" />,
|
||||
},
|
||||
{
|
||||
id: "newrelic",
|
||||
name: "New Relic",
|
||||
icon: (
|
||||
<svg viewBox="0 0 832.8 959.8" xmlns="http://www.w3.org/2000/svg" width="19" height="19">
|
||||
<path d="M672.6 332.3l160.2-92.4v480L416.4 959.8V775.2l256.2-147.6z" fill="#00ac69" />
|
||||
<path d="M416.4 184.6L160.2 332.3 0 239.9 416.4 0l416.4 239.9-160.2 92.4z" fill="#1ce783" />
|
||||
<path d="M256.2 572.3L0 424.6V239.9l416.4 240v479.9l-160.2-92.2z" fill="#1d252c" />
|
||||
</svg>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
export default function ObservabilityView() {
|
||||
const dispatch = useAppDispatch();
|
||||
const { data: plugins, isLoading } = useGetPluginsQuery();
|
||||
const [selectedPluginId, setSelectedPluginId] = useQueryState("plugin");
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const supportedPlatforms = useMemo(() => supportedPlatformsList(resolvedTheme || "light"), [resolvedTheme]);
|
||||
|
||||
// Map UI tab IDs to actual plugin names (prometheus tab uses telemetry plugin)
|
||||
const getPluginNameForTab = (tabId: string) => (tabId === "prometheus" ? "telemetry" : tabId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!plugins || plugins.length === 0) return;
|
||||
if (!selectedPluginId) {
|
||||
setSelectedPluginId(supportedPlatforms[0].id);
|
||||
} else {
|
||||
const pluginName = getPluginNameForTab(selectedPluginId);
|
||||
const plugin = plugins.find((plugin) => plugin.name === pluginName) ?? {
|
||||
name: selectedPluginId,
|
||||
enabled: false,
|
||||
config: {},
|
||||
isCustom: false,
|
||||
path: "",
|
||||
};
|
||||
dispatch(setSelectedPlugin(plugin));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [plugins]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPluginId) {
|
||||
const pluginName = getPluginNameForTab(selectedPluginId);
|
||||
const plugin = plugins?.find((plugin) => plugin.name === pluginName) ?? {
|
||||
name: selectedPluginId,
|
||||
enabled: false,
|
||||
config: {},
|
||||
isCustom: false,
|
||||
path: "",
|
||||
};
|
||||
dispatch(setSelectedPlugin(plugin));
|
||||
} else {
|
||||
setSelectedPluginId(supportedPlatforms[0].id);
|
||||
}
|
||||
}, [selectedPluginId]);
|
||||
|
||||
if (isLoading) {
|
||||
return <FullPageLoader />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-row gap-4">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex w-[270px] flex-col gap-2 pb-10">
|
||||
<div className="rounded-md bg-zinc-100/10 p-4 dark:bg-zinc-800/20">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-muted-foreground mb-2 text-xs font-medium">Providers</div>
|
||||
{supportedPlatforms.map((tab) => (
|
||||
<button
|
||||
type="button"
|
||||
key={tab.id}
|
||||
disabled={!!tab.disabled}
|
||||
data-testid={`observability-provider-btn-${tab.id}`}
|
||||
aria-disabled={tab.disabled ? true : undefined}
|
||||
aria-current={selectedPluginId === tab.id ? "page" : undefined}
|
||||
className={cn(
|
||||
"mb-1 flex max-h-[32px] w-full items-center gap-2 rounded-sm border px-3 py-1.5 text-sm",
|
||||
tab.disabled ? "opacity-50" : "",
|
||||
selectedPluginId === tab.id
|
||||
? "bg-secondary opacity-100 hover:opacity-100"
|
||||
: tab.disabled
|
||||
? "border-none"
|
||||
: "hover:bg-secondary cursor-pointer border-transparent opacity-100 hover:border",
|
||||
)}
|
||||
onClick={() => {
|
||||
if (tab.disabled) {
|
||||
return;
|
||||
}
|
||||
setSelectedPluginId(tab.id ?? supportedPlatforms[0].id);
|
||||
}}
|
||||
>
|
||||
<div className="w-[24px]">{tab.icon}</div> {tab.name}
|
||||
{tab.tag && (
|
||||
<Badge variant="secondary" className="text-muted-foreground ml-auto text-[10px] font-medium">
|
||||
{tab.tag.toUpperCase()}
|
||||
</Badge>
|
||||
)}
|
||||
{tab.disabled && (
|
||||
<Badge variant="secondary" className="text-muted-foreground ml-auto text-[10px] font-medium">
|
||||
{"Coming soon".toUpperCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full pt-4">
|
||||
{selectedPluginId === "prometheus" && <PrometheusView />}
|
||||
{selectedPluginId === "otel" && <OtelView />}
|
||||
{selectedPluginId === "maxim" && <MaximView />}
|
||||
{selectedPluginId === "datadog" && <DatadogView />}
|
||||
{selectedPluginId === "bigquery" && <BigQueryView />}
|
||||
{selectedPluginId === "newrelic" && <NewrelicView />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import BigQueryConnectorView from "@enterprise/components/data-connectors/bigquery/bigqueryConnectorView";
|
||||
|
||||
export default function BigQueryView() {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<BigQueryConnectorView />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
ui/app/workspace/observability/views/plugins/datadogView.tsx
Normal file
11
ui/app/workspace/observability/views/plugins/datadogView.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import DatadogConnectorView from "@enterprise/components/data-connectors/datadog/datadogConnectorView";
|
||||
|
||||
export default function DatadogView() {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<DatadogConnectorView />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
ui/app/workspace/observability/views/plugins/maximView.tsx
Normal file
54
ui/app/workspace/observability/views/plugins/maximView.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { getErrorMessage, useAppSelector, useUpdatePluginMutation } from "@/lib/store";
|
||||
import { MaximConfigSchema, MaximFormSchema } from "@/lib/types/schemas";
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { MaximFormFragment } from "../../fragments/maximFormFragment";
|
||||
|
||||
interface MaximViewProps {
|
||||
onDelete?: () => void;
|
||||
isDeleting?: boolean;
|
||||
}
|
||||
|
||||
export default function MaximView({ onDelete, isDeleting }: MaximViewProps) {
|
||||
const selectedPlugin = useAppSelector((state) => state.plugin.selectedPlugin);
|
||||
const [updatePlugin] = useUpdatePluginMutation();
|
||||
const currentConfig = useMemo(
|
||||
() => ({ ...((selectedPlugin?.config as MaximConfigSchema) ?? {}), enabled: selectedPlugin?.enabled }),
|
||||
[selectedPlugin],
|
||||
);
|
||||
|
||||
const handleMaximConfigSave = (config: MaximFormSchema): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
updatePlugin({
|
||||
name: "maxim",
|
||||
data: {
|
||||
enabled: config.enabled,
|
||||
config: config.maxim_config,
|
||||
},
|
||||
})
|
||||
.unwrap()
|
||||
.then(() => {
|
||||
toast.success("Maxim configuration updated successfully");
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error("Failed to update Maxim configuration", {
|
||||
description: getErrorMessage(err),
|
||||
});
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
<div className="text-muted-foreground text-xs font-medium">Configuration</div>
|
||||
<div className="text-muted-foreground mb-2 text-xs font-normal">
|
||||
You can send in header <code>x-bf-log-repo-id</code> with a repository ID to log to a specific repository.
|
||||
</div>
|
||||
<MaximFormFragment onSave={handleMaximConfigSave} initialConfig={currentConfig} onDelete={onDelete} isDeleting={isDeleting} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default function NewrelicView() {
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "30vh" }}
|
||||
className="bg-zinc-100/10 dark:bg-zinc-800/20"
|
||||
></div>
|
||||
);
|
||||
}
|
||||
51
ui/app/workspace/observability/views/plugins/otelView.tsx
Normal file
51
ui/app/workspace/observability/views/plugins/otelView.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { getErrorMessage, useAppSelector, useUpdatePluginMutation } from "@/lib/store";
|
||||
import { OtelConfigSchema, OtelFormSchema } from "@/lib/types/schemas";
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { OtelFormFragment } from "../../fragments/otelFormFragment";
|
||||
|
||||
interface OtelViewProps {
|
||||
onDelete?: () => void;
|
||||
isDeleting?: boolean;
|
||||
}
|
||||
|
||||
export default function OtelView({ onDelete, isDeleting }: OtelViewProps) {
|
||||
const selectedPlugin = useAppSelector((state) => state.plugin.selectedPlugin);
|
||||
const currentConfig = useMemo(
|
||||
() => ({ ...((selectedPlugin?.config as OtelConfigSchema) ?? {}), enabled: selectedPlugin?.enabled }),
|
||||
[selectedPlugin],
|
||||
);
|
||||
const [updatePlugin] = useUpdatePluginMutation();
|
||||
const baseUrl = `${window.location.protocol}//${window.location.host}`;
|
||||
|
||||
const handleOtelConfigSave = (config: OtelFormSchema): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
updatePlugin({
|
||||
name: "otel",
|
||||
data: {
|
||||
enabled: config.enabled,
|
||||
config: config.otel_config,
|
||||
},
|
||||
})
|
||||
.unwrap()
|
||||
.then(() => {
|
||||
resolve();
|
||||
toast.success("OTEL configuration updated successfully");
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error("Failed to update OTEL configuration", {
|
||||
description: getErrorMessage(err),
|
||||
});
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<OtelFormFragment onSave={handleOtelConfigSave} currentConfig={currentConfig} onDelete={onDelete} isDeleting={isDeleting} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { getErrorMessage, useAppSelector, useUpdatePluginMutation } from "@/lib/store";
|
||||
import { PrometheusFormSchema } from "@/lib/types/schemas";
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { PrometheusFormFragment } from "../../fragments/prometheusFormFragment";
|
||||
|
||||
interface PushGatewayConfig {
|
||||
push_gateway_url?: string;
|
||||
job_name?: string;
|
||||
instance_id?: string;
|
||||
push_interval?: number;
|
||||
basic_auth?: {
|
||||
username?: string;
|
||||
password?: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface TelemetryConfig {
|
||||
push_gateway?: PushGatewayConfig;
|
||||
}
|
||||
|
||||
interface PrometheusViewProps {
|
||||
onDelete?: () => void;
|
||||
isDeleting?: boolean;
|
||||
}
|
||||
|
||||
export default function PrometheusView({ onDelete, isDeleting }: PrometheusViewProps) {
|
||||
const selectedPlugin = useAppSelector((state) => state.plugin.selectedPlugin);
|
||||
const currentConfig = useMemo(() => {
|
||||
const telemetryConfig = (selectedPlugin?.config as TelemetryConfig) ?? {};
|
||||
const pushGateway = telemetryConfig.push_gateway ?? {};
|
||||
return {
|
||||
...pushGateway,
|
||||
enabled: selectedPlugin?.enabled,
|
||||
};
|
||||
}, [selectedPlugin]);
|
||||
|
||||
const [updatePlugin] = useUpdatePluginMutation();
|
||||
const baseUrl = `${window.location.protocol}//${window.location.host}`;
|
||||
const metricsEndpoint = `${baseUrl}/metrics`;
|
||||
|
||||
const handlePrometheusConfigSave = (config: PrometheusFormSchema): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Transform the form data to the telemetry plugin's push_gateway config format
|
||||
const pushGatewayConfig: PushGatewayConfig = {
|
||||
push_gateway_url: config.prometheus_config.push_gateway_url,
|
||||
job_name: config.prometheus_config.job_name,
|
||||
instance_id: config.prometheus_config.instance_id || undefined,
|
||||
push_interval: config.prometheus_config.push_interval,
|
||||
};
|
||||
|
||||
// Add basic auth if both username and password are provided
|
||||
if (config.prometheus_config.basic_auth_username?.trim() && config.prometheus_config.basic_auth_password?.trim()) {
|
||||
pushGatewayConfig.basic_auth = {
|
||||
username: config.prometheus_config.basic_auth_username,
|
||||
password: config.prometheus_config.basic_auth_password,
|
||||
};
|
||||
}
|
||||
|
||||
updatePlugin({
|
||||
name: "telemetry",
|
||||
data: {
|
||||
enabled: config.enabled,
|
||||
config: {
|
||||
push_gateway: pushGatewayConfig,
|
||||
},
|
||||
},
|
||||
})
|
||||
.unwrap()
|
||||
.then(() => {
|
||||
resolve();
|
||||
toast.success("Prometheus configuration updated successfully");
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error("Failed to update Prometheus configuration", {
|
||||
description: getErrorMessage(err),
|
||||
});
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<PrometheusFormFragment
|
||||
onSave={handlePrometheusConfigSave}
|
||||
currentConfig={currentConfig}
|
||||
metricsEndpoint={metricsEndpoint}
|
||||
onDelete={onDelete}
|
||||
isDeleting={isDeleting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user