@skyhook-io/k8s-ui 1.3.2 → 1.4.1

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

@@ -1,8 +1,7 @@
-import { Database, HardDrive, Activity, Clock, Shield } from 'lucide-react'
+import { Database, HardDrive, Activity, Clock, Shield, KeyRound } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getCNPGClusterInstances,
-  getCNPGClusterPrimary,
   getCNPGClusterPhase,
   getCNPGClusterImage,
   getCNPGClusterStorage,
@@ -16,6 +15,8 @@ import {
   getCNPGClusterReplicaSource,
   getCNPGClusterInstanceNames,
   getCNPGClusterPostgresParams,
+  getCNPGClusterInstancesReportedState,
+  getCNPGClusterCertificateExpirations,
 } from '../resource-utils-cnpg'
 
 interface CNPGClusterRendererProps {
@@ -35,15 +36,49 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
   const postgresParams = getCNPGClusterPostgresParams(data)
   const instanceNames = getCNPGClusterInstanceNames(data)
   const bootstrapMethod = getCNPGClusterBootstrapMethod(data)
+  const reportedState = getCNPGClusterInstancesReportedState(data)
+  const certExpirations = getCNPGClusterCertificateExpirations(data)
+
+  // Primary mismatch detection
+  const targetPrimary = data.status?.targetPrimary
+  const currentPrimary = data.status?.currentPrimary
+  const primaryMismatch = targetPrimary && currentPrimary && targetPrimary !== currentPrimary
+
+  // Split-brain detection: multiple instances report isPrimary
+  const primariesReported = reportedState.filter(i => i.isPrimary)
+  const hasSplitBrain = primariesReported.length > 1
+
+  // Certificate expiry warnings
+  const expiredCerts = certExpirations.filter(c => c.daysUntilExpiry < 0)
+  const criticalCerts = certExpirations.filter(c => c.daysUntilExpiry >= 0 && c.daysUntilExpiry <= 7)
+  const warningCerts = certExpirations.filter(c => c.daysUntilExpiry > 7 && c.daysUntilExpiry <= 30)
+
+  // Last failed backup
+  const lastFailedBackup = data.status?.lastFailedBackup
 
   // Problem detection
-  const isDegraded = instances > 0 && readyInstances < instances
+  const isDown = instances > 0 && readyInstances === 0
+  const isDegraded = instances > 0 && readyInstances < instances && readyInstances > 0
   const isFailover = phase.toLowerCase().includes('failing over')
   const isSwitchover = phase.toLowerCase().includes('switchover')
 
   return (
     <>
       {/* Problem alerts */}
+      {hasSplitBrain && (
+        <AlertBanner
+          variant="error"
+          title="Potential Split-Brain Detected"
+          message={`Multiple instances report as primary: ${primariesReported.map(i => i.podName).join(', ')}. Immediate investigation required.`}
+        />
+      )}
+      {isDown && (
+        <AlertBanner
+          variant="error"
+          title="Cluster Down"
+          message={`All ${instances} instances are not ready.`}
+        />
+      )}
       {isDegraded && (
         <AlertBanner
           variant="warning"
@@ -65,15 +100,76 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
           message={`Cluster is performing a switchover. Current phase: ${phase}`}
         />
       )}
+      {primaryMismatch && (
+        <AlertBanner
+          variant="warning"
+          title="Switchover Pending"
+          message={`Target primary is ${targetPrimary} but current primary is ${currentPrimary}.`}
+        />
+      )}
+      {lastFailedBackup && (
+        <AlertBanner
+          variant="error"
+          title="Last Backup Failed"
+          message={`Last backup failed at ${lastFailedBackup}. WAL archiving may be impacted and RPO is growing.`}
+        />
+      )}
+      {expiredCerts.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Certificate Expired"
+          items={expiredCerts.map(c => `${c.secretName} expired ${Math.abs(c.daysUntilExpiry)} day${Math.abs(c.daysUntilExpiry) === 1 ? '' : 's'} ago (${c.expiryDate})`)}
+        />
+      )}
+      {criticalCerts.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Certificate Expiring Soon"
+          items={criticalCerts.map(c => `${c.secretName} expires in ${c.daysUntilExpiry} day${c.daysUntilExpiry === 1 ? '' : 's'} (${c.expiryDate})`)}
+        />
+      )}
+      {warningCerts.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Certificate Expiry Warning"
+          items={warningCerts.map(c => `${c.secretName} expires in ${c.daysUntilExpiry} days (${c.expiryDate})`)}
+        />
+      )}
 
       {/* Cluster Overview */}
       <Section title="Cluster Overview" icon={Database} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={phase} />
           <Property label="Instances" value={getCNPGClusterInstances(data)} />
