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/mcpTab.tsx
+++ b/ui/app/workspace/dashboard/components/mcpTab.tsx
@@ -0,0 +1,107 @@
+import type { MCPCostHistogramResponse, MCPHistogramResponse, MCPTopToolsResponse } from "@/lib/types/logs";
+import { CHART_COLORS, CHART_HEADER_ACTIONS_CLASS, CHART_HEADER_CONTROLS_CLASS, CHART_HEADER_LEGEND_CLASS } from "../utils/chartUtils";
+import { ChartCard } from "./charts/chartCard";
+import { type ChartType, ChartTypeToggle } from "./charts/chartTypeToggle";
+import { MCPCostChart } from "./charts/mcpCostChart";
+import { MCPTopToolsChart } from "./charts/mcpTopToolsChart";
+import { MCPVolumeChart } from "./charts/mcpVolumeChart";
+
+export interface MCPTabProps {
+	// Data
+	mcpHistogramData: MCPHistogramResponse | null;
+	mcpCostData: MCPCostHistogramResponse | null;
+	mcpTopToolsData: MCPTopToolsResponse | null;
+
+	// Loading states
+	loadingMcpHistogram: boolean;
+	loadingMcpCost: boolean;
+	loadingMcpTopTools: boolean;
+
+	// Time range
+	startTime: number;
+	endTime: number;
+
+	// Chart types
+	mcpVolumeChartType: ChartType;
+	mcpCostChartType: ChartType;
+
+	// Chart type toggle callbacks
+	onMcpVolumeChartToggle: (type: ChartType) => void;
+	onMcpCostChartToggle: (type: ChartType) => void;
+}
+
+export function MCPTab({
+	mcpHistogramData,
+	mcpCostData,
+	mcpTopToolsData,
+	loadingMcpHistogram,
+	loadingMcpCost,
+	loadingMcpTopTools,
+	startTime,
+	endTime,
+	mcpVolumeChartType,
+	mcpCostChartType,
+	onMcpVolumeChartToggle,
+	onMcpCostChartToggle,
+}: MCPTabProps) {
+	return (
+		<div className="grid grid-cols-1 gap-2 lg:grid-cols-2 2xl:grid-cols-3">
+			{/* MCP Tool Calls Volume */}
+			<ChartCard
+				title="MCP Tool Calls"
+				loading={loadingMcpHistogram}
+				testId="chart-mcp-volume"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							<span className="flex items-center gap-1">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.success }} />
+								<span className="text-muted-foreground">Success</span>
+							</span>
+							<span className="flex items-center gap-1">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.error }} />
+								<span className="text-muted-foreground">Error</span>
+							</span>
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ChartTypeToggle
+								chartType={mcpVolumeChartType}
+								onToggle={onMcpVolumeChartToggle}
+								data-testid="dashboard-mcp-volume-chart-toggle"
+							/>
+						</div>
+					</div>
+				}
+			>
+				<MCPVolumeChart data={mcpHistogramData} chartType={mcpVolumeChartType} startTime={startTime} endTime={endTime} />
+			</ChartCard>
+
+			{/* MCP Cost */}
+			<ChartCard
+				title="MCP Cost"
+				loading={loadingMcpCost}
+				testId="chart-mcp-cost"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							<span className="flex items-center gap-1">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.cost }} />
+								<span className="text-muted-foreground">Cost</span>
+							</span>
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ChartTypeToggle chartType={mcpCostChartType} onToggle={onMcpCostChartToggle} data-testid="dashboard-mcp-cost-chart-toggle" />
+						</div>
+					</div>
+				}
+			>
+				<MCPCostChart data={mcpCostData} chartType={mcpCostChartType} startTime={startTime} endTime={endTime} />
+			</ChartCard>
+
+			{/* Top 10 MCP Tools */}
+			<ChartCard title="Top 10 MCP Tools" loading={loadingMcpTopTools} testId="chart-mcp-top-tools">
+				<MCPTopToolsChart data={mcpTopToolsData} />
+			</ChartCard>
+		</div>
+	);
+}