@kopai/ui 0.9.0 → 0.11.0

package/dist/index.mjs

@@ -34,16 +34,20 @@ function fetchForDataSource(client, dataSource, signal) {
 	switch (dataSource.method) {
 		case "searchTracesPage": return client.searchTracesPage(dataSource.params, { signal });
 		case "searchLogsPage": return client.searchLogsPage(dataSource.params, { signal });
-		case "searchMetricsPage": return client.searchMetricsPage(dataSource.params, { signal });
+		case "searchMetricsPage": {
+			const params = dataSource.params;
+			if (params.aggregate) return client.searchAggregatedMetrics({
+				...params,
+				aggregate: params.aggregate
+			}, { signal });
+			return client.searchMetricsPage(params, { signal });
+		}
 		case "getTrace": return client.getTrace(dataSource.params.traceId, { signal });
 		case "discoverMetrics": return client.discoverMetrics({ signal });
 		case "getServices": return client.getServices({ signal });
 		case "getOperations": return client.getOperations(dataSource.params.serviceName, { signal });
 		case "searchTraceSummariesPage": return client.searchTraceSummariesPage(dataSource.params, { signal });
-		default: {
-			const exhaustiveCheck = dataSource;
-			throw new Error(`Unknown method: ${exhaustiveCheck.method}`);
-		}
+		default: throw new Error(`Unknown method: ${dataSource.method}`);
 	}
 }
 function useKopaiData(dataSource) {
@@ -5700,8 +5704,11 @@ function buildStatData(rows) {
 		metricName
 	};
 }
