@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/context/RadarUpgrade.tsx

@@ -0,0 +1,30 @@
+import { useMemo, type ReactNode } from 'react'
+import { RadarUpgradeContext, type RadarUpgradeActions } from '@skyhook-io/k8s-ui'
+import { useCapabilities, useVersionCheck } from '../api/client'
+import { IN_CLUSTER_UPGRADE_URL } from '../utils/version'
+import { useRadarUpgradeHost } from './RadarUpgradeHost'
+
+/**
+ * Supplies the "Upgrade Radar" action to the inline notes k8s-ui renders for
+ * features the connected Radar is too old to serve. A host that owns upgrades
+ * (Radar Cloud) gets the request; standalone Radar links to the instructions
+ * for how it was installed.
+ */
+export function RadarUpgradeProvider({ children }: { children: ReactNode }) {
+  const { onRequestRadarUpgrade } = useRadarUpgradeHost()
+  const { data: capabilities } = useCapabilities()
+  const { data: versionInfo } = useVersionCheck()
+  const mode = capabilities?.deployment?.mode ?? 'local'
+  // A local binary upgrades from its release page; an in-cluster or Cloud
+  // agent from the docs section that covers Helm, Argo CD and Flux installs.
+  const upgradeHref = mode === 'local' && versionInfo?.releaseUrl
+    ? versionInfo.releaseUrl
+    : `${IN_CLUSTER_UPGRADE_URL}#upgrading`
+
+  const value = useMemo<RadarUpgradeActions>(
+    () => (onRequestRadarUpgrade ? { onRequestUpgrade: onRequestRadarUpgrade } : { upgradeHref }),
+    [onRequestRadarUpgrade, upgradeHref],
+  )
+
+  return <RadarUpgradeContext.Provider value={value}>{children}</RadarUpgradeContext.Provider>
+}

package/src/context/RadarUpgradeHost.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react'
+import type { RadarUpgradeRequirement } from '@skyhook-io/k8s-ui'
+
+/** What the user is missing and which Radar serves it; see RadarUpgradeRequirement. */
+export type RadarUpgradeRequest = RadarUpgradeRequirement
+
+/**
+ * What an embedding host knows about the connected Radar and how it upgrades
+ * it: RadarApp's `radarVersion` and `onRequestRadarUpgrade` props. Kept apart
+ * from RadarUpgrade.tsx so api/client.ts can read it without an import cycle.
+ */
+export interface RadarUpgradeHost {
+  radarVersion?: string
+  onRequestRadarUpgrade?: (request: RadarUpgradeRequest) => void
+}
+
+const RadarUpgradeHostContext = createContext<RadarUpgradeHost>({})
+
+export const RadarUpgradeHostProvider = RadarUpgradeHostContext.Provider
+
+export function useRadarUpgradeHost(): RadarUpgradeHost {
+  return useContext(RadarUpgradeHostContext)
+}

