materialized view and a bit better ui

otel-ui/src/components/IssuesVisualizer.tsx

@@ -32,6 +32,7 @@ import {
   strongestCorrelate,
   type SeverityTone,
 } from "../lib/issue-utils"
+import { IssueOccurrences } from "./IssueOccurrences"
 import { NeedleTestModal } from "./NeedleTestModal"
 import { FilterBar, type FilterChip } from "./FilterBar"
 import type { Issue, IssueSample } from "../lib/types"
@@ -277,12 +278,13 @@ const IssueCard = ({
   issue,
   onStatusChange,
   statusBusy,
+  onFocus,
 }: {
   issue: Issue
   onStatusChange: (issue: Issue, status: string) => void
   statusBusy: boolean
+  onFocus: (issue: Issue, traceId?: string) => void
 }) => {
-  const { setActiveTraceId, setActiveSpanId, setActiveTab } = useObservabilityData()
   const [expanded, setExpanded] = useState(false)
   const [needleResult, setNeedleResult] = useState<NeedleResult | null>(null)
   const [needleLoading, setNeedleLoading] = useState(false)
@@ -311,11 +313,7 @@ const IssueCard = ({
   const contextSample = issue.samples.find((s) => s.httpMethod || s.httpRoute || s.httpStatus)
   const correlate = strongestCorrelate(issue)
 
-  const viewTrace = (traceId: string, spanId?: string) => {
-    setActiveTraceId(traceId)
-    if (spanId) setActiveSpanId(spanId)
-    setActiveTab("tab1")
-  }
+  const viewTrace = (traceId: string) => onFocus(issue, traceId)
 
   const metaParts = [`service=${issue.service}`]
   if (contextSample?.httpMethod && contextSample?.httpRoute) {
@@ -360,7 +358,7 @@ const IssueCard = ({
           {latestSample?.traceId && (
             <button
               type="button"
-              onClick={() => viewTrace(latestSample.traceId!, latestSample.spanId)}
+              onClick={() => viewTrace(latestSample.traceId!)}
               className="inline-flex h-9 items-center rounded-[9px] bg-ds-accent px-3.5 text-[13px] font-semibold text-ds-on-accent"
             >
               View trace
@@ -534,7 +532,7 @@ const IssueCard = ({
                       type="button"
                       onClick={(e) => {
                         e.stopPropagation()
-                        viewTrace(sample.traceId!, sample.spanId)
+                        viewTrace(sample.traceId!)
                       }}
                       className="flex shrink-0 items-center gap-1.5 rounded-full border border-ds-line-strong px-2.5 py-0.5 text-[10.5px] font-bold text-ds-text-2 hover:text-ds-text"
                     >
@@ -655,6 +653,8 @@ 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 })
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
   const [kindFilter, setKindFilter] = useState<KindFilter>("all")
   const [needleModalOpen, setNeedleModalOpen] = useState(false)
@@ -813,6 +813,18 @@ export const IssuesVisualizer = ({
     )
   }
 
+  const focusedIssue = focus ? issues.find((i) => i.id === focus.issueId) : undefined
+  if (focus && focusedIssue) {
+    return (
+      <IssueOccurrences
+        key={focus.issueId}
+        issue={focusedIssue}
+        initialTraceId={focus.traceId}
+        onBack={() => setFocus(null)}
+      />
+    )
+  }
+
   return (
     <div className="flex flex-col gap-5">
       <FilterBar
@@ -993,7 +1005,7 @@ export const IssuesVisualizer = ({
           ) : (
             <div className="flex flex-col gap-3">
               {primaryIssues.map((issue) => (
-                <IssueCard key={issue.id} issue={issue} onStatusChange={onStatusChange} statusBusy={statusBusy} />
+                <IssueCard key={issue.id} issue={issue} onStatusChange={onStatusChange} statusBusy={statusBusy} onFocus={focusIssue} />
               ))}
             </div>
           )}
@@ -1015,7 +1027,7 @@ export const IssuesVisualizer = ({
               {showSecondary && (
                 <div className="flex flex-col gap-3">
                   {secondaryIssues.map((issue) => (
-                    <IssueCard key={issue.id} issue={issue} onStatusChange={onStatusChange} statusBusy={statusBusy} />
+                    <IssueCard key={issue.id} issue={issue} onStatusChange={onStatusChange} statusBusy={statusBusy} onFocus={focusIssue} />
                   ))}
                 </div>
               )}