@kopai/ui 0.7.0 → 0.9.0

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

@@ -5,24 +5,24 @@ import type { SpanNode } from "../types.js";
 type OtelTracesRow = denormalizedSignals.OtelTracesRow;
 
 export interface TraceDetailProps {
-  service: string;
   traceId: string;
   rows: OtelTracesRow[];
   isLoading?: boolean;
   error?: Error;
   selectedSpanId?: string;
   onSpanClick?: (span: SpanNode) => void;
+  onSpanDeselect?: () => void;
   onBack: () => void;
 }
 
 export function TraceDetail({
-  service,
   traceId,
   rows,
   isLoading,
   error,
   selectedSpanId,
   onSpanClick,
+  onSpanDeselect,
   onBack,
 }: TraceDetailProps) {
   return (
@@ -33,7 +33,7 @@ export function TraceDetail({
           onClick={onBack}
           className="hover:text-foreground transition-colors"
         >
-          Services / {service}
+          Traces
         </button>
         <span>/</span>
         <span className="text-foreground font-mono text-xs">
@@ -47,6 +47,7 @@ export function TraceDetail({
         error={error}
         selectedSpanId={selectedSpanId}
         onSpanClick={onSpanClick}
+        onSpanDeselect={onSpanDeselect}
       />
     </div>
   );

package/src/components/observability/TraceSearch/DurationBar.tsx

@@ -0,0 +1,38 @@
+/**
+ * DurationBar - Horizontal bar showing relative trace duration.
+ */
+
+import { formatDuration } from "../utils/time.js";
+
+export interface DurationBarProps {
+  durationMs: number;
+  maxDurationMs: number;
+  color: string;
+}
+
+export function DurationBar({
+  durationMs,
+  maxDurationMs,
+  color,
+}: DurationBarProps) {
+  const rawPct = maxDurationMs > 0 ? (durationMs / maxDurationMs) * 100 : 0;
+  const widthPct = durationMs <= 0 ? 0 : Math.min(Math.max(rawPct, 1), 100);
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1 h-2 bg-muted/30 rounded overflow-hidden">
+        <div
+          className="h-full rounded"
+          style={{
+            width: `${widthPct}%`,
+            backgroundColor: color,
+            opacity: 0.7,
+          }}
+        />
+      </div>
+      <span className="text-xs text-foreground/80 shrink-0 w-16 text-right font-mono">
+        {formatDuration(durationMs)}
+      </span>
+    </div>
+  );
+}

package/src/components/observability/TraceSearch/ScatterPlot.tsx

@@ -0,0 +1,135 @@
+/**
+ * ScatterPlot - Scatter chart showing trace duration vs timestamp.
+ */
+
+import { useMemo, useCallback } from "react";
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+import type { TraceSummary } from "./index.js";
+import { getServiceColor } from "../utils/colors.js";
+import { formatDuration, formatTimestamp } from "../utils/time.js";
+
+export interface ScatterPlotProps {
+  traces: TraceSummary[];
+  onSelectTrace: (traceId: string) => void;
+}
+
+interface ScatterPoint {
+  x: number;
+  y: number;
+  traceId: string;
+  serviceName: string;
+  rootSpanName: string;
+  spanCount: number;
+  hasError: boolean;
+}
+
+function CustomTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: Array<{ payload: ScatterPoint }>;
+}) {
+  if (!active || !payload?.[0]) return null;
+  const d = payload[0].payload;
+  return (
+    <div className="bg-background border border-border rounded px-3 py-2 text-xs shadow-lg">
+      <div className="font-medium text-foreground">
+        {d.serviceName}: {d.rootSpanName}
+      </div>
+      <div className="text-muted-foreground mt-1">
+        {d.spanCount} span{d.spanCount !== 1 ? "s" : ""} &middot;{" "}
+        {formatDuration(d.y)}
+      </div>
+      <div className="text-muted-foreground">{formatTimestamp(d.x)}</div>
+    </div>
+  );
+}
+
+export function ScatterPlot({ traces, onSelectTrace }: ScatterPlotProps) {
+  const data = useMemo<ScatterPoint[]>(
+    () =>
+      traces.map((t) => ({
+        x: t.timestampMs,
+        y: t.durationMs,
+        traceId: t.traceId,
+        serviceName: t.serviceName,
+        rootSpanName: t.rootSpanName,
+        spanCount: t.spanCount,
+        hasError: t.errorCount > 0,
+      })),
+    [traces]
+  );
+
+  const handleClick = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (entry: any) => {
+      const payload = entry?.payload as ScatterPoint | undefined;
+      if (payload?.traceId) {
+        onSelectTrace(payload.traceId);
+      }
+    },
+    [onSelectTrace]
+  );
+
+  if (traces.length === 0) return null;
+
+  return (
+    <div className="border border-border rounded-lg p-4 bg-background">
+      <ResponsiveContainer width="100%" height={200}>
+        <ScatterChart margin={{ top: 8, right: 8, bottom: 4, left: 0 }}>
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke="hsl(var(--border))"
+            opacity={0.4}
+          />
+          <XAxis
+            dataKey="x"
+            type="number"
+            domain={["dataMin", "dataMax"]}
+            tickFormatter={(v: number) => {
+              const d = new Date(v);
+              return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
+            }}
+            tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
+            stroke="hsl(var(--border))"
+            name="Time"
+          />
+          <YAxis
+            dataKey="y"
+            type="number"
+            tickFormatter={(v: number) => formatDuration(v)}
+            tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
+            stroke="hsl(var(--border))"
+            name="Duration"
+            width={70}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Scatter data={data} onClick={handleClick} cursor="pointer">
+            {data.map((point, i) => (
+              <Cell
+                key={i}
+                fill={
+                  point.hasError
+                    ? "#ef4444"
+                    : getServiceColor(point.serviceName)
+                }
+                stroke={point.hasError ? "#ef4444" : "none"}
+                strokeWidth={point.hasError ? 2 : 0}
+              />
+            ))}
+          </Scatter>
+        </ScatterChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/components/observability/TraceSearch/SearchForm.tsx

@@ -0,0 +1,195 @@
+/**
+ * SearchForm - Jaeger-style sidebar search form for trace filtering.
+ * Owns its own form state; parent only receives values on submit.
+ */
+
+import { useState, useEffect } from "react";
+
+export interface SearchFormValues {
+  service: string;
+  operation: string;
+  tags: string;
+  lookback: string;
+  minDuration: string;
+  maxDuration: string;
+  limit: number;
+}
+
+export interface SearchFormProps {
+  services: string[];
+  operations: string[];
+  initialValues?: Partial<SearchFormValues>;
+  onSubmit: (values: SearchFormValues) => void;
+  isLoading?: boolean;
+}
+
+const LOOKBACK_OPTIONS = [
+  { label: "Last 5 Minutes", value: "5m" },
+  { label: "Last 15 Minutes", value: "15m" },
+  { label: "Last 30 Minutes", value: "30m" },
+  { label: "Last 1 Hour", value: "1h" },
+  { label: "Last 2 Hours", value: "2h" },
+  { label: "Last 6 Hours", value: "6h" },
+  { label: "Last 12 Hours", value: "12h" },
+  { label: "Last 24 Hours", value: "24h" },
+] as const;
+
+const inputClass =
+  "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground";
+
+export function SearchForm({
+  services,
+  operations,
+  initialValues,
+  onSubmit,
+  isLoading,
+}: SearchFormProps) {
+  const [service, setService] = useState(initialValues?.service ?? "");
+  const [operation, setOperation] = useState(initialValues?.operation ?? "");
+  const [tags, setTags] = useState(initialValues?.tags ?? "");
+  const [lookback, setLookback] = useState(initialValues?.lookback ?? "");
+  const [minDuration, setMinDuration] = useState(
+    initialValues?.minDuration ?? ""
+  );
+  const [maxDuration, setMaxDuration] = useState(
+    initialValues?.maxDuration ?? ""
+  );
+  const [limit, setLimit] = useState(initialValues?.limit ?? 20);
+
+  // Sync service from URL-driven changes
+  useEffect(() => {
+    if (initialValues?.service != null) setService(initialValues.service);
+  }, [initialValues?.service]);
+
+  const handleSubmit = () => {
+    onSubmit({
+      service,
+      operation,
+      tags,
+      lookback,
+      minDuration,
+      maxDuration,
+      limit,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider">
+        Search
+      </h3>
+
+      {/* Service */}
+      <label className="block space-y-1">
+        <span className="text-xs text-muted-foreground">Service</span>
+        <select
+          value={service}
+          onChange={(e) => setService(e.target.value)}
+          className={inputClass}
+        >
+          <option value="">All Services</option>
+          {services.map((s) => (
+            <option key={s} value={s}>
+              {s}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      {/* Operation */}
+      <label className="block space-y-1">
+        <span className="text-xs text-muted-foreground">Operation</span>
+        <select
+          value={operation}
+          onChange={(e) => setOperation(e.target.value)}
+          className={inputClass}
+        >
+          <option value="">All Operations</option>
+          {operations.map((op) => (
+            <option key={op} value={op}>
+              {op}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      {/* Tags */}
+      <label className="block space-y-1">
+        <span className="text-xs text-muted-foreground">Tags</span>
+        <textarea
+          value={tags}
+          onChange={(e) => setTags(e.target.value)}
+          placeholder={'key=value key2="quoted value"'}
+          rows={3}
+          className={`${inputClass} placeholder:text-muted-foreground/50 resize-y`}
+        />
+      </label>
+
+      {/* Lookback */}
+      <label className="block space-y-1">
+        <span className="text-xs text-muted-foreground">Lookback</span>
+        <select
+          value={lookback}
+          onChange={(e) => setLookback(e.target.value)}
+          className={inputClass}
+        >
+          <option value="">All time</option>
+          {LOOKBACK_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      {/* Min / Max Duration */}
+      <div className="grid grid-cols-2 gap-2">
+        <label className="block space-y-1">
+          <span className="text-xs text-muted-foreground">Min Duration</span>
+          <input
+            type="text"
+            placeholder="e.g. 100ms"
+            value={minDuration}
+            onChange={(e) => setMinDuration(e.target.value)}
+            className={`${inputClass} placeholder:text-muted-foreground/50`}
+          />
+        </label>
+        <label className="block space-y-1">
+          <span className="text-xs text-muted-foreground">Max Duration</span>
+          <input
+            type="text"
+            placeholder="e.g. 5s"
+            value={maxDuration}
+            onChange={(e) => setMaxDuration(e.target.value)}
+            className={`${inputClass} placeholder:text-muted-foreground/50`}
+          />
+        </label>
+      </div>
+
+      {/* Limit */}
+      <label className="block space-y-1">
+        <span className="text-xs text-muted-foreground">Limit</span>
+        <input
+          type="number"
+          min={1}
+          max={1000}
+          value={limit}
+          onChange={(e) => {
+            const n = Number(e.target.value);
+            setLimit(Number.isNaN(n) ? 20 : Math.max(1, Math.min(1000, n)));
+          }}
+          className={inputClass}
+        />
+      </label>
+
+      {/* Submit */}
+      <button
+        onClick={handleSubmit}
+        disabled={isLoading}
+        className="w-full px-4 py-2 text-sm font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors disabled:opacity-50"
+      >
+        {isLoading ? "Searching..." : "Find Traces"}
+      </button>
+    </div>
+  );
+}

package/src/components/observability/TraceSearch/SortDropdown.tsx

@@ -0,0 +1,32 @@
+/**
+ * SortDropdown - Sort control for trace results.
+ */
+
+export interface SortDropdownProps {
+  value: string;
+  onChange: (sort: string) => void;
+}
+
+const SORT_OPTIONS = [
+  { value: "recent", label: "Most Recent" },
+  { value: "longest", label: "Longest First" },
+  { value: "shortest", label: "Shortest First" },
+  { value: "mostSpans", label: "Most Spans" },
+  { value: "leastSpans", label: "Least Spans" },
+] as const;
+
+export function SortDropdown({ value, onChange }: SortDropdownProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
+    >
+      {SORT_OPTIONS.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}