@kopai/ui 0.8.0 → 0.10.0

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

@@ -1,6 +1,11 @@
-import { useState } from "react";
-import { formatDuration, formatTimestamp } from "../utils/time.js";
+import { useState, useMemo } from "react";
+import { formatTimestamp } from "../utils/time.js";
 import { getServiceColor } from "../utils/colors.js";
+import { SearchForm } from "./SearchForm.js";
+import type { SearchFormValues } from "./SearchForm.js";
+import { ScatterPlot } from "./ScatterPlot.js";
+import { SortDropdown } from "./SortDropdown.js";
+import { DurationBar } from "./DurationBar.js";
 
 // ---------------------------------------------------------------------------
 // Public types
@@ -19,274 +24,262 @@ export interface TraceSummary {
 }
 
 export interface TraceSearchFilters {
+  service?: string;
   operation?: string;
-  lookbackMs?: number;
+  tags?: string;
+  lookback?: string;
   minDuration?: string;
   maxDuration?: string;
   limit: number;
 }
 
 export interface TraceSearchProps {
+  // Search form data
+  services?: string[];
   service: string;
-  traces: TraceSummary[];
   operations?: string[];
+  // Results
+  traces: TraceSummary[];
   isLoading?: boolean;
   error?: Error;
+  // Callbacks
   onSelectTrace: (traceId: string) => void;
-  onBack: () => void;
   onSearch?: (filters: TraceSearchFilters) => void;
+  onCompare?: (traceIds: [string, string]) => void;
+  // Sort
+  sort?: string;
+  onSortChange?: (sort: string) => void;
 }
 
 // ---------------------------------------------------------------------------
-// Lookback presets
+// Sort helpers
 // ---------------------------------------------------------------------------
 
