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/mcp-logs/views/mcpHeaderView.tsx
+++ b/ui/app/workspace/mcp-logs/views/mcpHeaderView.tsx
@@ -0,0 +1,135 @@
+import { ColumnConfigDropdown, type ColumnConfigEntry } from "@/components/table";
+import { Button } from "@/components/ui/button";
+import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
+import { Input } from "@/components/ui/input";
+import type { MCPToolLogFilters } from "@/lib/types/logs";
+import { getRangeForPeriod, TIME_PERIODS } from "@/lib/utils/timeRange";
+import { Radio, RefreshCw, Search } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface McpHeaderViewProps {
+	filters: MCPToolLogFilters;
+	onFiltersChange: (filters: MCPToolLogFilters) => void;
+	period: string;
+	onPeriodChange: (period: string, from: Date, to: Date) => void;
+	polling: boolean;
+	onPollToggle: (enabled: boolean) => void;
+	onRefresh: () => void;
+	loading?: boolean;
+	/** Column config for the ColumnConfigDropdown */
+	columnEntries: ColumnConfigEntry[];
+	columnLabels: Record<string, string>;
+	onToggleColumnVisibility: (id: string) => void;
+	onResetColumns: () => void;
+}
+
+export function McpHeaderView({
+	filters,
+	onFiltersChange,
+	period,
+	onPeriodChange,
+	polling,
+	onPollToggle,
+	onRefresh,
+	loading = false,
+	columnEntries,
+	columnLabels,
+	onToggleColumnVisibility,
+	onResetColumns,
+}: McpHeaderViewProps) {
+	const [localSearch, setLocalSearch] = useState(filters.content_search || "");
+	const [startTime, setStartTime] = useState<Date | undefined>(filters.start_time ? new Date(filters.start_time) : undefined);
+	const [endTime, setEndTime] = useState<Date | undefined>(filters.end_time ? new Date(filters.end_time) : undefined);
+	const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+	const filtersRef = useRef<MCPToolLogFilters>(filters);
+
+	useEffect(() => {
+		filtersRef.current = filters;
+	}, [filters]);
+	useEffect(() => {
+		setLocalSearch(filters.content_search || "");
+	}, [filters.content_search]);
+	useEffect(() => {
+		setStartTime(filters.start_time ? new Date(filters.start_time) : undefined);
+		setEndTime(filters.end_time ? new Date(filters.end_time) : undefined);
+	}, [filters.start_time, filters.end_time]);
+	useEffect(() => {
+		return () => {
+			if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+		};
+	}, []);
+
+	const handleSearchChange = useCallback(
+		(value: string) => {
+			setLocalSearch(value);
+			if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+			searchTimeoutRef.current = setTimeout(() => {
+				onFiltersChange({ ...filtersRef.current, content_search: value });
+			}, 500);
+		},
+		[onFiltersChange],
+	);
+
+	return (
+		<div className="flex grow items-center justify-between space-x-2">
+			<Button
+				variant="outline"
+				size="sm"
+				className="h-7.5 disabled:opacity-100"
+				onClick={onRefresh}
+				disabled={loading}
+				data-testid="mcp-logs-header-refresh-btn"
+			>
+				<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+				Refresh
+			</Button>
+			<Button
+				variant={polling ? "default" : "outline"}
+				size="sm"
+				className="h-7.5"
+				onClick={() => onPollToggle(!polling)}
+				data-testid="mcp-logs-header-live-btn"
+			>
+				{polling ? <Radio className="h-4 w-4 animate-pulse" /> : <Radio className="h-4 w-4" />}
+				Live
+			</Button>
+			<div className="border-input flex h-7.5 flex-1 items-center gap-2 rounded-sm border">
+				<Search className="mr-0.5 ml-2 size-4" />
+				<Input
+					type="text"
+					className="!h-7 rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none border-none bg-slate-50 shadow-none outline-none focus-visible:ring-0 dark:bg-zinc-900"
+					placeholder="Search MCP logs"
+					value={localSearch}
+					onChange={(e) => handleSearchChange(e.target.value)}
+				/>
+			</div>
+			<DateTimePickerWithRange
+				dateTime={{ from: startTime, to: endTime }}
+				predefinedPeriod={period || undefined}
+				onDateTimeUpdate={(p) => {
+					setStartTime(p.from);
+					setEndTime(p.to);
+					onFiltersChange({
+						...filters,
+						start_time: p.from?.toISOString(),
+						end_time: p.to?.toISOString(),
+					});
+				}}
+				preDefinedPeriods={TIME_PERIODS}
+				onPredefinedPeriodChange={(periodValue) => {
+					if (!periodValue) return;
+					const { from, to } = getRangeForPeriod(periodValue);
+					setStartTime(from);
+					setEndTime(to);
+					onPeriodChange(periodValue, from, to);
+				}}
+			/>
+			<ColumnConfigDropdown
+				entries={columnEntries}
+				labels={columnLabels}
+				onToggleVisibility={onToggleColumnVisibility}
+				onReset={onResetColumns}
+			/>
+		</div>
+	);
+}