-function MetricStat({ rows, isLoading = false, error, label, formatValue = defaultFormatValue$1, showTimestamp = false, trend, trendValue, className = "", showSparkline = false, sparklinePoints = 20, sparklineHeight = 40, thresholds, colorBackground, colorValue = false }) {
-	const { latestValue, unit, timestamp, dataPoints, metricName } = useMemo(() => buildStatData(rows), [rows]);
+function MetricStat({ rows, value: directValue, unit: directUnit, isLoading = false, error, label, formatValue = defaultFormatValue$1, showTimestamp = false, trend, trendValue, className = "", showSparkline = false, sparklinePoints = 20, sparklineHeight = 40, thresholds, colorBackground, colorValue = false }) {
+	const statData = useMemo(() => buildStatData(rows), [rows]);
+	const latestValue = directValue ?? statData.latestValue;
+	const unit = directUnit ?? statData.unit;
+	const { timestamp, dataPoints, metricName } = statData;
 	const sparklineData = useMemo(() => {
 		if (!showSparkline || dataPoints.length === 0) return [];
 		return dataPoints.slice(-sparklinePoints).map((dp) => ({ value: dp.value }));
@@ -6586,6 +6593,13 @@ function OtelMetricHistogram(props) {
 }
 //#endregion
 //#region src/components/observability/renderers/OtelMetricStat.tsx
+const EMPTY_ROWS = [];
+const GROUPED_AGGREGATE_ERROR = /* @__PURE__ */ new Error("MetricStat cannot display grouped aggregates. Remove groupBy or use MetricTable.");
+function isAggregatedRequest(props) {
+	const ds = props.element.dataSource;
+	if (!ds || ds.method !== "searchMetricsPage" || !ds.params) return false;
+	return !!ds.params.aggregate;
+}
 function OtelMetricStat(props) {
 	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
 		style: {
@@ -6594,6 +6608,24 @@ function OtelMetricStat(props) {
 		},
 		children: "No data source"
 	});
+	if (isAggregatedRequest(props)) {
+		const rows = props.data?.data ?? [];
+		if (rows.length > 1) return /* @__PURE__ */ jsx(MetricStat, {
+			rows: EMPTY_ROWS,
+			error: GROUPED_AGGREGATE_ERROR,
+			label: props.element.props.label ?? void 0,
+			formatValue: formatOtelValue
+		});
+		return /* @__PURE__ */ jsx(MetricStat, {
+			rows: EMPTY_ROWS,
+			value: rows[0]?.value,
+			isLoading: props.loading,
+			error: props.error ?? void 0,
+			label: props.element.props.label ?? void 0,
+			showSparkline: false,
+			formatValue: formatOtelValue
+		});
+	}
 	const response = props.data;
 	return /* @__PURE__ */ jsx(MetricStat, {
 		rows: response?.data ?? [],
@@ -6645,6 +6677,54 @@ function OtelMetricTimeSeries(props) {
 }
 //#endregion
 //#region src/components/observability/renderers/OtelTraceDetail.tsx
+function isTraceSummariesSource(props) {
+	return props.element.dataSource?.method === "searchTraceSummariesPage";
+}
+function TraceSummariesView({ data, loading, error }) {
+	const [selectedTraceId, setSelectedTraceId] = useState(null);
+	const client = useKopaiSDK();
+	const response = data;
+	const traces = useMemo(() => {
+		const rows = response?.data;
+		if (!Array.isArray(rows)) return [];
+		return rows.map((row) => ({
+			traceId: row.traceId,
+			rootSpanName: row.rootSpanName,
+			serviceName: row.rootServiceName,
+			durationMs: parseInt(row.durationNs, 10) / 1e6,
+			statusCode: row.errorCount > 0 ? "ERROR" : "OK",
+			timestampMs: parseInt(row.startTimeNs, 10) / 1e6,
+			spanCount: row.spanCount,
+			services: row.services,
+			errorCount: row.errorCount
+		}));
+	}, [response]);
+	const { data: traceRows, isFetching: traceLoading, error: traceError } = useQuery({
+		queryKey: [
+			"kopai",
+			"getTrace",
+			selectedTraceId
+		],
+		queryFn: ({ signal }) => client.getTrace(selectedTraceId, { signal }),
+		enabled: !!selectedTraceId
+	});
+	const handleBack = useCallback(() => setSelectedTraceId(null), []);
+	if (selectedTraceId) return /* @__PURE__ */ jsx(TraceDetail, {
+		traceId: selectedTraceId,
+		rows: traceRows ?? [],
+		isLoading: traceLoading,
+		error: traceError ?? void 0,
+		onBack: handleBack
+	});
+	return /* @__PURE__ */ jsx(TraceSearch, {
+		services: [],
+		service: "",
+		traces,
+		isLoading: loading,
+		error: error ?? void 0,
+		onSelectTrace: setSelectedTraceId
+	});
+}
 function OtelTraceDetail(props) {
 	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
 		style: {
@@ -6653,7 +6733,13 @@ function OtelTraceDetail(props) {
 		},
 		children: "No data source"
 	});
-	const rows = props.data?.data ?? [];
+	if (isTraceSummariesSource(props)) return /* @__PURE__ */ jsx(TraceSummariesView, {
+		data: props.data,
+		loading: props.loading,
+		error: props.error
+	});
+	const response = props.data;
+	const rows = Array.isArray(response?.data) ? response.data : [];
 	const traceId = rows[0]?.TraceId ?? "";
 	return /* @__PURE__ */ jsx(TraceDetail, {
 		rows,
@@ -7391,6 +7477,9 @@ const METRICS_TREE = {
 			type: "Stack",
 			children: [
 				"heading",
+				"ingestion-heading",
+				"ingestion-grid",
+				"discovery-heading",
 				"description",
 				"discovery-card"
 			],
@@ -7411,6 +7500,96 @@ const METRICS_TREE = {
 				level: "h2"
 			}
 		},
+		"ingestion-heading": {
+			key: "ingestion-heading",
+			type: "Heading",
+			children: [],
+			parentKey: "root",
+			props: {
+				text: "OTEL Ingestion",
+				level: "h3"
+			}
+		},
+		"ingestion-grid": {
+			key: "ingestion-grid",
+			type: "Grid",
+			children: ["card-bytes", "card-requests"],
+			parentKey: "root",
+			props: {
+				columns: 2,
+				gap: "md"
+			}
+		},
+		"card-bytes": {
+			key: "card-bytes",
+			type: "Card",
+			children: ["stat-bytes"],
+			parentKey: "ingestion-grid",
+			props: {
+				title: "Total Bytes Ingested",
+				description: null,
+				padding: null
+			}
+		},
+		"stat-bytes": {
+			key: "stat-bytes",
+			type: "MetricStat",
+			children: [],
+			parentKey: "card-bytes",
+			dataSource: {
+				method: "searchMetricsPage",
+				params: {
+					metricType: "Sum",
+					metricName: "kopai.ingestion.bytes",
+					aggregate: "sum"
+				},
+				refetchIntervalMs: 1e4
+			},
+			props: {
+				label: "Bytes",
+				showSparkline: false
+			}
+		},
+		"card-requests": {
+			key: "card-requests",
+			type: "Card",
+			children: ["stat-requests"],
+			parentKey: "ingestion-grid",
+			props: {
+				title: "Total Requests",
+				description: null,
+				padding: null
+			}
+		},
+		"stat-requests": {
+			key: "stat-requests",
+			type: "MetricStat",
+			children: [],
+			parentKey: "card-requests",
+			dataSource: {
+				method: "searchMetricsPage",
+				params: {
+					metricType: "Sum",
+					metricName: "kopai.ingestion.requests",
+					aggregate: "sum"
+				},
+				refetchIntervalMs: 1e4
+			},
+			props: {
+				label: "Requests",
+				showSparkline: false
+			}
+		},
+		"discovery-heading": {
+			key: "discovery-heading",
+			type: "Heading",
+			children: [],
+			parentKey: "root",
+			props: {
+				text: "Discovered Metrics",
+				level: "h3"
+			}
+		},
 		description: {
 			key: "description",
 			type: "Text",