@kopai/ui 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopai/ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "author": "Vladimir Adamic",
   "repository": {
@@ -34,7 +34,7 @@
     "@tanstack/react-virtual": "^3.13.19",
     "recharts": "^3.7.0",
     "@kopai/core": "0.7.0",
-    "@kopai/sdk": "0.4.0"
+    "@kopai/sdk": "0.5.0"
   },
   "peerDependencies": {
     "react": "^19.2.4",

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

@@ -23,6 +23,11 @@ function createMockClient(): MockClient {
     searchLogs: vi.fn().mockResolvedValue({ data: [] }),
     searchMetrics: vi.fn().mockResolvedValue({ data: [] }),
     createDashboard: vi.fn().mockResolvedValue({}),
+    getDashboard: vi.fn().mockResolvedValue({}),
+    searchDashboardsPage: vi
+      .fn()
+      .mockResolvedValue({ data: [], nextCursor: null }),
+    searchDashboards: vi.fn().mockReturnValue((async function* () {})()),
   };
 }
 

package/src/components/observability/MetricTimeSeries/index.tsx

@@ -96,12 +96,26 @@ function buildMetrics(rows: OtelMetricsRow[]): ParsedMetricGroup[] {
   for (const row of rows) {
     const name = row.MetricName ?? "unknown";
     const type = row.MetricType;
-    if (
+
+    // Extract scalar value depending on metric type
+    let value: number | undefined;
+    if (type === "Gauge" || type === "Sum") {
+      value = "Value" in row ? row.Value : undefined;
+    } else if (
       type === "Histogram" ||
       type === "ExponentialHistogram" ||
       type === "Summary"
-    )
-      continue; // TimeSeries only handles Gauge/Sum
+    ) {
+      // Use mean (Sum/Count) for distribution metrics
+      const sum = "Sum" in row ? (row as { Sum?: number }).Sum : undefined;
+      const count =
+        "Count" in row ? (row as { Count?: number }).Count : undefined;
+      if (sum != null && count != null && count > 0) {
+        value = sum / count;
+      }
+    }
+
+    if (value === undefined) continue;
 
     if (!metricMap.has(name)) metricMap.set(name, new Map());
     if (!metricMeta.has(name))
@@ -136,8 +150,6 @@ function buildMetrics(rows: OtelMetricsRow[]): ParsedMetricGroup[] {
       });
     }
 
-    if (!("Value" in row)) continue;
-    const value = row.Value;
     const timestamp = parseInt(row.TimeUnix, 10) / 1e6;
     seriesMap.get(seriesKey)!.dataPoints.push({ timestamp, value });
   }

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

@@ -18,11 +18,15 @@ export function OtelLogTimeline(props: Props) {
 
   const response = props.data as { data?: OtelLogsRow[] } | null;
 
+  const height = props.element.props.height ?? 600;
+
   return (
-    <LogTimeline
-      rows={response?.data ?? []}
-      isLoading={props.loading}
-      error={props.error ?? undefined}
-    />
+    <div style={{ height }} className="flex flex-col min-h-0">
+      <LogTimeline
+        rows={response?.data ?? []}
+        isLoading={props.loading}
+        error={props.error ?? undefined}
+      />
+    </div>
   );
 }

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

@@ -18,6 +18,7 @@ const createMockClient = () => ({
   searchMetricsPage: vi.fn(),
   getTrace: vi.fn(),
   discoverMetrics: vi.fn(),
+  getDashboard: vi.fn(),
 });
 
 type MockClient = ReturnType<typeof createMockClient>;

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

@@ -21,6 +21,7 @@ const createMockClient = () => ({
   searchMetricsPage: vi.fn(),
   getTrace: vi.fn(),
   discoverMetrics: vi.fn(),
+  getDashboard: vi.fn(),
 });
 
 function wrapper(client: KopaiClient) {

package/src/pages/observability.test.tsx

@@ -23,6 +23,11 @@ function createMockClient(): MockClient {
     searchLogs: vi.fn().mockResolvedValue({ data: [] }),
     searchMetrics: vi.fn().mockResolvedValue({ data: [] }),
     createDashboard: vi.fn().mockResolvedValue({}),
+    getDashboard: vi.fn().mockResolvedValue({}),
+    searchDashboardsPage: vi
+      .fn()
+      .mockResolvedValue({ data: [], nextCursor: null }),
+    searchDashboards: vi.fn().mockReturnValue((async function* () {})()),
   };
 }
 
