@kopai/ui 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopai/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "Apache-2.0",
   "author": "Vladimir Adamic",
   "repository": {
@@ -31,8 +31,8 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5",
-    "@tanstack/react-virtual": "^3.13.22",
-    "recharts": "^3.8.0",
+    "@tanstack/react-virtual": "^3.13.23",
+    "recharts": "^3.8.1",
     "@kopai/core": "0.9.0",
     "@kopai/sdk": "0.7.0"
   },
@@ -41,22 +41,22 @@
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/react": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/react": "^10.3.4",
+    "@storybook/react-vite": "^10.3.4",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^6.0.1",
-    "@tailwindcss/postcss": "^4.2.1",
-    "jsdom": "^28.1.0",
+    "@tailwindcss/postcss": "^4.2.2",
+    "jsdom": "^29.0.1",
     "postcss": "^8.5.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^10.2.19",
-    "tailwindcss": "^4.2.1",
-    "tsdown": "^0.21.2",
-    "vite": "^8.0.0",
+    "storybook": "^10.3.4",
+    "tailwindcss": "^4.2.2",
+    "tsdown": "^0.21.7",
+    "vite": "^8.0.3",
     "@kopai/tsconfig": "0.2.0"
   },
   "scripts": {

package/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx

@@ -3,7 +3,7 @@
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createElement } from "react";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor, fireEvent } from "@testing-library/react";
 import { DynamicDashboard, type UITree } from "./index.js";
 import { queryClient } from "../../../providers/kopai-provider.js";
 import type { KopaiClient } from "@kopai/sdk";
@@ -222,6 +222,177 @@ describe("DynamicDashboard", () => {
     vi.clearAllMocks();
   });
 
