@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/ui/Markdown.tsx

@@ -1,12 +1,11 @@
-import ReactMarkdown from 'react-markdown'
+import { createContext, useContext, useMemo } from 'react'
+import ReactMarkdown, { type Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { clsx } from 'clsx'
 
 import type { ReactNode } from 'react'
 
-interface MarkdownProps {
-  children: string
-  className?: string
+interface MarkdownHooks {
   /**
    * Intercepts links before the default anchor renders. Return null to fall
    * through. Lets a caller turn a reserved href (an in-page evidence
@@ -16,132 +15,150 @@ interface MarkdownProps {
   codeActions?: (code: string) => ReactNode
 }
 
+interface MarkdownProps extends MarkdownHooks {
+  children: string
+  className?: string
+}
+
+const MarkdownHooksContext = createContext<MarkdownHooks>({})
+
+const REMARK_PLUGINS = [remarkGfm]
+
+// Module-level so every render hands react-markdown the same component types.
+// A fresh map per render makes React unmount and remount the whole rendered
+// tree whenever the parent re-renders; WebKit then moves the scroll position
+// of any pane the text sits in. Per-call hooks arrive through context instead.
+const COMPONENTS: Components = {
+  h1: ({ children }) => (
+    <h1 className="text-lg font-bold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="text-base font-semibold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-sm font-semibold text-theme-text-primary mt-3 mb-1.5">{children}</h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className="text-sm font-medium text-theme-text-primary mt-2 mb-1">{children}</h4>
+  ),
+  p: ({ children }) => (
+    <p className="text-theme-text-secondary my-2 leading-relaxed">{children}</p>
+  ),
+  a: function MarkdownLink({ href, children }) {
+    const { linkRenderer } = useContext(MarkdownHooksContext)
+    const custom = linkRenderer?.(href, children)
+    if (custom !== null && custom !== undefined) return <>{custom}</>
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
+      >
+        {children}
+      </a>
+    )
+  },
+  ul: ({ children }) => (
+    <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="leading-relaxed">{children}</li>
+  ),
+  code: function MarkdownCode({ className, children }) {
+    const { codeActions } = useContext(MarkdownHooksContext)
+    const isInline = !className
+    if (isInline) {
+      const actions = codeActions?.(String(children))
+      if (actions) {
+        return (
+          <span className="inline-flex max-w-full items-start gap-1 align-middle">
+            <code className="inline-code min-w-0">{children}</code>
+            {actions}
+          </span>
+        )
+      }
+      return (
+        <code className="inline-code">
+          {children}
+        </code>
+      )
+    }
+    return (
+      <code className="block font-mono text-theme-text-secondary">{children}</code>
+    )
+  },
+  pre: function MarkdownPre({ children, node }) {
+    const { codeActions } = useContext(MarkdownHooksContext)
+    const code = node?.children[0]
+    const text = code?.type === 'element'
+      ? code.children.filter(child => child.type === 'text').map(child => child.value).join('')
+      : ''
+    const actions = codeActions?.(text)
+    if (actions) {
+      // Render the code directly so an unlabelled fence does not also
+      // receive the inline-code action. Only the code scrolls, not Copy.
+      return (
+        <pre className="my-3 flex items-start gap-2 rounded-lg bg-theme-elevated p-3 text-xs font-mono text-theme-text-secondary">
+          <code className="min-w-0 flex-1 overflow-x-auto">{text}</code>
+          {actions}
+        </pre>
+      )
+    }
+    return (
+      <pre className="my-3 p-3 bg-theme-elevated rounded-lg overflow-x-auto text-xs font-mono text-theme-text-secondary">
+        {children}
+      </pre>
+    )
+  },
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-2 border-theme-border pl-3 my-2 text-theme-text-tertiary italic">
+      {children}
+    </blockquote>
+  ),
+  table: ({ children }) => (
+    <div className="my-3 overflow-x-auto">
+      <table className="min-w-full border-collapse text-sm">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-theme-elevated">{children}</thead>
+  ),
+  tbody: ({ children }) => (
+    <tbody className="divide-y divide-theme-border">{children}</tbody>
+  ),
+  tr: ({ children }) => (
+    <tr className="border-b border-theme-border">{children}</tr>
+  ),
+  th: ({ children }) => (
+    <th className="px-3 py-2 text-left text-theme-text-primary font-medium border border-theme-border">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="px-3 py-2 text-theme-text-secondary border border-theme-border">{children}</td>
+  ),
+  hr: () => <hr className="my-4 border-theme-border" />,
+  strong: ({ children }) => (
+    <strong className="font-semibold text-theme-text-primary">{children}</strong>
+  ),
+  em: ({ children }) => (
+    <em className="italic">{children}</em>
+  ),
+}
+
 export function Markdown({ children, className, linkRenderer, codeActions }: MarkdownProps) {
+  const hooks = useMemo(() => ({ linkRenderer, codeActions }), [linkRenderer, codeActions])
   return (
     <div className={clsx('markdown-content', className)}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-        h1: ({ children }) => (
-          <h1 className="text-lg font-bold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h1>
-        ),
-        h2: ({ children }) => (
-          <h2 className="text-base font-semibold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h2>
-        ),
-        h3: ({ children }) => (
-          <h3 className="text-sm font-semibold text-theme-text-primary mt-3 mb-1.5">{children}</h3>
-        ),
-        h4: ({ children }) => (
-          <h4 className="text-sm font-medium text-theme-text-primary mt-2 mb-1">{children}</h4>
-        ),
-        p: ({ children }) => (
-          <p className="text-theme-text-secondary my-2 leading-relaxed">{children}</p>
-        ),
-        a: ({ href, children }) => {
-          const custom = linkRenderer?.(href, children)
-          if (custom !== null && custom !== undefined) return <>{custom}</>
-          return (
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
-            >
-              {children}
-            </a>
-          )
-        },
-        ul: ({ children }) => (
-          <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
-        ),
-        ol: ({ children }) => (
-          <ol className="list-decimal list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ol>
-        ),
-        li: ({ children }) => (
-          <li className="leading-relaxed">{children}</li>
-        ),
-        code: ({ className, children }) => {
-          const isInline = !className
-          if (isInline) {
-            const actions = codeActions?.(String(children))
-            if (actions) {
-              return (
-                <span className="inline-flex max-w-full items-start gap-1 align-middle">
-                  <code className="inline-code min-w-0">{children}</code>
-                  {actions}
-                </span>
-              )
-            }
-            return (
-              <code className="inline-code">
-                {children}
-              </code>
-            )
-          }
-          return (
-            <code className="block font-mono text-theme-text-secondary">{children}</code>
-          )
-        },
-        pre: ({ children, node }) => {
-          const code = node?.children[0]
-          const text = code?.type === 'element'
-            ? code.children.filter(child => child.type === 'text').map(child => child.value).join('')
-            : ''
-          const actions = codeActions?.(text)
-          if (actions) {
-            // Render the code directly so an unlabelled fence does not also
-            // receive the inline-code action. Only the code scrolls, not Copy.
-            return (
-              <pre className="my-3 flex items-start gap-2 rounded-lg bg-theme-elevated p-3 text-xs font-mono text-theme-text-secondary">
-                <code className="min-w-0 flex-1 overflow-x-auto">{text}</code>
-                {actions}
-              </pre>
-            )
-          }
-          return (
-            <pre className="my-3 p-3 bg-theme-elevated rounded-lg overflow-x-auto text-xs font-mono text-theme-text-secondary">
-              {children}
-            </pre>
-          )
-        },
-        blockquote: ({ children }) => (
-          <blockquote className="border-l-2 border-theme-border pl-3 my-2 text-theme-text-tertiary italic">
-            {children}
-          </blockquote>
-        ),
-        table: ({ children }) => (
-          <div className="my-3 overflow-x-auto">
-            <table className="min-w-full border-collapse text-sm">{children}</table>
-          </div>
-        ),
-        thead: ({ children }) => (
-          <thead className="bg-theme-elevated">{children}</thead>
-        ),
-        tbody: ({ children }) => (
-          <tbody className="divide-y divide-theme-border">{children}</tbody>
-        ),
-        tr: ({ children }) => (
-          <tr className="border-b border-theme-border">{children}</tr>
-        ),
-        th: ({ children }) => (
-          <th className="px-3 py-2 text-left text-theme-text-primary font-medium border border-theme-border">
-            {children}
-          </th>
-        ),
-        td: ({ children }) => (
-          <td className="px-3 py-2 text-theme-text-secondary border border-theme-border">{children}</td>
-        ),
-        hr: () => <hr className="my-4 border-theme-border" />,
-        strong: ({ children }) => (
-          <strong className="font-semibold text-theme-text-primary">{children}</strong>
-        ),
-        em: ({ children }) => (
-          <em className="italic">{children}</em>
-        ),
-      }}
-      >
-        {children}
-      </ReactMarkdown>
+      <MarkdownHooksContext.Provider value={hooks}>
+        <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={COMPONENTS}>
+          {children}
+        </ReactMarkdown>
+      </MarkdownHooksContext.Provider>
     </div>
   )
 }

package/src/components/whats-new/releaseNotes.ts

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react'
-import { Bot, GitCompareArrows, Layers, Network, RefreshCcw, Scale, ScrollText, SlidersHorizontal } from 'lucide-react'
+import { Bot, Database, GitCompareArrows, HardDrive, Hourglass, Layers, Network, RefreshCcw, Scale, ScrollText, SlidersHorizontal, Undo2 } from 'lucide-react'
 import { compareVersions } from '../../utils/version'
 
 export interface ReleaseHighlight {
@@ -47,6 +47,68 @@ export const CHANGELOG_URL = 'https://radarhq.io/changelog'
 // major release must have its own entry: scripts/check-whats-new.sh refuses to
 // release one without it.
 export const RELEASE_NOTES: ReleaseNotes[] = [
+  {
+    version: 'v1.17.0',
+    highlights: [
+      {
+        id: 'cloudnative-pg',
+        icon: Database,
+        title: 'CloudNativePG, end to end',
+        description: 'See which Postgres cluster needs attention and why, whether its backups would restore, and switch over, fence or restore with a review first.',
+        leadDescription: 'New views for CloudNativePG show which Postgres cluster needs attention and why, what each instance is doing, and whether its backups would actually let you restore. Create, restore, back up, switch over, fence and hibernate from Radar: you review exactly what will be written, then Radar follows the operation until it sees the outcome.',
+        importance: 9,
+        path: '/cnpg',
+        cta: 'Open CloudNativePG',
+      },
+      {
+        id: 'live-traffic-large-clusters',
+        icon: Network,
+        title: 'Live Traffic on large Cilium clusters',
+        description: 'Traffic is drawn per workload and stays fast on big clusters. Focus on one workload, or get a connection list when the map is too big.',
+        importance: 7,
+        path: '/traffic',
+        cta: 'Open Live Traffic',
+      },
+      {
+        id: 'gitops-revert-warnings',
+        icon: Undo2,
+        title: 'Know before an edit gets reverted',
+        description: 'Before Radar edits an object owned by Argo CD, Flux or Helm, it tells you whether the owner will undo the change.',
+        importance: 6,
+      },
+      {
+        id: 'stuck-deletion-issues',
+        icon: Hourglass,
+        title: 'Issues for stuck deletions',
+        description: "Helm uninstalls and custom resources stuck deleting raise issues, and so do volumes that can't attach to their node's machine type.",
+        importance: 6,
+        path: '/issues',
+        cta: 'Open Issues',
+      },
+      {
+        id: 'audit-unused-storage',
+        icon: HardDrive,
+        title: 'Cluster Audit finds unused storage',
+        description: 'Claims nothing uses, claims Pending for over a day, and Released PersistentVolumes, with their size and storage class.',
+        // Below v1.16's headline at its 0.75 weight, so an upgrade from v1.15
+        // still shows that card.
+        importance: 4,
+        path: '/checks',
+        cta: 'Open Checks',
+      },
+    ],
+    improvements: [
+      // The grid fills row by row: pair lines of similar length.
+      "Capacity explains why a node pool isn't scaling down",
+      'Nodes being removed show as removed, not failed',
+      'Helm actions on Flux releases change the right objects',
+      'Flux Sync with source matches flux reconcile --with-source',
+      'Topology links Services only to the Pods they select',
+      'Namespaces stuck Terminating show what holds them',
+      'Filters stay put when you switch kinds or sections',
+      'Skip an audit check per resource with an annotation',
+    ],
+  },
   {
     version: 'v1.16.0',
     highlights: [

package/src/components/workload/WorkloadView.test.ts

@@ -2,7 +2,8 @@ import { describe, expect, it } from 'vitest'
 
 import { gitOpsOwnerFromRelationships } from '@skyhook-io/k8s-ui'
 import type { Relationships } from '../../types'
-import { findInheritedGitOpsLookupRef, supportsBatchExecution } from './WorkloadView'
+import { collectServingRefs, supportsBatchExecution } from './WorkloadView'
+import { findInheritedGitOpsLookupRef } from '../../hooks/useResolvedGitOpsOwner'
 
 describe('findInheritedGitOpsLookupRef', () => {
   it('follows a referenced ReplicaSet to its parent workload for inherited ownership', () => {
@@ -74,3 +75,12 @@ describe('supportsBatchExecution', () => {
     expect(supportsBatchExecution('CronJob', 'cronjobs', 'batch')).toBe(true)
   })
 })
+
+
+describe('collectServingRefs', () => {
+  it('loads moved upstream resources while retaining exact API groups', () => {
+    const broker = { kind: 'Broker', group: 'eventing.knative.dev', namespace: 'demo', name: 'messages' }
+    const other = { ...broker, group: 'other.example' }
+    expect(collectServingRefs({ routedFrom: [broker, broker, other] })).toEqual([broker, other])
+  })
+})