@skyhook-io/radar-app 1.1.0 → 1.1.2

package/src/components/workload/WorkloadView.tsx

@@ -23,6 +23,9 @@ import {
   fetchJSON,
 } from '../../api/client'
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
+import { PrometheusChartsGrid } from '../resource/PrometheusChartsGrid'
+import { RestartEventLane } from '../resource/RestartChart'
+import { RightsizingStrip } from '../resource/RightsizingStrip'
 import { useResourceAudit, useResources } from '../../api/client'
 import { AuditAlerts } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
@@ -35,15 +38,30 @@ import { PodRenderer } from '../resources/renderers/PodRenderer'
 import { NodeRenderer } from '../resources/renderers/NodeRenderer'
 import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
 import { WorkloadRenderer } from '../resources/renderers/WorkloadRenderer'
+import { CompositeRenderer } from '../resources/CompositeRenderer'
+import { ServiceAccountRenderer } from '../resources/renderers/ServiceAccountRenderer'
+import { RoleRenderer } from '../resources/renderers/RoleRenderer'
+import { RoleBindingRenderer } from '../resources/renderers/RoleBindingRenderer'
+import { NamespaceRenderer } from '../resources/renderers/NamespaceRenderer'
+import { HPARenderer } from '../resources/renderers/HPARenderer'
+import { PVCRenderer } from '../resources/renderers/PVCRenderer'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { cleanYamlForDuplicate } from '../../utils/skeleton-yaml'
 import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+import { useCompareLauncher } from '../compare/useCompareLauncher'
+import { apiVersionToGroup } from '../../utils/navigation'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
 
 // Stable reference — web renderer wrappers inject platform hooks internally
 const rendererOverrides: RendererOverrides = {
-  PodRenderer, NodeRenderer, ServiceRenderer, WorkloadRenderer,
+  PodRenderer, NodeRenderer, ServiceRenderer, WorkloadRenderer, CompositeRenderer,
+  ServiceAccountRenderer,
+  RoleRenderer,
+  RoleBindingRenderer,
+  NamespaceRenderer,
+  HPARenderer,
+  PVCRenderer,
 }
 
 // ============================================================================
