@skyhook-io/k8s-ui 1.8.11 → 1.8.13

package/src/components/workload/WorkloadView.tsx

@@ -29,6 +29,7 @@ import {
   X,
   BarChart3,
   Network,
+  DollarSign,
 } from 'lucide-react'
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode, HPADiagnosis, WorkloadPodInfo } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
@@ -64,7 +65,7 @@ import {
 } from '../resources/resource-utils'
 import { ServicePortCards, type ServicePortRenderProps } from '../resources/renderers/ServiceRenderer'
 
-export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'yaml'
+export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'cost' | 'yaml'
 type TabType = WorkloadTabType
 
 export interface ResourceOwnershipContext {
@@ -257,6 +258,8 @@ interface WorkloadViewProps {
   }) => ReactNode
   /** Render the metrics tab content */
   renderMetricsTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** Render the cost tab content */
+  renderCostTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
   /** Render a read-only YAML view for a related object from the workload's
    *  neighborhood. Providing this turns the YAML tab into an object explorer
    *  (rail of the workload + its Services/config/policies/pods); omitting it
@@ -265,6 +268,8 @@ interface WorkloadViewProps {
   renderRelatedYaml?: (ref: { kind: string; namespace: string; name: string; group?: string }) => ReactNode
   /** Whether metrics are available for this resource kind */
   isMetricsAvailable?: (kind: string, resource: any) => boolean
+  /** Whether cost is available for this resource kind */
+  isCostAvailable?: (kind: string, resource: any) => boolean
   /** Render extra content at the bottom of the overview tab (e.g. audit findings) */
   renderOverviewExtra?: (props: { kind: string; namespace: string; name: string }) => ReactNode
   /** Render lightweight overview intro content before the default renderer. */
@@ -280,6 +285,10 @@ interface WorkloadViewProps {
    *  live issues for this resource). Avoids showing the same failure twice.
    *  Also gates the `renderOverviewLead` wrapper (see above). */
   hasOperationalIssues?: boolean
+  /** True while the live-issues fetch is still pending. Renderers suppress their
+   *  banners during this window too — a banner whose failure the pipeline covers
+   *  would otherwise flash on first paint before the issues arrive and hide it. */
+  operationalIssuesPending?: boolean
 
   // ── Duplicate ────────────────────────────────────────────────────────────
   /** Duplicate handler — opens create dialog with this resource's YAML */
