@skyhook-io/k8s-ui 1.0.0

package/src/components/resources/index.ts

@@ -0,0 +1,17 @@
+export * from './resource-utils'
+export * from './resource-utils-argo'
+export * from './resource-utils-certmanager'
+export * from './resource-utils-cnpg'
+export * from './resource-utils-eso'
+export * from './resource-utils-flux'
+export * from './resource-utils-istio'
+export * from './resource-utils-karpenter'
+export * from './resource-utils-keda'
+export * from './resource-utils-knative'
+export * from './resource-utils-kyverno'
+export * from './resource-utils-prometheus'
+export * from './resource-utils-trivy'
+export * from './resource-utils-traefik'
+export * from './resource-utils-velero'
+export { ResourcesView, ResourcesViewDataContext } from './ResourcesView'
+export type { ResourceQueryResult } from './ResourcesView'

package/src/components/resources/renderers/AlertRenderer.tsx

@@ -0,0 +1,166 @@
+import { Bell, AlertTriangle, Filter, Send } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { GitOpsStatusBadge } from '../../gitops'
+import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+
+interface AlertRendererProps {
+  data: any
+}
+
+export function AlertRenderer({ data }: AlertRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = (status.conditions || []) as FluxCondition[]
+
+  // Convert to unified GitOps status
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+
+  // Problem detection
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (gitOpsStatus.suspended) {
+    problems.push({ color: 'yellow', message: 'Alert is suspended' })
+  }
+
+  if (gitOpsStatus.health === 'Degraded' && gitOpsStatus.message) {
+    problems.push({ color: 'red', message: gitOpsStatus.message })
+  }
+
+  // Event sources
+  const eventSources = spec.eventSources || []
+  const eventSeverity = spec.eventSeverity || 'info'
+  const inclusionList = spec.inclusionList || []
+  const exclusionList = spec.exclusionList || []
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {problems.map((problem, i) => (
+        <div
+          key={i}
+          className={clsx(
+            'mb-4 p-3 border rounded-lg',
+            problem.color === 'red'
+              ? 'bg-red-500/10 border-red-500/30'
+              : 'bg-yellow-500/10 border-yellow-500/30'
+          )}
+        >
+          <div className="flex items-start gap-2">
+            <AlertTriangle
+              className={clsx(
+                'w-4 h-4 mt-0.5 shrink-0',
+                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+              )}
+            />
+            <div className="flex-1 min-w-0">
+              <div
+                className={clsx(
+                  'text-sm font-medium',
+                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+                )}
+              >
+                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
+              </div>
+              <div
+                className={clsx(
+                  'text-xs mt-1',
+                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
+                )}
+              >
+                {problem.message}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {/* Status section */}
+      <Section title="Status">
+        <GitOpsStatusBadge status={gitOpsStatus} showHealth={false} />
+      </Section>
+
+      {/* Provider section */}
+      <Section title="Provider" icon={Send}>
+        <PropertyList>
+          <Property label="Provider Ref" value={spec.providerRef?.name} />
+          <Property
+            label="Event Severity"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                eventSeverity === 'error' ? 'bg-red-500/20 text-red-400' :
+                eventSeverity === 'warning' ? 'bg-yellow-500/20 text-yellow-400' :
+                'bg-blue-500/20 text-blue-400'
+              )}>
+                {eventSeverity}
+              </span>
+            }
+          />
+          {spec.summary && <Property label="Summary" value={spec.summary} />}
+        </PropertyList>
+      </Section>
+
+      {/* Event Sources section */}
+      {eventSources.length > 0 && (
+        <Section title={`Event Sources (${eventSources.length})`} icon={Bell}>
+          <div className="space-y-2">
+            {eventSources.map((source: any, idx: number) => (
+              <div
+                key={idx}
+                className="p-2 bg-theme-elevated/30 rounded text-sm"
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-theme-text-tertiary">{source.kind}</span>
+                  <span className="text-theme-text-primary">{source.name || '*'}</span>
+                </div>
+                {source.namespace && (
+                  <div className="text-xs text-theme-text-tertiary mt-1">
+                    Namespace: {source.namespace === '*' ? 'All' : source.namespace}
+                  </div>
+                )}
+                {source.matchLabels && Object.keys(source.matchLabels).length > 0 && (
+                  <div className="text-xs text-theme-text-tertiary mt-1">
+                    Labels: {Object.entries(source.matchLabels).map(([k, v]) => `${k}=${v}`).join(', ')}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Filters section */}
+      {(inclusionList.length > 0 || exclusionList.length > 0) && (
+        <Section title="Filters" icon={Filter} defaultExpanded={false}>
+          <PropertyList>
+            {inclusionList.length > 0 && (
+              <Property
+                label="Include"
+                value={inclusionList.join(', ')}
+              />
+            )}
+            {exclusionList.length > 0 && (
+              <Property
+                label="Exclude"
+                value={exclusionList.join(', ')}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Additional Info */}
+      {status.observedGeneration !== undefined && (
+        <Section title="Additional Info" defaultExpanded={false}>
+          <PropertyList>
+            <Property label="Observed Generation" value={status.observedGeneration} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions section */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/ArgoApplicationRenderer.tsx

@@ -0,0 +1,233 @@
+import { GitBranch, FolderTree, Settings, Target, XCircle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
+import {
+  argoStatusToGitOpsStatus,
+  parseArgoResources,
+  type ArgoAppStatus,
+  type ArgoResource,
+} from '../../../types/gitops'
+
+interface ArgoApplicationRendererProps {
+  data: any
+  onTerminate?: (params: { namespace: string; name: string }) => void
+  isTerminating?: boolean
+}
+
+export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: ArgoApplicationRendererProps) {
+  const status = (data.status || {}) as ArgoAppStatus & {
+    resources?: ArgoResource[]
+    conditions?: Array<{ type: string; status: string; message?: string; lastTransitionTime?: string }>
+  }
+  const spec = data.spec || {}
+
+  const namespace = data.metadata?.namespace || ''
+  const name = data.metadata?.name || ''
+
+  // Convert to unified GitOps status
+  const gitOpsStatus = argoStatusToGitOpsStatus(status)
+
+  // Parse managed resources from status.resources
+  const managedResources = parseArgoResources(status.resources || [])
+
+  // Problem detection
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (gitOpsStatus.suspended) {
+    problems.push({ color: 'yellow', message: 'Application automated sync is disabled' })
+  }
+
+  if (gitOpsStatus.health === 'Degraded' && gitOpsStatus.message) {
+    problems.push({ color: 'red', message: gitOpsStatus.message })
+  }
+
+  if (gitOpsStatus.sync === 'OutOfSync') {
+    problems.push({ color: 'yellow', message: 'Application is out of sync with git' })
+  }
+
+  // Extract source info
+  const source = spec.source || {}
+  const destination = spec.destination || {}
+  const syncPolicy = spec.syncPolicy || {}
+  const operationState = status.operationState
+
+  // Check if sync is in progress
+  const isSyncing = operationState?.phase === 'Running'
+
+  return (
+    <>
+      <ProblemAlerts problems={problems} />
+
+      {/* Status section */}
+      <Section title="Status">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <GitOpsStatusBadge status={gitOpsStatus} />
+            {/* Terminate button (only when syncing and handler provided) */}
+            {isSyncing && onTerminate && (
+              <button
+                onClick={() => onTerminate({ namespace, name })}
+                disabled={isTerminating}
+                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors disabled:opacity-50"
+                title="Terminate sync"
+              >
+                <XCircle className="w-3.5 h-3.5" />
+                {isTerminating ? 'Terminating...' : 'Terminate'}
+              </button>
+            )}
+          </div>
+
+          {/* Sync countdown (only if automated sync is enabled) */}
+          {syncPolicy.automated && (
+            <SyncCountdown
+              interval="5m" // ArgoCD default
+              lastSyncTime={status.reconciledAt}
+              suspended={gitOpsStatus.suspended}
+            />
+          )}
+        </div>
+      </Section>
+
+      {/* Source section */}
+      <Section title="Source" icon={FolderTree}>
+        <PropertyList>
+          <Property label="Repository" value={source.repoURL} />
+          {source.path && <Property label="Path" value={source.path} />}
+          {source.targetRevision && (
+            <Property
+              label="Target Revision"
+              value={
+                <span className="flex items-center gap-1">
+                  <GitBranch className="w-3.5 h-3.5" />
+                  {source.targetRevision}
+                </span>
+              }
+            />
+          )}
+          {source.chart && <Property label="Helm Chart" value={source.chart} />}
+          {source.helm?.valueFiles && source.helm.valueFiles.length > 0 && (
+            <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
+          )}
+          {source.kustomize?.namePrefix && (
+            <Property label="Kustomize Prefix" value={source.kustomize.namePrefix} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Destination section */}
+      <Section title="Destination" icon={Target}>
+        <PropertyList>
+          <Property label="Server" value={destination.server || destination.name || '-'} />
+          <Property label="Namespace" value={destination.namespace || 'default'} />
+        </PropertyList>
+      </Section>
+
+      {/* Sync Policy section */}
+      <Section title="Sync Policy" icon={Settings}>
+        <PropertyList>
+          <Property
+            label="Automated Sync"
+            value={
+              <span
+                className={clsx(
+                  'px-2 py-0.5 rounded text-xs font-medium',
+                  syncPolicy.automated ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'
+                )}
+              >
+                {syncPolicy.automated ? 'Enabled' : 'Disabled'}
+              </span>
+            }
+          />
+          {syncPolicy.automated && (
+            <>
+              <Property
+                label="Self Heal"
+                value={syncPolicy.automated.selfHeal ? 'Yes' : 'No'}
+              />
+              <Property
+                label="Prune"
+                value={syncPolicy.automated.prune ? 'Yes' : 'No'}
+              />
+            </>
+          )}
+          {syncPolicy.retry && (
+            <>
+              <Property label="Retry Limit" value={syncPolicy.retry.limit} />
+              {syncPolicy.retry.backoff && (
+                <Property label="Backoff Duration" value={syncPolicy.retry.backoff.duration} />
+              )}
+            </>
+          )}
+          {syncPolicy.syncOptions && syncPolicy.syncOptions.length > 0 && (
+            <Property label="Sync Options" value={syncPolicy.syncOptions.join(', ')} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Operation State (current/last sync) */}
+      {operationState && (
+        <Section title="Last Operation" defaultExpanded={operationState.phase === 'Running'}>
+          <PropertyList>
+            <Property
+              label="Phase"
+              value={
+                <span
+                  className={clsx(
+                    'px-2 py-0.5 rounded text-xs font-medium',
+                    operationState.phase === 'Succeeded'
+                      ? 'bg-green-500/20 text-green-400'
+                      : operationState.phase === 'Running'
+                      ? 'bg-blue-500/20 text-blue-400'
+                      : operationState.phase === 'Failed' || operationState.phase === 'Error'
+                      ? 'bg-red-500/20 text-red-400'
+                      : 'bg-gray-500/20 text-gray-400'
+                  )}
+                >
+                  {operationState.phase}
+                </span>
+              }
+            />
+            {operationState.message && (
+              <Property label="Message" value={operationState.message} />
+            )}
+            {operationState.finishedAt && (
+              <Property label="Finished" value={formatAge(operationState.finishedAt)} />
+            )}
+            {operationState.syncResult?.revision && (
+              <Property label="Revision" value={operationState.syncResult.revision} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Managed Resources */}
+      {managedResources.length > 0 && (
+        <ManagedResourcesList
+          resources={managedResources}
+          title={`Managed Resources (${managedResources.length})`}
+        />
+      )}
+
+      {/* Revision Info */}
+      {(status.sync?.revision || status.reconciledAt) && (
+        <Section title="Revision Info" defaultExpanded={false}>
+          <PropertyList>
+            {status.sync?.revision && (
+              <Property label="Current Revision" value={status.sync.revision} />
+            )}
+            {status.reconciledAt && (
+              <Property label="Last Reconciled" value={formatAge(status.reconciledAt)} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions section */}
+      {status.conditions && status.conditions.length > 0 && (
+        <ConditionsSection conditions={status.conditions} />
+      )}
+    </>
+  )
+}

package/src/components/resources/renderers/CNPGBackupRenderer.tsx

@@ -0,0 +1,89 @@
+import { Database, Clock } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getCNPGBackupStatus,
+  getCNPGBackupCluster,
+  getCNPGBackupMethod,
+  getCNPGBackupPhase,
+  getCNPGBackupDuration,
+  getCNPGBackupName,
+  getCNPGBackupDestinationPath,
+  getCNPGBackupServerName,
+  getCNPGBackupError,
+  getCNPGBackupTarget,
+} from '../resource-utils-cnpg'
+
+interface CNPGBackupRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps) {
+  const status = getCNPGBackupStatus(data)
+  const error = getCNPGBackupError(data)
+  const phase = getCNPGBackupPhase(data)
+  const target = getCNPGBackupTarget(data)
+  const clusterName = getCNPGBackupCluster(data)
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {status.level === 'unhealthy' && error && (
+        <AlertBanner
+          variant="error"
+          title="Backup Failed"
+          message={error}
+        />
+      )}
+
+      {/* Status */}
+      <Section title="Backup Status" icon={Clock} defaultExpanded>
+        <PropertyList>
+          <Property label="Phase" value={phase} />
+          <Property label="Method" value={getCNPGBackupMethod(data)} />
+          <Property label="Duration" value={getCNPGBackupDuration(data)} />
+          <Property label="Backup Name" value={getCNPGBackupName(data)} />
+        </PropertyList>
+        {data.status?.startedAt && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <PropertyList>
+              <Property label="Started" value={data.status.startedAt} />
+              {data.status?.stoppedAt && <Property label="Stopped" value={data.status.stoppedAt} />}
+            </PropertyList>
+          </div>
+        )}
+      </Section>
+
+      {/* Backup Details */}
+      <Section title="Backup Details" icon={Database} defaultExpanded>
+        <PropertyList>
+          <Property label="Cluster" value={(() => {
+            if (clusterName && clusterName !== '-') {
+              return (
+                <ResourceLink
+                  name={clusterName}
+                  kind="clusters"
+                  namespace={data.metadata?.namespace || ''}
+                  group="postgresql.cnpg.io"
+                  onNavigate={onNavigate}
+                />
+              )
+            }
+            return clusterName
+          })()} />
+          <Property label="Destination" value={getCNPGBackupDestinationPath(data)} />
+          <Property label="Server Name" value={getCNPGBackupServerName(data)} />
+        </PropertyList>
+      </Section>
+
+      {/* Target - for PITR backups */}
+      {target !== '-' && (
+        <Section title="Target" defaultExpanded>
+          <PropertyList>
+            <Property label="Recovery Target" value={target} />
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}