@kopai/ui 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopai/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "license": "Apache-2.0",
   "author": "Vladimir Adamic",
   "repository": {
@@ -31,32 +31,32 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5",
-    "@tanstack/react-virtual": "^3.13.22",
-    "recharts": "^3.8.0",
-    "@kopai/core": "0.8.0",
-    "@kopai/sdk": "0.6.0"
+    "@tanstack/react-virtual": "^3.13.23",
+    "recharts": "^3.8.1",
+    "@kopai/core": "0.9.0",
+    "@kopai/sdk": "0.7.0"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "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";
@@ -17,6 +17,9 @@ function createMockClient(): MockClient {
     searchTracesPage: vi.fn().mockResolvedValue({ data: [] }),
     searchLogsPage: vi.fn().mockResolvedValue({ data: [] }),
     searchMetricsPage: vi.fn().mockResolvedValue({ data: [] }),
+    searchAggregatedMetrics: vi
+      .fn()
+      .mockResolvedValue({ data: [], nextCursor: null }),
     getTrace: vi.fn().mockResolvedValue({ data: [] }),
     discoverMetrics: vi.fn().mockResolvedValue({ data: [] }),
     searchTraces: vi.fn().mockResolvedValue({ data: [] }),
@@ -219,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/MetricStat/index.tsx

@@ -16,6 +16,10 @@ export interface ThresholdConfig {
 
 export interface MetricStatProps {
   rows: OtelMetricsRow[];
+  /** Pre-computed value (e.g. from aggregated queries). Bypasses row extraction when set. */
+  value?: number;
+  /** Unit string for formatting when using pre-computed value. */
+  unit?: string;
   isLoading?: boolean;
   error?: Error;
   label?: string;
@@ -140,6 +144,8 @@ function buildStatData(rows: OtelMetricsRow[]): {
 
 export function MetricStat({
   rows,
+  value: directValue,
+  unit: directUnit,
   isLoading = false,
   error,
   label,
@@ -155,10 +161,12 @@ export function MetricStat({
   colorBackground,
   colorValue = false,
 }: MetricStatProps) {
-  const { latestValue, unit, timestamp, dataPoints, metricName } = useMemo(
-    () => buildStatData(rows),
-    [rows]
-  );
+  const statData = useMemo(() => buildStatData(rows), [rows]);
+
+  // Pre-computed value (aggregated queries) bypasses row extraction
+  const latestValue = directValue ?? statData.latestValue;
+  const unit = directUnit ?? statData.unit;
+  const { timestamp, dataPoints, metricName } = statData;
 
   const sparklineData = useMemo(() => {
     if (!showSparkline || dataPoints.length === 0) return [];

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

@@ -5,11 +5,23 @@ import { formatOtelValue } from "../utils/units.js";
 import type { denormalizedSignals } from "@kopai/core";
 
 type OtelMetricsRow = denormalizedSignals.OtelMetricsRow;
+type AggregatedMetricRow = denormalizedSignals.AggregatedMetricRow;
 
 type Props = RendererComponentProps<
   typeof observabilityCatalog.components.MetricStat
 >;
 
+const EMPTY_ROWS: never[] = [];
+const GROUPED_AGGREGATE_ERROR = new Error(
+  "MetricStat cannot display grouped aggregates. Remove groupBy or use MetricTable."
+);
+
+function isAggregatedRequest(props: Props & { hasData: true }): boolean {
+  const ds = props.element.dataSource;
+  if (!ds || ds.method !== "searchMetricsPage" || !ds.params) return false;
+  return !!ds.params.aggregate;
+}
+
 export function OtelMetricStat(props: Props) {
   if (!props.hasData) {
     return (
@@ -17,6 +29,34 @@ export function OtelMetricStat(props: Props) {
     );
   }
 
+  if (isAggregatedRequest(props)) {
+    const response = props.data as { data: AggregatedMetricRow[] } | null;
+    const rows = response?.data ?? [];
+
+    if (rows.length > 1) {
+      return (
+        <MetricStat
+          rows={EMPTY_ROWS}
+          error={GROUPED_AGGREGATE_ERROR}
+          label={props.element.props.label ?? undefined}
+          formatValue={formatOtelValue}
+        />
+      );
+    }
+
+    return (
+      <MetricStat
+        rows={EMPTY_ROWS}
+        value={rows[0]?.value}
+        isLoading={props.loading}
+        error={props.error ?? undefined}
+        label={props.element.props.label ?? undefined}
+        showSparkline={false}
+        formatValue={formatOtelValue}
+      />
+    );
+  }
+
   const response = props.data as { data?: OtelMetricsRow[] } | null;
 
   return (

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 (

package/src/hooks/use-kopai-data.test.ts

@@ -16,6 +16,7 @@ const createMockClient = () => ({
   searchTracesPage: vi.fn(),
   searchLogsPage: vi.fn(),
   searchMetricsPage: vi.fn(),
+  searchAggregatedMetrics: vi.fn(),
   getTrace: vi.fn(),
   discoverMetrics: vi.fn(),
   getDashboard: vi.fn(),
@@ -151,6 +152,36 @@ describe("useKopaiData", () => {
       expect(result.current.data).toEqual(mockData);
       expect(mockClient.searchMetricsPage).toHaveBeenCalled();
     });
+
+    it("routes to searchAggregatedMetrics when aggregate is set", async () => {
+      const mockData = {
+        data: [{ groups: { signal: "/v1/traces" }, value: 1024 }],
+        nextCursor: null,
+      };
+      mockClient.searchAggregatedMetrics.mockResolvedValue(mockData);
+
+      const dataSource: DataSource = {
+        method: "searchMetricsPage",
+        params: {
+          metricType: "Sum",
+          metricName: "kopai.ingestion.bytes",
+          aggregate: "sum",
+          groupBy: ["signal"],
+        },
+      };
+
+      const { result } = renderHook(() => useKopaiData(dataSource), {
+        wrapper: wrapper(mockClient),
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.data).toEqual(mockData);
+      expect(mockClient.searchAggregatedMetrics).toHaveBeenCalled();
+      expect(mockClient.searchMetricsPage).not.toHaveBeenCalled();
+    });
   });
 
   describe("getTrace", () => {

package/src/hooks/use-kopai-data.ts

@@ -25,11 +25,18 @@ function fetchForDataSource(
         dataSource.params as Parameters<typeof client.searchLogsPage>[0],
         { signal }
       );
-    case "searchMetricsPage":
-      return client.searchMetricsPage(
-        dataSource.params as Parameters<typeof client.searchMetricsPage>[0],
-        { signal }
-      );
+    case "searchMetricsPage": {
+      const params = dataSource.params as Parameters<
+        typeof client.searchMetricsPage
+      >[0];
+      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":

package/src/hooks/use-live-logs.test.ts

@@ -19,6 +19,7 @@ const createMockClient = () => ({
   searchTracesPage: vi.fn(),
   searchLogsPage: vi.fn(),
   searchMetricsPage: vi.fn(),
+  searchAggregatedMetrics: vi.fn(),
   getTrace: vi.fn(),
   discoverMetrics: vi.fn(),
   getDashboard: vi.fn(),

package/src/lib/__snapshots__/generate-prompt-instructions.test.ts.snap

@@ -29,7 +29,7 @@ Accepts dataSource: yes
 
 ## Output Schema
 
-{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"root":{"type":"string","description":"root uiElement key in the elements array"},"elements":{"type":"object","propertyNames":{"type":"string","description":"equal to the element key"},"additionalProperties":{"oneOf":[{"type":"object","properties":{"key":{"type":"string"},"type":{"type":"string","const":"Card"},"children":{"type":"array","items":{"type":"string"}},"parentKey":{"type":"string"},"dataSource":{"$ref":"#/$defs/DataSource"},"props":{"type":"object","properties":{"title":{"type":"string"}},"required":["title"],"additionalProperties":false}},"required":["key","type","children","parentKey","props"],"additionalProperties":false},{"type":"object","properties":{"key":{"type":"string"},"type":{"type":"string","const":"Button"},"children":{"type":"array","items":{"type":"string"}},"parentKey":{"type":"string"},"dataSource":{"$ref":"#/$defs/DataSource"},"props":{"type":"object","properties":{"label":{"type":"string"}},"required":["label"],"additionalProperties":false}},"required":["key","type","children","parentKey","props"],"additionalProperties":false}]}}},"required":["root","elements"],"additionalProperties":false,"$defs":{"DataSource":{"$schema":"https://json-schema.org/draft/2020-12/schema","oneOf":[{"type":"object","properties":{"method":{"type":"string","const":"searchTracesPage"},"params":{"type":"object","properties":{"traceId":{"description":"Unique identifier for a trace. All spans from the same trace share the same trace_id. The ID is a 16-byte array.","type":"string"},"spanId":{"description":"Unique identifier for a span within a trace. The ID is an 8-byte array.","type":"string"},"parentSpanId":{"description":"The span_id of this span's parent span. Empty if this is a root span.","type":"string"},"serviceName":{"description":"Service name from resource attributes (service.name).","type":"string"},"spanName":{"description":"Description of the span's operation. E.g., qualified method name or file name with line number.","type":"string"},"spanKind":{"description":"Type of span (INTERNAL, SERVER, CLIENT, PRODUCER, CONSUMER). Used to identify relationships between spans.","type":"string"},"statusCode":{"description":"Status code (UNSET, OK, ERROR).","type":"string"},"scopeName":{"description":"Name denoting the instrumentation scope.","type":"string"},"timestampMin":{"description":"Minimum start time of the span. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"timestampMax":{"description":"Maximum start time of the span. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"durationMin":{"description":"Minimum duration of the span in nanoseconds (end_time - start_time). Expressed as string in JSON.","type":"string"},"durationMax":{"description":"Maximum duration of the span in nanoseconds (end_time - start_time). Expressed as string in JSON.","type":"string"},"spanAttributes":{"description":"Key/value pairs describing the span.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"description":"Attributes that describe the resource.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"eventsAttributes":{"description":"Attribute key/value pairs on the event.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"linksAttributes":{"description":"Attribute key/value pairs on the link.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"description":"Max items to return. Default determined by datasource.","type":"integer","exclusiveMinimum":0,"maximum":1000},"cursor":{"description":"Opaque cursor from previous response for next page.","type":"string"},"sortOrder":{"description":"Sort by timestamp. ASC = oldest first, DESC = newest first.","type":"string","enum":["ASC","DESC"]}},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"searchLogsPage"},"params":{"type":"object","properties":{"traceId":{"description":"Unique identifier for a trace. All logs from the same trace share the same trace_id. The ID is a 16-byte array.","type":"string"},"spanId":{"description":"Unique identifier for a span within a trace. The ID is an 8-byte array.","type":"string"},"serviceName":{"description":"Service name from resource attributes (service.name).","type":"string"},"scopeName":{"description":"Name denoting the instrumentation scope.","type":"string"},"severityText":{"description":"Severity text (also known as log level). Original string representation as known at the source.","type":"string"},"severityNumberMin":{"description":"Minimum severity number (inclusive). Normalized to values described in Log Data Model.","type":"number"},"severityNumberMax":{"description":"Maximum severity number (inclusive). Normalized to values described in Log Data Model.","type":"number"},"bodyContains":{"description":"Filter logs where body contains this substring.","type":"string"},"timestampMin":{"description":"Minimum time when the event occurred. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"timestampMax":{"description":"Maximum time when the event occurred. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"logAttributes":{"description":"Additional attributes that describe the specific event occurrence.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"description":"Attributes that describe the resource.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"scopeAttributes":{"description":"Attributes of the instrumentation scope.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"description":"Max items to return. Default determined by datasource.","type":"integer","exclusiveMinimum":0,"maximum":1000},"cursor":{"description":"Opaque cursor from previous response for next page.","type":"string"},"sortOrder":{"description":"Sort by timestamp. ASC = oldest first, DESC = newest first.","type":"string","enum":["ASC","DESC"]}},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"searchMetricsPage"},"params":{"type":"object","properties":{"metricType":{"type":"string","enum":["Gauge","Sum","Histogram","ExponentialHistogram","Summary"],"description":"Metric type to query."},"metricName":{"description":"The name of the metric.","type":"string"},"serviceName":{"description":"Service name from resource attributes (service.name).","type":"string"},"scopeName":{"description":"Name denoting the instrumentation scope.","type":"string"},"timeUnixMin":{"description":"Minimum time when the data point was recorded. UNIX Epoch time in nanoseconds. Expressed as string in JSON.","type":"string"},"timeUnixMax":{"description":"Maximum time when the data point was recorded. UNIX Epoch time in nanoseconds. Expressed as string in JSON.","type":"string"},"attributes":{"description":"Key/value pairs that uniquely identify the timeseries.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"description":"Attributes that describe the resource.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"scopeAttributes":{"description":"Attributes of the instrumentation scope.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"description":"Max items to return. Default determined by datasource.","type":"integer","exclusiveMinimum":0,"maximum":1000},"cursor":{"description":"Opaque cursor from previous response for next page.","type":"string"},"sortOrder":{"description":"Sort by timestamp. ASC = oldest first, DESC = newest first.","type":"string","enum":["ASC","DESC"]}},"required":["metricType"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"getTrace"},"params":{"type":"object","properties":{"traceId":{"type":"string"}},"required":["traceId"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"discoverMetrics"},"params":{"type":"object","properties":{},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"getServices"},"params":{"type":"object","properties":{},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"getOperations"},"params":{"type":"object","properties":{"serviceName":{"type":"string"}},"required":["serviceName"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"searchTraceSummariesPage"},"params":{"type":"object","properties":{"serviceName":{"type":"string"},"spanName":{"type":"string"},"timestampMin":{"type":"string"},"timestampMax":{"type":"string"},"durationMin":{"type":"string"},"durationMax":{"type":"string"},"spanAttributes":{"type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"default":20,"type":"integer","minimum":1,"maximum":1000},"cursor":{"type":"string"},"sortOrder":{"default":"DESC","type":"string","enum":["ASC","DESC"]}},"required":["limit","sortOrder"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false}]}}}
+{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"root":{"type":"string","description":"root uiElement key in the elements array"},"elements":{"type":"object","propertyNames":{"type":"string","description":"equal to the element key"},"additionalProperties":{"oneOf":[{"type":"object","properties":{"key":{"type":"string"},"type":{"type":"string","const":"Card"},"children":{"type":"array","items":{"type":"string"}},"parentKey":{"type":"string"},"dataSource":{"$ref":"#/$defs/DataSource"},"props":{"type":"object","properties":{"title":{"type":"string"}},"required":["title"],"additionalProperties":false}},"required":["key","type","children","parentKey","props"],"additionalProperties":false},{"type":"object","properties":{"key":{"type":"string"},"type":{"type":"string","const":"Button"},"children":{"type":"array","items":{"type":"string"}},"parentKey":{"type":"string"},"dataSource":{"$ref":"#/$defs/DataSource"},"props":{"type":"object","properties":{"label":{"type":"string"}},"required":["label"],"additionalProperties":false}},"required":["key","type","children","parentKey","props"],"additionalProperties":false}]}}},"required":["root","elements"],"additionalProperties":false,"$defs":{"DataSource":{"$schema":"https://json-schema.org/draft/2020-12/schema","oneOf":[{"type":"object","properties":{"method":{"type":"string","const":"searchTracesPage"},"params":{"type":"object","properties":{"traceId":{"description":"Unique identifier for a trace. All spans from the same trace share the same trace_id. The ID is a 16-byte array.","type":"string"},"spanId":{"description":"Unique identifier for a span within a trace. The ID is an 8-byte array.","type":"string"},"parentSpanId":{"description":"The span_id of this span's parent span. Empty if this is a root span.","type":"string"},"serviceName":{"description":"Service name from resource attributes (service.name).","type":"string"},"spanName":{"description":"Description of the span's operation. E.g., qualified method name or file name with line number.","type":"string"},"spanKind":{"description":"Type of span (INTERNAL, SERVER, CLIENT, PRODUCER, CONSUMER). Used to identify relationships between spans.","type":"string"},"statusCode":{"description":"Status code (UNSET, OK, ERROR).","type":"string"},"scopeName":{"description":"Name denoting the instrumentation scope.","type":"string"},"timestampMin":{"description":"Minimum start time of the span. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"timestampMax":{"description":"Maximum start time of the span. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"durationMin":{"description":"Minimum duration of the span in nanoseconds (end_time - start_time). Expressed as string in JSON.","type":"string"},"durationMax":{"description":"Maximum duration of the span in nanoseconds (end_time - start_time). Expressed as string in JSON.","type":"string"},"spanAttributes":{"description":"Key/value pairs describing the span.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"description":"Attributes that describe the resource.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"eventsAttributes":{"description":"Attribute key/value pairs on the event.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"linksAttributes":{"description":"Attribute key/value pairs on the link.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"description":"Max items to return. Default determined by datasource.","type":"integer","exclusiveMinimum":0,"maximum":1000},"cursor":{"description":"Opaque cursor from previous response for next page.","type":"string"},"sortOrder":{"description":"Sort by timestamp. ASC = oldest first, DESC = newest first.","type":"string","enum":["ASC","DESC"]}},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"searchLogsPage"},"params":{"type":"object","properties":{"traceId":{"description":"Unique identifier for a trace. All logs from the same trace share the same trace_id. The ID is a 16-byte array.","type":"string"},"spanId":{"description":"Unique identifier for a span within a trace. The ID is an 8-byte array.","type":"string"},"serviceName":{"description":"Service name from resource attributes (service.name).","type":"string"},"scopeName":{"description":"Name denoting the instrumentation scope.","type":"string"},"severityText":{"description":"Severity text (also known as log level). Original string representation as known at the source.","type":"string"},"severityNumberMin":{"description":"Minimum severity number (inclusive). Normalized to values described in Log Data Model.","type":"number"},"severityNumberMax":{"description":"Maximum severity number (inclusive). Normalized to values described in Log Data Model.","type":"number"},"bodyContains":{"description":"Filter logs where body contains this substring.","type":"string"},"timestampMin":{"description":"Minimum time when the event occurred. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"timestampMax":{"description":"Maximum time when the event occurred. UNIX Epoch time in nanoseconds since 00:00:00 UTC on 1 January 1970. Expressed as string in JSON.","type":"string"},"logAttributes":{"description":"Additional attributes that describe the specific event occurrence.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"description":"Attributes that describe the resource.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"scopeAttributes":{"description":"Attributes of the instrumentation scope.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"description":"Max items to return. Default determined by datasource.","type":"integer","exclusiveMinimum":0,"maximum":1000},"cursor":{"description":"Opaque cursor from previous response for next page.","type":"string"},"sortOrder":{"description":"Sort by timestamp. ASC = oldest first, DESC = newest first.","type":"string","enum":["ASC","DESC"]}},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"searchMetricsPage"},"params":{"type":"object","properties":{"metricType":{"type":"string","enum":["Gauge","Sum","Histogram","ExponentialHistogram","Summary"],"description":"Metric type to query."},"metricName":{"description":"The name of the metric.","type":"string"},"serviceName":{"description":"Service name from resource attributes (service.name).","type":"string"},"scopeName":{"description":"Name denoting the instrumentation scope.","type":"string"},"timeUnixMin":{"description":"Minimum time when the data point was recorded. UNIX Epoch time in nanoseconds. Expressed as string in JSON.","type":"string"},"timeUnixMax":{"description":"Maximum time when the data point was recorded. UNIX Epoch time in nanoseconds. Expressed as string in JSON.","type":"string"},"attributes":{"description":"Key/value pairs that uniquely identify the timeseries.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"description":"Attributes that describe the resource.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"scopeAttributes":{"description":"Attributes of the instrumentation scope.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"aggregate":{"description":"Aggregation function to apply to metric values. When set, returns aggregated results instead of raw data points.","type":"string","enum":["sum","avg","min","max","count"]},"groupBy":{"description":"Attribute keys to group by when aggregating (e.g. ['tenant.id', 'signal']).","type":"array","items":{"type":"string"}},"limit":{"description":"Max items to return. Default determined by datasource.","type":"integer","exclusiveMinimum":0,"maximum":1000},"cursor":{"description":"Opaque cursor from previous response for next page.","type":"string"},"sortOrder":{"description":"Sort by timestamp. ASC = oldest first, DESC = newest first.","type":"string","enum":["ASC","DESC"]}},"required":["metricType"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"getTrace"},"params":{"type":"object","properties":{"traceId":{"type":"string"}},"required":["traceId"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"discoverMetrics"},"params":{"type":"object","properties":{},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"getServices"},"params":{"type":"object","properties":{},"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"getOperations"},"params":{"type":"object","properties":{"serviceName":{"type":"string"}},"required":["serviceName"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false},{"type":"object","properties":{"method":{"type":"string","const":"searchTraceSummariesPage"},"params":{"type":"object","properties":{"serviceName":{"type":"string"},"spanName":{"type":"string"},"timestampMin":{"type":"string"},"timestampMax":{"type":"string"},"durationMin":{"type":"string"},"durationMax":{"type":"string"},"spanAttributes":{"type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"resourceAttributes":{"type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"limit":{"default":20,"type":"integer","minimum":1,"maximum":1000},"cursor":{"type":"string"},"sortOrder":{"default":"DESC","type":"string","enum":["ASC","DESC"]}},"required":["limit","sortOrder"],"additionalProperties":false},"refetchIntervalMs":{"type":"number"}},"required":["method","params"],"additionalProperties":false}]}}}
 
 ---
 

package/src/lib/renderer.test.tsx

@@ -52,6 +52,7 @@ type MockClient = {
   searchTracesPage: ReturnType<typeof vi.fn>;
   searchLogsPage: ReturnType<typeof vi.fn>;
   searchMetricsPage: ReturnType<typeof vi.fn>;
+  searchAggregatedMetrics: ReturnType<typeof vi.fn>;
   getTrace: ReturnType<typeof vi.fn>;
   discoverMetrics: ReturnType<typeof vi.fn>;
   searchTraces: ReturnType<typeof vi.fn>;
@@ -281,6 +282,7 @@ describe("Renderer with dataSource", () => {
     searchTracesPage: vi.fn(),
     searchLogsPage: vi.fn(),
     searchMetricsPage: vi.fn(),
+    searchAggregatedMetrics: vi.fn(),
     getTrace: vi.fn(),
     discoverMetrics: vi.fn(),
     searchTraces: vi.fn(),

package/src/pages/observability.test.tsx

@@ -17,6 +17,9 @@ function createMockClient(): MockClient {
     searchTracesPage: vi.fn().mockResolvedValue({ data: [] }),
     searchLogsPage: vi.fn().mockResolvedValue({ data: [] }),
     searchMetricsPage: vi.fn().mockResolvedValue({ data: [] }),
+    searchAggregatedMetrics: vi
+      .fn()
+      .mockResolvedValue({ data: [], nextCursor: null }),
     getTrace: vi.fn().mockResolvedValue({ data: [] }),
     discoverMetrics: vi.fn().mockResolvedValue({ data: [] }),
     searchTraces: vi.fn().mockResolvedValue({ data: [] }),