@@ -359,7 +368,9 @@ export function WorkloadView({
   renderExpandedOverview,
   renderRelatedYaml,
   renderMetricsTab,
+  renderCostTab,
   isMetricsAvailable,
+  isCostAvailable,
   // Duplicate
   onDuplicate,
   onDownload,
@@ -367,6 +378,7 @@ export function WorkloadView({
   renderOverviewIntro,
   renderOverviewLead,
   hasOperationalIssues,
+  operationalIssuesPending,
   // Actions bar
   actionsBarProps,
   // Renderer overrides
@@ -644,8 +656,10 @@ export function WorkloadView({
   })
 
   const showMetricsTab = isMetricsAvailable ? isMetricsAvailable(kind, resource) : false
+  const showCostTab = isCostAvailable ? isCostAvailable(kind, resource) : false
   const logsTabVisible = Boolean(renderLogsTab) && (allPods.length > 0 || LOGS_TAB_WITHOUT_PODS_KINDS.has(kindToPlural(kind).toLowerCase()))
   const metricsTabVisible = Boolean(showMetricsTab && renderMetricsTab)
+  const costTabVisible = Boolean(showCostTab && renderCostTab)
   const podEvidenceLoading = resourceLoading || workloadPodsLoading || eventsLoading
   const logsFallbackReady = !renderLogsTab || (!logsTabVisible && !podEvidenceLoading)
   const requestedTab: TabType = activeTab
@@ -660,6 +674,7 @@ export function WorkloadView({
     },
     { id: 'logs', label: 'Logs', icon: <Terminal className="w-4 h-4" />, hidden: !logsTabVisible },
     { id: 'metrics', label: 'Metrics', icon: <BarChart3 className="w-4 h-4" />, hidden: !metricsTabVisible },
+    { id: 'cost', label: 'Cost', icon: <DollarSign className="w-4 h-4" />, hidden: !costTabVisible },
     { id: 'yaml', label: 'YAML', icon: <FileText className="w-4 h-4" /> },
   ]
   const requestedTabAvailable = tabs.some((tab) => tab.id === requestedTab && !tab.hidden)
@@ -670,6 +685,7 @@ export function WorkloadView({
     (
       (requestedTab === 'topology' && topologyTabHidden) ||
       (requestedTab === 'metrics' && (!renderMetricsTab || (!!resource && !resourceLoading && !showMetricsTab))) ||
+      (requestedTab === 'cost' && (!renderCostTab || (!!resource && !resourceLoading && !showCostTab))) ||
       (requestedTab === 'logs' && logsFallbackReady)
     )
   useEffect(() => {
@@ -794,7 +810,7 @@ export function WorkloadView({
               onDownload={onDownload}
             />
           ) : (
-            <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
+            <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
               {renderOverviewLead && hasOperationalIssues && (
                 <div className="px-4 pt-4">
                   {renderOverviewLead({ kind, namespace, name })}
@@ -831,7 +847,7 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
-    <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
+    <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
     <DetailShell
       breadcrumb={breadcrumb}
       nav={
@@ -1038,6 +1054,11 @@ export function WorkloadView({
             {renderMetricsTab({ kind: resource?.kind || kind, namespace, name })}
           </div>
         )}
+        {effectiveTab === 'cost' && renderCostTab && (
+          <div className="h-full overflow-auto p-4">
+            {renderCostTab({ kind: resource?.kind || kind, namespace, name })}
+          </div>
+        )}
         {effectiveTab === 'yaml' && (
           <div className="flex h-full min-h-0">
             {renderRelatedYaml && yamlObjects.length > 1 && (

package/src/theme/tailwind-theme.css

@@ -20,6 +20,7 @@
   --color-theme-text-secondary: var(--text-secondary);
   --color-theme-text-tertiary: var(--text-tertiary);
   --color-theme-text-disabled: var(--text-disabled);
+  --color-warning-text: var(--warning-text);
 
   /* Borders */
   --color-theme-border: var(--border-default);

package/src/theme/variables.css

@@ -49,6 +49,7 @@
   --text-secondary: light-dark(#555860, #D8DAE0);
   --text-tertiary: light-dark(#6B7080, #B0B5C0);
   --text-disabled: light-dark(#A0A4AC, #6A7080);
+  --warning-text: light-dark(#92400E, #FBBF24);
 
   /* ── Borders (lightly blue-tinted in light mode) ── */
   --border-default: light-dark(#D8E0EE, #222840);

package/src/types/gitops-insights.ts

@@ -32,7 +32,13 @@ export type GitOpsCategory =
   | 'Suspended'
   | 'Unknown'
 
-export type GitOpsDriftSource = 'lastAppliedAnnotation'
+// How a Drift's field entries were computed. `lastAppliedAnnotation` is the
+// built-in path (kubectl.kubernetes.io/last-applied-configuration); `argocd-api`
+// means the diff came from a connected Argo CD server's managed-resource diff.
+// The `(string & {})` arm keeps the union open: a library consumer may lag the
+// backend and receive a source it doesn't recognize — such values MUST render
+// with the neutral fallback (no source label), never crash a switch.
+export type GitOpsDriftSource = 'lastAppliedAnnotation' | 'argocd-api' | (string & {})
 
 export interface GitOpsInsightSummary {
   tool: GitOpsTool
@@ -66,6 +72,21 @@ export interface GitOpsInsightSummary {
   // Finalizers blocking deletion. When stuck, naming the finalizer points
   // the user at the controller they need to investigate.
   finalizers?: string[]
+  // Argo comparison-coverage disclosure: the field exclusions declared in
+  // spec.ignoreDifferences that suppress drift from comparison (both Argo's
+  // and Radar's). Undefined for Flux roots and Applications without any
+  // exclusions. unsupportedRuleCount counts entries Radar does NOT evaluate
+  // (jqPathExpressions / managedFieldsManagers rules) — the
+  // drift panel may surface fields Argo's own UI suppresses.
+  ignoredDifferences?: GitOpsIgnoredDifferences
+}
+
+export interface GitOpsIgnoredDifferences {
+  ruleCount: number
+  unsupportedRuleCount: number
+  // Sorted unique "Group/Kind" targets ("Kind" for core resources,
+  // "group/*" for a group-wide rule that omits kind).
+  kinds: string[]
 }
 
 export interface GitOpsInsightRef {
@@ -192,6 +213,53 @@ export interface GitOpsCapabilities {
   syncWithSource: boolean
   selectiveSync: boolean
   rollback: boolean
+  // True on an Argo CD Application detail when the Argo CD integration is
+  // connected, meaning the full Git-rendered desired-vs-live diff endpoint
+  // (/api/argo/applications/{ns}/{name}/resource-diff) can be called for this
+  // app's managed resources. Absent/false → offer only the last-applied field
+  // diff and (for disconnected Argo apps) the "connect Argo CD" hint.
+  argoDiffAvailable?: boolean
+  // True when the Argo CD integration has settings saved, even if the live
+  // connection is down / the token is rejected. Paired with argoDiffAvailable to
+  // tell "not set up" (offer Connect) from "set up but disconnected" (offer
+  // Reconnect) — instead of advertising a diff that would fail.
+  argoConfigured?: boolean
+  // True on an Argo CD Application detail when the integration is connected,
+  // meaning the revision-metadata endpoint can resolve Git commit details
+  // (author, message, signature) for this app's deployed revisions.
+  revisionMetadataAvailable?: boolean
   unsupportedReason?: string
   warnings?: string[]
 }
+
+// Response of GET /api/argo/applications/{ns}/{name}/revision-metadata — the Git
+// commit metadata for one deployed revision. Every field is best-effort (varies
+// across Argo CD versions); signatureInfo non-empty means a signature was checked.
+export interface ArgoRevisionMetadata {
+  author?: string
+  date?: string
+  tags?: string[]
+  message?: string
+  signatureInfo?: string
+}
+
+// Response of GET /api/argo/applications/{ns}/{name}/resource-diff. `desired`
+// is the Git-rendered manifest, `live` the normalized cluster state — both YAML
+// for the line-by-line view. `fieldEntries` is the same diff structured per
+// path for a compact summary. `redacted` is set when Secret values were masked
+// server-side; `hook` marks Argo sync-hook resources.
+export interface GitOpsResourceDiff {
+  source: string
+  desired: string
+  live: string
+  fieldEntries: GitOpsResourceDiffFieldEntry[]
+  redacted: boolean
+  hook: boolean
+}
+
+export interface GitOpsResourceDiffFieldEntry {
+  path: string
+  op: 'added' | 'removed' | 'changed'
+  desired?: string
+  live?: string
+}

package/src/types/gitops.ts

@@ -254,7 +254,7 @@ export interface ArgoAppStatus {
  * ArgoCD status patterns:
  * - sync.status: Synced, OutOfSync, Unknown
  * - health.status: Healthy, Progressing, Degraded, Suspended, Missing, Unknown
- * - operationState.phase: Running, Succeeded, Failed, Error
+ * - operationState.phase: Running, Terminating, Succeeded, Failed, Error
  */
 export function argoStatusToGitOpsStatus(status: ArgoAppStatus): GitOpsStatus {
   const syncStatus = status.sync?.status
@@ -267,7 +267,7 @@ export function argoStatusToGitOpsStatus(status: ArgoAppStatus): GitOpsStatus {
     sync = 'Synced'
   } else if (syncStatus === 'OutOfSync') {
     sync = 'OutOfSync'
-  } else if (opPhase === 'Running') {
+  } else if (opPhase === 'Running' || opPhase === 'Terminating') {
     sync = 'Reconciling'
   }
 
@@ -288,7 +288,7 @@ export function argoStatusToGitOpsStatus(status: ArgoAppStatus): GitOpsStatus {
   }
 
   // Override with operation state if active
-  if (opPhase === 'Running') {
+  if (opPhase === 'Running' || opPhase === 'Terminating') {
     health = 'Progressing'
   } else if (opPhase === 'Failed' || opPhase === 'Error') {
     health = 'Degraded'

package/src/utils/api-resources.test.ts

@@ -1,5 +1,40 @@
 import { describe, expect, it } from 'vitest'
-import { categorizeResources, formatGroupName, shortenGroupName } from './api-resources'
+import { categorizeResources, findAPIResourceForRoute, formatGroupName, shortenGroupName } from './api-resources'
+
+describe('findAPIResourceForRoute', () => {
+  const resources = [
+    { group: 'metrics.k8s.io', version: 'v1beta1', kind: 'PodMetrics', name: 'pods', namespaced: true, isCrd: false, verbs: ['get'] },
+  ]
+
+  it('prefers the canonical core resource when a discovered API has the same plural name', () => {
+    expect(findAPIResourceForRoute(resources, 'pods')?.kind).toBe('Pod')
+  })
+
+  it('respects an explicit API group for a colliding resource', () => {
+    expect(findAPIResourceForRoute(resources, 'pods', 'metrics.k8s.io')?.kind).toBe('PodMetrics')
+  })
+
+  it('resolves a discovered resource without a core collision', () => {
+    const crd = { group: 'example.io', version: 'v1', kind: 'Widget', name: 'widgets', namespaced: true, isCrd: true, verbs: ['list'] }
+    expect(findAPIResourceForRoute([crd], 'widgets')).toBe(crd)
+  })
+
+  it('resolves core resources before discovery loads', () => {
+    expect(findAPIResourceForRoute(undefined, 'pods')?.kind).toBe('Pod')
+  })
+
+  it('falls back to an exact built-in API group before discovery loads', () => {
+    expect(findAPIResourceForRoute(undefined, 'storageclasses', 'storage.k8s.io')).toMatchObject({
+      kind: 'StorageClass',
+      namespaced: false,
+    })
+  })
+
+  it('supports the legacy Kind route form without weakening group matching', () => {
+    expect(findAPIResourceForRoute(undefined, 'Pod')?.name).toBe('pods')
+    expect(findAPIResourceForRoute(undefined, 'Pod', 'metrics.k8s.io')).toBeUndefined()
+  })
+})
 
 describe('formatGroupName', () => {
   it('uses friendly names for common CRD groups seen in clusters', () => {

package/src/utils/api-resources.ts

@@ -47,9 +47,25 @@ export const CORE_RESOURCES: APIResource[] = [
   { group: 'scheduling.k8s.io', version: 'v1', kind: 'PriorityClass', name: 'priorityclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'node.k8s.io', version: 'v1', kind: 'RuntimeClass', name: 'runtimeclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'coordination.k8s.io', version: 'v1', kind: 'Lease', name: 'leases', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'storage.k8s.io', version: 'v1', kind: 'StorageClass', name: 'storageclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'storage.k8s.io', version: 'v1', kind: 'VolumeAttachment', name: 'volumeattachments', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
 ]
 
+export function findAPIResourceForRoute(
+  resources: APIResource[] | undefined,
+  routeSlug: string,
+  group = '',
+): APIResource | undefined {
+  const matchesRoute = (resource: APIResource) =>
+    resource.name === routeSlug || resource.kind === routeSlug
+  if (group) {
+    return resources?.find(r => matchesRoute(r) && r.group === group)
+      ?? CORE_RESOURCES.find(r => matchesRoute(r) && r.group === group)
+  }
+  return CORE_RESOURCES.find(matchesRoute)
+    ?? resources?.find(matchesRoute)
+}
+
 // Resources that should be hidden from the sidebar
 const HIDDEN_KINDS = ['PodMetrics', 'NodeMetrics']