package/src/hooks/usePreviousIntegrationSettings.render.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { afterEach, expect, it, vi } from 'vitest'
+import { usePreviousIntegrationSettings, previousIntegrationSettingsKey } from './usePreviousIntegrationSettings'
+
+const state = vi.hoisted(() => ({ context: 'first', switching: false, embedded: false, management: 'local', connected: true }))
+vi.mock('../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: state.context, state: state.connected ? 'connected' : 'disconnected' } }) }))
+vi.mock('../context/ContextSwitchContext', () => ({ useContextSwitch: () => ({ isSwitching: state.switching }) }))
+vi.mock('../context/NavCustomization', () => ({ useNavCustomization: () => ({ embedded: state.embedded }) }))
+vi.mock('../contexts/CapabilitiesContext', () => ({ useCapabilitiesContext: () => ({ configManagement: state.management }) }))
+vi.mock('../api/client', () => ({ fetchJSON: vi.fn() }))
+import { fetchJSON } from '../api/client'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+const element = document.createElement('div')
+let root = createRoot(element)
+let client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+function Subject({ relevant = true }: { relevant?: boolean }) {
+  const offers = usePreviousIntegrationSettings(relevant)
+  return <span>{offers.metrics ? 'offer' : 'ordinary'}</span>
+}
+async function render(relevant = true) {
+  await act(async () => { root.render(<QueryClientProvider client={client}><Subject relevant={relevant} /></QueryClientProvider>) })
+}
+afterEach(async () => {
+  await act(async () => root.unmount())
+  client.clear()
+  client = new QueryClient()
+  root = createRoot(element)
+  Object.assign(state, { context: 'first', switching: false, embedded: false, management: 'local', connected: true })
+  vi.mocked(fetchJSON).mockReset()
+})
+
+it.each(['embedded', 'operator', 'cloud', 'loading', 'switching', 'disconnected', 'irrelevant'])('does not fetch or display cached offers when %s', async gate => {
+  if (gate === 'embedded') state.embedded = true
+  if (['operator', 'cloud', 'loading'].includes(gate)) state.management = gate === 'loading' ? '' : gate
+  if (gate === 'switching') state.switching = true
+  if (gate === 'disconnected') state.connected = false
+  client.setQueryData([previousIntegrationSettingsKey, '/api', 'first'], { metrics: 'previous' })
+  await render(gate !== 'irrelevant')
+  expect(element.textContent).toBe('ordinary')
+  expect(fetchJSON).not.toHaveBeenCalled()
+})
+
+it('drops a cached offer immediately while switching and aborts the old fetch', async () => {
+  const signals: AbortSignal[] = []
+  vi.mocked(fetchJSON).mockImplementation((_path, signal) => { signals.push(signal as AbortSignal); return new Promise(() => {}) })
+  client.setQueryData([previousIntegrationSettingsKey, '/api', 'first'], { metrics: 'previous' }, { updatedAt: 1 })
+  await render()
+  expect(element.textContent).toBe('offer')
+  state.switching = true
+  await render()
+  expect(element.textContent).toBe('ordinary')
+  state.context = 'second'
+  state.switching = false
+  await render()
+  expect(element.textContent).toBe('ordinary')
+  expect(signals[0].aborted).toBe(true)
+  expect(signals).toHaveLength(2)
+})

package/src/hooks/usePreviousIntegrationSettings.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { previousIntegrationOffers, type IntegrationSettingsResponse } from './usePreviousIntegrationSettings'
+import type { ConnectionResponse, IntegrationProfile, IntegrationProfiles } from '../components/settings/LocalConnectionSettings'
+
+function response(overrides: Partial<IntegrationProfile> = {}): IntegrationSettingsResponse {
+  const profile = { target: { context: 'development' }, state: 'auto', legacy: { url: 'https://backend.example', mode: 'auto' }, ...overrides } as IntegrationProfile
+  return { management: 'local', integrationProfiles: { metrics: profile, argocd: profile, cost: profile } as IntegrationProfiles }
+}
+
+describe('previous integration eligibility projection', () => {
+  it('keeps only eligibility and routing facts, never URLs or credentials', () => {
+    expect(previousIntegrationOffers(response(), 'development')).toEqual({ metrics: 'previous', argocd: 'previous', cost: 'previous', explicitCostBackend: true })
+  })
+  it.each(['operator', 'cloud'] as const)('rejects %s management', management => {
+    expect(Object.values(previousIntegrationOffers({ ...response(), management }, 'development')).some(Boolean)).toBe(false)
+  })
+  it.each(['saved', 'launch', 'target_changed', 'error'] as const)('rejects %s profiles', state => {
+    expect(previousIntegrationOffers(response({ state }), 'development').metrics).toBeUndefined()
+  })
+  it('rejects missing offers, wrong context and errored bundles', () => {
+    expect(previousIntegrationOffers(response({ legacy: undefined }), 'development').metrics).toBeUndefined()
+    expect(previousIntegrationOffers(response(), 'staging').metrics).toBeUndefined()
+    expect(previousIntegrationOffers(response(), '').metrics).toBeUndefined()
+    const data = response()
+    data.integrationProfiles!.metrics.legacy!.error = 'invalid credentials binding'
+    expect(previousIntegrationOffers(data, 'development').metrics).toBeUndefined()
+  })
+  it('offers another cluster\'s saved settings once no previous settings apply', () => {
+    const entry = { integration: 'metrics', binding: 'staging', url: 'https://mimir.example' } as ConnectionResponse['connections'][number]
+    const data = response({ legacy: undefined, target: { context: 'development', binding: 'development' } as IntegrationProfile['target'] })
+    expect(previousIntegrationOffers(data, 'development', [entry]).metrics).toBe('copy')
+    expect(previousIntegrationOffers(data, 'development', [{ ...entry, binding: 'development' }]).metrics).toBeUndefined()
+    expect(previousIntegrationOffers(data, 'development', [{ ...entry, url: '' }]).metrics).toBeUndefined()
+    expect(previousIntegrationOffers(data, 'development', [{ ...entry, error: 'invalid' }]).metrics).toBeUndefined()
+    expect(previousIntegrationOffers(response(), 'development', [entry]).metrics).toBe('previous')
+    expect(previousIntegrationOffers(response({ state: 'saved', legacy: undefined }), 'development', [entry]).metrics).toBeUndefined()
+  })
+  it('stops reminding after the notice is dismissed, falling back to copy offers', () => {
+    const entry = { integration: 'metrics', binding: 'staging', url: 'https://mimir.example' } as ConnectionResponse['connections'][number]
+    const data = response({ target: { context: 'development', binding: 'development' } as IntegrationProfile['target'] })
+    for (const kind of ['metrics', 'argocd', 'cost'] as const)
+      data.integrationProfiles![kind] = { ...data.integrationProfiles![kind], legacy: { ...data.integrationProfiles![kind].legacy!, noticeDismissed: true } }
+    expect(previousIntegrationOffers(data, 'development').metrics).toBeUndefined()
+    expect(previousIntegrationOffers(data, 'development', [entry]).metrics).toBe('copy')
+  })
+  it('never nudges Argo CD toward another cluster\'s server', () => {
+    const entry = { integration: 'argocd', binding: 'staging', url: 'https://argo.example' } as ConnectionResponse['connections'][number]
+    const data = response({ legacy: undefined, target: { context: 'development', binding: 'development' } as IntegrationProfile['target'] })
+    expect(previousIntegrationOffers(data, 'development', [entry]).argocd).toBeUndefined()
+  })
+  it.each([
+    ['auto', 'https://cost.example', true],
+    ['kubecost', 'https://cost.example', true],
+    ['prometheus', 'https://cost.example', false],
+    ['auto', '', false],
+    ['kubecost', '', false],
+  ])('identifies the independent Cost alternative for %s / %s', (mode, url, expected) => {
+    const data = response()
+    Object.assign(data.integrationProfiles!.cost.legacy!, { mode, url })
+    expect(previousIntegrationOffers(data, 'development').explicitCostBackend).toBe(expected)
+  })
+})

package/src/hooks/usePreviousIntegrationSettings.ts

@@ -0,0 +1,89 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchJSON } from '../api/client'
+import { getApiBase } from '../api/config'
+import { useConnection } from '../context/ConnectionContext'
+import { useContextSwitch } from '../context/ContextSwitchContext'
+import { useNavCustomization } from '../context/NavCustomization'
+import { useCapabilitiesContext } from '../contexts/CapabilitiesContext'
+import type { ConnectionResponse, IntegrationKind, IntegrationProfiles } from '../components/settings/LocalConnectionSettings'
+
+export interface IntegrationSettingsResponse {
+  management: 'local' | 'operator' | 'cloud'
+  integrationProfiles?: IntegrationProfiles
+}
+
+// 'previous' offers this context the old global settings; 'copy' points to
+// another cluster's saved settings once those are the way to reuse them.
+export type SettingsOffer = 'previous' | 'copy'
+
+export interface PreviousIntegrationSettings {
+  metrics?: SettingsOffer
+  argocd?: SettingsOffer
+  cost?: SettingsOffer
+  explicitCostBackend: boolean
+}
+
+const noOffers: PreviousIntegrationSettings = { explicitCostBackend: false }
+export const previousIntegrationSettingsKey = 'previous-integration-settings'
+
+export function previousIntegrationOffers(
+  response: IntegrationSettingsResponse,
+  context: string,
+  catalog?: ConnectionResponse['connections'],
+): PreviousIntegrationSettings {
+  if (response.management !== 'local' || !context) return noOffers
+  const offer = (kind: IntegrationKind): SettingsOffer | undefined => {
+    const profile = response.integrationProfiles?.[kind]
+    if (profile?.target.context !== context || profile.state !== 'auto') return undefined
+    if (profile.legacy && !profile.legacy.error && !profile.legacy.noticeDismissed) return 'previous'
+    // Another cluster's Argo CD server manages that cluster's Applications, so
+    // copying it is rarely the fix for this one; Settings still offers it.
+    if (kind === 'argocd') return undefined
+    return catalog?.some(entry => entry.integration === kind && !entry.error && entry.url && entry.binding !== profile.target.binding)
+      ? 'copy' : undefined
+  }
+  const cost = offer('cost')
+  const legacyCost = response.integrationProfiles?.cost.legacy
+  return {
+    metrics: offer('metrics'), argocd: offer('argocd'), cost,
+    explicitCostBackend: cost === 'copy' ||
+      (cost === 'previous' && !!legacyCost?.url && (legacyCost.mode === 'auto' || legacyCost.mode === 'kubecost')),
+  }
+}
+
+async function loadOffers(context: string, signal: AbortSignal): Promise<PreviousIntegrationSettings> {
+  const response = await fetchJSON<IntegrationSettingsResponse>('/config', signal)
+  const offers = previousIntegrationOffers(response, context)
+  const unoffered = (['metrics', 'argocd', 'cost'] as const).some(kind =>
+    !offers[kind] && response.integrationProfiles?.[kind]?.state === 'auto')
+  if (response.management !== 'local' || !unoffered) return offers
+  const catalog = await fetchJSON<ConnectionResponse>('/integrations/connections', signal)
+    .then(data => data.connections, () => undefined)
+  return previousIntegrationOffers(response, context, catalog)
+}
+
+export function usePreviousIntegrationSettings(relevant: boolean): PreviousIntegrationSettings {
+  const { connection } = useConnection()
+  const { isSwitching } = useContextSwitch()
+  const { embedded } = useNavCustomization()
+  const { configManagement } = useCapabilitiesContext()
+  const enabled = relevant && !embedded && configManagement === 'local' && connection.state === 'connected' && !isSwitching && !!connection.context
+  const query = useQuery({
+    queryKey: [previousIntegrationSettingsKey, getApiBase(), connection.context],
+    queryFn: ({ signal }) => loadOffers(connection.context, signal),
+    enabled,
+    retry: false,
+    staleTime: 30_000,
+  })
+  return enabled && !query.isError ? query.data ?? noOffers : noOffers
+}
+
+const settingsTabs: Record<IntegrationKind, string> = { metrics: 'Metrics', argocd: 'Argo CD', cost: 'Cost' }
+
+// Only a note: call sites keep their neutral action, because another cluster's
+// backend connects fine while showing the wrong cluster's data.
+export function previousSettingsNote(kind: IntegrationKind, offer: SettingsOffer): string {
+  return offer === 'copy'
+    ? 'Settings saved for another cluster are available to copy if that backend also serves this cluster.'
+    : `Connections are now saved per cluster. You can copy your previous settings in Settings → ${settingsTabs[kind]}.`
+}