-const LOOKBACK_OPTIONS = [
-  { label: "Last 5 Minutes", ms: 5 * 60_000 },
-  { label: "Last 15 Minutes", ms: 15 * 60_000 },
-  { label: "Last 30 Minutes", ms: 30 * 60_000 },
-  { label: "Last 1 Hour", ms: 60 * 60_000 },
-  { label: "Last 2 Hours", ms: 2 * 60 * 60_000 },
-  { label: "Last 6 Hours", ms: 6 * 60 * 60_000 },
-  { label: "Last 12 Hours", ms: 12 * 60 * 60_000 },
-  { label: "Last 24 Hours", ms: 24 * 60 * 60_000 },
-] as const;
+function sortTraces(traces: TraceSummary[], sort: string): TraceSummary[] {
+  const sorted = [...traces];
+  switch (sort) {
+    case "longest":
+      return sorted.sort((a, b) => b.durationMs - a.durationMs);
+    case "shortest":
+      return sorted.sort((a, b) => a.durationMs - b.durationMs);
+    case "mostSpans":
+      return sorted.sort((a, b) => b.spanCount - a.spanCount);
+    case "leastSpans":
+      return sorted.sort((a, b) => a.spanCount - b.spanCount);
+    case "recent":
+    default:
+      return sorted.sort((a, b) => b.timestampMs - a.timestampMs);
+  }
+}
 
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 
 export function TraceSearch({
+  services = [],
   service,
-  traces,
   operations = [],
+  traces,
   isLoading,
   error,
   onSelectTrace,
-  onBack,
   onSearch,
+  onCompare,
+  sort: controlledSort,
+  onSortChange,
 }: TraceSearchProps) {
-  const [operation, setOperation] = useState("all");
-  const [lookbackIdx, setLookbackIdx] = useState<number>(-1);
-  const [minDuration, setMinDuration] = useState("");
-  const [maxDuration, setMaxDuration] = useState("");
-  const [limit, setLimit] = useState(20);
-  const [filtersOpen, setFiltersOpen] = useState(true);
+  // Sort state (internal fallback if not controlled)
+  const [internalSort, setInternalSort] = useState("recent");
+  const currentSort = controlledSort ?? internalSort;
+  const handleSortChange = (s: string) => {
+    if (onSortChange) onSortChange(s);
+    else setInternalSort(s);
+  };
 
-  const handleFindTraces = () => {
-    onSearch?.({
-      operation: operation !== "all" ? operation : undefined,
-      lookbackMs:
-        lookbackIdx >= 0 ? LOOKBACK_OPTIONS[lookbackIdx]!.ms : undefined,
-      minDuration: minDuration || undefined,
-      maxDuration: maxDuration || undefined,
-      limit,
+  // Comparison state
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const toggleSelected = (traceId: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(traceId)) {
+        next.delete(traceId);
+      } else {
+        // Max 2 selected
+        if (next.size >= 2) return prev;
+        next.add(traceId);
+      }
+      return next;
     });
   };
 
-  return (
-    <div>
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-1.5 text-sm text-muted-foreground mb-4">
-        <button
-          onClick={onBack}
-          className="hover:text-foreground transition-colors"
-        >
-          Services
-        </button>
-        <span>/</span>
-        <span className="text-foreground">{service}</span>
-      </div>
+  const handleFormSubmit = (values: SearchFormValues) => {
+    onSearch?.({
+      service: values.service || undefined,
+      operation: values.operation || undefined,
+      tags: values.tags || undefined,
+      lookback: values.lookback || undefined,
+      minDuration: values.minDuration || undefined,
+      maxDuration: values.maxDuration || undefined,
+      limit: values.limit,
+    });
+  };
 
-      {/* Filter panel */}
-      {onSearch && (
-        <div className="border border-border rounded-lg mb-4">
-          <button
-            onClick={() => setFiltersOpen((v) => !v)}
-            className="w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium text-foreground hover:bg-muted/30 transition-colors"
-          >
-            <span>Filters</span>
-            <span className="text-muted-foreground text-xs">
-              {filtersOpen ? "▲" : "▼"}
-            </span>
-          </button>
-          {filtersOpen && (
-            <div className="px-4 pb-4 pt-1 border-t border-border space-y-3">
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {/* Operation */}
-                <label className="space-y-1">
-                  <span className="text-xs text-muted-foreground">
-                    Operation
-                  </span>
-                  <select
-                    value={operation}
-                    onChange={(e) => setOperation(e.target.value)}
-                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
-                  >
-                    <option value="all">All</option>
-                    {operations.map((op) => (
-                      <option key={op} value={op}>
-                        {op}
-                      </option>
-                    ))}
-                  </select>
-                </label>
+  const sortedTraces = useMemo(
+    () => sortTraces(traces, currentSort),
+    [traces, currentSort]
+  );
 
-                {/* Lookback */}
-                <label className="space-y-1">
-                  <span className="text-xs text-muted-foreground">
-                    Lookback
-                  </span>
-                  <select
-                    value={lookbackIdx}
-                    onChange={(e) => setLookbackIdx(Number(e.target.value))}
-                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
-                  >
-                    <option value={-1}>All time</option>
-                    {LOOKBACK_OPTIONS.map((opt, i) => (
-                      <option key={i} value={i}>
-                        {opt.label}
-                      </option>
-                    ))}
-                  </select>
-                </label>
+  const maxDurationMs = useMemo(
+    () => Math.max(...traces.map((t) => t.durationMs), 0),
+    [traces]
+  );
 
-                {/* Limit */}
-                <label className="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="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
-                  />
-                </label>
+  const selectedArr = Array.from(selected);
 
-                {/* Min Duration */}
-                <label className="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="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/50"
-                  />
-                </label>
+  return (
+    <div className="flex gap-6 min-h-0">
+      {/* Left sidebar */}
+      {onSearch && (
+        <div className="w-72 shrink-0 border border-border rounded-lg p-4 self-start">
+          <SearchForm
+            services={services}
+            operations={operations}
+            initialValues={{ service }}
+            onSubmit={handleFormSubmit}
+            isLoading={isLoading}
+          />
+        </div>
+      )}
 
-                {/* Max Duration */}
-                <label className="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="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/50"
-                  />
-                </label>
-              </div>
+      {/* Right content */}
+      <div className="flex-1 min-w-0 space-y-4">
+        {/* Scatter plot */}
+        {traces.length > 0 && (
+          <ScatterPlot traces={traces} onSelectTrace={onSelectTrace} />
+        )}
 
+        {/* Sort bar + result count */}
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm text-muted-foreground">
+            {traces.length} Trace{traces.length !== 1 ? "s" : ""}
+          </span>
+          <div className="flex items-center gap-2">
+            {onCompare && selected.size === 2 && (
               <button
-                onClick={handleFindTraces}
-                className="px-4 py-1.5 text-sm font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors"
+                onClick={() => onCompare(selectedArr as [string, string])}
+                className="px-3 py-1.5 text-xs font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors"
               >
-                Find Traces
+                Compare
               </button>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Results */}
-      {isLoading && (
-        <div className="flex items-center gap-2 text-muted-foreground py-8">
-          <div className="w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" />
-          Loading traces...
+            )}
+            <SortDropdown value={currentSort} onChange={handleSortChange} />
+          </div>
         </div>
-      )}
 
-      {error && (
-        <div className="text-red-400 py-4">
-          Error loading traces: {error.message}
-        </div>
-      )}
+        {/* Loading */}
+        {isLoading && (
+          <div className="flex items-center gap-2 text-muted-foreground py-8">
+            <div className="w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" />
+            Loading traces...
+          </div>
+        )}
 
-      {!isLoading && !error && traces.length === 0 && (
-        <div className="text-muted-foreground py-8">
-          No traces found for {service}
-        </div>
-      )}
+        {/* Error */}
+        {error && (
+          <div className="text-red-400 py-4">
+            Error loading traces: {error.message}
+          </div>
+        )}
 
-      {traces.length > 0 && (
-        <div className="space-y-2">
-          {traces.map((t) => (
-            <div
-              key={t.traceId}
-              onClick={() => onSelectTrace(t.traceId)}
-              className="border border-border rounded-lg px-4 py-3 hover:border-foreground/30 hover:bg-muted/30 cursor-pointer transition-colors"
-            >
-              {/* Title line */}
-              <div className="flex items-baseline justify-between gap-2">
-                <div className="flex items-baseline gap-1.5 min-w-0">
-                  <span className="font-medium text-foreground truncate">
-                    {t.serviceName}: {t.rootSpanName}
-                  </span>
-                  <span className="text-xs font-mono text-muted-foreground shrink-0">
-                    {t.traceId.slice(0, 7)}
-                  </span>
-                </div>
-                <span className="text-sm text-foreground/80 shrink-0">
-                  {formatDuration(t.durationMs)}
-                </span>
-              </div>
+        {/* Empty */}
+        {!isLoading && !error && traces.length === 0 && (
+          <div className="text-muted-foreground py-8">No traces found</div>
+        )}
 
-              {/* Tags line */}
-              <div className="flex items-center flex-wrap gap-1.5 mt-1.5">
-                <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
-                  {t.spanCount} Span{t.spanCount !== 1 ? "s" : ""}
-                </span>
-                {t.errorCount > 0 && (
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">
-                    {t.errorCount} Error{t.errorCount !== 1 ? "s" : ""}
-                  </span>
-                )}
-                {t.services.map((svc) => (
-                  <span
-                    key={svc.name}
-                    className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
-                    style={{
-                      backgroundColor: `${getServiceColor(svc.name)}20`,
-                      color: getServiceColor(svc.name),
-                    }}
+        {/* Result cards */}
+        {sortedTraces.length > 0 && (
+          <div className="space-y-2">
+            {sortedTraces.map((t) => (
+              <div
+                key={t.traceId}
+                className="border border-border rounded-lg px-4 py-3 hover:border-foreground/30 hover:bg-muted/30 cursor-pointer transition-colors"
+              >
+                {/* Title line */}
+                <div className="flex items-center gap-2">
+                  {onCompare && (
+                    <input
+                      type="checkbox"
+                      checked={selected.has(t.traceId)}
+                      onChange={() => toggleSelected(t.traceId)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="shrink-0"
+                      disabled={!selected.has(t.traceId) && selected.size >= 2}
+                    />
+                  )}
+                  <div
+                    className="flex-1 min-w-0"
+                    onClick={() => onSelectTrace(t.traceId)}
                   >
-                    {svc.hasError && (
-                      <span className="w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" />
-                    )}
-                    {svc.name} ({svc.count})
-                  </span>
-                ))}
-              </div>
+                    <div className="flex items-baseline justify-between gap-2">
+                      <div className="flex items-baseline gap-1.5 min-w-0">
+                        <span className="font-medium text-foreground truncate">
+                          {t.serviceName}: {t.rootSpanName}
+                        </span>
+                        <span className="text-xs font-mono text-muted-foreground shrink-0">
+                          {t.traceId.slice(0, 7)}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Duration bar */}
+                    <div className="mt-1.5">
+                      <DurationBar
+                        durationMs={t.durationMs}
+                        maxDurationMs={maxDurationMs}
+                        color={getServiceColor(t.serviceName)}
+                      />
+                    </div>
 
-              {/* Timestamp */}
-              <div className="text-xs text-muted-foreground mt-1 text-right">
-                {formatTimestamp(t.timestampMs)}
+                    {/* Tags line */}
+                    <div className="flex items-center flex-wrap gap-1.5 mt-1.5">
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                        {t.spanCount} Span{t.spanCount !== 1 ? "s" : ""}
+                      </span>
+                      {t.errorCount > 0 && (
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">
+                          {t.errorCount} Error{t.errorCount !== 1 ? "s" : ""}
+                        </span>
+                      )}
+                      {t.services.map((svc) => (
+                        <span
+                          key={svc.name}
+                          className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
+                          style={{
+                            backgroundColor: `${getServiceColor(svc.name)}20`,
+                            color: getServiceColor(svc.name),
+                          }}
+                        >
+                          {svc.hasError && (
+                            <span className="w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" />
+                          )}
+                          {svc.name} ({svc.count})
+                        </span>
+                      ))}
+                    </div>
+
+                    {/* Timestamp */}
+                    <div className="text-xs text-muted-foreground mt-1 text-right">
+                      {formatTimestamp(t.timestampMs)}
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
-      )}
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/src/components/observability/TraceTimeline/DetailPane/EventsTab.tsx

@@ -1,18 +1,12 @@
 import { useState } from "react";
 import type { SpanNode } from "../../types.js";
-import { formatDuration } from "../../utils/time.js";
+import { formatRelativeTime } from "../../utils/time.js";
 import { formatAttributeValue } from "../../utils/attributes.js";
 
 export interface EventsTabProps {
   span: SpanNode;
 }
 
-function formatRelativeTime(eventTimeMs: number, spanStartMs: number): string {
-  const relativeMs = eventTimeMs - spanStartMs;
-  const prefix = relativeMs < 0 ? "-" : "+";
-  return `${prefix}${formatDuration(Math.abs(relativeMs))}`;
-}
-
 export function EventsTab({ span }: EventsTabProps) {
   const [expandedEvents, setExpandedEvents] = useState<Set<number>>(new Set());