@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,157 @@
+import { Server, HardDrive, Shield, Network } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getEC2NodeClassStatus } from '../resource-utils-karpenter'
+
+interface KarpenterEC2NodeClassRendererProps {
+  data: any
+}
+
+export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.conditions || []
+
+  const nodeClassStatus = getEC2NodeClassStatus(data)
+  const isNotReady = nodeClassStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const amiTerms = spec.amiSelectorTerms || []
+  const blockDevices = spec.blockDeviceMappings || []
+  const subnetTerms = spec.subnetSelectorTerms || []
+  const sgTerms = spec.securityGroupSelectorTerms || []
+  const metadataOptions = spec.metadataOptions
+
+  return (
+    <>
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="EC2NodeClass Not Ready"
+          message={readyCond?.message || 'The EC2NodeClass is not in a ready state.'}
+        />
+      )}
+
+      {/* IAM & AMI */}
+      <Section title="Instance Configuration" icon={Server}>
+        <PropertyList>
+          {spec.role && <Property label="IAM Role" value={spec.role} />}
+          {amiTerms.length > 0 && (
+            <Property
+              label="AMI Selector"
+              value={amiTerms.map((t: any) => t.alias || t.id || t.name || JSON.stringify(t)).join(', ')}
+            />
+          )}
+          {spec.amiFamily && <Property label="AMI Family" value={spec.amiFamily} />}
+        </PropertyList>
+      </Section>
+
+      {/* Block Devices */}
+      {blockDevices.length > 0 && (
+        <Section title={`Block Devices (${blockDevices.length})`} icon={HardDrive}>
+          <div className="space-y-2">
+            {blockDevices.map((bd: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="text-sm font-medium text-theme-text-primary mb-1">
+                  {bd.deviceName || `/dev/xvda`}
+                </div>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+                  {bd.ebs?.volumeType && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Type: </span>
+                      <span className="text-theme-text-secondary">{bd.ebs.volumeType}</span>
+                    </div>
+                  )}
+                  {bd.ebs?.volumeSize && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Size: </span>
+                      <span className="text-theme-text-secondary">{bd.ebs.volumeSize}</span>
+                    </div>
+                  )}
+                  {bd.ebs?.iops && (
+                    <div>
+                      <span className="text-theme-text-tertiary">IOPS: </span>
+                      <span className="text-theme-text-secondary">{bd.ebs.iops}</span>
+                    </div>
+                  )}
+                  {bd.ebs?.throughput && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Throughput: </span>
+                      <span className="text-theme-text-secondary">{bd.ebs.throughput}</span>
+                    </div>
+                  )}
+                  <div>
+                    <span className="text-theme-text-tertiary">Encrypted: </span>
+                    <span className="text-theme-text-secondary">{bd.ebs?.encrypted ? 'Yes' : 'No'}</span>
+                  </div>
+                  {bd.ebs?.deleteOnTermination !== undefined && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Delete on Termination: </span>
+                      <span className="text-theme-text-secondary">{bd.ebs.deleteOnTermination ? 'Yes' : 'No'}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Network - Subnets & Security Groups */}
+      <Section title="Network" icon={Network}>
+        {subnetTerms.length > 0 && (
+          <div className="mb-3">
+            <div className="text-xs text-theme-text-tertiary font-medium mb-1">Subnet Selector</div>
+            {subnetTerms.map((term: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 mb-1">
+                {term.tags && Object.entries(term.tags).map(([key, val]) => (
+                  <span key={key} className="inline-flex items-center px-1.5 py-0.5 mr-1 mb-1 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                    {key}: {String(val)}
+                  </span>
+                ))}
+                {term.id && (
+                  <span className="text-xs text-theme-text-secondary">{term.id}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        {sgTerms.length > 0 && (
+          <div>
+            <div className="text-xs text-theme-text-tertiary font-medium mb-1">Security Group Selector</div>
+            {sgTerms.map((term: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 mb-1">
+                {term.tags && Object.entries(term.tags).map(([key, val]) => (
+                  <span key={key} className="inline-flex items-center px-1.5 py-0.5 mr-1 mb-1 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                    {key}: {String(val)}
+                  </span>
+                ))}
+                {term.id && (
+                  <span className="text-xs text-theme-text-secondary">{term.id}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {/* Metadata Options */}
+      {metadataOptions && (
+        <Section title="Metadata Options" icon={Shield}>
+          <PropertyList>
+            {metadataOptions.httpTokens && (
+              <Property label="HTTP Tokens (IMDSv2)" value={metadataOptions.httpTokens} />
+            )}
+            {metadataOptions.httpPutResponseHopLimit !== undefined && (
+              <Property label="Hop Limit" value={String(metadataOptions.httpPutResponseHopLimit)} />
+            )}
+            {metadataOptions.httpEndpoint && (
+              <Property label="HTTP Endpoint" value={metadataOptions.httpEndpoint} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,188 @@
+import { Server, Cpu, Settings } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getNodeClaimStatus,
+  getNodeClaimInstanceType,
+  getNodeClaimNodeName,
+  getNodeClaimCapacity,
+  getNodeClaimNodePoolRef,
+  getNodeClaimRequirements,
+  getNodeClaimNodeClassRef,
+  getNodeClaimExpireAfter,
+} from '../resource-utils-karpenter'
+
+function formatRelativeTime(isoString: string): string {
+  const date = new Date(isoString)
+  if (isNaN(date.getTime())) return ''
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return `${seconds}s ago`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+interface KarpenterNodeClaimRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeClaimRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const claimStatus = getNodeClaimStatus(data)
+  const isNotReady = claimStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const capacity = getNodeClaimCapacity(data)
+  const requirements = getNodeClaimRequirements(data)
+  const nodeClassRef = getNodeClaimNodeClassRef(data)
+  const expireAfter = getNodeClaimExpireAfter(data)
+
+  // Provisioning steps for timeline
+  const steps = [
+    { type: 'Initialized', label: 'Initialized' },
+    { type: 'Launched', label: 'Launched' },
+    { type: 'Registered', label: 'Registered' },
+    { type: 'Ready', label: 'Ready' },
+  ]
+
+  return (
+    <>
+      {/* Problem alert */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="NodeClaim Not Ready"
+          message={readyCond?.message || 'The NodeClaim is not in a ready state.'}
+        />
+      )}
+
+      {/* Instance Info */}
+      <Section title="Instance" icon={Server}>
+        <PropertyList>
+          <Property label="Instance Type" value={getNodeClaimInstanceType(data)} />
+          <Property label="Node Name" value={getNodeClaimNodeName(data)} />
+          <Property label="NodePool" value={getNodeClaimNodePoolRef(data)} />
+          {nodeClassRef && (
+            <Property
+              label="NodeClass"
+              value={nodeClassRef.name ? (
+                <ResourceLink
+                  name={nodeClassRef.name}
+                  kind={(nodeClassRef.kind || 'EC2NodeClass').toLowerCase() + 's'}
+                  namespace=""
+                  group={nodeClassRef.group}
+                  label={`${nodeClassRef.kind || 'EC2NodeClass'}/${nodeClassRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              ) : '-'}
+            />
+          )}
+          {status.imageID && <Property label="Image ID" value={status.imageID} />}
+          {expireAfter && <Property label="Expire After" value={expireAfter} />}
+        </PropertyList>
+      </Section>
+
+      {/* Capacity */}
+      {Object.keys(capacity).length > 0 && (
+        <Section title="Capacity" icon={Cpu}>
+          <PropertyList>
+            {capacity.cpu && <Property label="CPU" value={capacity.cpu} />}
+            {capacity.memory && <Property label="Memory" value={capacity.memory} />}
+            {capacity.pods && <Property label="Pods" value={capacity.pods} />}
+            {capacity['ephemeral-storage'] && <Property label="Ephemeral Storage" value={capacity['ephemeral-storage']} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Requirements */}
+      {requirements.length > 0 && (
+        <Section title={`Requirements (${requirements.length})`} icon={Settings}>
+          <div className="space-y-1">
+            {requirements.map((req: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{req.key}</span>
+                  <span className="text-theme-text-tertiary">{req.operator}</span>
+                </div>
+                {req.values && req.values.length > 0 && (
+                  <div className="mt-1 flex flex-wrap gap-1">
+                    {req.values.map((v: string, vi: number) => (
+                      <span key={vi} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {v}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Provisioning Timeline */}
+      <Section title="Provisioning" defaultExpanded>
+        <div className="space-y-1">
+          {steps.map((step, index) => {
+            const cond = conditions.find((c: any) => c.type === step.type)
+            const isComplete = cond?.status === 'True'
+            const isFailed = cond?.status === 'False'
+            const isPending = !cond
+            const transitionTime = cond?.lastTransitionTime
+
+            // Find the current step (first non-True)
+            const currentStepIndex = steps.findIndex((s) => {
+              const c = conditions.find((c: any) => c.type === s.type)
+              return c?.status !== 'True'
+            })
+            const isCurrent = index === currentStepIndex
+
+            return (
+              <div
+                key={step.type}
+                className={clsx(
+                  'flex items-center gap-2 px-2 py-1.5 rounded text-sm',
+                  isCurrent && 'bg-blue-500/10 border border-blue-500/30',
+                  isComplete && 'opacity-80',
+                  isPending && !isCurrent && 'opacity-50'
+                )}
+              >
+                <span
+                  className={clsx(
+                    'w-5 h-5 rounded-full flex items-center justify-center text-xs shrink-0',
+                    isComplete && 'bg-green-500/20 text-green-400',
+                    isCurrent && 'bg-blue-500/20 text-blue-400',
+                    isFailed && 'bg-red-500/20 text-red-400',
+                    isPending && !isCurrent && 'bg-gray-500/20 text-gray-400'
+                  )}
+                >
+                  {isComplete ? '\u2713' : isFailed ? '\u2717' : isCurrent ? '\u25CF' : '\u25CB'}
+                </span>
+                <span className="text-theme-text-tertiary text-xs w-4 shrink-0">{index}</span>
+                <span
+                  className={clsx(
+                    'text-sm flex-1',
+                    isCurrent ? 'text-theme-text-primary font-medium' : 'text-theme-text-secondary'
+                  )}
+                >
+                  {step.label}
+                </span>
+                {transitionTime && (
+                  <span className="text-xs text-theme-text-tertiary shrink-0">
+                    {formatRelativeTime(transitionTime)}
+                  </span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,148 @@
+import { Server, Settings, Shield, Cpu, Tag } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getNodePoolStatus,
+  getNodePoolNodeClassRef,
+  getNodePoolDisruptionPolicy,
+  getNodePoolRequirements,
+  getNodePoolWeight,
+} from '../resource-utils-karpenter'
+
+interface KarpenterNodePoolRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoolRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.conditions || []
+
+  const poolStatus = getNodePoolStatus(data)
+  const isNotReady = poolStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const requirements = getNodePoolRequirements(data)
+  const weight = getNodePoolWeight(data)
+  const disruption = spec.disruption || {}
+  const templateLabels = spec.template?.metadata?.labels || {}
+  const templateExpireAfter = spec.template?.spec?.expireAfter
+  const nodeClassRef = spec.template?.spec?.nodeClassRef
+
+  return (
+    <>
+      {/* Problem alert */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="NodePool Not Ready"
+          message={readyCond?.message || 'The NodePool is not in a ready state.'}
+        />
+      )}
+
+      {/* NodeClass Reference */}
+      <Section title="Node Class" icon={Server}>
+        <PropertyList>
+          <Property
+            label="Reference"
+            value={nodeClassRef?.name ? (
+              <ResourceLink
+                name={nodeClassRef.name}
+                kind={(nodeClassRef.kind || 'EC2NodeClass').toLowerCase() + 's'}
+                namespace=""
+                group={nodeClassRef.group}
+                label={getNodePoolNodeClassRef(data)}
+                onNavigate={onNavigate}
+              />
+            ) : getNodePoolNodeClassRef(data)}
+          />
+          {nodeClassRef?.group && (
+            <Property label="API Group" value={nodeClassRef.group} />
+          )}
+          {nodeClassRef?.kind && (
+            <Property label="Kind" value={nodeClassRef.kind} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Limits */}
+      <Section title="Limits" icon={Cpu}>
+        <PropertyList>
+          {spec.limits?.cpu && <Property label="CPU" value={spec.limits.cpu} />}
+          {spec.limits?.memory && <Property label="Memory" value={spec.limits.memory} />}
+          {!spec.limits?.cpu && !spec.limits?.memory && (
+            <Property label="Limits" value="No limits configured" />
+          )}
+          {weight !== undefined && <Property label="Weight" value={String(weight)} />}
+        </PropertyList>
+      </Section>
+
+      {/* Disruption */}
+      <Section title="Disruption" icon={Shield}>
+        <PropertyList>
+          <Property label="Consolidation Policy" value={getNodePoolDisruptionPolicy(data)} />
+          {disruption.consolidateAfter && (
+            <Property label="Consolidate After" value={disruption.consolidateAfter} />
+          )}
+          {(disruption.expireAfter || templateExpireAfter) && (
+            <Property label="Expire After" value={disruption.expireAfter || templateExpireAfter} />
+          )}
+        </PropertyList>
+        {disruption.budgets && disruption.budgets.length > 0 && (
+          <div className="mt-2 space-y-1">
+            <div className="text-xs text-theme-text-tertiary font-medium mb-1">Budgets</div>
+            {disruption.budgets.map((budget: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm text-theme-text-secondary">
+                {budget.nodes && <span>Nodes: {budget.nodes}</span>}
+                {budget.schedule && <span className="ml-2">Schedule: {budget.schedule}</span>}
+                {budget.duration && <span className="ml-2">Duration: {budget.duration}</span>}
+              </div>
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {/* Template Labels */}
+      {Object.keys(templateLabels).length > 0 && (
+        <Section title="Template Labels" icon={Tag}>
+          <div className="flex flex-wrap gap-1">
+            {Object.entries(templateLabels).map(([key, val]) => (
+              <span
+                key={key}
+                className="inline-flex items-center px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary"
+              >
+                {key}: {String(val)}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Requirements */}
+      {requirements.length > 0 && (
+        <Section title={`Requirements (${requirements.length})`} icon={Settings} defaultExpanded>
+          <div className="space-y-1">
+            {requirements.map((req: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{req.key}</span>
+                  <span className="text-theme-text-tertiary">{req.operator}</span>
+                </div>
+                {req.values && req.values.length > 0 && (
+                  <div className="mt-1 flex flex-wrap gap-1">
+                    {req.values.map((v: string, vi: number) => (
+                      <span key={vi} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {v}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,90 @@
+import { Cpu } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getScaledJobStatus,
+  getScaledJobTarget,
+  getScaledJobStrategy,
+  getScaledJobTriggers,
+} from '../resource-utils-keda'
+
+interface KedaScaledJobRendererProps {
+  data: any
+}
+
+export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.conditions || []
+
+  const jobStatus = getScaledJobStatus(data)
+  const isNotReady = jobStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const triggers = getScaledJobTriggers(data)
+
+  return (
+    <>
+      {/* Problem alert */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="ScaledJob Not Ready"
+          message={readyCond?.message || 'The ScaledJob is not in a ready state.'}
+        />
+      )}
+
+      {/* Job Target section */}
+      <Section title="Job Scaling" icon={Cpu}>
+        <PropertyList>
+          <Property label="Job Target" value={getScaledJobTarget(data)} />
+          <Property label="Strategy" value={getScaledJobStrategy(data)} />
+          {spec.pollingInterval !== undefined && (
+            <Property label="Polling Interval" value={`${spec.pollingInterval}s`} />
+          )}
+          {spec.successfulJobsHistoryLimit !== undefined && (
+            <Property label="Success History" value={String(spec.successfulJobsHistoryLimit)} />
+          )}
+          {spec.failedJobsHistoryLimit !== undefined && (
+            <Property label="Failure History" value={String(spec.failedJobsHistoryLimit)} />
+          )}
+          {spec.maxReplicaCount !== undefined && (
+            <Property label="Max Replicas" value={String(spec.maxReplicaCount)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Triggers section */}
+      {triggers.length > 0 && (
+        <Section title={`Triggers (${triggers.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {triggers.map((trigger, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{trigger.type}</span>
+                  {trigger.name && (
+                    <span className="text-theme-text-tertiary">({trigger.name})</span>
+                  )}
+                  {trigger.authenticationRef && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      auth: {trigger.authenticationRef.name}
+                    </span>
+                  )}
+                </div>
+                {trigger.metadata && Object.keys(trigger.metadata).length > 0 && (
+                  <div className="mt-1 flex flex-wrap gap-1">
+                    {Object.entries(trigger.metadata).map(([k, v]) => (
+                      <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {k}: {v}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}