package/src/index.ts

@@ -16,6 +16,7 @@ export {
   getCredentialsMode,
 } from './api/config';
 export type { NavCustomization, FleetTakeoverTarget } from './context/NavCustomization';
+export type { RadarUpgradeRequest } from './context/RadarUpgradeHost';
 // Timeline data-source selection — lets an embedder back the timeline with a
 // retained-history endpoint instead of Radar's local event store. Additive;
 // absent = local (standalone behavior).

package/src/k8s-ui-exports.test.ts

@@ -0,0 +1,73 @@
+/// <reference types="node" />
+import { describe, expect, test } from 'vitest'
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Radar's own build aliases @skyhook-io/k8s-ui to its source, so a deep
+// import that the package's `exports` map can't serve still builds here and
+// only fails in a consumer that installs the published packages (Radar Hub).
+// This resolves every deep import the way Node and bundlers do: the most
+// specific matching key wins, and an array target resolves to its first entry
+// without falling back when that file doesn't exist.
+
+const here = dirname(fileURLToPath(import.meta.url))
+const k8sUiRoot = resolve(here, '../../packages/k8s-ui')
+const exportsMap: Record<string, string | string[]> = JSON.parse(
+  readFileSync(join(k8sUiRoot, 'package.json'), 'utf8'),
+).exports
+
+function resolveExport(subpath: string): string | undefined {
+  const key = `./${subpath}`
+  let target = exportsMap[key]
+  let star: string | undefined
+  if (target === undefined) {
+    let best = ''
+    for (const pattern of Object.keys(exportsMap)) {
+      const i = pattern.indexOf('*')
+      if (i < 0) continue
+      const prefix = pattern.slice(0, i)
+      const suffix = pattern.slice(i + 1)
+      if (key.startsWith(prefix) && key.endsWith(suffix) && key.length >= prefix.length + suffix.length && prefix.length > best.length) {
+        best = prefix
+        target = exportsMap[pattern]
+        star = key.slice(prefix.length, key.length - suffix.length)
+      }
+    }
+  }
+  if (target === undefined) return undefined
+  const first = Array.isArray(target) ? target[0] : target
+  return join(k8sUiRoot, star === undefined ? first : first.split('*').join(star))
+}
+
+// Everything radar-app publishes that can import from k8s-ui, stylesheets
+// included (vitest doesn't load CSS, so these are read from disk).
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name)
+    if (statSync(path).isDirectory()) return sourceFiles(path)
+    return /\.(ts|tsx|css)$/.test(name) && !/\.test\.(ts|tsx)$/.test(name) ? [path] : []
+  })
+}
+
+describe('@skyhook-io/k8s-ui deep imports', () => {
+  const imports = new Set<string>()
+  for (const file of sourceFiles(here)) {
+    // Any quoted specifier: `from` imports, side-effect and dynamic imports,
+    // and stylesheet @imports all resolve through the same map.
+    for (const m of readFileSync(file, 'utf8').matchAll(/['"]@skyhook-io\/k8s-ui\/([^'"]+)['"]/g)) {
+      imports.add(m[1])
+    }
+  }
+
+  test('finds the deep imports it checks, stylesheets included', () => {
+    expect(imports.size).toBeGreaterThan(10)
+    expect(imports).toContain('theme/variables.css')
+  })
+
+  test.each([...imports].sort())('%s resolves through the published exports map', (subpath) => {
+    const file = resolveExport(subpath)
+    expect(file, `no exports entry serves "@skyhook-io/k8s-ui/${subpath}"`).toBeDefined()
+    expect(existsSync(file!), `"@skyhook-io/k8s-ui/${subpath}" resolves to missing ${file}`).toBe(true)
+  })
+})