-          <Property label="Current Primary" value={getCNPGClusterPrimary(data)} />
+          <Property label="Current Primary" value={currentPrimary || '-'} />
+          {targetPrimary && targetPrimary !== currentPrimary && (
+            <Property label="Target Primary" value={targetPrimary} />
+          )}
           <Property label="Image" value={getCNPGClusterImage(data)} />
           <Property label="Update Strategy" value={getCNPGClusterUpdateStrategy(data)} />
+          {data.status?.writeService && (
+            <Property label="Write Service" value={
+              <ResourceLink name={data.status.writeService} kind="Service" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+            } />
+          )}
+          {data.status?.readService && (
+            <Property label="Read Service" value={
+              <ResourceLink name={data.status.readService} kind="Service" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+            } />
+          )}
+          {data.spec?.enableSuperuserAccess !== undefined && (
+            <Property label="Superuser Access" value={
+              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'}`}>
+                {data.spec.enableSuperuserAccess ? 'Enabled' : 'Disabled'}
+              </span>
+            } />
+          )}
+          {(data.spec?.minSyncReplicas !== undefined || data.spec?.maxSyncReplicas !== undefined) && (
+            <Property
+              label="Sync Replicas"
+              value={`Min: ${data.spec?.minSyncReplicas ?? '-'} / Max: ${data.spec?.maxSyncReplicas ?? '-'}`}
+            />
+          )}
         </PropertyList>
         {instanceNames.length > 0 && (
           <div className="mt-2 pt-2 border-t border-theme-border">
@@ -92,6 +188,29 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         )}
       </Section>
 
