@skyhook-io/radar-app 1.1.1 → 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;
 }
 
 /**