package/src/utils/navigation.test.ts

@@ -4,7 +4,7 @@ import {
   initNavigationMap,
   resetNavigationMap,
 } from '@skyhook-io/k8s-ui/utils/navigation'
-import { getNetworkPolicyResourceTarget, relatedResourcePath, resourcePath } from './navigation'
+import { getNetworkPolicyResourceTarget, relatedResourcePath, resourcePath, withCrossViewParams } from './navigation'
 
 afterEach(resetNavigationMap)
 
@@ -60,3 +60,19 @@ it('uses the Kubernetes kind for a Calico aggregate target', () => {
   expect(getNetworkPolicyResourceTarget({nodes: [{id: 'policy', kind: 'CalicoNetworkPolicy', name: 'allow', status: 'healthy', data: {apiVersion: 'crd.projectcalico.org/v1', resourceKind: 'NetworkPolicy'}}], edges: []} as unknown as Topology))
     .toEqual({kind: 'networkpolicies', group: 'crd.projectcalico.org'})
 })
+
+describe('withCrossViewParams', () => {
+  it('carries the namespace pick and open investigation onto a bare path', () => {
+    expect(withCrossViewParams('/gitops/argo/argocd/app', '?namespaces=a,b&ai-run=r1&tab=yaml'))
+      .toBe('/gitops/argo/argocd/app?namespaces=a%2Cb&ai-run=r1')
+  })
+
+  it('keeps what the path sets itself, and its hash', () => {
+    expect(withCrossViewParams('/resources/pods?namespaces=x#top', '?namespaces=a&ai-run=r1'))
+      .toBe('/resources/pods?namespaces=x&ai-run=r1#top')
+  })
+
+  it('leaves the path alone when nothing is scoped', () => {
+    expect(withCrossViewParams('/helm', '')).toBe('/helm')
+  })
+})

