beyhan/bifrost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Beyhan Oğur
2026-04-26 21:52:23 +03:00
commit 880f412e2c
2662 changed files with 866266 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
ui/app/workspace/observability/views/observabilityView.tsx Normal file
View 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>
);
}

11
ui/app/workspace/observability/views/plugins/bigqueryView.tsx Normal file
View File

@@ -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
View 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
View 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>
);
}

8
ui/app/workspace/observability/views/plugins/newRelicView.tsx Normal file
View File

@@ -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
View 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>
);
}

96
ui/app/workspace/observability/views/plugins/prometheusView.tsx Normal file
View File

@@ -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>
);
}