@skyhook-io/k8s-ui 1.5.13 → 1.6.0

package/src/components/workload/WorkloadView.tsx

@@ -7,6 +7,7 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
 import {
   ArrowLeft,
+  ArrowRight,
   RefreshCw,
   Activity,
   Terminal,
@@ -22,6 +23,8 @@ import {
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { refToSelectedResource, pluralToKind } from '../../utils/navigation'
+import { detectGitOpsOwner, type GitOpsOwnerRef } from '../../utils/gitops-owner'
+import { gitOpsRouteForResource } from '../../utils/gitops-route'
 import { isChangeEvent, isHistoricalEvent } from '../../types'
 import { getKindBadgeColor, getHealthBadgeColor } from '../../utils/badge-colors'
 import { buildResourceHierarchy, getAllEventsFromHierarchy, isProblematicEvent, type ResourceLane } from '../../utils/resource-hierarchy'
@@ -41,6 +44,7 @@ import {
 import { ResourceActionsBar } from '../shared/ResourceActionsBar'
 import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlView'
 import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
+import { ManagedByChip } from '../shared/ManagedByChip'
 import { getKindColorOutline, formatKindName } from '../ui/drawer-components'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -110,6 +114,24 @@ interface WorkloadViewProps {
   /** Called when tab changes (for URL sync etc.) */
   onTabChange?: (tab: TabType) => void
 
+  // ── GitOps navigation ─────────────────────────────────────────────────────
+  /**
+   * Open the GitOps detail page for a controller (Argo Application,
+   * Flux Kustomization, Flux HelmRelease). The drawer's "Managed by" chip
+   * invokes this when the user clicks through; if not provided, the chip
+   * is rendered as a non-interactive label so the relationship is still
+   * visible (useful for hosts that haven't routed the GitOps tab yet).
+   */
+  onOpenGitOpsResource?: (ref: GitOpsOwnerRef) => void
+  /**
+   * Open the GitOps detail page for the resource itself, when the resource
+   * is a portal-classified GitOps CR (Argo Application/ApplicationSet/
+   * AppProject, Flux Kustomization/HelmRelease). Wired in addition to
+   * `onOpenGitOpsResource` because the URL is derived here from the live
+   * resource rather than from owner labels on a managed object.
+   */
+  onNavigateGitOpsPath?: (path: string) => void
+
   // ── Render props for platform-specific content ───────────────────────────
   /** Render the logs tab content */
   renderLogsTab?: (props: {
@@ -135,6 +157,10 @@ interface WorkloadViewProps {
   /** Duplicate handler — opens create dialog with this resource's YAML */
   onDuplicate?: (params: { kind: string; namespace: string; name: string; yaml: string }) => void
 
+  // ── Download ─────────────────────────────────────────────────────────────
+  /** Forwarded to EditableYamlView; see there. */
+  onDownload?: (content: string, mime: string, filename: string) => void
+
   // ── ResourceActionsBar props (passed through) ────────────────────────────
   /** All props for the actions bar (forwarded as-is) */
   actionsBarProps?: Record<string, any>
@@ -186,6 +212,7 @@ export function WorkloadView({
   isMetricsAvailable,
   // Duplicate
   onDuplicate,
+  onDownload,
   renderOverviewExtra,
   // Actions bar
   actionsBarProps,
@@ -193,6 +220,9 @@ export function WorkloadView({
   rendererOverrides,
   // Pod env expansion
   resolvedEnvFrom,
+  // GitOps
+  onOpenGitOpsResource,
+  onNavigateGitOpsPath,
 }: WorkloadViewProps) {
   // Normalize kind: URL has plural lowercase, internal logic uses singular PascalCase
   const kind = pluralToKind(kindProp)
@@ -281,6 +311,12 @@ export function WorkloadView({
 
   // Metadata
   const metadata = useMemo(() => extractMetadata(kind, resource), [kind, resource])
+  const gitopsOwner = useMemo(() => detectGitOpsOwner(resource), [resource])
+  // When the resource itself is a portal GitOps CR (Application, Kustomization,
+  // HelmRelease, etc.), surface a link to its dedicated GitOps detail page —
+  // the drawer's renderer is thorough but the tab has the tree + insights +
+  // operations the drawer can't reproduce inline.
+  const gitOpsResourcePath = useMemo(() => gitOpsRouteForResource(resource), [resource])
 
   // Copy to clipboard
   const copyToClipboard = useCallback((text: string, key: string) => {
@@ -425,6 +461,14 @@ export function WorkloadView({
               </button>
             </div>
             <p className="text-sm text-theme-text-tertiary">{namespace}</p>
+            {(gitopsOwner || (gitOpsResourcePath && onNavigateGitOpsPath)) && (
+              <div className="mt-1 flex flex-wrap items-center gap-1.5">
+                {gitopsOwner && <ManagedByChip owner={gitopsOwner} onOpen={onOpenGitOpsResource} />}
+                {gitOpsResourcePath && onNavigateGitOpsPath && (
+                  <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
+                )}
+              </div>
+            )}
           </div>
 
           {/* Actions bar */}
@@ -451,6 +495,7 @@ export function WorkloadView({
               isSaving={isUpdatingResource}
               saveError={updateResourceError}
               onDuplicate={onDuplicate}
+              onDownload={onDownload}
             />
           ) : (
             <>
@@ -527,6 +572,12 @@ export function WorkloadView({
               {metadata.find(m => m.label === 'Image') && (
                 <span className="truncate max-w-md font-mono text-xs">{metadata.find(m => m.label === 'Image')?.value}</span>
               )}
+              {gitopsOwner && (
+                <ManagedByChip owner={gitopsOwner} onOpen={onOpenGitOpsResource} variant="block" />
+              )}
+              {gitOpsResourcePath && onNavigateGitOpsPath && (
+                <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
+              )}
               {relationships?.owner && (
                 <span>Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
               )}
@@ -675,6 +726,7 @@ export function WorkloadView({
                 isSaving={isUpdatingResource}
                 saveError={updateResourceError}
                 onDuplicate={onDuplicate}
+                onDownload={onDownload}
               />
             )}
           </div>
@@ -725,6 +777,20 @@ function extractMetadata(kind: string, resource: any): { label: string; value: s
 // SUB-COMPONENTS
 // ============================================================================
 
+function OpenInGitOpsChip({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title="Open this resource in the GitOps tab (tree + insights + ops)"
+      className="inline-flex items-center gap-1 rounded border border-skyhook-500/40 bg-skyhook-500/10 px-1.5 py-0.5 text-[11px] font-medium text-skyhook-500 hover:bg-skyhook-500/20 transition-colors"
+    >
+      Open in GitOps
+      <ArrowRight className="h-3 w-3 shrink-0" />
+    </button>
+  )
+}
+
 function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button

package/src/hooks/useKeyboardShortcuts.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 
-export type ShortcutScope = 'global' | 'topology' | 'resources' | 'timeline' | 'helm' | 'traffic' | 'drawer'
+export type ShortcutScope = 'global' | 'topology' | 'resources' | 'timeline' | 'helm' | 'gitops' | 'traffic' | 'drawer'
 
 // Scope priority: higher number = higher priority (wins when multiple scopes active)
 const SCOPE_PRIORITY: Record<ShortcutScope, number> = {
@@ -9,11 +9,12 @@ const SCOPE_PRIORITY: Record<ShortcutScope, number> = {
   resources: 1,
   timeline: 1,
   helm: 1,
+  gitops: 1,
   traffic: 1,
   drawer: 2,
 }
 
-export type ShortcutCategory = 'Navigation' | 'Search' | 'Resource Actions' | 'Table' | 'General' | 'Topology' | 'Timeline' | 'Helm' | 'Drawer' | 'Dock'
+export type ShortcutCategory = 'Navigation' | 'Search' | 'Resource Actions' | 'Table' | 'General' | 'Topology' | 'Timeline' | 'Helm' | 'GitOps' | 'Drawer' | 'Dock'
 
 export interface KeyboardShortcut {
   /** Unique ID for this shortcut */

package/src/index.ts

@@ -22,6 +22,9 @@ export * from './components/logs'
 // Timeline
 export * from './components/timeline'
 
+// GitOps
+export * from './components/gitops'
+
 // Shared components (ResourceRendererDispatch, EditableYamlView, ResourceActionsBar)
 export * from './components/shared'
 

package/src/types/core.ts

@@ -20,6 +20,10 @@ export interface ResourcePermissions {
   hpas: boolean
   gateways: boolean
   httpRoutes: boolean
+  roles: boolean
+  clusterRoles: boolean
+  roleBindings: boolean
+  clusterRoleBindings: boolean
 }
 
 // Feature capabilities based on RBAC permissions
@@ -233,6 +237,7 @@ export interface TimelineEvent {
 
   // Resource identity
   kind: string
+  apiVersion?: string // e.g. "apps/v1", "cluster.x-k8s.io/v1beta1"
   namespace: string
   name: string
   uid?: string
@@ -454,6 +459,11 @@ export interface HelmRelease {
   resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
   healthIssue?: string    // Primary issue if unhealthy (e.g., "OOMKilled")
   healthSummary?: string  // Brief summary like "2/3 pods ready"
+  // When set, this release was installed by Flux's helm-controller — the
+  // user should manage it via the named HelmRelease CR (GitOps tab) rather
+  // than helm CLI / Radar's Helm view, since changes here would get
+  // reverted at the next reconcile. Format: "namespace/name".
+  managedByFluxHelmRelease?: string
 }
 
 export interface HelmRevision {
@@ -483,6 +493,9 @@ export interface HelmReleaseDetail {
   hooks?: HelmHook[]
   readme?: string
   dependencies?: ChartDependency[]
+  // When set, this release was installed by Flux's helm-controller — see
+  // HelmRelease.managedByFluxHelmRelease for context. Format: "namespace/name".
+  managedByFluxHelmRelease?: string
 }
 
 export interface HelmHook {
@@ -503,6 +516,7 @@ export interface ChartDependency {
 
 export interface HelmOwnedResource {
   kind: string
+  apiVersion?: string // e.g. "apps/v1", "cluster.x-k8s.io/v1beta1"
   name: string
   namespace: string
   status?: string   // Running, Pending, Failed, Active, etc.
@@ -886,8 +900,11 @@ export interface TrafficFilters {
   timeRange: string
 }
 
-// Main view type now includes 'traffic' and 'cost'
-export type ExtendedMainView = MainView | 'traffic' | 'cost' | 'audit'
+// Main view type now includes 'traffic', 'cost', 'audit', 'gitops'.
+// Library consumers (Radar Hub) get all GitOps surfaces — the package
+// IS the public surface, so adding new top-level views must extend
+// this type rather than rely on app-local extensions.
+export type ExtendedMainView = MainView | 'traffic' | 'cost' | 'audit' | 'gitops'
 
 // ============================================================================
 // Image Filesystem Types

package/src/types/gitops-insights.ts

@@ -0,0 +1,193 @@
+export interface GitOpsInsight {
+  summary: GitOpsInsightSummary
+  issues?: GitOpsIssue[]
+  changes?: GitOpsChange[]
+  plan?: GitOpsPlanItem[]
+  history?: GitOpsHistoryItem[]
+  capabilities?: GitOpsCapabilities
+  // Non-fatal reasons the response is incomplete (RBAC short-circuit,
+  // controller unreachable, etc.). UI surfaces these so users can tell
+  // "no data" from "we couldn't fetch it".
+  warnings?: string[]
+  partial?: boolean
+}
+
+import type { GitOpsTool } from './gitops'
+
+// Closed enums mirroring `pkg/gitops/insights/vocab.go`. Keeping the FE
+// vocabulary in lockstep with the Go side means switches over these fields
+// are exhaustive and wire-contract drift surfaces at compile time instead of
+// at runtime as a missing render branch.
+export type GitOpsScope = 'operation' | 'resource' | 'condition' | 'tree' | 'lifecycle'
+
+export type GitOpsCategory =
+  | 'Synced'
+  | 'OutOfSync'
+  | 'Degraded'
+  | 'Missing'
+  | 'Pruned'
+  | 'Hook'
+  | 'Progressing'
+  | 'Reconciling'
+  | 'Suspended'
+  | 'Unknown'
+
+export type GitOpsDriftSource = 'lastAppliedAnnotation'
+
+export interface GitOpsInsightSummary {
+  tool: GitOpsTool
+  kind: string
+  namespace: string
+  name: string
+  sync?: string
+  health?: string
+  operationPhase?: string
+  // Latest operation status message — surfaced inline in the status strip
+  // when an operation is in flight or just failed.
+  operationMessage?: string
+  source?: string
+  targetRevision?: string
+  lastRevision?: string
+  lastReconcile?: string
+  partialReason?: string
+  // Human-readable sync mode for the chip in the status strip.
+  // Argo: "Manual" | "Auto" | "Auto · prune" | "Auto · self-heal" | "Auto · prune · self-heal"
+  // Flux: "Auto" | "Suspended"
+  autoSyncMode?: string
+  // True when the resource has metadata.deletionTimestamp set. Drives the
+  // [Terminating] chip in the title row + disables mutating action buttons.
+  // Backend mirrors this guard in pkg/gitops/operations.go so direct API
+  // hits also fail with ErrResourceTerminating.
+  terminating?: boolean
+  // RFC3339 deletion timestamp; used to compute "21d ago" text in the chip
+  // tooltip.
+  terminationStartedAt?: string
+  // Finalizers blocking deletion. When stuck, naming the finalizer points
+  // the user at the controller they need to investigate.
+  finalizers?: string[]
+}
+
+export interface GitOpsInsightRef {
+  group?: string
+  kind: string
+  namespace?: string
+  name: string
+}
+
+export interface GitOpsIssue {
+  severity: 'critical' | 'alert' | 'warning' | 'info'
+  scope: GitOpsScope
+  reason: string
+  message: string
+  refs?: GitOpsInsightRef[]
+  action?: string
+  // Plain-English root cause when the message matched a recognized error
+  // pattern. Empty for unrecognized messages — UI falls back to the raw message.
+  cause?: string
+  // Argo retry count parsed from "(retried N times)". 0 = no retry info.
+  retryCount?: number
+  // True when retry count crossed the "no longer transient" threshold.
+  // Drives a stronger visual treatment.
+  stuck?: boolean
+  // Structured one-click remediation. When present, the failure card renders
+  // a contextual action button. Nil when no automated remedy applies — the
+  // `action` string still describes the manual path in that case.
+  remediation?: GitOpsRemediation
+}
+
+export type GitOpsRemediationKind = 'create-namespace'
+
+export interface GitOpsRemediation {
+  kind: GitOpsRemediationKind
+  target?: string
+  hint?: string
+}
+
+export interface GitOpsChange {
+  ref: GitOpsInsightRef
+  category: GitOpsCategory
+  sync?: string
+  health?: string
+  message?: string
+  // Per-resource sync failure message (Argo's status.resources[].syncResult).
+  // Distinct from `message` (live health). Empty when sync succeeded.
+  syncError?: string
+  // Sync hook phase: PreSync / PostSync / SyncFail / PostDelete. Empty
+  // for non-hook resources.
+  hookPhase?: string
+  hasDesired: boolean
+  hasLive: boolean
+  // Structured per-field diff between the desired state (parsed from
+  // kubectl.kubernetes.io/last-applied-configuration) and the live spec.
+  // Undefined when the diff couldn't be computed (no annotation, SSA-applied
+  // resource, Helm-managed). Renderer falls back to the textual explainer
+  // when undefined.
+  drift?: GitOpsDrift
+  // Up to ~5 most recent events involving this resource, newest first.
+  // Surfaces the underlying "why is this stuck" cause (ImagePullBackOff,
+  // FailedScheduling, FailedMount, webhook denial) inline so the operator
+  // doesn't have to drill into the standard resource drawer.
+  recentEvents?: GitOpsEventSummary[]
+  partial: boolean
+  partialNote?: string
+}
+
+export interface GitOpsDrift {
+  entries: GitOpsDriftEntry[]
+  source: GitOpsDriftSource
+  truncated?: boolean
+}
+
+export interface GitOpsDriftEntry {
+  path: string // e.g. "spec.disruption.expireAfter"
+  op: 'added' | 'removed' | 'changed'
+  desired?: string // JSON-encoded
+  live?: string // JSON-encoded
+}
+
+export interface GitOpsEventSummary {
+  type: GitOpsEventType
+  reason: string
+  message: string
+  count?: number
+  lastTimestamp: string // RFC3339
+  reportingComponent?: string
+}
+
+export type GitOpsEventType = 'Normal' | 'Warning'
+
+export interface GitOpsPlanItem {
+  ref: GitOpsInsightRef
+  phase?: string
+  wave?: number
+  waveSet?: boolean
+  order: number
+  hook?: string
+  relationship?: string
+  status?: string
+  blockedBy?: GitOpsInsightRef[]
+  notes?: string[]
+}
+
+export interface GitOpsHistoryItem {
+  id?: string
+  revision?: string
+  deployedAt?: string
+  phase?: string
+  message?: string
+  source?: string
+  initiatedBy?: string
+}
+
+export interface GitOpsCapabilities {
+  sync: boolean
+  refresh: boolean
+  terminate: boolean
+  suspend: boolean
+  resume: boolean
+  syncWithSource: boolean
+  selectiveSync: boolean
+  rollback: boolean
+  unsupportedReason?: string
+  warnings?: string[]
+}

package/src/types/gitops-tree.ts

@@ -0,0 +1,57 @@
+import type { HealthStatus } from './core'
+import type { GitOpsHealthStatus, SyncStatus } from './gitops'
+
+export type GitOpsTreeTool = 'argocd' | 'fluxcd'
+export type GitOpsTreeNodeRole = 'root' | 'declared' | 'generated' | 'group'
+
+export interface GitOpsTreeRef {
+  group?: string
+  kind: string
+  namespace: string
+  name: string
+  uid?: string
+}
+
+export interface GitOpsTreeInfoItem {
+  name: string
+  value: string
+}
+
+export interface GitOpsTreeNode {
+  id: string
+  ref: GitOpsTreeRef
+  role: GitOpsTreeNodeRole
+  tool: GitOpsTreeTool
+  sync?: SyncStatus
+  health?: GitOpsHealthStatus
+  topologyStatus?: HealthStatus
+  info?: GitOpsTreeInfoItem[]
+  resource?: unknown
+  groupedNodeIDs?: string[]
+  count?: number
+  data?: Record<string, unknown>
+}
+
+export type GitOpsTreeEdgeType = 'owns' | 'source' | 'dependsOn'
+
+export interface GitOpsTreeEdge {
+  source: string
+  target: string
+  type: GitOpsTreeEdgeType
+}
+
+export interface GitOpsTreeSummary {
+  declared: number
+  generated: number
+  grouped: number
+  degraded: number
+  outOfSync: number
+}
+
+export interface GitOpsResourceTree {
+  root: GitOpsTreeNode
+  nodes: GitOpsTreeNode[]
+  edges: GitOpsTreeEdge[]
+  warnings?: string[]
+  summary?: GitOpsTreeSummary
+}

package/src/types/index.ts

@@ -1,2 +1,4 @@
 export * from './core'
 export * from './gitops'
+export * from './gitops-tree'
+export * from './gitops-insights'

package/src/utils/badge-colors.ts

@@ -93,6 +93,7 @@ export const SEVERITY_BADGE = BADGE_SEVERITY_COLORS
 export const SEVERITY_TEXT = {
   success: 'text-emerald-700 dark:text-emerald-400',
   warning: 'text-amber-700 dark:text-amber-400',
+  alert: 'text-orange-700 dark:text-orange-400',
   error: 'text-red-700 dark:text-red-400',
   info: 'text-sky-700 dark:text-sky-400',
   neutral: 'text-theme-text-secondary',
@@ -102,6 +103,7 @@ export const SEVERITY_TEXT = {
 export const SEVERITY_DOT = {
   success: 'bg-emerald-500',
   warning: 'bg-amber-500',
+  alert: 'bg-orange-500',
   error: 'bg-red-500',
   info: 'bg-sky-500',
   neutral: 'bg-theme-hover',
@@ -111,6 +113,7 @@ export const SEVERITY_DOT = {
 export const SEVERITY_BORDER = {
   success: 'border-emerald-200 dark:border-emerald-800/40',
   warning: 'border-amber-200 dark:border-amber-800/40',
+  alert: 'border-orange-200 dark:border-orange-800/40',
   error: 'border-red-200 dark:border-red-800/40',
   info: 'border-sky-200 dark:border-sky-800/40',
   neutral: 'border-theme-border',
@@ -123,7 +126,7 @@ export const SEVERITY_BADGE_BORDERED = {
 } as const
 
 // Severity type
-export type Severity = 'success' | 'warning' | 'error' | 'info' | 'neutral'
+export type Severity = 'success' | 'warning' | 'alert' | 'error' | 'info' | 'neutral'
 
 // =============================================================================
 // RESOURCE STATUS COLORS - for K8s resource states
@@ -216,6 +219,8 @@ export function healthToSeverity(health: string): Severity {
     case 'warning':
     case 'pending':
       return 'warning'
+    case 'alert':
+      return 'alert'
     case 'unhealthy':
     case 'error':
     case 'failed':

package/src/utils/format.ts

@@ -175,6 +175,34 @@ export function formatCPUMillicores(millicores: number): string {
   return formatCoresValue(cores)
 }
 
+// =============================================================================
+// Time Formatting
+// =============================================================================
+
+export function formatCompactAge(value?: string): string {
+  if (!value) return ''
+  const time = Date.parse(value)
+  if (!Number.isFinite(time)) return ''
+  const seconds = Math.max(0, Math.floor((Date.now() - time) / 1000))
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
+
+export function formatRelativeAgeTime(value?: string, fallback = '-'): string {
+  if (!value) return fallback
+  const time = Date.parse(value)
+  if (!Number.isFinite(time)) return value
+  const diff = Date.now() - time
+  if (diff < 0) return new Date(time).toLocaleString()
+  const compact = formatCompactAge(value)
+  if (!compact) return fallback
+  return compact === '0s' ? 'just now' : `${compact} ago`
+}
+
 /**
  * Format memory MiB to human-readable string.
  * Used by dashboard API which returns memory in MiB.