@skyhook-io/radar-app 1.5.0 → 1.6.0

package/src/components/ui/command-items.ts

@@ -0,0 +1,178 @@
+import { useMemo } from 'react'
+import { Home, Network, List, Clock, Package, Activity, Sun, Stethoscope, DollarSign, ShieldCheck, GitBranch, AlertTriangle, Boxes, Server } from 'lucide-react'
+import { useNamespaces, useContexts } from '../../api/client'
+import { CORE_RESOURCES, useAPIResources } from '../../api/apiResources'
+import { getResourceIcon } from '../../utils/resource-icons'
+import { parseContextName } from '../../utils/context-name'
+
+// Drop the disambiguating " (source)" suffix the context list appends, so the
+// GKE/EKS/AKS parser sees the bare context name (mirrors the cluster picker).
+function stripSourceSuffix(name: string, source?: string): string {
+  if (!source) return name
+  const escaped = source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return name.replace(new RegExp(`\\s+\\(${escaped}(?:\\s+#\\d+)?\\)$`), '')
+}
+
+export type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'issues' | 'helm' | 'traffic' | 'cost' | 'checks' | 'gitops' | 'applications'
+
+export interface CommandItem {
+  id: string
+  label: string
+  sublabel?: string
+  category: string
+  icon?: React.ComponentType<{ className?: string }>
+  shortcut?: string
+  action: () => void
+  /** Extra terms to match against during search (not displayed). */
+  searchTerms?: string[]
+  /** Small priority bonus added to the final score (only if the item matched). */
+  priorityBonus?: number
+}
+
+// Built-in k8s API groups. Used to nudge these above CRDs on tied matches.
+const CORE_GROUP_BONUS = 10
+const WELL_KNOWN_GROUP_BONUS = 5
+const WELL_KNOWN_GROUPS = new Set([
+  'apps', 'batch', 'autoscaling', 'policy', 'networking.k8s.io', 'rbac.authorization.k8s.io',
+  'storage.k8s.io', 'scheduling.k8s.io', 'coordination.k8s.io', 'apiextensions.k8s.io',
+  'admissionregistration.k8s.io', 'apiregistration.k8s.io', 'certificates.k8s.io',
+  'events.k8s.io', 'discovery.k8s.io', 'flowcontrol.apiserver.k8s.io', 'node.k8s.io',
+  'authentication.k8s.io', 'authorization.k8s.io',
+])
+
+function groupPriorityBonus(group: string): number {
+  if (!group) return CORE_GROUP_BONUS
+  if (WELL_KNOWN_GROUPS.has(group)) return WELL_KNOWN_GROUP_BONUS
+  return 0
+}
+
+// Fuzzy match scoring: exact > prefix > word boundary > substring. Within a
+// tier, a coverage bonus (up to +20) breaks ties in favor of shorter labels.
+export function scoreMatch(text: string, query: string): number {
+  const lower = text.toLowerCase()
+  const q = query.toLowerCase()
+  if (!lower.includes(q)) return 0
+  let base: number
+  if (lower === q) base = 150
+  else if (lower.startsWith(q)) base = 100
+  else {
+    const wordStart = lower.indexOf(q)
+    const prev = lower[wordStart - 1]
+    base = wordStart > 0 && (prev === ' ' || prev === '/' || prev === '-' || prev === '.') ? 75 : 50
+  }
+  return base + (q.length / lower.length) * 20
+}
+
+export function bestScore(item: CommandItem, query: string): number {
+  let best = scoreMatch(item.label, query)
+  const secondary = Math.floor(Math.max(scoreMatch(item.sublabel || '', query), scoreMatch(item.category, query)) * 0.6)
+  best = Math.max(best, secondary)
+  if (item.searchTerms) {
+    for (const term of item.searchTerms) best = Math.max(best, scoreMatch(term, query))
+  }
+  return best > 0 ? best + (item.priorityBonus || 0) : 0
+}
+
+export interface CommandItemCallbacks {
+  onNavigateView: (view: MainView) => void
+  onNavigateKind: (kind: string, group: string) => void
+  onSwitchContext: (name: string) => void
+  onSetNamespaces: (ns: string[]) => void
+  onToggleTheme: () => void
+  onShowDiagnostics?: () => void
+}
+
+const VIEW_ENTRIES: { view: MainView; label: string; icon: React.ComponentType<{ className?: string }>; shortcut: string }[] = [
+  { view: 'home', label: 'Home', icon: Home, shortcut: 'g h' },
+  { view: 'resources', label: 'Resources', icon: List, shortcut: 'g r' },
+  { view: 'issues', label: 'Issues', icon: AlertTriangle, shortcut: 'g i' },
+  { view: 'topology', label: 'Topology', icon: Network, shortcut: 'g t' },
+  { view: 'applications', label: 'Applications', icon: Boxes, shortcut: 'g a' },
+  { view: 'timeline', label: 'Timeline', icon: Clock, shortcut: 'g l' },
+  { view: 'helm', label: 'Helm', icon: Package, shortcut: 'g m' },
+  { view: 'gitops', label: 'GitOps', icon: GitBranch, shortcut: 'g o' },
+  { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: 'g f' },
+  { view: 'checks', label: 'Checks', icon: ShieldCheck, shortcut: 'g u' },
+  { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: 'g c' },
+]
+
+// The static command-palette items (Views, Resource Kinds, Contexts,
+// Namespaces, Actions) — shared by the centered modal (embedded) and the
+// standalone omnibar so the two never drift.
+export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
+  const { data: namespacesData } = useNamespaces()
+  const { data: contexts } = useContexts()
+  const { data: apiResources } = useAPIResources()
+
+  return useMemo<CommandItem[]>(() => {
+    const result: CommandItem[] = []
+
+    for (const v of VIEW_ENTRIES) {
+      result.push({ id: `view-${v.view}`, label: `Go to ${v.label}`, category: 'Views', icon: v.icon, shortcut: v.shortcut, action: () => cb.onNavigateView(v.view) })
+    }
+
+    const resources = apiResources || CORE_RESOURCES
+    const seenKinds = new Set<string>()
+    for (const r of resources) {
+      if (!r.verbs?.includes('list')) continue
+      const kindKey = `${r.name}/${r.group}`
+      if (seenKinds.has(kindKey)) continue
+      seenKinds.add(kindKey)
+      result.push({
+        // Group shown only when it disambiguates (CRDs) — "core" is noise on
+        // built-in kinds. priorityBonus still nudges core/well-known above CRDs.
+        id: `kind-${r.name}-${r.group}`, label: r.kind, sublabel: r.group || undefined, category: 'Resource Kinds',
+        icon: getResourceIcon(r.kind), action: () => cb.onNavigateKind(r.name, r.group),
+        searchTerms: [r.name, r.kind], priorityBonus: groupPriorityBonus(r.group),
+      })
+    }
+
+    if (contexts) {
+      // Show the friendly parsed cluster name (like the cluster picker), not the
+      // raw ARN/gke context string. provider/region may live in the cluster id
+      // (e.g. EKS ARN) when the context name is already friendly — fall back to
+      // it. Count display names so genuine duplicates (same cluster name from
+      // different kubeconfig sources) stay distinguishable; unique ones stay clean.
+      const parsedCtx = contexts.map((ctx) => {
+        const parsed = parseContextName(stripSourceSuffix(ctx.name, ctx.source))
+        const fromCluster = ctx.cluster ? parseContextName(ctx.cluster) : null
+        const meta = [parsed.provider ?? fromCluster?.provider, parsed.region ?? fromCluster?.region].filter(Boolean).join(' · ')
+        return { ctx, clusterName: parsed.clusterName, account: parsed.account, base: ctx.isCurrent ? 'current' : meta }
+      })
+      // Disambiguate on the FINAL visible (label, sublabel) pair, not just the
+      // cluster name — same name + same provider/region from the same kubeconfig
+      // file would otherwise render identically while switching different
+      // contexts. Collisions fall back to the raw context name (unique by id).
+      const pairCount = new Map<string, number>()
+      for (const p of parsedCtx) pairCount.set(`${p.clusterName}\x00${p.base}`, (pairCount.get(`${p.clusterName}\x00${p.base}`) ?? 0) + 1)
+      for (const { ctx, clusterName, account, base } of parsedCtx) {
+        const collides = (pairCount.get(`${clusterName}\x00${base}`) ?? 0) > 1
+        const sub = [base, collides ? ctx.name : ''].filter(Boolean).join(' · ')
+        result.push({
+          id: `context-${ctx.name}`,
+          label: clusterName,
+          sublabel: sub || undefined,
+          category: 'Clusters',
+          icon: Server,
+          action: () => { if (!ctx.isCurrent) cb.onSwitchContext(ctx.name) },
+          searchTerms: [ctx.name, account || ''].filter(Boolean),
+        })
+      }
+    }
+
+    if (namespacesData) {
+      for (const ns of namespacesData) {
+        result.push({ id: `ns-${ns.name}`, label: ns.name, category: 'Namespaces', action: () => cb.onSetNamespaces([ns.name]) })
+      }
+      result.push({ id: 'ns-all', label: 'All Namespaces', category: 'Namespaces', action: () => cb.onSetNamespaces([]) })
+    }
+
+    result.push({ id: 'action-theme', label: 'Toggle Theme', category: 'Actions', icon: Sun, shortcut: 't', action: () => cb.onToggleTheme() })
+    if (cb.onShowDiagnostics) {
+      result.push({ id: 'action-diagnostics', label: 'Diagnostics', category: 'Actions', icon: Stethoscope, action: () => cb.onShowDiagnostics?.(), searchTerms: ['debug', 'health', 'status', 'snapshot'] })
+    }
+
+    return result
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiResources, contexts, namespacesData, cb.onNavigateView, cb.onNavigateKind, cb.onSwitchContext, cb.onSetNamespaces, cb.onToggleTheme, cb.onShowDiagnostics])
+}