@@ -72,12 +77,7 @@ describe("useDashboardTree validation", () => {
   }
 
   it("renders DynamicDashboard when API returns a valid uiTree", async () => {
-    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(
-      new Response(JSON.stringify({ uiTree: VALID_TREE }), {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
-      })
-    );
+    mockClient.getDashboard.mockResolvedValueOnce({ uiTree: VALID_TREE });
 
     setURL("?tab=metrics&dashboardId=abc");
 
@@ -91,6 +91,10 @@ describe("useDashboardTree validation", () => {
       expect(screen.getByText("Test Dashboard")).toBeTruthy();
     });
 
+    expect(mockClient.getDashboard).toHaveBeenCalledWith(
+      "abc",
+      expect.anything()
+    );
     expect(screen.queryByText(/invalid layout/i)).toBeNull();
   });
 
@@ -102,12 +106,7 @@ describe("useDashboardTree validation", () => {
       },
     };
 
-    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(
-      new Response(JSON.stringify({ uiTree: invalidTree }), {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
-      })
-    );
+    mockClient.getDashboard.mockResolvedValueOnce({ uiTree: invalidTree });
 
     setURL("?tab=metrics&dashboardId=def");
 
@@ -120,5 +119,10 @@ describe("useDashboardTree validation", () => {
     await waitFor(() => {
       expect(screen.getByText(/invalid layout/i)).toBeTruthy();
     });
+
+    expect(mockClient.getDashboard).toHaveBeenCalledWith(
+      "def",
+      expect.anything()
+    );
   });
 });

package/src/pages/observability.tsx

@@ -663,8 +663,6 @@ function ServicesTab({
 // Metrics tab — DynamicDashboard
 // ---------------------------------------------------------------------------
 
-const DASHBOARDS_API_BASE = "/dashboards";
-
 const METRICS_TREE = {
   root: "root",
   elements: {
@@ -715,16 +713,17 @@ const METRICS_TREE = {
   },
 };
 
-function useDashboardTree(dashboardId: string | null) {
+function useDashboardTree(
+  client: Pick<KopaiClient, "getDashboard">,
+  dashboardId: string | null
+) {
   const { data, isFetching, error } = useQuery<UITree, Error>({
     queryKey: ["dashboard-tree", dashboardId],
     queryFn: async ({ signal }) => {
-      const res = await fetch(`${DASHBOARDS_API_BASE}/${dashboardId}`, {
-        signal,
-      });
-      if (!res.ok) throw new Error(`Failed to load dashboard: ${res.status}`);
-      const json = await res.json();
-      const parsed = observabilityCatalog.uiTreeSchema.safeParse(json.uiTree);
+      const dashboard = await client.getDashboard(dashboardId!, { signal });
+      const parsed = observabilityCatalog.uiTreeSchema.safeParse(
+        dashboard.uiTree
+      );
       if (!parsed.success) {
         const issue = parsed.error.issues[0];
         const path = issue?.path.length ? issue.path.join(".") + ": " : "";
@@ -747,7 +746,7 @@ function useDashboardTree(dashboardId: string | null) {
 function MetricsTab() {
   const kopaiClient = useKopaiSDK();
   const { dashboardId } = useURLState();
-  const { loading, error, tree } = useDashboardTree(dashboardId);
+  const { loading, error, tree } = useDashboardTree(kopaiClient, dashboardId);
 
   if (loading)
     return (

package/src/providers/kopai-provider.tsx

@@ -9,6 +9,7 @@ export type KopaiClient = Pick<
   | "searchMetricsPage"
   | "getTrace"
   | "discoverMetrics"
+  | "getDashboard"
 >;
 
 interface KopaiSDKContextValue {