@kopai/ui 0.0.5 → 0.1.0

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

@@ -0,0 +1,194 @@
+/**
+ * MetricTable - Accepts OtelMetricsRow[] and renders tabular metric data.
+ */
+
+import { useMemo } from "react";
+import type { denormalizedSignals } from "@kopai/core";
+
+type OtelMetricsRow = denormalizedSignals.OtelMetricsRow;
+
+export interface MetricTableProps {
+  rows: OtelMetricsRow[];
+  isLoading?: boolean;
+  error?: Error;
+  maxRows?: number;
+  formatValue?: (value: number) => string;
+  formatTimestamp?: (timestamp: number) => string;
+  columns?: ("timestamp" | "metric" | "labels" | "value")[];
+  className?: string;
+}
+
+interface TableRow {
+  id: string;
+  timestamp: number;
+  metricName: string;
+  labels: Record<string, string>;
+  value: number;
+  unit: string;
+}
+
+const defaultFormatValue = (value: number): string => {
+  if (Number.isInteger(value)) return value.toLocaleString();
+  return value.toFixed(2);
+};
+
+const defaultFormatTimestamp = (timestamp: number): string => {
+  return new Date(timestamp).toLocaleString();
+};
+
+function formatLabels(labels: Record<string, string>): string {
+  const entries = Object.entries(labels);
+  if (entries.length === 0) return "-";
+  return entries.map(([k, v]) => `${k}=${v}`).join(", ");
+}
+
+function buildTableRows(rows: OtelMetricsRow[], maxRows: number): TableRow[] {
+  const result: TableRow[] = [];
+
+  for (const row of rows) {
+    if (
+      row.MetricType === "Histogram" ||
+      row.MetricType === "ExponentialHistogram" ||
+      row.MetricType === "Summary"
+    )
+      continue;
+
+    const timestamp = Number(BigInt(row.TimeUnix) / 1_000_000n);
+    const value = "Value" in row ? row.Value : 0;
+    const labels: Record<string, string> = {};
+    if (row.Attributes) {
+      for (const [k, v] of Object.entries(row.Attributes))
+        labels[k] = String(v);
+    }
+    const key = row.Attributes ? JSON.stringify(row.Attributes) : "__default__";
+
+    result.push({
+      id: `${row.MetricName}-${key}-${timestamp}`,
+      timestamp,
+      metricName: row.MetricName ?? "unknown",
+      labels,
+      value,
+      unit: row.MetricUnit ?? "",
+    });
+  }
+
+  return result.sort((a, b) => b.timestamp - a.timestamp).slice(0, maxRows);
+}
+
+export function MetricTable({
+  rows,
+  isLoading = false,
+  error,
+  maxRows = 100,
+  formatValue = defaultFormatValue,
+  formatTimestamp = defaultFormatTimestamp,
+  columns = ["timestamp", "metric", "labels", "value"],
+  className = "",
+}: MetricTableProps) {
+  const tableRows = useMemo(
+    () => buildTableRows(rows, maxRows),
+    [rows, maxRows]
+  );
+
+  if (isLoading) {
+    return (
+      <div className={`bg-background rounded-lg p-4 ${className}`}>
+        <div className="animate-pulse" data-testid="metric-table-loading">
+          <div className="h-10 bg-gray-800 rounded mb-2" />
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="h-12 bg-gray-800/50 rounded mb-1" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        className={`bg-background rounded-lg p-4 border border-red-800 ${className}`}
+        data-testid="metric-table-error"
+      >
+        <p className="text-red-400">Error loading metrics: {error.message}</p>
+      </div>
+    );
+  }
+
+  if (tableRows.length === 0) {
+    return (
+      <div
+        className={`bg-background rounded-lg p-4 border border-gray-800 ${className}`}
+        data-testid="metric-table-empty"
+      >
+        <p className="text-gray-500 text-center py-4">
+          No metric data available
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`bg-background rounded-lg overflow-hidden ${className}`}
+      data-testid="metric-table"
+    >
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-gray-800 text-gray-300 text-left">
+              {columns.includes("timestamp") && (
+                <th className="px-4 py-3 font-medium">Timestamp</th>
+              )}
+              {columns.includes("metric") && (
+                <th className="px-4 py-3 font-medium">Metric</th>
+              )}
+              {columns.includes("labels") && (
+                <th className="px-4 py-3 font-medium">Labels</th>
+              )}
+              {columns.includes("value") && (
+                <th className="px-4 py-3 font-medium text-right">Value</th>
+              )}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-800">
+            {tableRows.map((row) => (
+              <tr
+                key={row.id}
+                className="hover:bg-gray-800/50 transition-colors"
+              >
+                {columns.includes("timestamp") && (
+                  <td className="px-4 py-3 text-gray-400 whitespace-nowrap">
+                    {formatTimestamp(row.timestamp)}
+                  </td>
+                )}
+                {columns.includes("metric") && (
+                  <td className="px-4 py-3 text-gray-200 font-mono">
+                    {row.metricName}
+                  </td>
+                )}
+                {columns.includes("labels") && (
+                  <td className="px-4 py-3 text-gray-400 font-mono text-xs">
+                    {formatLabels(row.labels)}
+                  </td>
+                )}
+                {columns.includes("value") && (
+                  <td className="px-4 py-3 text-white font-medium text-right whitespace-nowrap">
+                    {formatValue(row.value)}
+                    {row.unit && (
+                      <span className="text-gray-500 ml-1">{row.unit}</span>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {tableRows.length === maxRows && (
+        <div className="px-4 py-2 bg-gray-800 text-gray-500 text-xs text-center">
+          Showing first {maxRows} rows
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MetricTimeSeries } from "./index.js";
+import { mockGaugeRows, mockSumRows } from "../__fixtures__/metrics.js";
+
+const meta: Meta<typeof MetricTimeSeries> = {
+  title: "Observability/MetricTimeSeries",
+  component: MetricTimeSeries,
+};
+export default meta;
+type Story = StoryObj<typeof MetricTimeSeries>;
+
+export const Default: Story = { args: { rows: mockGaugeRows } };
+export const MultiSeries: Story = {
+  args: { rows: [...mockGaugeRows, ...mockSumRows] },
+};
+export const WithThresholds: Story = {
+  args: {
+    rows: mockGaugeRows,
+    thresholdLines: [
+      { value: 80, color: "#ef4444", label: "Max", style: "dashed" },
+    ],
+  },
+};
+export const Loading: Story = { args: { rows: [], isLoading: true } };
+export const Error: Story = {
+  args: { rows: [], error: new globalThis.Error("Failed to fetch metrics") },
+};
+export const Empty: Story = { args: { rows: [] } };

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

@@ -0,0 +1,462 @@
+/**
+ * MetricTimeSeries - Accepts OtelMetricsRow[] and renders line charts.
+ */
+
+import { useMemo, useState, useCallback } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Brush,
+  ReferenceLine,
+} from "recharts";
+import type { denormalizedSignals } from "@kopai/core";
+import type {
+  ParsedMetricGroup,
+  MetricSeries,
+  RechartsDataPoint,
+} from "../types.js";
+import { downsampleLTTB, type LTTBPoint } from "../utils/lttb.js";
+
+type OtelMetricsRow = denormalizedSignals.OtelMetricsRow;
+
+const COLORS = [
+  "#8884d8",
+  "#82ca9d",
+  "#ffc658",
+  "#ff7300",
+  "#00C49F",
+  "#0088FE",
+  "#FFBB28",
+  "#FF8042",
+  "#a4de6c",
+  "#d0ed57",
+];
+
+export interface ThresholdLine {
+  value: number;
+  color: string;
+  label?: string;
+  style?: "solid" | "dashed" | "dotted";
+}
+
+export interface MetricTimeSeriesProps {
+  rows: OtelMetricsRow[];
+  isLoading?: boolean;
+  error?: Error;
+  maxDataPoints?: number;
+  showBrush?: boolean;
+  height?: number;
+  yAxisLabel?: string;
+  formatTime?: (timestamp: number) => string;
+  formatValue?: (value: number) => string;
+  onBrushChange?: (startTime: number, endTime: number) => void;
+  legendMaxLength?: number;
+  thresholdLines?: ThresholdLine[];
+}
+
+const defaultFormatTime = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+};
+
+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 {
+  if (style === "solid") return undefined;
+  if (style === "dotted") return "2 2";
+  return "5 5";
+}
+
+/** Build metrics from denormalized rows */
+function buildMetrics(rows: OtelMetricsRow[]): ParsedMetricGroup[] {
+  const metricMap = new Map<string, Map<string, MetricSeries>>();
+  const metricMeta = new Map<
+    string,
+    { description: string; unit: string; type: string; serviceName: string }
+  >();
+
+  for (const row of rows) {
+    const name = row.MetricName ?? "unknown";
+    const type = row.MetricType;
+    if (
+      type === "Histogram" ||
+      type === "ExponentialHistogram" ||
+      type === "Summary"
+    )
+      continue; // TimeSeries only handles Gauge/Sum
+
+    if (!metricMap.has(name)) metricMap.set(name, new Map());
+    if (!metricMeta.has(name))
+      metricMeta.set(name, {
+        description: row.MetricDescription ?? "",
+        unit: row.MetricUnit ?? "",
+        type,
+        serviceName: row.ServiceName ?? "unknown",
+      });
+
+    const seriesKey = row.Attributes
+      ? JSON.stringify(
+          Object.fromEntries(
+            Object.entries(row.Attributes).sort(([a], [b]) =>
+              a.localeCompare(b)
+            )
+          )
+        )
+      : "__default__";
+    const seriesMap = metricMap.get(name)!;
+
+    if (!seriesMap.has(seriesKey)) {
+      const labels: Record<string, string> = {};
+      if (row.Attributes) {
+        for (const [k, v] of Object.entries(row.Attributes))
+          labels[k] = String(v);
+      }
+      seriesMap.set(seriesKey, {
+        key: seriesKey === "__default__" ? name : seriesKey,
+        labels,
+        dataPoints: [],
+      });
+    }
+
+    if (!("Value" in row)) continue;
+    const value = row.Value;
+    const timestamp = parseInt(row.TimeUnix, 10) / 1e6;
+    seriesMap.get(seriesKey)!.dataPoints.push({ timestamp, value });
+  }
+
+  const results: ParsedMetricGroup[] = [];
+  for (const [name, seriesMap] of metricMap) {
+    const meta = metricMeta.get(name)!;
+    const series = Array.from(seriesMap.values());
+    for (const s of series)
+      s.dataPoints.sort((a, b) => a.timestamp - b.timestamp);
+    results.push({
+      name,
+      description: meta.description,
+      unit: meta.unit,
+      type: meta.type as ParsedMetricGroup["type"],
+      series,
+      serviceName: meta.serviceName,
+    });
+  }
+  return results;
+}
+
+function toRechartsData(metrics: ParsedMetricGroup[]): RechartsDataPoint[] {
+  const timestampMap = new Map<number, RechartsDataPoint>();
+  for (const metric of metrics) {
+    for (const series of metric.series) {
+      const seriesName =
+        series.key === "__default__" ? metric.name : series.key;
+      for (const dp of series.dataPoints) {
+        if (!timestampMap.has(dp.timestamp))
+          timestampMap.set(dp.timestamp, { timestamp: dp.timestamp });
+        timestampMap.get(dp.timestamp)![seriesName] = dp.value;
+      }
+    }
+  }
+  return Array.from(timestampMap.values()).sort(
+    (a, b) => a.timestamp - b.timestamp
+  );
+}
+
+function getSeriesKeys(metrics: ParsedMetricGroup[]): string[] {
+  const keys = new Set<string>();
+  for (const m of metrics)
+    for (const s of m.series)
+      keys.add(s.key === "__default__" ? m.name : s.key);
+  return Array.from(keys);
+}
+
+function downsampleRechartsData(
+  data: RechartsDataPoint[],
+  seriesKeys: string[],
+  maxPoints: number
+): RechartsDataPoint[] {
+  if (data.length <= maxPoints) return data;
+  const timestamps = new Set<number>();
+  for (const key of seriesKeys) {
+    const pts: LTTBPoint[] = [];
+    for (const d of data) {
+      const v = d[key];
+      if (v !== undefined) pts.push({ x: d.timestamp, y: v });
+    }
+    if (pts.length === 0) continue;
+    const ds = downsampleLTTB(pts, Math.ceil(maxPoints / seriesKeys.length));
+    for (const p of ds) timestamps.add(p.x);
+  }
+  return data.filter((d) => timestamps.has(d.timestamp));
+}
+
+export function MetricTimeSeries({
+  rows,
+  isLoading = false,
+  error,
+  maxDataPoints = 500,
+  showBrush = true,
+  height = 400,
+  yAxisLabel,
+  formatTime = defaultFormatTime,
+  formatValue = defaultFormatValue,
+  onBrushChange,
+  legendMaxLength = 30,
+  thresholdLines,
+}: MetricTimeSeriesProps) {
+  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
+
+  const parsedMetrics = useMemo(() => buildMetrics(rows), [rows]);
+  const unit = parsedMetrics[0]?.unit ?? "";
+  const chartData = useMemo(
+    () => toRechartsData(parsedMetrics),
+    [parsedMetrics]
+  );
+  const seriesKeys = useMemo(
+    () => getSeriesKeys(parsedMetrics),
+    [parsedMetrics]
+  );
+  const displayData = useMemo(
+    () => downsampleRechartsData(chartData, seriesKeys, maxDataPoints),
+    [chartData, seriesKeys, maxDataPoints]
+  );
+
+  const handleLegendClick = useCallback((dataKey: string) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(dataKey)) next.delete(dataKey);
+      else next.add(dataKey);
+      return next;
+    });
+  }, []);
+
+  const handleBrushChange = useCallback(
+    (brushData: { startIndex?: number; endIndex?: number }) => {
+      if (!onBrushChange || !displayData.length) return;
+      const { startIndex, endIndex } = brushData;
+      if (startIndex === undefined || endIndex === undefined) return;
+      const sp = displayData[startIndex],
+        ep = displayData[endIndex];
+      if (sp && ep) onBrushChange(sp.timestamp, ep.timestamp);
+    },
+    [displayData, onBrushChange]
+  );
+
+  if (isLoading) return <MetricLoadingSkeleton height={height} />;
+
+  if (error) {
+    return (
+      <div
+        className="flex items-center justify-center bg-background rounded-lg border border-red-800"
+        style={{ height }}
+      >
+        <div className="text-center p-4">
+          <p className="text-red-400 font-medium">Error loading metrics</p>
+          <p className="text-gray-500 text-sm mt-1">{error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (rows.length === 0 || displayData.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center bg-background rounded-lg border border-gray-800"
+        style={{ height }}
+      >
+        <p className="text-gray-500">No metric data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="bg-background rounded-lg p-4"
+      style={{ height }}
+      data-testid="metric-time-series"
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={displayData}
+          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+          <XAxis
+            dataKey="timestamp"
+            tickFormatter={formatTime}
+            stroke="#9CA3AF"
+            tick={{ fill: "#9CA3AF", fontSize: 12 }}
+          />
+          <YAxis
+            tickFormatter={formatValue}
+            stroke="#9CA3AF"
+            tick={{ fill: "#9CA3AF", fontSize: 12 }}
+            label={
+              yAxisLabel
+                ? {
+                    value: yAxisLabel,
+                    angle: -90,
+                    position: "insideLeft",
+                    fill: "#9CA3AF",
+                  }
+                : undefined
+            }
+          />
+          <Tooltip
+            content={
+              <CustomTooltip
+                formatTime={formatTime}
+                formatValue={formatValue}
+                unit={unit}
+              />
+            }
+          />
+          <Legend
+            onClick={(e) => {
+              const dk = e?.dataKey;
+              if (typeof dk === "string") handleLegendClick(dk);
+            }}
+            formatter={(value: string) => {
+              const truncated =
+                value.length > legendMaxLength
+                  ? value.slice(0, legendMaxLength - 3) + "..."
+                  : value;
+              const isHidden = hiddenSeries.has(value);
+              return (
+                <span
+                  style={{
+                    color: isHidden ? "#6B7280" : "#E5E7EB",
+                    textDecoration: isHidden ? "line-through" : "none",
+                    cursor: "pointer",
+                  }}
+                  title={truncated !== value ? value : undefined}
+                >
+                  {truncated}
+                </span>
+              );
+            }}
+          />
+          {thresholdLines?.map((t, i) => (
+            <ReferenceLine
+              key={`t-${i}`}
+              y={t.value}
+              stroke={t.color}
+              strokeDasharray={getStrokeDashArray(t.style)}
+              strokeWidth={1.5}
+              label={
+                t.label
+                  ? {
+                      value: t.label,
+                      position: "right",
+                      fill: t.color,
+                      fontSize: 11,
+                    }
+                  : undefined
+              }
+            />
+          ))}
+          {seriesKeys.map((key, i) => (
+            <Line
+              key={key}
+              type="monotone"
+              dataKey={key}
+              stroke={COLORS[i % COLORS.length]}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4 }}
+              hide={hiddenSeries.has(key)}
+              connectNulls
+            />
+          ))}
+          {showBrush && displayData.length > 10 && (
+            <Brush
+              dataKey="timestamp"
+              height={30}
+              stroke="#6B7280"
+              fill="#1F2937"
+              tickFormatter={formatTime}
+              onChange={handleBrushChange}
+            />
+          )}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  formatTime,
+  formatValue,
+  unit,
+}: {
+  active?: boolean;
+  payload?: Array<{ dataKey: string; value: number; color: string }>;
+  label?: number;
+  formatTime: (ts: number) => string;
+  formatValue: (val: number) => string;
+  unit?: string;
+}) {
+  if (!active || !payload || !label) return null;
+  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>
+      {payload.map((entry, i) => (
+        <p key={i} className="text-sm" style={{ color: entry.color }}>
+          <span className="font-medium">{entry.dataKey}:</span>{" "}
+          {formatValue(entry.value)}
+          {unit ? ` ${unit}` : ""}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+function MetricLoadingSkeleton({ height = 400 }: { height?: number }) {
+  return (
+    <div
+      className="bg-background rounded-lg p-4 animate-pulse"
+      style={{ height }}
+      data-testid="metric-time-series-loading"
+    >
+      <div className="h-full flex flex-col">
+        <div className="flex flex-1 gap-2">
+          <div className="flex flex-col justify-between w-12">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="h-3 w-8 bg-gray-700 rounded" />
+            ))}
+          </div>
+          <div className="flex-1 relative">
+            <div className="absolute inset-0 flex flex-col justify-between">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="h-px bg-gray-800" />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-between mt-2 px-14">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="h-3 w-12 bg-gray-700 rounded" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/observability/RawDataTable/RawDataTable.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RawDataTable } from "./index.js";
+import { mockRawTableData } from "../__fixtures__/raw-table.js";
+
+const meta: Meta<typeof RawDataTable> = {
+  title: "Observability/RawDataTable",
+  component: RawDataTable,
+};
+export default meta;
+type Story = StoryObj<typeof RawDataTable>;
+
+export const Default: Story = { args: { data: mockRawTableData } };
+export const Truncated: Story = {
+  args: { data: mockRawTableData, maxRows: 5 },
+};
+export const Loading: Story = {
+  args: { data: { columns: [], types: [], rows: [] }, isLoading: true },
+};
+export const Error: Story = {
+  args: {
+    data: { columns: [], types: [], rows: [] },
+    error: new globalThis.Error("Failed to fetch data"),
+  },
+};
+export const Empty: Story = {
+  args: { data: { columns: [], types: [], rows: [] } },
+};