@kopai/ui 0.5.0 → 0.7.0

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

@@ -22,6 +22,12 @@ import type {
   RechartsDataPoint,
 } from "../types.js";
 import { downsampleLTTB, type LTTBPoint } from "../utils/lttb.js";
+import { formatSeriesLabel } from "../utils/attributes.js";
+import {
+  resolveUnitScale,
+  formatTickValue,
+  formatDisplayValue,
+} from "../utils/units.js";
 
 type OtelMetricsRow = denormalizedSignals.OtelMetricsRow;
 
@@ -52,6 +58,7 @@ export interface MetricTimeSeriesProps {
   maxDataPoints?: number;
   showBrush?: boolean;
   height?: number;
+  unit?: string;
   yAxisLabel?: string;
   formatTime?: (timestamp: number) => string;
   formatValue?: (value: number) => string;
@@ -70,12 +77,6 @@ const defaultFormatTime = (timestamp: number): string => {
   });
 };
 
-const defaultFormatValue = (value: number): string => {
-  if (Math.abs(value) >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
-  if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
-  return value.toFixed(2);
-};
-
 function getStrokeDashArray(
   style?: "solid" | "dashed" | "dotted"
 ): string | undefined {
@@ -185,6 +186,20 @@ function getSeriesKeys(metrics: ParsedMetricGroup[]): string[] {
   return Array.from(keys);
 }
 
+function buildDisplayLabelMap(
+  metrics: ParsedMetricGroup[]
+): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const m of metrics) {
+    for (const s of m.series) {
+      const dataKey = s.key === "__default__" ? m.name : s.key;
+      const label = formatSeriesLabel(s.labels);
+      map.set(dataKey, label || m.name);
+    }
+  }
+  return map;
+}
+
 function downsampleRechartsData(
   data: RechartsDataPoint[],
   seriesKeys: string[],
@@ -212,9 +227,10 @@ export function MetricTimeSeries({
   maxDataPoints = 500,
   showBrush = true,
   height = 400,
+  unit: unitProp,
   yAxisLabel,
   formatTime = defaultFormatTime,
-  formatValue = defaultFormatValue,
+  formatValue,
   onBrushChange,
   legendMaxLength = 30,
   thresholdLines,
@@ -222,7 +238,7 @@ export function MetricTimeSeries({
   const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
 
   const parsedMetrics = useMemo(() => buildMetrics(rows), [rows]);
-  const unit = parsedMetrics[0]?.unit ?? "";
+  const effectiveUnit = unitProp ?? parsedMetrics[0]?.unit ?? "";
   const chartData = useMemo(
     () => toRechartsData(parsedMetrics),
     [parsedMetrics]
@@ -231,11 +247,34 @@ export function MetricTimeSeries({
     () => getSeriesKeys(parsedMetrics),
     [parsedMetrics]
   );
+  const displayLabelMap = useMemo(
+    () => buildDisplayLabelMap(parsedMetrics),
+    [parsedMetrics]
+  );
   const displayData = useMemo(
     () => downsampleRechartsData(chartData, seriesKeys, maxDataPoints),
     [chartData, seriesKeys, maxDataPoints]
   );
 
+  const { tickFormatter, displayFormatter, resolvedYAxisLabel } =
+    useMemo(() => {
+      let max = 0;
+      for (const dp of displayData) {
+        for (const key of seriesKeys) {
+          const v = dp[key];
+          if (v !== undefined && Math.abs(v) > max) max = Math.abs(v);
+        }
+      }
+      const scale = resolveUnitScale(effectiveUnit, max);
+      return {
+        tickFormatter:
+          formatValue ?? ((v: number) => formatTickValue(v, scale)),
+        displayFormatter:
+          formatValue ?? ((v: number) => formatDisplayValue(v, scale)),
+        resolvedYAxisLabel: yAxisLabel ?? (scale.label || undefined),
+      };
+    }, [displayData, seriesKeys, effectiveUnit, formatValue, yAxisLabel]);
+
   const handleLegendClick = useCallback((dataKey: string) => {
     setHiddenSeries((prev) => {
       const next = new Set(prev);
@@ -303,13 +342,13 @@ export function MetricTimeSeries({
             tick={{ fill: "#9CA3AF", fontSize: 12 }}
           />
           <YAxis
-            tickFormatter={formatValue}
+            tickFormatter={tickFormatter}
             stroke="#9CA3AF"
             tick={{ fill: "#9CA3AF", fontSize: 12 }}
             label={
-              yAxisLabel
+              resolvedYAxisLabel
                 ? {
-                    value: yAxisLabel,
+                    value: resolvedYAxisLabel,
                     angle: -90,
                     position: "insideLeft",
                     fill: "#9CA3AF",
@@ -318,13 +357,14 @@ export function MetricTimeSeries({
             }
           />
           <Tooltip
-            content={
+            content={(props) => (
               <CustomTooltip
+                {...props}
                 formatTime={formatTime}
-                formatValue={formatValue}
-                unit={unit}
+                formatValue={displayFormatter}
+                displayLabelMap={displayLabelMap}
               />
-            }
+            )}
           />
           <Legend
             onClick={(e) => {
@@ -332,10 +372,11 @@ export function MetricTimeSeries({
               if (typeof dk === "string") handleLegendClick(dk);
             }}
             formatter={(value: string) => {
+              const label = displayLabelMap.get(value) ?? value;
               const truncated =
-                value.length > legendMaxLength
-                  ? value.slice(0, legendMaxLength - 3) + "..."
-                  : value;
+                label.length > legendMaxLength
+                  ? label.slice(0, legendMaxLength - 3) + "..."
+                  : label;
               const isHidden = hiddenSeries.has(value);
               return (
                 <span
@@ -344,7 +385,7 @@ export function MetricTimeSeries({
                     textDecoration: isHidden ? "line-through" : "none",
                     cursor: "pointer",
                   }}
-                  title={truncated !== value ? value : undefined}
+                  title={truncated !== label ? label : undefined}
                 >
                   {truncated}
                 </span>
@@ -405,24 +446,26 @@ function CustomTooltip({
   label,
   formatTime,
   formatValue,
-  unit,
+  displayLabelMap,
 }: {
   active?: boolean;
-  payload?: Array<{ dataKey: string; value: number; color: string }>;
-  label?: number;
+  payload?: readonly { dataKey: string; value: number; color: string }[];
+  label?: string | number;
   formatTime: (ts: number) => string;
   formatValue: (val: number) => string;
-  unit?: string;
+  displayLabelMap: Map<string, string>;
 }) {
-  if (!active || !payload || !label) return null;
+  if (!active || !payload || label == null) return null;
+  const ts = typeof label === "number" ? label : Number(label);
   return (
     <div className="bg-background border border-gray-700 rounded-lg p-3 shadow-lg">
-      <p className="text-gray-400 text-xs mb-2">{formatTime(label)}</p>
+      <p className="text-gray-400 text-xs mb-2">{formatTime(ts)}</p>
       {payload.map((entry, i) => (
         <p key={i} className="text-sm" style={{ color: entry.color }}>
-          <span className="font-medium">{entry.dataKey}:</span>{" "}
+          <span className="font-medium">
+            {displayLabelMap.get(entry.dataKey) ?? entry.dataKey}:
+          </span>{" "}
           {formatValue(entry.value)}
-          {unit ? ` ${unit}` : ""}
         </p>
       ))}
     </div>

package/src/components/observability/__fixtures__/metrics.ts

@@ -214,3 +214,100 @@ export const mockStatRows: OtelMetricsRow[] = cpuValues.map((value, i) => ({
   ScopeName: "opentelemetry.instrumentation.system",
   ScopeVersion: "0.44.0",
 }));
+
+// ── Gauge: redis.memory.used (no attributes — reproduces {} label) ──
+
+const memoryValues = [
+  3100000, 3050000, 3200000, 3150000, 3300000, 3250000, 3400000, 3350000,
+  3500000, 3450000, 3300000, 3200000, 3100000, 3050000, 3150000,
+];
+
+export const mockNoAttributeRows: OtelMetricsRow[] = memoryValues.map(
+  (value, i) => ({
+    MetricType: "Gauge" as const,
+    MetricName: "redis.memory.used",
+    MetricDescription: "Total memory used by Redis",
+    MetricUnit: "By",
+    TimeUnix: ts(i * INTERVAL_MS),
+    StartTimeUnix: ts(0),
+    Value: value,
+    ServiceName: "redis",
+    Attributes: {},
+    ResourceAttributes: { "service.name": "redis" },
+    ScopeName: "opentelemetry.instrumentation.redis",
+    ScopeVersion: "0.44.0",
+  })
+);
+
+// ── Gauge: redis.memory.peak (~2-3 GB range — tests GB scaling) ──
+
+const peakMemoryValues = [
+  2_100_000_000, 2_200_000_000, 2_350_000_000, 2_500_000_000, 2_400_000_000,
+  2_600_000_000, 2_750_000_000, 2_900_000_000, 2_800_000_000, 3_000_000_000,
+  2_950_000_000, 2_700_000_000, 2_550_000_000, 2_400_000_000, 2_300_000_000,
+];
+
+export const mockLargeByteRows: OtelMetricsRow[] = peakMemoryValues.map(
+  (value, i) => ({
+    MetricType: "Gauge" as const,
+    MetricName: "redis.memory.peak",
+    MetricDescription: "Peak memory consumed by Redis",
+    MetricUnit: "By",
+    TimeUnix: ts(i * INTERVAL_MS),
+    StartTimeUnix: ts(0),
+    Value: value,
+    ServiceName: "redis",
+    Attributes: {},
+    ResourceAttributes: { "service.name": "redis" },
+    ScopeName: "opentelemetry.instrumentation.redis",
+    ScopeVersion: "0.44.0",
+  })
+);
+
+// ── Gauge: process.cpu.time (multiple attributes — shows key=val labels) ──
+
+const cpuTimeStates = ["sys", "user", "sys_children", "user_children"];
+const cpuTimeBase = [27.5, 1.2, 0.3, 0.1];
+
+export const mockMultiAttributeRows: OtelMetricsRow[] = cpuTimeStates.flatMap(
+  (state, si) =>
+    Array.from({ length: 10 }, (_, i) => ({
+      MetricType: "Gauge" as const,
+      MetricName: "process.cpu.time",
+      MetricDescription: "CPU time by state",
+      MetricUnit: "s",
+      TimeUnix: ts(i * INTERVAL_MS),
+      StartTimeUnix: ts(0),
+      Value: cpuTimeBase[si]! + ((si * 10 + i) % 7) * 0.07,
+      ServiceName: "api-gateway",
+      Attributes: { state, "cpu.mode": si < 2 ? "main" : "children" },
+      ResourceAttributes: { "service.name": "api-gateway" },
+      ScopeName: "opentelemetry.instrumentation.process",
+      ScopeVersion: "0.44.0",
+    }))
+);
+
+// ── Histogram: no attributes ──
+
+export const mockNoAttributeHistogramRows: OtelMetricsRow[] = [
+  {
+    MetricType: "Histogram" as const,
+    MetricName: "http.server.request_duration",
+    MetricDescription: "Duration of HTTP server requests",
+    MetricUnit: "ms",
+    TimeUnix: ts(0),
+    StartTimeUnix: ts(0),
+    ServiceName: "api-gateway",
+    Count: 1500,
+    Sum: 87450,
+    Min: 1,
+    Max: 1850,
+    ExplicitBounds: [5, 10, 25, 50, 75, 100, 250, 500, 1000],
+    BucketCounts: [120, 280, 350, 310, 180, 120, 85, 35, 15, 5],
+    AggregationTemporality: "CUMULATIVE",
+    Attributes: {},
+    ResourceAttributes: { "service.name": "api-gateway" },
+    ScopeName: "opentelemetry.instrumentation.http",
+    ScopeVersion: "0.44.0",
+  },
+];

package/src/components/observability/index.ts

@@ -51,6 +51,9 @@ export type {
   ShortcutsRegistry,
 } from "../KeyboardShortcuts/index.js";
 
+export { DynamicDashboard } from "./DynamicDashboard/index.js";
+export type { DynamicDashboardProps } from "./DynamicDashboard/index.js";
+
 // Types
 export type {
   SpanNode,

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

@@ -0,0 +1,28 @@
+import { observabilityCatalog } from "../../../lib/observability-catalog.js";
+import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { LogTimeline } from "../index.js";
+import type { denormalizedSignals } from "@kopai/core";
+
+type OtelLogsRow = denormalizedSignals.OtelLogsRow;
+
+type Props = RendererComponentProps<
+  typeof observabilityCatalog.components.LogTimeline
+>;
+
+export function OtelLogTimeline(props: Props) {
+  if (!props.hasData) {
+    return (
+      <div style={{ padding: 24, color: "var(--muted)" }}>No data source</div>
+    );
+  }
+
+  const response = props.data as { data?: OtelLogsRow[] } | null;
+
+  return (
+    <LogTimeline
+      rows={response?.data ?? []}
+      isLoading={props.loading}
+      error={props.error ?? undefined}
+    />
+  );
+}

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

@@ -24,6 +24,8 @@ export function OtelMetricHistogram(props: Props) {
       isLoading={props.loading}
       error={props.error ?? undefined}
       height={props.element.props.height ?? 400}
+      yAxisLabel={props.element.props.yAxisLabel ?? undefined}
+      unit={props.element.props.unit ?? undefined}
     />
   );
 }

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

@@ -1,6 +1,7 @@
 import { observabilityCatalog } from "../../../lib/observability-catalog.js";
 import type { RendererComponentProps } from "../../../lib/renderer.js";
 import { MetricStat } from "../index.js";
+import { formatOtelValue } from "../utils/units.js";
 import type { denormalizedSignals } from "@kopai/core";
 
 type OtelMetricsRow = denormalizedSignals.OtelMetricsRow;
@@ -9,19 +10,6 @@ type Props = RendererComponentProps<
   typeof observabilityCatalog.components.MetricStat
 >;
 
-function formatOtelValue(value: number, unit: string): string {
-  // OTel unit "1" = dimensionless ratio → show as percentage
-  if (unit === "1") return `${(value * 100).toFixed(1)}%`;
-  // OTel curly-brace units like "{request}" → strip braces
-  const cleanUnit = unit.replace(/^\{|\}$/g, "");
-  let formatted: string;
-  if (Math.abs(value) >= 1e6) formatted = `${(value / 1e6).toFixed(1)}M`;
-  else if (Math.abs(value) >= 1e3) formatted = `${(value / 1e3).toFixed(1)}K`;
-  else if (Number.isInteger(value)) formatted = value.toString();
-  else formatted = value.toFixed(2);
-  return cleanUnit ? `${formatted} ${cleanUnit}` : formatted;
-}
-
 export function OtelMetricStat(props: Props) {
   if (!props.hasData) {
     return (

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

@@ -25,6 +25,8 @@ export function OtelMetricTimeSeries(props: Props) {
       error={props.error ?? undefined}
       height={props.element.props.height ?? 400}
       showBrush={props.element.props.showBrush ?? true}
+      yAxisLabel={props.element.props.yAxisLabel ?? undefined}
+      unit={props.element.props.unit ?? undefined}
     />
   );
 }

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

@@ -0,0 +1,35 @@
+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";
+
+type OtelTracesRow = denormalizedSignals.OtelTracesRow;
+
+type Props = RendererComponentProps<
+  typeof observabilityCatalog.components.TraceDetail
+>;
+
+export function OtelTraceDetail(props: Props) {
+  if (!props.hasData) {
+    return (
+      <div style={{ padding: 24, color: "var(--muted)" }}>No data source</div>
+    );
+  }
+
+  const response = props.data as { data?: OtelTracesRow[] } | null;
+  const rows = response?.data ?? [];
+  const firstRow = rows[0];
+  const service = firstRow?.ServiceName ?? "unknown";
+  const traceId = firstRow?.TraceId ?? "";
+
+  return (
+    <TraceDetail
+      rows={rows}
+      isLoading={props.loading}
+      error={props.error ?? undefined}
+      service={service}
+      traceId={traceId}
+      onBack={() => {}}
+    />
+  );
+}

package/src/components/observability/renderers/index.ts

@@ -1,5 +1,7 @@
+export { OtelLogTimeline } from "./OtelLogTimeline.js";
 export { OtelMetricDiscovery } from "./OtelMetricDiscovery.js";
 export { OtelMetricHistogram } from "./OtelMetricHistogram.js";
 export { OtelMetricStat } from "./OtelMetricStat.js";
 export { OtelMetricTable } from "./OtelMetricTable.js";
 export { OtelMetricTimeSeries } from "./OtelMetricTimeSeries.js";
+export { OtelTraceDetail } from "./OtelTraceDetail.js";

package/src/components/observability/utils/attributes.ts

@@ -8,6 +8,13 @@ export function formatAttributeValue(value: unknown): string {
   return String(value);
 }
 
+export function formatSeriesLabel(labels: Record<string, string>): string {
+  const entries = Object.entries(labels);
+  if (entries.length === 0) return "";
+  if (entries.length === 1) return String(entries[0]![1]);
+  return entries.map(([k, v]) => `${k}=${v}`).join(", ");
+}
+
 export function isComplexValue(value: unknown): boolean {
   return (
     typeof value === "object" &&

package/src/components/observability/utils/units.test.ts

@@ -0,0 +1,116 @@
+import { describe, it, expect } from "vitest";
+import {
+  resolveUnitScale,
+  formatTickValue,
+  formatDisplayValue,
+  formatOtelValue,
+} from "./units.js";
+
+describe("resolveUnitScale", () => {
+  it("scales bytes to MB", () => {
+    const s = resolveUnitScale("By", 3_500_000);
+    expect(s.suffix).toBe("MB");
+    expect(s.divisor).toBe(1e6);
+    expect(s.label).toBe("MB");
+  });
+
+  it("keeps small bytes as B", () => {
+    const s = resolveUnitScale("By", 500);
+    expect(s.suffix).toBe("B");
+    expect(s.divisor).toBe(1);
+  });
+
+  it("scales bytes to GB", () => {
+    const s = resolveUnitScale("By", 2e9);
+    expect(s.suffix).toBe("GB");
+    expect(s.divisor).toBe(1e9);
+  });
+
+  it("scales seconds to ms for small values", () => {
+    const s = resolveUnitScale("s", 0.005);
+    expect(s.suffix).toBe("ms");
+    expect(s.divisor).toBe(0.001);
+  });
+
+  it("keeps seconds as s for values >= 1", () => {
+    const s = resolveUnitScale("s", 5);
+    expect(s.suffix).toBe("s");
+  });
+
+  it("scales ms to s for large values", () => {
+    const s = resolveUnitScale("ms", 5000);
+    expect(s.suffix).toBe("s");
+  });
+
+  it("handles unit '1' as percent", () => {
+    const s = resolveUnitScale("1", 0.75);
+    expect(s.isPercent).toBe(true);
+    expect(s.suffix).toBe("%");
+    expect(s.label).toBe("Percent");
+  });
+
+  it("handles curly-brace units", () => {
+    const s = resolveUnitScale("{requests}", 1_500_000);
+    expect(s.suffix).toBe("M requests");
+    expect(s.label).toBe("requests");
+  });
+
+  it("handles empty/null unit with generic scaling", () => {
+    const s = resolveUnitScale("", 1_500_000);
+    expect(s.suffix).toBe("M");
+    expect(s.label).toBe("");
+  });
+
+  it("handles null unit", () => {
+    const s = resolveUnitScale(null, 500);
+    expect(s.suffix).toBe("");
+  });
+});
+
+describe("formatTickValue", () => {
+  it("formats scaled byte value", () => {
+    const s = resolveUnitScale("By", 3_500_000);
+    expect(formatTickValue(1_400_000, s)).toBe("1.4");
+  });
+
+  it("formats percent value", () => {
+    const s = resolveUnitScale("1", 0.75);
+    expect(formatTickValue(0.75, s)).toBe("75.0");
+  });
+});
+
+describe("formatDisplayValue", () => {
+  it("includes suffix for bytes", () => {
+    const s = resolveUnitScale("By", 3_500_000);
+    expect(formatDisplayValue(1_400_000, s)).toBe("1.4 MB");
+  });
+
+  it("includes suffix for percent", () => {
+    const s = resolveUnitScale("1", 0.75);
+    expect(formatDisplayValue(0.75, s)).toBe("75.0%");
+  });
+
+  it("includes suffix for curly-brace units", () => {
+    const s = resolveUnitScale("{requests}", 1_500_000);
+    expect(formatDisplayValue(1_500_000, s)).toBe("1.5 M requests");
+  });
+
+  it("no suffix for empty unit small values", () => {
+    const s = resolveUnitScale("", 50);
+    expect(formatDisplayValue(42, s)).toBe("42");
+  });
+});
+
+describe("formatOtelValue", () => {
+  it("convenience: bytes", () => {
+    expect(formatOtelValue(3_500_000, "By")).toBe("3.5 MB");
+  });
+
+  it("convenience: percent", () => {
+    expect(formatOtelValue(0.75, "1")).toBe("75.0%");
+  });
+
+  it("convenience: small value no unit", () => {
+    expect(formatOtelValue(42, "")).toBe("42");
+  });
+});