alot more changes

otel-ui/src/components/IssuesVisualizer.tsx

@@ -21,6 +21,7 @@ import {
   X,
 } from "lucide-react"
 import { useObservabilityData } from "../hooks/useObservabilityData"
+import { useIssueSources } from "../hooks/useIssueSources"
 import { authFetch } from "../lib/auth"
 import { formatRelativeTime } from "../lib/timeUtils"
 import {
@@ -147,7 +148,7 @@ export const toneLine: Record<SeverityTone, string> = {
 
 /** The sparkline + expected-band + breach segment described by the anomaly presentation spec. */
 export const IssueSparkline = ({ issue }: { issue: Issue }) => {
-  const { points, max, reference, breachIndex } = sparklineSeries(issue, 24)
+  const { points, hours, max, reference, breachIndex } = sparklineSeries(issue, 24)
   const width = 100
   const height = 100
   const step = width / (points.length - 1)
@@ -167,8 +168,8 @@ export const IssueSparkline = ({ issue }: { issue: Issue }) => {
   const bandHeight = Math.max(height - refY - 4, 6)
 
   const description = hasBreach
-    ? `Hourly occurrence count over the last 24 hours, climbing above the period average roughly ${points.length - breachIndex} hours ago and still elevated`
-    : `Hourly occurrence count over the last 24 hours, staying within the period average`
+    ? `Hourly occurrence count over an adaptive ${hours}-hour activity window, climbing above the period average roughly ${points.length - breachIndex} hours ago and still elevated`
+    : `Hourly occurrence count over an adaptive ${hours}-hour activity window, staying within the period average`
 
   return (
     <svg
@@ -316,6 +317,7 @@ const IssueCard = ({
   const [expanded, setExpanded] = useState(false)
   const [needleResult, setNeedleResult] = useState<NeedleResult | null>(null)
   const [needleLoading, setNeedleLoading] = useState(false)
+  const { sources, loading: sourcesLoading, error: sourcesError } = useIssueSources(issue.id, expanded)
 
   const handleNeedleTriage = async () => {
     setNeedleLoading(true)
@@ -545,6 +547,34 @@ const IssueCard = ({
             )}
           </div>
 
+          <div className="space-y-2">
+            <div className="flex items-baseline justify-between gap-3">
+              <p className="text-[10.5px] font-bold uppercase tracking-widest text-ds-text-3">
+                All sources ({sources.length})
+              </p>
+              {sourcesLoading && <span className="text-[11px] text-ds-text-3">Loading…</span>}
+            </div>
+            {sourcesError && <p className="text-[12px] text-ds-critical">Failed to load sources: {sourcesError}</p>}
+            {!sourcesLoading && !sourcesError && sources.length === 0 && (
+              <p className="text-[12px] text-ds-text-3">No source IP was recorded for these occurrences.</p>
+            )}
+            {sources.length > 0 && (
+              <div className="overflow-hidden rounded-[10px] border border-ds-line bg-ds-surface">
+                {sources.map((source) => (
+                  <div key={source.ip} className="flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-ds-line px-3 py-2 last:border-b-0">
+                    <span className="min-w-[150px] font-[family-name:var(--font-data)] text-[12px] text-ds-text">
+                      <IpButton ip={source.ip} />
+                    </span>
+                    <span className="font-[family-name:var(--font-data)] text-[11px] text-ds-text-2">×{source.count}</span>
+                    <span className="text-[11px] text-ds-text-3">
+                      {new Date(source.firstSeen).toLocaleString()} → {new Date(source.lastSeen).toLocaleString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
           <div className="space-y-2">
             <p className="text-[10.5px] font-bold uppercase tracking-widest text-ds-text-3">
               Recent occurrences ({issue.samples.length})