@skyhook-io/radar-app 1.8.7 → 1.8.8

package/src/components/timeline/TimelineList.tsx

@@ -1,6 +1,13 @@
-import { useState, useCallback } from 'react'
-import { TimelineList as TimelineListUI, type ActivityTypeFilter, type ActivityFilterKey } from '@skyhook-io/k8s-ui'
-import type { TimeRange } from '@skyhook-io/k8s-ui'
+import { useState, useCallback, useMemo } from 'react'
+import {
+  TimelineList as TimelineListUI,
+  eventsForApplication,
+  type ActivityTypeFilter,
+  type ActivityFilterKey,
+  type AppMembershipIndex,
+  type TimeRange,
+  type Topology,
+} from '@skyhook-io/k8s-ui'
 import { useTimelineSource } from '../../context/TimelineSource'
 import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { NavigateToResource } from '../../utils/navigation'
@@ -13,6 +20,7 @@ export type { ActivityTypeFilter, ActivityFilterKey }
 // this only caps pathological bursts. Surfaced to the list as `truncatedAt` so a
 // window that does hit it shows an end-of-list note instead of dropping silently.
 const LIST_FETCH_LIMIT = 2000
+const APP_SCOPED_FETCH_LIMIT = 10000
 
 interface TimelineListProps {
   namespaces: string[]
@@ -44,9 +52,13 @@ interface TimelineListProps {
   onVisibleWindowChange?: (window: { fromMs: number; toMs: number } | null) => void
   // Carries the swimlane's view window into the list on view switch (scroll target).
   scrollToMs?: number
+  focusedAppIndex?: AppMembershipIndex
+  appScoped?: boolean
+  topology?: Topology
+  appScopeLoading?: boolean
 }
 
-export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange, search, onSearchChange, activityFilter, onActivityFilterChange, kindFilter, onKindFilterChange, selectionWindow, sliding, onVisibleWindowChange, scrollToMs }: TimelineListProps) {
+export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange, search, onSearchChange, activityFilter, onActivityFilterChange, kindFilter, onKindFilterChange, selectionWindow, sliding, onVisibleWindowChange, scrollToMs, focusedAppIndex, appScoped = false, topology, appScopeLoading = false }: TimelineListProps) {
   const hasLimitedAccess = useHasLimitedAccess()
   const timelineSource = useTimelineSource()
   const [queryParams, setQueryParams] = useState<{ timeRange: TimeRange; kinds: string[] }>({
@@ -58,17 +70,28 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     setQueryParams(params)
   }, [])
 
-  const { data: events = [], isLoading, isError, refetch } = timelineSource.useEvents({
+  const fetchLimit = appScoped ? APP_SCOPED_FETCH_LIMIT : LIST_FETCH_LIMIT
+  const { data: unscopedEvents = [], isLoading, isError, refetch } = timelineSource.useEvents({
     namespaces,
     kinds: queryParams.kinds,
     timeRange: queryParams.timeRange,
     includeK8sEvents: true,
+    includeManaged: appScoped,
     includeDeleted: showDeleted,
-    limit: LIST_FETCH_LIMIT,
+    limit: fetchLimit,
     fromMs: selectionWindow?.fromMs,
     toMs: selectionWindow?.toMs,
     sliding,
   })
+  const events = useMemo(
+    () => appScoped
+      ? focusedAppIndex
+        ? eventsForApplication(unscopedEvents, topology, focusedAppIndex)
+        : []
+      : unscopedEvents,
+    [appScoped, focusedAppIndex, topology, unscopedEvents],
+  )
+  const sourceTruncated = unscopedEvents.length >= fetchLimit
 
   if (isError) {
     return (
@@ -89,7 +112,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
   return (
     <TimelineListUI
       events={events}
-      isLoading={isLoading}
+      isLoading={isLoading || appScopeLoading}
       onQueryChange={handleQueryChange}
       hasLimitedAccess={hasLimitedAccess}
       namespaces={namespaces}
@@ -109,7 +132,11 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
       onKindFilterChange={onKindFilterChange}
       onVisibleWindowChange={onVisibleWindowChange}
       scrollToMs={scrollToMs}
-      truncatedAt={LIST_FETCH_LIMIT}
+      truncatedAt={fetchLimit}
+      isTruncated={sourceTruncated}
+      truncationMessage={appScoped && sourceTruncated
+        ? `Showing application activity found in the newest ${fetchLimit.toLocaleString()} events in this range — narrow the query to see older activity`
+        : undefined}
     />
   )
 }

package/src/components/timeline/TimelineView.tsx

@@ -1,15 +1,17 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import type { ReactNode } from 'react'
-import { Network, AlertTriangle, RefreshCw } from 'lucide-react'
+import { Network, AlertTriangle, RefreshCw, Boxes, X } from 'lucide-react'
 import {
   clampLensToSelection,
   deriveLiveSelection,
   isLensLatched,
   advanceLatchedLens,
   buildAppMembershipIndex,
+  eventsForApplication,
   isPinnedLaneRef,
   LIVE_TICK_MS,
+  SEVERITY_TEXT,
   type ScrubberRange,
   type TimelineLiveState,
   type TimelineGrouping,
@@ -259,14 +261,36 @@ interface TimelineViewProps {
   onNamespaceSelect?: (ns: string) => void
 }
 
+export function resolveApplicationTimelineScope(searchParams: URLSearchParams, namespaces: string[]) {
+  const appKey = searchParams.get('app')
+  const appNamespaces = Array.from(new Set(
+    (searchParams.get('scopeNamespaces') ?? '')
+      .split(',')
+      .map((namespace) => namespace.trim())
+      .filter(Boolean),
+  ))
+
+  return {
+    appKey,
+    namespaces: appKey ? appNamespaces : namespaces,
+    ready: !appKey || appNamespaces.length > 0,
+  }
+}
+
 export function TimelineView({ namespaces, onResourceClick, initialViewMode, initialFilter, initialTimeRange, requiresNamespaceFilter, availableNamespaces, onNamespaceSelect }: TimelineViewProps) {
   // URL is the source of truth for every control below (deep-linkable +
   // back/forward-restorable). Read on mount, written on user change.
   const [searchParams, setSearchParams] = useSearchParams()
+  const appScope = useMemo(() => resolveApplicationTimelineScope(searchParams, namespaces), [namespaces, searchParams])
+  const focusedAppKey = appScope.appKey
+  const appScopeNamespaces = focusedAppKey ? appScope.namespaces : []
+  const appScopeReady = appScope.ready
+  const timelineNamespaces = appScope.namespaces
+  const scopeRequiresNamespaceFilter = Boolean(requiresNamespaceFilter) && appScopeNamespaces.length === 0
 
   // Force list view on large clusters without namespace filter; otherwise the
   // URL `view` (or the home-page seed) decides.
-  const effectiveInitialMode = requiresNamespaceFilter ? 'list' : (parseView(searchParams) ?? initialViewMode ?? DEFAULT_VIEW)
+  const effectiveInitialMode = scopeRequiresNamespaceFilter ? 'list' : (parseView(searchParams) ?? initialViewMode ?? DEFAULT_VIEW)
   const [viewMode, setViewMode] = useState<TimelineViewMode>(effectiveInitialMode)
   // Shared across list + swimlane so the toggle carries across the view switch,
   // and so the swimlane fetch can exclude deletes server-side (before LIMIT)
@@ -330,7 +354,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   }, [navigate])
 
   // Only fetch heavy swimlane data when actually showing swimlanes
-  const showSwimlanes = viewMode === 'swimlane' && !requiresNamespaceFilter
+  const showSwimlanes = viewMode === 'swimlane' && !scopeRequiresNamespaceFilter && appScopeReady
 
   const timelineSource = useTimelineSource()
   const isRetained = timelineSource.capabilities.mode === 'retained'
@@ -345,8 +369,8 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // full-ring load the swimlane gate avoids — and the list then shows its own
   // range dropdown instead (selectionWindow is only passed when a scrubber is
   // on screen to own the range).
-  const showLocalScrubber = isLocal && !requiresNamespaceFilter
-  const showScrubber = isRetained || showLocalScrubber
+  const showLocalScrubber = isLocal && !scopeRequiresNamespaceFilter && appScopeReady
+  const showScrubber = appScopeReady && (isRetained || showLocalScrubber)
 
   // Both sources drive a scrubber now: retained fetches a server overview, local
   // derives one client-side from the loaded ring. The time-selection machinery
@@ -572,7 +596,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
 
   useEffect(() => {
     const sp = searchParams
-    const nextView = requiresNamespaceFilter ? 'list' : (parseView(sp) ?? DEFAULT_VIEW)
+    const nextView = scopeRequiresNamespaceFilter ? 'list' : (parseView(sp) ?? DEFAULT_VIEW)
     setViewMode((prev) => (prev === nextView ? prev : nextView))
     const nextMode = parseTimeMode(sp, isRetained || isLocal, retainedMaxRangeDays)
     setMode((prev) => (timeModeEqual(prev, nextMode) ? prev : nextMode))
@@ -594,14 +618,14 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     setSort((prev) => (prev === nextSort ? prev : nextSort))
     const nextEvent = sp.get('event')
     setSelectedEventId((prev) => (prev === nextEvent ? prev : nextEvent))
-  }, [searchParams, isRetained, isLocal, requiresNamespaceFilter, pinnedLanes, retainedMaxRangeDays])
+  }, [searchParams, isRetained, isLocal, scopeRequiresNamespaceFilter, pinnedLanes, retainedMaxRangeDays])
 
   useEffect(() => {
     const current = searchParamsRef.current
     const target = writeTimelineParams(
       current,
       { viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId },
-      { isRetained: isRetained || isLocal, requiresNamespaceFilter },
+      { isRetained: isRetained || isLocal, requiresNamespaceFilter: scopeRequiresNamespaceFilter },
     )
     const targetStr = target.toString()
     const currentStr = current.toString()
@@ -614,13 +638,13 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const replace = !didMountUrlSyncRef.current || onlyHighFreqDiffer(currentStr, targetStr)
     didMountUrlSyncRef.current = true
     setSearchParamsRef.current(target, { replace })
-  }, [viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, requiresNamespaceFilter])
+  }, [viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
 
   // Fetch all activity - zoom controls what's visible in the UI. The heavy 10k
   // ring feeds the swimlanes and the local strip's histogram, so it also runs in
   // list mode when that strip is shown; the list itself fetches its own 2000.
   const { data: activity, isLoading, isError, refetch } = timelineSource.useEvents({
-    namespaces,
+    namespaces: timelineNamespaces,
     timeRange: 'all',
     includeK8sEvents: true,
     includeManaged: true,
@@ -628,25 +652,30 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     limit: 10000,
     // The local strip derives its histogram from this ring fetch, so it must
     // run in list mode too whenever the strip is shown.
-    enabled: showSwimlanes || showLocalScrubber,
+    enabled: appScopeReady && (showSwimlanes || showLocalScrubber),
     fromMs: isRetained ? selection.fromMs : undefined,
     toMs: isRetained ? selection.toMs : undefined,
     sliding: isRetained && mode.kind === 'live',
   })
 
-  // Fetch topology for service stack grouping — skip on large clusters (empty anyway)
-  const { data: rawTopology } = useTopology(namespaces, 'resources', { enabled: showSwimlanes })
+  // Topology powers both swimlane hierarchy and application-scoped attribution.
+  const { data: rawTopology } = useTopology(timelineNamespaces, 'resources', {
+    enabled: appScopeReady && (showSwimlanes || Boolean(focusedAppKey)),
+  })
 
   // Server application grouping — the single grouping authority. Joined to the
   // timeline lanes client-side via the membership index. A failed/absent fetch
   // leaves the index undefined; the swimlane degrades to its legacy label
   // grouping (no crash, events still render).
-  // Only the app-grouping swimlane path consumes the membership index; gate the
-  // fetch (and its background poll) on that so list view / non-app groupings
-  // don't drive an unused /applications poll. Disabled → appsData undefined →
-  // appIndex undefined → the swimlane's legacy owner-label fallback.
-  const { data: appsData, dataUpdatedAt: appsUpdatedAt } = useApplications(namespaces, {
-    enabled: showSwimlanes && grouping === 'app',
+  // App-grouped swimlanes and application-scoped handoffs consume this index.
+  // Other Timeline states avoid the background applications poll.
+  const {
+    data: appsData,
+    dataUpdatedAt: appsUpdatedAt,
+    isLoading: appsLoading,
+    isError: appsError,
+  } = useApplications(timelineNamespaces, {
+    enabled: appScopeReady && ((showSwimlanes && grouping === 'app') || Boolean(focusedAppKey)),
   })
   const appIndex = useMemo(
     () => (appsData?.applications ? buildAppMembershipIndex(appsData.applications) : undefined),
@@ -669,14 +698,98 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     return rawTopology
   }, [rawTopology])
 
-  // Use stable reference for events to prevent unnecessary re-renders
-  const events = activity ?? EMPTY_EVENTS
+  const focusedApp = useMemo(
+    () => appsData?.applications.find((candidate) => candidate.key === focusedAppKey),
+    [appsData?.applications, focusedAppKey],
+  )
+  const focusedAppIndex = useMemo(
+    () => (focusedApp ? buildAppMembershipIndex([focusedApp]) : undefined),
+    [focusedApp],
+  )
+
+  // Application History hands off to Timeline with an explicit app scope. Keep
+  // that scope local to Timeline rather than changing the global namespace
+  // preference, and fail closed while the application cannot be resolved.
+  const unscopedEvents = activity ?? EMPTY_EVENTS
+  const events = useMemo(
+    () => focusedAppKey
+      ? focusedAppIndex
+        ? eventsForApplication(unscopedEvents, stableTopology, focusedAppIndex)
+        : EMPTY_EVENTS
+      : unscopedEvents,
+    [focusedAppIndex, focusedAppKey, stableTopology, unscopedEvents],
+  )
+  const focusedAppLoading = Boolean(focusedAppKey) && appsLoading
+  const focusedAppUnavailable = Boolean(focusedAppKey) && (!appScopeReady || (!appsLoading && (appsError || !focusedApp)))
+  const focusedAppTimelineLimited = Boolean(focusedAppKey) && unscopedEvents.length >= 10_000
+  const clearFocusedApp = useCallback(() => {
+    const next = new URLSearchParams(searchParamsRef.current)
+    next.delete('app')
+    next.delete('scopeNamespaces')
+    next.delete('grouping')
+    next.delete('window')
+    next.delete('from')
+    next.delete('to')
+    setSearchParamsRef.current(next)
+  }, [])
+
+  const appScopeBar = focusedAppKey ? (
+    <div className="flex items-start justify-between gap-3 border-b border-theme-border bg-theme-surface px-4 py-2">
+      <div className="min-w-0 space-y-1">
+        <div className="flex min-w-0 items-center gap-2 text-sm">
+          <Boxes className="h-4 w-4 shrink-0 text-accent" />
+          <span className="shrink-0 text-theme-text-tertiary">Application</span>
+          {focusedApp ? (
+            <button
+              type="button"
+              onClick={() => handleAppClick(focusedApp.key)}
+              className="truncate font-medium text-accent-text hover:underline"
+            >
+              {focusedApp.name}
+            </button>
+          ) : (
+            <span className="truncate font-medium text-theme-text-secondary">
+              {focusedAppLoading ? 'Resolving scope...' : 'Scope unavailable'}
+            </span>
+          )}
+          {focusedAppUnavailable && (
+            <span className="truncate text-theme-text-tertiary">
+              {appScopeReady
+                ? 'The application is not available in the current cluster view.'
+                : 'This link is missing the namespaces needed to resolve the application.'}
+            </span>
+          )}
+        </div>
+        {showSwimlanes && focusedAppTimelineLimited && (
+          <div className="flex items-center gap-1.5 pl-6 text-xs text-theme-text-tertiary">
+            <AlertTriangle className={`h-3.5 w-3.5 shrink-0 ${SEVERITY_TEXT.warning}`} />
+            Showing application activity found in the newest 10,000 events in this range. Narrow the range to see older activity.
+          </div>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={clearFocusedApp}
+        className="flex shrink-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
+      >
+        <X className="h-3.5 w-3.5" />
+        Clear scope
+      </button>
+    </div>
+  ) : null
 
   // The scrubber sits above whichever view is active, sharing one selection
   // across list + swimlane. Retained draws its server-overview strip; local
   // derives the strip client-side from the loaded ring and omits the gap band.
   const wrap = (node: ReactNode): ReactNode => {
-    if (!showScrubber) return node
+    if (!showScrubber) {
+      return (
+        <div className="flex-1 flex flex-col min-h-0">
+          {appScopeBar}
+          <div className="flex-1 flex flex-col min-h-0">{node}</div>
+        </div>
+      )
+    }
     // In list mode the lens mirrors the rows visible in the list's scrollport
     // (scrolling moves it) — and dragging the band works the OTHER way too: it
     // scrolls the list to that time (two-way, like the swimlane). In swimlane
@@ -688,6 +801,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       : setLens
     return (
       <div className="flex-1 flex flex-col min-h-0">
+        {appScopeBar}
         {isRetained ? (
           <RetainedTimelineScrubber
             source={timelineSource}
@@ -725,9 +839,21 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     )
   }
 
+  if (!appScopeReady) {
+    return wrap(
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center">
+        <AlertTriangle className="h-8 w-8 text-theme-text-tertiary" />
+        <h2 className="text-base font-semibold text-theme-text-primary">Application scope is incomplete</h2>
+        <p className="max-w-lg text-sm text-theme-text-secondary">
+          Reopen Timeline from the application&apos;s History tab so its runtime and deployment-source namespaces are included.
+        </p>
+      </div>,
+    )
+  }
+
   if (viewMode === 'swimlane') {
     // Large cluster without namespace: show picker instead of swimlanes
-    if (requiresNamespaceFilter) {
+    if (scopeRequiresNamespaceFilter) {
       return wrap(
         <div className="flex-1 flex flex-col">
           {/* Toolbar with view toggle so user can switch back to list */}
@@ -788,12 +914,12 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     return wrap(
       <TimelineSwimlanes
         events={events}
-        isLoading={isLoading}
+        isLoading={isLoading || focusedAppLoading}
         onResourceClick={onResourceClick}
         viewMode={viewMode}
         onViewModeChange={setViewMode}
         topology={stableTopology}
-        namespaces={namespaces}
+        namespaces={timelineNamespaces}
         showDeleted={showDeleted}
         onShowDeletedChange={setShowDeleted}
         pinnedOnly={pinnedOnly}
@@ -827,7 +953,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
 
   return wrap(
     <TimelineList
-      namespaces={namespaces}
+      namespaces={timelineNamespaces}
       currentView={viewMode}
       onViewChange={setViewMode}
       onResourceClick={onResourceClick}
@@ -850,6 +976,10 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       // Seeded with the swimlane's window at the switch (see the viewMode
       // effect); afterwards, dragging the strip band retargets the scroll.
       scrollToMs={listScrollToMs}
+      focusedAppIndex={focusedAppIndex}
+      appScoped={Boolean(focusedAppKey)}
+      topology={stableTopology}
+      appScopeLoading={focusedAppLoading}
     />
   )
 }

package/src/components/timeline/TimelineView.urlparams.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import type { ActivityFilterKey, TimelineGrouping, TimelineSort } from '@skyhook-io/k8s-ui'
 import {
   parseTimeMode,
+  resolveApplicationTimelineScope,
   writeTimelineParams,
   onlyHighFreqDiffer,
   timeModeEqual,
@@ -172,10 +173,17 @@ describe('writeTimelineParams', () => {
     expect(written.has('window')).toBe(false)
   })
 
-  it('preserves foreign params and strips the legacy filter seed', () => {
-    const base = new URLSearchParams({ tab: 'topology', filter: 'warnings' })
+  it('preserves foreign params, including application scope, and strips the legacy filter seed', () => {
+    const base = new URLSearchParams({
+      tab: 'topology',
+      app: 'staging/Deployment/api',
+      scopeNamespaces: 'argocd,staging',
+      filter: 'warnings',
+    })
     const written = writeTimelineParams(base, defaultState, retainedOpts)
     expect(written.get('tab')).toBe('topology')
+    expect(written.get('app')).toBe('staging/Deployment/api')
+    expect(written.get('scopeNamespaces')).toBe('argocd,staging')
     expect(written.has('filter')).toBe(false)
   })
 
@@ -188,6 +196,39 @@ describe('writeTimelineParams', () => {
   })
 })
 
+describe('resolveApplicationTimelineScope', () => {
+  it('uses the current namespace selection outside application scope', () => {
+    expect(resolveApplicationTimelineScope(new URLSearchParams(), ['default', 'staging'])).toEqual({
+      appKey: null,
+      namespaces: ['default', 'staging'],
+      ready: true,
+    })
+  })
+
+  it('uses the application scope namespaces and removes duplicates', () => {
+    const params = sp({
+      app: '/Application/radar-hub-staging',
+      scopeNamespaces: 'argocd, staging,argocd',
+    })
+
+    expect(resolveApplicationTimelineScope(params, ['default'])).toEqual({
+      appKey: '/Application/radar-hub-staging',
+      namespaces: ['argocd', 'staging'],
+      ready: true,
+    })
+  })
+
+  it('fails closed when an application link omits its namespace scope', () => {
+    const params = sp({ app: '/Application/radar-hub-staging' })
+
+    expect(resolveApplicationTimelineScope(params, ['default'])).toEqual({
+      appKey: '/Application/radar-hub-staging',
+      namespaces: [],
+      ready: false,
+    })
+  })
+})
+
 describe('parse(write(state)) round-trip', () => {
   const opts = { isRetained: true, requiresNamespaceFilter: false, maxRangeDays: undefined, hasPins: true }
   const roundTrip = (state: PersistedTimelineState) => {