@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,138 @@
+import { HardDrive, Link, Database, Server } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface PersistentVolumeRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+const accessModeShorthand: Record<string, string> = {
+  ReadWriteOnce: 'RWO',
+  ReadOnlyMany: 'ROX',
+  ReadWriteMany: 'RWX',
+  ReadWriteOncePod: 'RWOP',
+}
+
+function formatAccessModes(modes: string[] | undefined): string | undefined {
+  if (!modes || modes.length === 0) return undefined
+  return modes.map(m => accessModeShorthand[m] || m).join(', ')
+}
+
+export function PersistentVolumeRenderer({ data, onNavigate }: PersistentVolumeRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const phase = status.phase
+
+  const claimRef = spec.claimRef
+  const csi = spec.csi
+  const nodeAffinity = spec.nodeAffinity
+
+  // Problem detection
+  const isFailed = phase === 'Failed'
+  const isReleased = phase === 'Released'
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="Issues Detected"
+          message="PV has failed"
+        />
+      )}
+
+      {isReleased && (
+        <AlertBanner
+          variant="warning"
+          title="Issues Detected"
+          message="PV is released but not yet available or reclaimed"
+        />
+      )}
+
+      {/* Status */}
+      <Section title="Status" icon={HardDrive}>
+        <PropertyList>
+          <Property
+            label="Phase"
+            value={
+              <span className={clsx(
+                (phase === 'Bound' || phase === 'Available') && 'text-green-400',
+                phase === 'Released' && 'text-yellow-400',
+                phase === 'Failed' && 'text-red-400',
+              )}>
+                {phase}
+              </span>
+            }
+          />
+          <Property label="Capacity" value={spec.capacity?.storage} />
+          <Property label="Access Modes" value={formatAccessModes(spec.accessModes)} />
+          <Property label="Volume Mode" value={spec.volumeMode} />
+          <Property
+            label="Reclaim Policy"
+            value={
+              spec.persistentVolumeReclaimPolicy ? (
+                <span className={clsx(
+                  spec.persistentVolumeReclaimPolicy === 'Delete' && 'text-red-400',
+                  spec.persistentVolumeReclaimPolicy === 'Retain' && 'text-green-400',
+                )}>
+                  {spec.persistentVolumeReclaimPolicy}
+                </span>
+              ) : undefined
+            }
+          />
+          <Property label="Storage Class" value={
+            spec.storageClassName ? <ResourceLink name={spec.storageClassName} kind="storageclasses" namespace="" onNavigate={onNavigate} /> : undefined
+          } />
+        </PropertyList>
+      </Section>
+
+      {/* Claim Reference */}
+      {claimRef && (
+        <Section title="Claim" icon={Link}>
+          <PropertyList>
+            <Property label="Namespace" value={claimRef.namespace} />
+            <Property label="Name" value={
+              claimRef.name ? <ResourceLink name={claimRef.name} kind="persistentvolumeclaims" namespace={claimRef.namespace || ''} onNavigate={onNavigate} /> : undefined
+            } />
+            <Property label="UID" value={claimRef.uid} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* CSI */}
+      {csi && (
+        <Section title="CSI" icon={Database}>
+          <PropertyList>
+            <Property label="Driver" value={csi.driver} />
+            <Property label="Volume Handle" value={csi.volumeHandle} />
+            <Property label="FS Type" value={csi.fsType} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Node Affinity */}
+      {nodeAffinity?.required?.nodeSelectorTerms && nodeAffinity.required.nodeSelectorTerms.length > 0 && (
+        <Section title="Node Affinity" icon={Server}>
+          <div className="space-y-2">
+            {nodeAffinity.required.nodeSelectorTerms.map((term: any, termIdx: number) => (
+              <div key={termIdx} className="space-y-1">
+                {term.matchExpressions?.map((expr: any, exprIdx: number) => (
+                  <div key={exprIdx} className="flex flex-wrap gap-1">
+                    <span className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+                      {expr.key} {expr.operator} {expr.values?.join(', ')}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,126 @@
+import { Shield, Activity } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner } from '../../ui/drawer-components'
+
+interface PodDisruptionBudgetRendererProps {
+  data: any
+}
+
+export function PodDisruptionBudgetRenderer({ data }: PodDisruptionBudgetRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const matchLabels = spec.selector?.matchLabels || {}
+  const hasSelector = Object.keys(matchLabels).length > 0
+
+  // Determine budget type
+  const hasMaxUnavailable = spec.maxUnavailable !== undefined && spec.maxUnavailable !== null
+  const hasMinAvailable = spec.minAvailable !== undefined && spec.minAvailable !== null
+  const budgetType = hasMaxUnavailable ? 'Max Unavailable' : hasMinAvailable ? 'Min Available' : undefined
+  const budgetValue = hasMaxUnavailable ? spec.maxUnavailable : hasMinAvailable ? spec.minAvailable : undefined
+
+  // Problem detection
+  const disruptionsAllowed = status.disruptionsAllowed
+  const expectedPods = status.expectedPods
+  const currentHealthy = status.currentHealthy
+  const desiredHealthy = status.desiredHealthy
+
+  const noDisruptionsAllowed = disruptionsAllowed === 0 && expectedPods > 0
+  const insufficientHealthy = currentHealthy !== undefined && desiredHealthy !== undefined && currentHealthy < desiredHealthy
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {insufficientHealthy && (
+        <AlertBanner
+          variant="error"
+          title="Issues Detected"
+          message={`Insufficient healthy pods (${currentHealthy} healthy, ${desiredHealthy} desired)`}
+        />
+      )}
+
+      {noDisruptionsAllowed && !insufficientHealthy && (
+        <AlertBanner
+          variant="warning"
+          title="Issues Detected"
+          message="No disruptions currently allowed"
+        />
+      )}
+
+      <Section title="Budget" icon={Shield}>
+        <PropertyList>
+          <Property label="Budget Type" value={budgetType} />
+          <Property label="Budget Value" value={budgetValue !== undefined ? String(budgetValue) : undefined} />
+          <Property
+            label="Disruptions"
+            value={
+              disruptionsAllowed !== undefined ? (
+                <span className={clsx(
+                  disruptionsAllowed > 0 ? 'text-green-400' : 'text-red-400'
+                )}>
+                  {disruptionsAllowed} allowed
+                </span>
+              ) : undefined
+            }
+          />
+          <Property label="Eviction Policy" value={spec.unhealthyPodEvictionPolicy} />
+        </PropertyList>
+      </Section>
+
+      <Section title="Pod Status" icon={Activity}>
+        <PropertyList>
+          <Property
+            label="Current Healthy"
+            value={
+              currentHealthy !== undefined ? (
+                <span className={clsx(
+                  desiredHealthy !== undefined && currentHealthy >= desiredHealthy
+                    ? 'text-green-400'
+                    : 'text-red-400'
+                )}>
+                  {currentHealthy}
+                </span>
+              ) : undefined
+            }
+          />
+          <Property label="Desired Healthy" value={desiredHealthy} />
+          <Property label="Expected Pods" value={expectedPods} />
+        </PropertyList>
+        {currentHealthy !== undefined && expectedPods !== undefined && expectedPods > 0 && (
+          <div className="mt-3 bg-theme-elevated/30 rounded p-2 text-sm">
+            <div className="flex items-center justify-between">
+              <span className="text-theme-text-secondary">Health</span>
+              <span className={clsx(
+                desiredHealthy !== undefined && currentHealthy >= desiredHealthy
+                  ? 'text-green-400'
+                  : 'text-red-400'
+              )}>
+                {currentHealthy}/{expectedPods} healthy
+              </span>
+            </div>
+            <div className="mt-2 h-2 bg-theme-hover rounded overflow-hidden">
+              <div
+                className={clsx(
+                  'h-full transition-all',
+                  desiredHealthy !== undefined && currentHealthy >= desiredHealthy
+                    ? 'bg-green-500'
+                    : 'bg-red-500'
+                )}
+                style={{ width: `${Math.min(100, (currentHealthy / expectedPods) * 100)}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </Section>
+
+      <Section title="Selector">
+        {hasSelector ? (
+          <KeyValueBadgeList items={matchLabels} />
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">All pods in namespace</div>
+        )}
+      </Section>
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { Radio } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList } from '../../ui/drawer-components'
+import {
+  getPodMonitorEndpoints,
+  getPodMonitorNamespaceSelector,
+} from '../resource-utils-prometheus'
+
+interface PodMonitorRendererProps {
+  data: any
+}
+
+export function PodMonitorRenderer({ data }: PodMonitorRendererProps) {
+  const endpoints = getPodMonitorEndpoints(data)
+  const selector = data.spec?.selector?.matchLabels
+  const conditions = data.status?.conditions
+
+  return (
+    <>
+      <Section title="PodMonitor" icon={Radio}>
+        <PropertyList>
+          <Property label="Endpoints" value={String(endpoints.length)} />
+          <Property label="Namespace Scope" value={getPodMonitorNamespaceSelector(data)} />
+          <Property label="Sample Limit" value={data.spec?.sampleLimit ? String(data.spec.sampleLimit) : undefined} />
+        </PropertyList>
+      </Section>
+
+      {endpoints.length > 0 && (
+        <Section title={`Pod Metrics Endpoints (${endpoints.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {endpoints.map((ep, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {ep.port && (
+                    <span className="text-theme-text-primary font-medium">{ep.port}</span>
+                  )}
+                  <span className="text-theme-text-secondary">{ep.path}</span>
+                  {ep.interval && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      every {ep.interval}
+                    </span>
+                  )}
+                  {ep.scheme && ep.scheme !== 'http' && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      {ep.scheme}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {selector && Object.keys(selector).length > 0 && (
+        <Section title="Selector">
+          <KeyValueBadgeList items={selector} />
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}