107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
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>
|
|
);
|
|
} |