first commit

2026-04-26 21:52:23 +03:00
commit 880f412e2c
2662 changed files with 866266 additions and 0 deletions
--- a/ui/app/workspace/dashboard/components/charts/mcpVolumeChart.tsx
+++ b/ui/app/workspace/dashboard/components/charts/mcpVolumeChart.tsx
@@ -0,0 +1,161 @@
+import type { MCPHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CHART_COLORS, formatFullTimestamp, formatTimestamp } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface MCPVolumeChartProps {
+	data: MCPHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+}
+
+function CustomTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full bg-emerald-500" />
+						<span className="text-zinc-600 dark:text-zinc-400">Success</span>
+					</span>
+					<span className="font-medium text-emerald-600 dark:text-emerald-400">{data.success.toLocaleString()}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full bg-red-500" />
+						<span className="text-zinc-600 dark:text-zinc-400">Error</span>
+					</span>
+					<span className="font-medium text-red-600 dark:text-red-400">{data.error.toLocaleString()}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+					<span className="text-zinc-600 dark:text-zinc-400">Total</span>
+					<span className="font-medium">{data.count.toLocaleString()}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function MCPVolumeChart({ data, chartType, startTime, endTime }: MCPVolumeChartProps) {
+	const chartData = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return [];
+		}
+
+		return data.buckets.map((bucket, index) => ({
+			...bucket,
+			index,
+			formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+		}));
+	}, [data]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${chartType}-${startTime}-${endTime}-${chartData.length}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={40}
+							tickFormatter={(v) => v.toLocaleString()}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+						<Bar
+							isAnimationActive={false}
+							dataKey="success"
+							stackId="requests"
+							fill={CHART_COLORS.success}
+							fillOpacity={0.9}
+							radius={[0, 0, 0, 0]}
+							barSize={30}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="error"
+							stackId="requests"
+							fill={CHART_COLORS.error}
+							fillOpacity={0.9}
+							radius={[2, 2, 0, 0]}
+							barSize={30}
+						/>
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={40}
+							tickFormatter={(v) => v.toLocaleString()}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} />
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="success"
+							stackId="1"
+							stroke={CHART_COLORS.success}
+							fill={CHART_COLORS.success}
+							fillOpacity={0.7}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="error"
+							stackId="1"
+							stroke={CHART_COLORS.error}
+							fill={CHART_COLORS.error}
+							fillOpacity={0.7}
+						/>
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}