more testing

otel-ui/src/components/IssuesVisualizer.tsx

@@ -32,6 +32,8 @@ import {
   strongestCorrelate,
   type SeverityTone,
 } from "../lib/issue-utils"
+import { useSubRoute } from "../lib/routes"
+import { CopyRef } from "./common/CopyRef"
 import { IssueOccurrences } from "./IssueOccurrences"
 import { NeedleTestModal } from "./NeedleTestModal"
 import { FilterBar, type FilterChip } from "./FilterBar"
@@ -343,6 +345,7 @@ const IssueCard = ({
               <meta.Icon className="h-3 w-3 shrink-0" aria-hidden="true" />
               {meta.label}
             </span>
+            <CopyRef id={issue.id} path={`/issues/${encodeURIComponent(issue.id)}`} />
             <span className="text-[12.5px] text-ds-text-3">
               Detected {formatRelativeTime(issue.firstSeen / 1e6)} · last seen{" "}
               {formatRelativeTime(issue.lastSeen / 1e6)}
@@ -653,8 +656,10 @@ export const IssuesVisualizer = ({
 }: IssuesVisualizerProps) => {
   const { selectedServices, toggleService, resetFilters, searchQuery, setSearchQuery, uniqueServices } =
     useObservabilityData()
-  const [focus, setFocus] = useState<{ issueId: string; traceId?: string } | null>(null)
-  const focusIssue = (issue: Issue, traceId?: string) => setFocus({ issueId: issue.id, traceId })
+  // /issues/<issueId>[/trace/<traceId>] - the focused issue and trace live in the URL.
+  const { segments, go } = useSubRoute()
+  const focus = segments[0] ? { issueId: segments[0], traceId: segments[1] === "trace" ? segments[2] : undefined } : null
+  const focusIssue = (issue: Issue, traceId?: string) => go(traceId ? [issue.id, "trace", traceId] : [issue.id])
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
   const [kindFilter, setKindFilter] = useState<KindFilter>("all")
   const [needleModalOpen, setNeedleModalOpen] = useState(false)
@@ -819,11 +824,22 @@ export const IssuesVisualizer = ({
       <IssueOccurrences
         key={focus.issueId}
         issue={focusedIssue}
-        initialTraceId={focus.traceId}
-        onBack={() => setFocus(null)}
+        traceId={focus.traceId}
+        onTraceChange={(traceId) => go(traceId ? [focus.issueId, "trace", traceId] : [focus.issueId], { replace: true })}
+        onBack={() => go([])}
       />
     )
   }
+  if (focus) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-20 text-center">
+        <p className="text-[14px] font-medium text-ds-text">Issue not found</p>
+        <p className="font-[family-name:var(--font-data)] text-[12px] text-ds-text-3">{focus.issueId}</p>
+        <p className="max-w-sm text-[12.5px] text-ds-text-3">It may have been evicted, or the link is from another environment.</p>
+        <button type="button" onClick={() => go([])} className="inline-flex h-9 items-center rounded-[9px] border border-ds-line-strong px-3 text-[12.5px] font-medium text-ds-text-2 hover:text-ds-text">All issues</button>
+      </div>
+    )
+  }
 
   return (
     <div className="flex flex-col gap-5">