+  it("renders TraceDetail with searchTraceSummariesPage without crashing", async () => {
+    const summaryTree = {
+      root: "root",
+      elements: {
+        root: {
+          key: "root",
+          type: "Stack" as const,
+          children: ["trace-detail"],
+          parentKey: "",
+          props: {
+            direction: "vertical" as const,
+            gap: "md" as const,
+            align: null,
+          },
+        },
+        "trace-detail": {
+          key: "trace-detail",
+          type: "TraceDetail" as const,
+          children: [],
+          parentKey: "root",
+          props: { height: 400 },
+          dataSource: {
+            method: "searchTraceSummariesPage" as const,
+            params: {
+              serviceName: "test-service",
+              limit: 20,
+              sortOrder: "DESC" as const,
+            },
+          },
+        },
+      },
+    } satisfies UITree;
+
+    mockClient.searchTraceSummariesPage.mockResolvedValue({
+      data: [
+        {
+          traceId: "0af7651916cd43dd8448eb211c80319c",
+          rootServiceName: "api-gateway",
+          rootSpanName: "GET /api/users",
+          startTimeNs: "1700000000000000000",
+          durationNs: "320000000",
+          spanCount: 8,
+          errorCount: 0,
+          services: [{ name: "api-gateway", count: 3, hasError: false }],
+        },
+      ],
+      nextCursor: null,
+    });
+
+    const { container } = render(
+      createElement(DynamicDashboard, {
+        kopaiClient: mockClient as unknown as KopaiClient,
+        uiTree: summaryTree,
+      })
+    );
+
+    await waitFor(() => {
+      expect(mockClient.searchTraceSummariesPage).toHaveBeenCalled();
+    });
+
+    // Should render trace summary list without crashing
+    await waitFor(() => {
+      expect(container.textContent).toContain("GET /api/users");
+    });
+  });
+
+  it("drills down from trace summary to trace detail on click", async () => {
+    const TRACE_ID = "0af7651916cd43dd8448eb211c80319c";
+
+    const summaryTree = {
+      root: "root",
+      elements: {
+        root: {
+          key: "root",
+          type: "Stack" as const,
+          children: ["trace-detail"],
+          parentKey: "",
+          props: {
+            direction: "vertical" as const,
+            gap: "md" as const,
+            align: null,
+          },
+        },
+        "trace-detail": {
+          key: "trace-detail",
+          type: "TraceDetail" as const,
+          children: [],
+          parentKey: "root",
+          props: { height: 400 },
+          dataSource: {
+            method: "searchTraceSummariesPage" as const,
+            params: {
+              serviceName: "test-service",
+              limit: 20,
+              sortOrder: "DESC" as const,
+            },
+          },
+        },
+      },
+    } satisfies UITree;
+
+    mockClient.searchTraceSummariesPage.mockResolvedValue({
+      data: [
+        {
+          traceId: TRACE_ID,
+          rootServiceName: "api-gateway",
+          rootSpanName: "GET /api/users",
+          startTimeNs: "1700000000000000000",
+          durationNs: "320000000",
+          spanCount: 8,
+          errorCount: 0,
+          services: [{ name: "api-gateway", count: 3, hasError: false }],
+        },
+      ],
+      nextCursor: null,
+    });
+
+    // Mock getTrace to return span data for drill-down
+    mockClient.getTrace.mockResolvedValue([
+      {
+        SpanId: "b7ad6b7169203331",
+        TraceId: TRACE_ID,
+        Timestamp: "1700000000000000000",
+        Duration: "320000000",
+        ParentSpanId: "",
+        ServiceName: "api-gateway",
+        SpanName: "GET /api/users",
+        SpanKind: "SERVER",
+        StatusCode: "OK",
+        StatusMessage: "",
+        ScopeName: "",
+        ScopeVersion: "",
+        SpanAttributes: {},
+        ResourceAttributes: { "service.name": "api-gateway" },
+        "Events.Name": [],
+        "Events.Timestamp": [],
+        "Events.Attributes": [],
+      },
+    ]);
+
+    const { container, getByText } = render(
+      createElement(DynamicDashboard, {
+        kopaiClient: mockClient as unknown as KopaiClient,
+        uiTree: summaryTree,
+      })
+    );
+
+    // Wait for summaries to render
+    await waitFor(() => {
+      expect(container.textContent).toContain("GET /api/users");
+    });
+
+    // Click the trace row to drill down
+    const traceRow = getByText("api-gateway: GET /api/users");
+    fireEvent.click(traceRow);
+
+    // Should fetch the full trace
+    await waitFor(() => {
+      expect(mockClient.getTrace).toHaveBeenCalledWith(
+        TRACE_ID,
+        expect.objectContaining({ signal: expect.any(AbortSignal) })
+      );
+    });
+
+    // Should render the trace detail view with "Traces" breadcrumb
+    await waitFor(() => {
+      expect(container.textContent).toContain("Traces");
+      expect(container.textContent).toContain(TRACE_ID.slice(0, 16));
+    });
+  });
+
   it("renders a UITree containing all catalog components", async () => {
     const { container } = render(
       createElement(DynamicDashboard, {

package/src/components/observability/renderers/OtelTraceDetail.tsx

@@ -1,14 +1,90 @@
+import { useState, useMemo, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { observabilityCatalog } from "../../../lib/observability-catalog.js";
 import type { RendererComponentProps } from "../../../lib/renderer.js";
 import { TraceDetail } from "../index.js";
-import type { denormalizedSignals } from "@kopai/core";
+import { TraceSearch } from "../TraceSearch/index.js";
+import type { TraceSummary } from "../TraceSearch/index.js";
+import { useKopaiSDK } from "../../../providers/kopai-provider.js";
+import type { denormalizedSignals, dataFilterSchemas } from "@kopai/core";
 
 type OtelTracesRow = denormalizedSignals.OtelTracesRow;
+type TraceSummaryRow = dataFilterSchemas.TraceSummaryRow;
 
 type Props = RendererComponentProps<
   typeof observabilityCatalog.components.TraceDetail
 >;
 
+function isTraceSummariesSource(props: Props & { hasData: true }): boolean {
+  return props.element.dataSource?.method === "searchTraceSummariesPage";
+}
+
+function TraceSummariesView({
+  data,
+  loading,
+  error,
+}: {
+  data: unknown;
+  loading: boolean;
+  error: Error | null;
+}) {
+  const [selectedTraceId, setSelectedTraceId] = useState<string | null>(null);
+  const client = useKopaiSDK();
+
+  const response = data as { data?: TraceSummaryRow[] } | null;
+
+  const traces = useMemo<TraceSummary[]>(() => {
+    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<OtelTracesRow[], Error>({
+    queryKey: ["kopai", "getTrace", selectedTraceId],
+    queryFn: ({ signal }) => client.getTrace(selectedTraceId!, { signal }),
+    enabled: !!selectedTraceId,
+  });
+
+  const handleBack = useCallback(() => setSelectedTraceId(null), []);
+
+  if (selectedTraceId) {
+    return (
+      <TraceDetail
+        traceId={selectedTraceId}
+        rows={traceRows ?? []}
+        isLoading={traceLoading}
+        error={traceError ?? undefined}
+        onBack={handleBack}
+      />
+    );
+  }
+
+  return (
+    <TraceSearch
+      services={[]}
+      service=""
+      traces={traces}
+      isLoading={loading}
+      error={error ?? undefined}
+      onSelectTrace={setSelectedTraceId}
+    />
+  );
+}
+
 export function OtelTraceDetail(props: Props) {
   if (!props.hasData) {
     return (
@@ -16,8 +92,18 @@ export function OtelTraceDetail(props: Props) {
     );
   }
 
+  if (isTraceSummariesSource(props)) {
+    return (
+      <TraceSummariesView
+        data={props.data}
+        loading={props.loading}
+        error={props.error}
+      />
+    );
+  }
+
   const response = props.data as { data?: OtelTracesRow[] } | null;
-  const rows = response?.data ?? [];
+  const rows = Array.isArray(response?.data) ? response.data : [];
   const traceId = rows[0]?.TraceId ?? "";
 
   return (