package/src/components/workload/WorkloadView.tsx

@@ -270,6 +270,7 @@ export function WorkloadView({
   const resource = resourceResponse?.resource
   const relationships = resourceResponse?.relationships
   const certificateInfo = resourceResponse?.certificateInfo
+  const hpaDiagnosis = resourceResponse?.hpaDiagnosis
   const relationshipGitopsOwner = useMemo(() => gitOpsOwnerFromRelationships(relationships), [relationships])
   const inheritedGitOpsLookupRef = useMemo(
     () => findInheritedGitOpsLookupRef(relationships, relationshipGitopsOwner, { kind: kindProp, namespace, name, group: rest.group }),
@@ -478,6 +479,7 @@ export function WorkloadView({
       resource={resource}
       relationships={relationships}
       certificateInfo={certificateInfo}
+      hpaDiagnosis={hpaDiagnosis}
       isLoading={resourceLoading}
       resourceError={resourceError}
       refetch={refetchResource}
@@ -811,7 +813,7 @@ function AuditSection({ kind, namespace, name }: { kind: string; namespace: stri
   const navigate = useNavigate()
   const { data: findings } = useResourceAudit(kind, namespace, name)
   if (!findings || findings.length === 0) return null
-  return <AuditAlerts findings={findings} onViewAll={() => navigate('/audit')} />
+  return <AuditAlerts findings={findings} onViewAll={() => navigate('/checks')} />
 }
 
 // FluxSourceConsumersSection lists the reconcilers (Kustomization, HelmRelease)

package/src/context/NavCustomization.tsx

@@ -43,6 +43,17 @@ interface NavCustomizationBase {
    * keeps its single-cluster Audit tab.
    */
   clusterChecksHref?: () => string;
+  /**
+   * Chrome level for embedded hosts. Default ('full', or omitted) renders
+   * Radar's top bar + the view-switcher. 'none' suppresses BOTH — the host
+   * drives view navigation and cluster/namespace scope from its OWN chrome, and
+   * Radar renders just the active view's content full-bleed. Radar Hub uses this
+   * to surface per-cluster views (Topology / Resources / Traffic / Cost) that
+   * don't aggregate to the fleet as native cloud destinations under one chrome,
+   * gated by a cluster picker — instead of a second, redundant in-cluster nav.
+   * Only meaningful with `embedded: true`.
+   */
+  chrome?: 'full' | 'none';
 }
 
 /**

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+
+// Subscribe to a CSS media query. SSR-safe (returns false before mount) and
+// updates on viewport changes.
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false
+    return window.matchMedia(query).matches
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia(query)
+    const onChange = () => setMatches(mql.matches)
+    onChange()
+    mql.addEventListener('change', onChange)
+    return () => mql.removeEventListener('change', onChange)
+  }, [query])
+
+  return matches
+}

package/src/hooks/useNavRailPinned.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState } from 'react'
+
+// Pin state for the primary left nav rail.
+//
+// "Pinned" = the labeled, full-width sidebar; "unpinned" = the slim 56px
+// icon rail with hover fly-out labels. This is a single committed choice
+// the user makes once (default pinned), persisted to localStorage — NOT a
+// per-route auto-collapse. A rail whose width changes as you navigate is
+// disorienting; the rail is the stable anchor. A user who lives in the
+// wide table views (Resources, GitOps) unpins once and keeps their width;
+// fly-out labels + the ⌘K palette + `g`-mnemonic shortcuts cover the collapsed
+// state's discoverability.
+
+const STORAGE_KEY = 'radar.navRail.pinned'
+
+function readInitial(): boolean {
+  if (typeof window === 'undefined') return true
+  // `localStorage` access can throw (SecurityError) when storage is denied —
+  // sandboxed embeds, some privacy modes. Default to pinned (expanded), the
+  // friendlier first-run state for a non-k8s-expert; power users unpin once.
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) !== 'false'
+  } catch {
+    return true
+  }
+}
+
+export function useNavRailPinned(): {
+  pinned: boolean
+  togglePinned: () => void
+} {
+  const [pinned, setPinned] = useState(readInitial)
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, String(pinned))
+    } catch {
+      // Private-mode / quota failures shouldn't break nav — the in-memory
+      // state still drives this session; we just don't persist it.
+    }
+  }, [pinned])
+
+  const togglePinned = useCallback(() => setPinned((p) => !p), [])
+
+  return { pinned, togglePinned }
+}

package/src/hooks/useRecentResources.ts

@@ -0,0 +1,49 @@
+// Recently-opened resources, persisted to localStorage so the omnibar's empty
+// state can offer "jump back to what I was just looking at" across reloads.
+// Plain functions (not a stateful hook): the omnibar reads fresh each time it
+// opens and writes on open, so two component instances never need to sync.
+
+export interface RecentResource {
+  kind: string
+  group?: string
+  namespace?: string
+  name: string
+}
+
+const KEY = 'radar-recent-resources'
+const MAX = 7
+
+// Partition by the current cluster/context: a resource is identified by
+// (kind, ns, name) WITHIN a cluster, so a global store would surface the prior
+// cluster's names after a context switch and open ns/name in the wrong cluster.
+// An UNKNOWN context (key still loading) is a hard no-op — no shared fallback
+// bucket — so a recent is never read or written against an indeterminate cluster.
+function storageKey(contextKey: string): string {
+  return `${KEY}::${contextKey}`
+}
+
+function keyOf(r: RecentResource): string {
+  return `${r.kind}\x00${r.group || ''}\x00${r.namespace || ''}\x00${r.name}`
+}
+
+export function loadRecentResources(contextKey: string): RecentResource[] {
+  if (!contextKey) return []
+  try {
+    const raw = localStorage.getItem(storageKey(contextKey))
+    if (raw) return JSON.parse(raw)
+  } catch {
+    // ignore parse/storage errors — recents are best-effort
+  }
+  return []
+}
+
+export function recordRecentResource(r: RecentResource, contextKey: string): void {
+  if (!r.name || !r.kind || !contextKey) return
+  try {
+    const k = keyOf(r)
+    const next = [r, ...loadRecentResources(contextKey).filter((x) => keyOf(x) !== k)].slice(0, MAX)
+    localStorage.setItem(storageKey(contextKey), JSON.stringify(next))
+  } catch {
+    // ignore storage errors
+  }
+}

package/src/utils/navigation.ts

@@ -1,6 +1,17 @@
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
 import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
 import type { SelectedResource } from '@skyhook-io/k8s-ui/types/core'
+import type { SearchHit } from '../api/client'
+
+/**
+ * Map a resource-search Hit to a SelectedResource. Hit.kind is the singular
+ * Kind (e.g. "Deployment"); downstream openers pluralize. `group` is carried so
+ * CRD/core collisions disambiguate (Service vs Knative Service), and the
+ * namespace defaults to '' for cluster-scoped hits (Node/Namespace/PV).
+ */
+export function searchHitToSelectedResource(hit: SearchHit): SelectedResource {
+  return { kind: hit.kind, namespace: hit.namespace ?? '', name: hit.name, group: hit.group || undefined }
+}
 
 // Re-export shared navigation utilities from @skyhook-io/k8s-ui.
 export { kindToPlural, pluralToKind, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'