@@ -323,9 +341,27 @@ export function WorkloadView({
   // RBAC
   const canUpdateSecrets = useCanUpdateSecrets()
   const updateResource = useUpdateResource()
-  const actionsBarProps = useActionsBarProps(kindProp, namespace, name)
+  const baseActionsBarProps = useActionsBarProps(kindProp, namespace, name)
   const desktopDownload = useDesktopDownload()
 
+  const resourceGroup = useMemo(
+    () => (resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : undefined),
+    [resource?.apiVersion],
+  )
+  const { onCompareTo, onCompareAcrossClusters, picker: comparePicker } = useCompareLauncher({
+    kind: kindProp,
+    namespace,
+    name,
+    // Prefer the URL-supplied group so Compare works even before the resource
+    // fetch completes; fall back to the derived group for callers that don't
+    // pass one.
+    group: rest.group || resourceGroup || undefined,
+  })
+  const actionsBarProps = useMemo(
+    () => ({ ...baseActionsBarProps, onCompareTo, onCompareAcrossClusters }),
+    [baseActionsBarProps, onCompareTo, onCompareAcrossClusters],
+  )
+
   const handleUpdateResource = useCallback(async (params: { kind: string; namespace: string; name: string; yaml: string }) => {
     await updateResource.mutateAsync(params)
   }, [updateResource])
@@ -384,7 +420,7 @@ export function WorkloadView({
       // Render props
       renderLogsTab={(props) => <LogsTabContent {...props} />}
       renderMetricsTab={({ kind, namespace: ns, name: n }) => (
-        <PrometheusCharts kind={kind} namespace={ns} name={n} showEmptyState />
+        <MetricsTabContent kind={kind} namespace={ns} name={n} resource={resource} expanded={expanded} />
       )}
       isMetricsAvailable={(kind, res) =>
         isPrometheusSupported(kind) && !(kind === 'Pod' && res?.status?.phase === 'Pending')
@@ -412,6 +448,7 @@ export function WorkloadView({
         rest.onNavigateToResource?.({ kind: kindToPlural(result.kind), namespace: result.namespace, name: result.name, group: '' })
       }}
     />
+    {comparePicker}
     </>
   )
 }
@@ -651,6 +688,73 @@ function FluxSourceConsumersInner({ sourceKind, namespace, name }: { sourceKind:
   )
 }
 
+// Drawer mode: single chart + category tabs (compact for ~500px width).
+// Full-screen mode: multi-chart grid so CPU + Memory + Network can be
+// compared side-by-side without tab switching.
+function MetricsTabContent({ kind, namespace, name, resource, expanded }: {
+  kind: string
+  namespace: string
+  name: string
+  resource: any
+  expanded: boolean
+}) {
+  const showRightsizing = expanded && ['Deployment', 'StatefulSet', 'DaemonSet'].includes(kind)
+
+  if (expanded) {
+    return (
+      <div className="flex flex-col h-full">
+        {showRightsizing && (
+          <div className="px-4 pt-4">
+            <RightsizingStrip kind={kind} namespace={namespace} name={name} />
+          </div>
+        )}
+        <div className="flex-1 min-h-0">
+          <PrometheusChartsGrid
+            kind={kind}
+            namespace={namespace}
+            name={name}
+            resource={resource}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Drawer fallback: single chart with tabs + restart lane below. The chart's
+  // time-range selector is mirrored to the restart lane so they stay aligned.
+  return (
+    <DrawerMetricsContent
+      kind={kind}
+      namespace={namespace}
+      name={name}
+      resource={resource}
+    />
+  )
+}
+
+function DrawerMetricsContent({ kind, namespace, name, resource }: {
+  kind: string
+  namespace: string
+  name: string
+  resource: any
+}) {
+  const [chartRange, setChartRange] = useState<import('../../api/client').PrometheusTimeRange>('1h')
+  const showRestartLane = kind !== 'Node'
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 min-h-0">
+        <PrometheusCharts kind={kind} namespace={namespace} name={name} showEmptyState resource={resource} onTimeRangeChange={setChartRange} />
+      </div>
+      {showRestartLane && (
+        <div className="px-4 pb-4">
+          <RestartEventLane kind={kind} namespace={namespace} name={name} range={chartRange} />
+        </div>
+      )}
+    </div>
+  )
+}
+
 // FLUX_SOURCE_KIND_BY_LOWER maps lowercase kind (what the inner WorkloadView
 // produces via its plural-to-singular fallback) to the wire-correct
 // PascalCase form that consumers carry in spec.sourceRef.kind. HelmChart is

package/src/context/NavCustomization.tsx

@@ -18,6 +18,19 @@ interface NavCustomizationBase {
   brandSlot?: ReactNode;
   /** Replaces the ContextSwitcher (kubeconfig-context picker). */
   contextSlot?: ReactNode;
+  /**
+   * When set, a "Compare across clusters" option is added to the Compare
+   * button in resource action bars. The host returns the URL that should
+   * be navigated to (via window.location.assign — typically a hub fleet
+   * route). Standalone Radar omits this and the compare action stays
+   * single-cluster.
+   */
+  crossClusterCompareHref?: (ref: {
+    kind: string;
+    namespace: string;
+    name: string;
+    group?: string;
+  }) => string;
 }
 
 /**

package/src/contexts/CapabilitiesContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo, ReactNode } from 'react'
 import { useCapabilities, useNamespaceCapabilities } from '../api/client'
-import type { Capabilities, ResourcePermissions } from '../types'
+import { OPTIONAL_RESOURCE_KINDS, type Capabilities, type ResourcePermissions } from '../types'
 
 // Default capabilities for local development (when running locally, all features work)
 const defaultCapabilities: Capabilities = {
@@ -100,12 +100,17 @@ export function useResourcePermissions(): ResourcePermissions | undefined {
   return useContext(CapabilitiesContext).resources
 }
 
+// See OPTIONAL_RESOURCE_KINDS for why these are filtered.
+function isOptionalKind(kind: string): boolean {
+  return (OPTIONAL_RESOURCE_KINDS as ReadonlyArray<string>).includes(kind)
+}
+
 export function useRestrictedResources(): string[] {
   const resources = useContext(CapabilitiesContext).resources
   return useMemo(() => {
     if (!resources) return []
     return Object.entries(resources)
-      .filter(([, allowed]) => !allowed)
+      .filter(([kind, allowed]) => !allowed && !isOptionalKind(kind))
       .map(([kind]) => kind)
   }, [resources])
 }
@@ -113,7 +118,7 @@ export function useRestrictedResources(): string[] {
 export function useHasLimitedAccess(): boolean {
   const resources = useContext(CapabilitiesContext).resources
   if (!resources) return false
-  return Object.values(resources).some(allowed => !allowed)
+  return Object.entries(resources).some(([kind, allowed]) => !allowed && !isOptionalKind(kind))
 }
 
 // Namespace-scoped capability hooks: lazily re-check exec/logs/portForward

package/src/components/gitops/RollbackDialog.tsx

@@ -1,107 +0,0 @@
-import { useState, useEffect } from 'react'
-import { DialogPortal } from '@skyhook-io/k8s-ui'
-import { History, Loader2 } from 'lucide-react'
-import { Tooltip } from '../ui/Tooltip'
-
-interface RollbackDialogProps {
-  open: boolean
-  // Identifies the target history entry. Caller provides the user-visible
-  // revision (mono SHA / tag) and the API id; Argo uses id, the user reads
-  // the revision.
-  appLabel: string
-  revision: string
-  historyId?: string
-  pending?: boolean
-  onCancel: () => void
-  onConfirm: (opts: { prune: boolean; dryRun: boolean }) => void
-}
-
-// Confirms an Argo Application rollback. Defaults are conservative — no
-// prune (avoid surprise deletions), no dry run (just do it). Operators
-// who want to preview check Dry Run; the result lands in Activity.
-export function RollbackDialog({ open, appLabel, revision, historyId, pending, onCancel, onConfirm }: RollbackDialogProps) {
-  const [prune, setPrune] = useState(false)
-  const [dryRun, setDryRun] = useState(false)
-
-  useEffect(() => {
-    if (open) {
-      setPrune(false)
-      setDryRun(false)
-    }
-  }, [open])
-
-  return (
-    <DialogPortal open={open} onClose={pending ? () => {} : onCancel} className="w-[440px]" closable={!pending}>
-      <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">Roll back application</h2>
-        <p className="mt-0.5 text-xs text-theme-text-tertiary">{appLabel}</p>
-      </div>
-      <div className="space-y-4 px-4 py-4 text-sm">
-        <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-          Argo will sync this application to a previous revision. This is a write operation on the cluster.
-        </div>
-        <dl className="grid grid-cols-[80px_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs">
-          <dt className="text-theme-text-tertiary">Revision</dt>
-          <dd className="min-w-0">
-            <Tooltip content={revision} delay={400} disabled={!revision} wrapperClassName="block max-w-full">
-              <span className="block truncate font-mono text-theme-text-primary">{revision || '-'}</span>
-            </Tooltip>
-          </dd>
-          {historyId && (
-            <>
-              <dt className="text-theme-text-tertiary">History ID</dt>
-              <dd className="font-mono text-theme-text-primary">#{historyId}</dd>
-            </>
-          )}
-        </dl>
-        <div className="space-y-2">
-          <label className="flex items-start gap-2">
-            <input
-              type="checkbox"
-              checked={prune}
-              onChange={(e) => setPrune(e.target.checked)}
-              disabled={pending}
-              className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
-            />
-            <div className="min-w-0">
-              <div className="text-xs text-theme-text-primary">Prune resources added since this revision</div>
-              <div className="text-[11px] text-theme-text-tertiary">Off by default — leaves any resources created after this revision untouched.</div>
-            </div>
-          </label>
-          <label className="flex items-start gap-2">
-            <input
-              type="checkbox"
-              checked={dryRun}
-              onChange={(e) => setDryRun(e.target.checked)}
-              disabled={pending}
-              className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
-            />
-            <div className="min-w-0">
-              <div className="text-xs text-theme-text-primary">Dry run</div>
-              <div className="text-[11px] text-theme-text-tertiary">Preview the rollback without applying it.</div>
-            </div>
-          </label>
-        </div>
-      </div>
-      <div className="flex items-center justify-end gap-2 border-t border-theme-border bg-theme-base px-4 py-3">
-        <button
-          type="button"
-          onClick={onCancel}
-          disabled={pending}
-          className="rounded-md border border-theme-border bg-theme-surface px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          Cancel
-        </button>
-        <button
-          type="button"
-          onClick={() => onConfirm({ prune, dryRun })}
-          disabled={pending}
-          className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-amber-400"
-        >
-          {pending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <History className="h-3.5 w-3.5" />}
-          {dryRun ? 'Run dry-run' : 'Roll back'}
-        </button>
-      </div>
-    </DialogPortal>
-  )
-}

package/src/components/gitops/SyncOptionsDialog.tsx

@@ -1,144 +0,0 @@
-import { useState, useEffect, type ComponentType } from 'react'
-import { DialogPortal } from '@skyhook-io/k8s-ui'
-import { Loader2, RefreshCw } from 'lucide-react'
-
-interface SyncOptionsDialogProps {
-  open: boolean
-  appLabel: string
-  pending?: boolean
-  onCancel: () => void
-  onConfirm: (opts: {
-    revision?: string
-    prune: boolean
-    dryRun: boolean
-    force: boolean
-    applyOnly: boolean
-    syncOptions: string[]
-  }) => void
-}
-
-// Modeled on ArgoCD's Sync drawer. Single Sync-now button at the bottom;
-// defaults are "what most users want" (prune true, no dry-run, no force)
-// so the common path is two clicks. Revision is optional and falls
-// through to whatever Argo had targeted before.
-export function SyncOptionsDialog({ open, appLabel, pending, onCancel, onConfirm }: SyncOptionsDialogProps) {
-  const [revision, setRevision] = useState('')
-  const [prune, setPrune] = useState(true)
-  const [dryRun, setDryRun] = useState(false)
-  const [force, setForce] = useState(false)
-  const [applyOnly, setApplyOnly] = useState(false)
-  const [replace, setReplace] = useState(false)
-  const [serverSideApply, setServerSideApply] = useState(false)
-
-  // Reset on each open so a previous attempt's flags don't leak into the
-  // next sync — easy footgun in modal-heavy flows.
-  useEffect(() => {
-    if (open) {
-      setRevision('')
-      setPrune(true)
-      setDryRun(false)
-      setForce(false)
-      setApplyOnly(false)
-      setReplace(false)
-      setServerSideApply(false)
-    }
-  }, [open])
-
-  function submit() {
-    const syncOptions: string[] = []
-    if (replace) syncOptions.push('Replace=true')
-    if (serverSideApply) syncOptions.push('ServerSideApply=true')
-    onConfirm({
-      revision: revision.trim() || undefined,
-      prune,
-      dryRun,
-      force,
-      applyOnly,
-      syncOptions,
-    })
-  }
-
-  return (
-    <DialogPortal open={open} onClose={pending ? () => {} : onCancel} className="w-[480px]" closable={!pending}>
-      <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">Sync application</h2>
-        <p className="mt-0.5 text-xs text-theme-text-tertiary">{appLabel}</p>
-      </div>
-      <div className="space-y-4 px-4 py-4 text-sm">
-        <label className="block">
-          <span className="text-xs font-medium text-theme-text-secondary">Revision (optional)</span>
-          <input
-            type="text"
-            value={revision}
-            onChange={(e) => setRevision(e.target.value)}
-            placeholder="HEAD"
-            disabled={pending}
-            className="mt-1 w-full rounded-md border border-theme-border bg-theme-base px-2 py-1.5 font-mono text-xs text-theme-text-primary outline-none placeholder:text-theme-text-tertiary focus:border-sky-500"
-          />
-          <span className="mt-0.5 block text-[11px] text-theme-text-tertiary">
-            Branch, tag, or commit SHA. Leave empty to use the Application's targetRevision.
-          </span>
-        </label>
-
-        {/* Common (Prune / Dry run) sit above a divider; Advanced toggles
-            stay accessible but visually subordinate so the common-case user
-            can scan past them without parsing every helper line. */}
-        <fieldset className="space-y-2">
-          <legend className="mb-1 text-xs font-medium text-theme-text-secondary">Sync options</legend>
-          <Toggle label="Prune" checked={prune} onChange={setPrune} disabled={pending} hint="Delete resources that are no longer in Git." />
-          <Toggle label="Dry run" checked={dryRun} onChange={setDryRun} disabled={pending} hint="Preview only — Argo computes the diff but applies nothing." />
-        </fieldset>
-        <fieldset className="space-y-2 border-t border-theme-border pt-3">
-          <legend className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Advanced</legend>
-          <Toggle label="Apply only" checked={applyOnly} onChange={setApplyOnly} disabled={pending} hint="Skip PreSync / PostSync / SyncFail hooks." />
-          <Toggle label="Force" checked={force} onChange={setForce} disabled={pending} hint="Use kubectl --force; required for some immutable-field changes." />
-          <Toggle label="Replace" checked={replace} onChange={setReplace} disabled={pending} hint="kubectl replace instead of apply (drops fields not in source)." />
-          <Toggle label="Server-side apply" checked={serverSideApply} onChange={setServerSideApply} disabled={pending} hint="Use the K8s server-side apply mechanism for ownership tracking." />
-        </fieldset>
-      </div>
-      <div className="flex items-center justify-end gap-2 border-t border-theme-border bg-theme-base px-4 py-3">
-        <button
-          type="button"
-          onClick={onCancel}
-          disabled={pending}
-          className="rounded-md border border-theme-border bg-theme-surface px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          Cancel
-        </button>
-        <PrimaryButton onClick={submit} disabled={pending} icon={pending ? Loader2 : RefreshCw} loading={pending} label={dryRun ? 'Run dry-run' : 'Sync now'} />
-      </div>
-    </DialogPortal>
-  )
-}
-
-function Toggle({ label, checked, onChange, disabled, hint }: { label: string; checked: boolean; onChange: (v: boolean) => void; disabled?: boolean; hint?: string }) {
-  return (
-    <label className="flex items-start gap-2">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange(e.target.checked)}
-        disabled={disabled}
-        className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
-      />
-      <div className="min-w-0">
-        <div className="text-xs text-theme-text-primary">{label}</div>
-        {hint && <div className="text-[11px] text-theme-text-tertiary">{hint}</div>}
-      </div>
-    </label>
-  )
-}
-
-function PrimaryButton({ onClick, disabled, icon: Icon, loading, label }: { onClick: () => void; disabled?: boolean; icon: ComponentType<{ className?: string }>; loading?: boolean; label: string }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="btn-brand inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
-    >
-      <Icon className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
-      {label}
-    </button>
-  )
-}