package/src/utils/navigation.ts

@@ -133,3 +133,19 @@ export function openExternal(url: string): void {
       window.open(url, '_blank')
     })
 }
+
+// setMainView's cross-view params. A navigation whose search omits
+// ?namespaces= reads as an empty pick to App's URL sync, which clears the
+// user's namespace scope.
+const CROSS_VIEW_PARAMS = ['namespaces', 'ai-run'] as const
+
+/** Carries the current cross-view params onto an in-app path that doesn't set them itself. */
+export function withCrossViewParams(path: string, currentSearch: string): string {
+  const destination = new URL(path, 'http://radar.invalid')
+  const current = new URLSearchParams(currentSearch)
+  for (const key of CROSS_VIEW_PARAMS) {
+    const value = current.get(key)
+    if (value && !destination.searchParams.has(key)) destination.searchParams.set(key, value)
+  }
+  return `${destination.pathname}${destination.search}${destination.hash}`
+}

package/src/utils/version.ts

@@ -32,6 +32,17 @@ function parseVersion(version: string): [major: number, minor: number, patch: nu
   return [Number(match[1]), Number(match[2]), Number(match[3]), !!match[4]]
 }
 
+/** Semver order (a prerelease sorts before its release); null when either side isn't a version. */
+export function compareVersions(a: string, b: string): number | null {
+  const x = parseVersion(a)
+  const y = parseVersion(b)
+  if (!x || !y) return null
+  for (let i = 0; i < 3; i++) {
+    if (x[i] !== y[i]) return (x[i] as number) - (y[i] as number)
+  }
+  return Number(y[3]) - Number(x[3])
+}
+
 export function getVersionUpdateStatus(current: string, latest?: string): VersionUpdateStatus {
   if (!latest) return { tier: 'none' }