393 lines
13 KiB
TypeScript
393 lines
13 KiB
TypeScript
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>
|
|
);
|
|
} |