+      {/* Replication State */}
+      {reportedState.length > 0 && (
+        <Section title="Replication" icon={Activity} defaultExpanded>
+          <div className="space-y-1.5">
+            {reportedState.map((instance) => (
+              <div key={instance.podName} className="flex items-center gap-2 text-sm">
+                <span className="text-theme-text-primary font-mono flex-1 break-all">{instance.podName}</span>
+                <span className={
+                  instance.isPrimary
+                    ? 'badge-sm bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
+                    : 'badge-sm bg-theme-elevated text-theme-text-secondary'
+                }>
+                  {instance.isPrimary ? 'Primary' : 'Replica'}
+                </span>
+                {instance.timelineID != null && (
+                  <span className="text-xs text-theme-text-tertiary">TL {instance.timelineID}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Storage */}
       <Section title="Storage" icon={HardDrive} defaultExpanded>
         <PropertyList>
@@ -131,6 +250,9 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
             {backupConfig.lastSuccessfulBackup && (
               <Property label="Last Successful" value={backupConfig.lastSuccessfulBackup} />
             )}
+            {lastFailedBackup && (
+              <Property label="Last Failed" value={lastFailedBackup} />
+            )}
             {backupConfig.firstRecoverabilityPoint && (
               <Property label="First Recoverability" value={backupConfig.firstRecoverabilityPoint} />
             )}
@@ -138,6 +260,35 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         </Section>
       )}
 
+      {/* Certificates */}
+      {certExpirations.length > 0 && (
+        <Section title="Certificates" icon={KeyRound} defaultExpanded>
+          <div className="space-y-1.5">
+            {certExpirations.map((cert) => (
+              <div key={cert.secretName} className="flex items-center gap-2 text-sm">
+                <span className="text-theme-text-primary font-mono flex-1 break-all">{cert.secretName}</span>
+                <span className="text-xs text-theme-text-tertiary">{cert.expiryDate}</span>
+                {cert.daysUntilExpiry <= 7 && (
+                  <span className="badge-sm bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
+                    {cert.daysUntilExpiry}d
+                  </span>
+                )}
+                {cert.daysUntilExpiry > 7 && cert.daysUntilExpiry <= 30 && (
+                  <span className="badge-sm bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+                    {cert.daysUntilExpiry}d
+                  </span>
+                )}
+                {cert.daysUntilExpiry > 30 && (
+                  <span className="badge-sm bg-theme-elevated text-theme-text-secondary">
+                    {cert.daysUntilExpiry}d
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Monitoring */}
       {(monitoring.podMonitorEnabled || (monitoring.customQueriesConfigMap && monitoring.customQueriesConfigMap.length > 0)) && (
         <Section title="Monitoring" icon={Activity} defaultExpanded>
@@ -165,7 +316,7 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
 
       {/* Replication - only if this is a replica cluster */}
       {isReplica && (
-        <Section title="Replication" icon={Shield} defaultExpanded>
+        <Section title="Replica Cluster" icon={Shield} defaultExpanded>
           <PropertyList>
             <Property label="Role" value="Replica" />
             <Property label="Source" value={getCNPGClusterReplicaSource(data)} />

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

@@ -1,4 +1,4 @@
-import { Users, Database } from 'lucide-react'
+import { Users, Database, KeyRound } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getCNPGPoolerCluster,
@@ -6,6 +6,8 @@ import {
   getCNPGPoolerMode,
   getCNPGPoolerInstances,
   getCNPGPoolerParameters,
+  getCNPGPoolerAuthQuery,
+  getCNPGPoolerAuthQuerySecret,
 } from '../resource-utils-cnpg'
 
 interface CNPGPoolerRendererProps {
@@ -19,6 +21,8 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
   const isDegraded = desired > 0 && ready < desired
   const clusterName = getCNPGPoolerCluster(data)
   const parameters = getCNPGPoolerParameters(data)
+  const authQuery = getCNPGPoolerAuthQuery(data)
+  const authQuerySecret = getCNPGPoolerAuthQuerySecret(data)
 
   return (
     <>
@@ -40,6 +44,29 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
         </PropertyList>
       </Section>
 
+      {/* Authentication */}
+      {(authQuery || authQuerySecret) && (
+        <Section title="Authentication" icon={KeyRound} defaultExpanded>
+          <PropertyList>
+            {authQuery && (
+              <Property label="Auth Query" value={
+                <code className="text-xs font-mono bg-theme-elevated px-1.5 py-0.5 rounded break-all">{authQuery}</code>
+              } />
+            )}
+            {authQuerySecret && (
+              <Property label="Auth Query Secret" value={
+                <ResourceLink
+                  name={authQuerySecret.name}
+                  kind="secrets"
+                  namespace={data.metadata?.namespace || ''}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Cluster Reference */}
       <Section title="Cluster" icon={Database} defaultExpanded>
         <PropertyList>

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

@@ -1,4 +1,4 @@
-import { Shield, Clock, Globe } from 'lucide-react'
+import { Shield, Clock, Globe, Key } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 
@@ -26,6 +26,10 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
   const issuerRef = spec.issuerRef || {}
   const usages = spec.usages || []
 
+  const privateKey = spec.privateKey
+  const failedIssuanceAttempts = status.failedIssuanceAttempts
+  const lastFailureTime = status.lastFailureTime
+
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const isReady = readyCond?.status === 'True'
   const isNotReady = readyCond?.status === 'False'
@@ -96,30 +100,53 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
         />
       )}
 
+      {failedIssuanceAttempts > 0 && (
+        <AlertBanner
+          variant="warning"
+          title={`${failedIssuanceAttempts} failed issuance attempt${failedIssuanceAttempts !== 1 ? 's' : ''}`}
+          message={lastFailureTime ? `Last failure: ${formatDate(lastFailureTime)}` : undefined}
+        />
+      )}
+
       {/* Certificate Info */}
       <Section title="Certificate Info" icon={Shield}>
         <PropertyList>
           <Property
             label="Status"
             value={
-              <span className={clsx(
-                'badge',
-                isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
-              )}>
-                {isReady ? 'Ready' : 'Not Ready'}
+              <span className="flex items-center gap-2">
+                <span className={clsx(
+                  'badge',
+                  isReady
+                    ? 'bg-green-500/20 text-green-400'
+                    : 'bg-red-500/20 text-red-400'
+                )}>
+                  {isReady ? 'Ready' : 'Not Ready'}
+                </span>
+                {spec.isCA && (
+                  <span className="badge bg-purple-500/20 text-purple-400">
+                    CA Certificate
+                  </span>
+                )}
               </span>
             }
           />
           <Property label="Secret Name" value={spec.secretName} />
           <Property label="Revision" value={status.revision} />
+          {failedIssuanceAttempts > 0 && (
+            <Property label="Failed Issuance Attempts" value={String(failedIssuanceAttempts)} />
+          )}
+          {lastFailureTime && (
+            <Property label="Last Failure Time" value={formatDate(lastFailureTime)} />
+          )}
         </PropertyList>
       </Section>
 
       {/* Validity */}
       <Section title="Validity" icon={Clock}>
         <PropertyList>
+          <Property label="Duration" value={spec.duration} />
+          <Property label="Renew Before" value={spec.renewBefore} />
           <Property label="Not Before" value={notBefore ? formatDate(notBefore) : '-'} />
           <Property
             label="Not After"
@@ -161,6 +188,18 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
         )}
       </Section>
 
+      {/* Private Key */}
+      {privateKey && (
+        <Section title="Private Key" icon={Key}>
+          <PropertyList>
+            <Property label="Algorithm" value={privateKey.algorithm} />
+            <Property label="Size" value={privateKey.size != null ? String(privateKey.size) : undefined} />
+            <Property label="Encoding" value={privateKey.encoding} />
+            <Property label="Rotation Policy" value={privateKey.rotationPolicy} />
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Domains */}
       {dnsNames.length > 0 && (
         <Section title="Domains" icon={Globe}>

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

@@ -1,4 +1,4 @@
-import { Shield, AlertTriangle, Globe, Key } from 'lucide-react'
+import { Shield, AlertTriangle, Globe, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
 import { getSolverType } from './ClusterIssuerRenderer'
@@ -68,11 +68,19 @@ export function ChallengeRenderer({ data }: { data: any }) {
               </span>
             }
           />
+          {status.reason && !isError && <Property label="Reason" value={status.reason} />}
           <Property
             label="Type"
             value={
-              <span className="badge bg-theme-elevated text-theme-text-secondary">
-                {challengeType}
+              <span className="flex items-center gap-2">
+                <span className="badge bg-theme-elevated text-theme-text-secondary">
+                  {challengeType}
+                </span>
+                {spec.wildcard && (
+                  <span className="badge bg-purple-500/20 text-purple-400">
+                    Wildcard
+                  </span>
+                )}
               </span>
             }
           />
@@ -84,6 +92,17 @@ export function ChallengeRenderer({ data }: { data: any }) {
         </PropertyList>
       </Section>
 
+      {/* Issuer */}
+      {spec.issuerRef && (
+        <Section title="Issuer" icon={FileText}>
+          <PropertyList>
+            <Property label="Name" value={spec.issuerRef.name} />
+            <Property label="Kind" value={spec.issuerRef.kind} />
+            <Property label="Group" value={spec.issuerRef.group} />
+          </PropertyList>
+        </Section>
+      )}
+
       {/* ACME */}
       {(spec.url || spec.token) && (
         <Section title="ACME" icon={Globe}>