@skyhook-io/k8s-ui 1.4.2 → 1.4.3

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

@@ -0,0 +1,146 @@
+import { HeartPulse, Settings, Shield } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, LabelSelectorDisplay } from '../../ui/drawer-components'
+import { getMachineHealthCheckStatus, getMachineHealthCheckClusterName } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIMachineHealthCheckRenderer({ data }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const mhcStatus = getMachineHealthCheckStatus(data)
+  const isFailed = mhcStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const clusterName = getMachineHealthCheckClusterName(data)
+  const expectedMachines = status.expectedMachines ?? 0
+  const currentHealthy = status.currentHealthy ?? 0
+  const remediationsAllowed = status.remediationsAllowed ?? 0
+  const unhealthyConditions = spec.unhealthyConditions || []
+  const nodeStartupTimeout = spec.nodeStartupTimeout
+  const selector = spec.selector || {}
+  const remediationTemplate = spec.remediationTemplate || {}
+
+  // v1beta2 fields
+  const unhealthyNodeConditions = spec.unhealthyNodeConditions || []
+  const unhealthyMachineConditions = spec.unhealthyMachineConditions || []
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="MachineHealthCheck Issue"
+          message={readyCond?.message || 'MachineHealthCheck has unhealthy machines.'}
+        />
+      )}
+
+      <Section title="Overview" icon={HeartPulse}>
+        <PropertyList>
+          <Property label="Cluster" value={clusterName} />
+          <Property label="Expected Machines" value={String(expectedMachines)} />
+          <Property label="Current Healthy" value={`${currentHealthy}/${expectedMachines}`} />
+          <Property label="Remediations Allowed" value={String(remediationsAllowed)} />
+          {nodeStartupTimeout && <Property label="Node Startup Timeout" value={nodeStartupTimeout} />}
+          {spec.maxUnhealthy != null && <Property label="Max Unhealthy" value={String(spec.maxUnhealthy)} />}
+          {spec.unhealthyRange != null && <Property label="Unhealthy Range" value={spec.unhealthyRange} />}
+        </PropertyList>
+      </Section>
+
+      {/* Selector */}
+      {(selector.matchLabels || selector.matchExpressions) && (
+        <Section title="Selector" icon={Settings}>
+          <LabelSelectorDisplay selector={selector} />
+        </Section>
+      )}
+
+      {/* Unhealthy Conditions (v1beta1) */}
+      {unhealthyConditions.length > 0 && (
+        <Section title="Unhealthy Conditions" icon={Shield}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Type</th>
+                <th className="text-left font-medium py-1">Status</th>
+                <th className="text-left font-medium py-1">Timeout</th>
+              </tr>
+            </thead>
+            <tbody>
+              {unhealthyConditions.map((uc: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary">{uc.type}</td>
+                  <td className="py-1 text-theme-text-secondary">{uc.status}</td>
+                  <td className="py-1 text-theme-text-secondary">{uc.timeout}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* v1beta2: unhealthy node/machine conditions */}
+      {unhealthyNodeConditions.length > 0 && (
+        <Section title="Unhealthy Node Conditions" icon={Shield}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Type</th>
+                <th className="text-left font-medium py-1">Status</th>
+                <th className="text-left font-medium py-1">Timeout</th>
+              </tr>
+            </thead>
+            <tbody>
+              {unhealthyNodeConditions.map((uc: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary">{uc.type}</td>
+                  <td className="py-1 text-theme-text-secondary">{uc.status}</td>
+                  <td className="py-1 text-theme-text-secondary">{uc.timeout}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {unhealthyMachineConditions.length > 0 && (
+        <Section title="Unhealthy Machine Conditions" icon={Shield}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Type</th>
+                <th className="text-left font-medium py-1">Status</th>
+                <th className="text-left font-medium py-1">Timeout</th>
+              </tr>
+            </thead>
+            <tbody>
+              {unhealthyMachineConditions.map((uc: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary">{uc.type}</td>
+                  <td className="py-1 text-theme-text-secondary">{uc.status}</td>
+                  <td className="py-1 text-theme-text-secondary">{uc.timeout}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* Remediation Template */}
+      {remediationTemplate.kind && (
+        <Section title="Remediation Template" icon={Settings}>
+          <PropertyList>
+            <Property label="Kind" value={remediationTemplate.kind} />
+            <Property label="Name" value={remediationTemplate.name || '-'} />
+            {remediationTemplate.namespace && <Property label="Namespace" value={remediationTemplate.namespace} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,92 @@
+import { Server, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
+import { formatAge } from '../resource-utils'
+import { getMachinePoolStatus } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIMachinePoolRenderer({ data, onNavigate }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const mpStatus = getMachinePoolStatus(data)
+  const isFailed = mpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const clusterName = spec.clusterName || data.metadata?.labels?.['cluster.x-k8s.io/cluster-name'] || '-'
+  const phase = status.phase || 'Unknown'
+  const desired = spec.replicas ?? 0
+  const ready = status.readyReplicas ?? 0
+  const infraRef = spec.template?.spec?.infrastructureRef || {}
+  const bootstrapRef = spec.template?.spec?.bootstrap?.configRef || {}
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="MachinePool Not Ready"
+          message={readyCond?.message || `MachinePool is in ${phase} state.`}
+        />
+      )}
+
+      <Section title="Overview" icon={Server}>
+        <PropertyList>
+          <Property label="Phase" value={phase} />
+          <Property label="Cluster" value={clusterName} />
+          {spec.minReadySeconds != null && (
+            <Property label="Min Ready Seconds" value={String(spec.minReadySeconds)} />
+          )}
+          {readyCond?.lastTransitionTime && (
+            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      <Section title="Replicas" icon={Server}>
+        <PropertyList>
+          <Property label="Desired" value={String(desired)} />
+          <Property label="Ready" value={String(ready)} />
+        </PropertyList>
+      </Section>
+
+      {(infraRef.kind || bootstrapRef.kind) && (
+        <Section title="Machine Template" icon={Settings}>
+          <PropertyList>
+            {infraRef.kind && (
+              <Property label="Infrastructure" value={
+                <ResourceLink
+                  name={infraRef.name}
+                  kind={kindToPlural(infraRef.kind)}
+                  namespace={infraRef.namespace || data.metadata?.namespace}
+                  group={infraRef.apiVersion?.split('/')?.[0]}
+                  label={`${infraRef.kind}/${infraRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {bootstrapRef.kind && (
+              <Property label="Bootstrap" value={
+                <ResourceLink
+                  name={bootstrapRef.name}
+                  kind={kindToPlural(bootstrapRef.kind)}
+                  namespace={bootstrapRef.namespace || data.metadata?.namespace}
+                  group={bootstrapRef.apiVersion?.split('/')?.[0]}
+                  label={`${bootstrapRef.kind}/${bootstrapRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,170 @@
+import { Cpu, Server, Network, Cloud } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
+import { formatAge } from '../resource-utils'
+import { getMachineStatus, getMachineRole, getMachineClusterName, getMachineNodeRef, getMachineVersion, getMachineProviderID, parseProviderID, getProviderFromInfraKind, parseCAPIConditionMessage } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIMachineRenderer({ data, onNavigate }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const machineStatus = getMachineStatus(data)
+  const isFailed = machineStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  // Find the most informative False condition for the alert message
+  const falseCond = conditions.find((c: any) =>
+    c.status === 'False' && ['BootstrapReady', 'InfrastructureReady', 'NodeHealthy', 'Ready'].includes(c.type)
+  )
+
+  const phase = status.phase || 'Unknown'
+  const role = getMachineRole(data)
+  const clusterName = getMachineClusterName(data)
+  const nodeName = getMachineNodeRef(data)
+  const version = getMachineVersion(data)
+  const providerID = getMachineProviderID(data)
+  const addresses = status.addresses || []
+  const nodeInfo = status.nodeInfo || {}
+  const nodeRef = status.nodeRef || {}
+  const bootstrapRef = spec.bootstrap?.configRef || {}
+  const infraRef = spec.infrastructureRef || {}
+  const parsedProvider = parseProviderID(providerID)
+  const infraProvider = infraRef.kind ? getProviderFromInfraKind(infraRef.kind) : parsedProvider?.provider
+
+  return (
+    <>
+      {isFailed && (() => {
+        const msg = falseCond?.message || readyCond?.message || `Machine is in ${phase} state.`
+        const items = parseCAPIConditionMessage(msg)
+        return <AlertBanner variant="error" title="Machine Not Ready" items={items || undefined} message={items ? undefined : msg} />
+      })()}
+      {!isFailed && falseCond && (() => {
+        const items = parseCAPIConditionMessage(falseCond.message || '')
+        return <AlertBanner variant="warning" title={`${falseCond.type}: ${falseCond.reason || 'False'}`} items={items || undefined} message={items ? undefined : (falseCond.message || `Condition ${falseCond.type} is False.`)} />
+      })()}
+
+      {/* Overview */}
+      <Section title="Overview" icon={Cpu}>
+        <PropertyList>
+          <Property label="Phase" value={phase} />
+          <Property label="Role" value={role} />
+          <Property label="Cluster" value={clusterName} />
+          <Property label="Version" value={version} />
+          {infraProvider && <Property label="Provider" value={infraProvider} />}
+          {spec.failureDomain && <Property label="Failure Domain" value={spec.failureDomain} />}
+          {readyCond?.lastTransitionTime && (
+            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Infrastructure (parsed from providerID) */}
+      {parsedProvider && (
+        <Section title="Infrastructure" icon={Cloud}>
+          <PropertyList>
+            {parsedProvider.region && <Property label="Zone / Region" value={parsedProvider.region} />}
+            {parsedProvider.instanceId && <Property label="Instance ID" value={parsedProvider.instanceId} />}
+            {providerID !== '-' && <Property label="Provider ID" value={
+              <span className="font-mono text-[10px] break-all">{providerID}</span>
+            } />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Node Reference */}
+      {nodeName !== '-' && (
+        <Section title="Node" icon={Server}>
+          <PropertyList>
+            <Property
+              label="Name"
+              value={
+                <ResourceLink
+                  name={nodeName}
+                  kind="nodes"
+                  namespace=""
+                  label={nodeName}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+            {nodeRef.uid && <Property label="UID" value={nodeRef.uid} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* References */}
+      {(bootstrapRef.kind || infraRef.kind) && (
+        <Section title="References" icon={Network}>
+          <PropertyList>
+            {bootstrapRef.kind && (
+              <Property label="Bootstrap" value={
+                <ResourceLink
+                  name={bootstrapRef.name}
+                  kind={kindToPlural(bootstrapRef.kind)}
+                  namespace={bootstrapRef.namespace || data.metadata?.namespace}
+                  group={bootstrapRef.apiVersion?.split('/')?.[0]}
+                  label={`${bootstrapRef.kind}/${bootstrapRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {infraRef.kind && (
+              <Property label="Infrastructure" value={
+                <ResourceLink
+                  name={infraRef.name}
+                  kind={kindToPlural(infraRef.kind)}
+                  namespace={infraRef.namespace || data.metadata?.namespace}
+                  group={infraRef.apiVersion?.split('/')?.[0]}
+                  label={`${infraRef.kind}/${infraRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Addresses */}
+      {addresses.length > 0 && (
+        <Section title="Addresses" icon={Network}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Type</th>
+                <th className="text-left font-medium py-1">Address</th>
+              </tr>
+            </thead>
+            <tbody>
+              {addresses.map((addr: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary">{addr.type}</td>
+                  <td className="py-1 text-theme-text-secondary font-mono">{addr.address}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* Node Info */}
+      {nodeInfo.kubeletVersion && (
+        <Section title="Node Info" icon={Server}>
+          <PropertyList>
+            {nodeInfo.osImage && <Property label="OS Image" value={nodeInfo.osImage} />}
+            {nodeInfo.architecture && <Property label="Architecture" value={nodeInfo.architecture} />}
+            {nodeInfo.kernelVersion && <Property label="Kernel" value={nodeInfo.kernelVersion} />}
+            {nodeInfo.containerRuntimeVersion && <Property label="Container Runtime" value={nodeInfo.containerRuntimeVersion} />}
+            {nodeInfo.kubeletVersion && <Property label="Kubelet" value={nodeInfo.kubeletVersion} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,101 @@
+import { Server, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
+import { formatAge } from '../resource-utils'
+import { getMachineSetStatus, getMachineClusterName } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const msStatus = getMachineSetStatus(data)
+  const isFailed = msStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const clusterName = getMachineClusterName(data)
+  const desired = spec.replicas ?? 0
+  const ready = status.readyReplicas ?? 0
+  const available = status.availableReplicas ?? 0
+  const upToDate = status.upToDateReplicas ?? status.updatedReplicas ?? 0
+  const deletePolicy = spec.deletePolicy || 'Random'
+  const infraRef = spec.template?.spec?.infrastructureRef || {}
+  const bootstrapRef = spec.template?.spec?.bootstrap?.configRef || {}
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="MachineSet Not Ready"
+          message={readyCond?.message || 'MachineSet is not ready.'}
+        />
+      )}
+
+      <Section title="Overview" icon={Server}>
+        <PropertyList>
+          <Property label="Cluster" value={clusterName} />
+          <Property label="Delete Policy" value={deletePolicy} />
+          {spec.minReadySeconds != null && (
+            <Property label="Min Ready Seconds" value={String(spec.minReadySeconds)} />
+          )}
+          {readyCond?.lastTransitionTime && (
+            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      <Section title="Replicas" icon={Server}>
+        <PropertyList>
+          <Property label="Desired" value={String(desired)} />
+          <Property label="Ready" value={String(ready)} />
+          <Property label="Available" value={String(available)} />
+          <Property label="Up-to-date" value={String(upToDate)} />
+        </PropertyList>
+      </Section>
+
+      {(infraRef.kind || bootstrapRef.kind) && (
+        <Section title="Machine Template" icon={Settings}>
+          <PropertyList>
+            {infraRef.kind && (
+              <Property label="Infrastructure" value={
+                <ResourceLink
+                  name={infraRef.name}
+                  kind={kindToPlural(infraRef.kind)}
+                  namespace={infraRef.namespace || data.metadata?.namespace}
+                  group={infraRef.apiVersion?.split('/')?.[0]}
+                  label={`${infraRef.kind}/${infraRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {bootstrapRef.kind && (
+              <Property label="Bootstrap" value={
+                <ResourceLink
+                  name={bootstrapRef.name}
+                  kind={kindToPlural(bootstrapRef.kind)}
+                  namespace={bootstrapRef.namespace || data.metadata?.namespace}
+                  group={bootstrapRef.apiVersion?.split('/')?.[0]}
+                  label={`${bootstrapRef.kind}/${bootstrapRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Owned Machines hint */}
+      <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
+        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/set-name={data.metadata?.name}</code>
+      </div>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,53 @@
+import { Cpu, Cloud } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import { getGCPMachineStatus, getGCPMachineInstanceType, getGCPMachineZone, getGCPMachineInstanceID } from '../resource-utils-gcp-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function GCPMachineRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const conditions = getCAPIConditions(data)
+  const machineStatus = getGCPMachineStatus(data)
+  const isFailed = machineStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner variant="error" title="GCP Machine Not Ready" message={readyCond?.message || 'GCPMachine is not ready.'} />
+      )}
+
+      <Section title="Instance" icon={Cloud}>
+        <PropertyList>
+          <Property label="Instance Type" value={getGCPMachineInstanceType(data)} />
+          <Property label="Zone" value={getGCPMachineZone(data)} />
+          <Property label="Instance ID" value={<span className="font-mono text-[11px]">{getGCPMachineInstanceID(data)}</span>} />
+          {spec.image && <Property label="Image" value={spec.image} />}
+        </PropertyList>
+      </Section>
+
+      {/* Disks */}
+      {spec.additionalDisks?.length > 0 && (
+        <Section title="Additional Disks" icon={Cpu}>
+          <table className="w-full text-xs">
+            <thead><tr className="text-theme-text-tertiary"><th className="text-left font-medium py-1">Size</th><th className="text-left font-medium py-1">Type</th></tr></thead>
+            <tbody>
+              {spec.additionalDisks.map((d: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary">{d.deviceType || '-'}</td>
+                  <td className="py-1 text-theme-text-secondary">{d.size ? `${d.size}GB` : '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { Globe, Shield, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import { getGCPMCPStatus, getGCPMCPClusterName, getGCPMCPProject, getGCPMCPLocation, getGCPMCPVersion, getGCPMCPReleaseChannel, getGCPMCPAutopilot, getGCPMCPEndpoint } from '../resource-utils-gcp-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function GCPManagedControlPlaneRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const conditions = getCAPIConditions(data)
+  const mcpStatus = getGCPMCPStatus(data)
+  const isFailed = mcpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const endpoint = getGCPMCPEndpoint(data)
+  const masterAuth = spec.master_authorized_networks_config
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner variant="error" title="GKE Control Plane Not Ready" message={readyCond?.message || 'GCPManagedControlPlane is not ready.'} />
+      )}
+
+      <Section title="Overview" icon={Globe}>
+        <PropertyList>
+          <Property label="GKE Cluster" value={getGCPMCPClusterName(data)} />
+          <Property label="Project" value={getGCPMCPProject(data)} />
+          <Property label="Location" value={getGCPMCPLocation(data)} />
+          <Property label="Version" value={getGCPMCPVersion(data)} />
+          <Property label="Release Channel" value={getGCPMCPReleaseChannel(data)} />
+          {getGCPMCPAutopilot(data) && <Property label="Autopilot" value="Enabled" />}
+          {endpoint !== '-' && <Property label="Endpoint" value={<span className="font-mono text-[10px] break-all">{endpoint}</span>} />}
+        </PropertyList>
+      </Section>
+
+      {/* Cluster Network */}
+      {spec.clusterNetwork && (
+        <Section title="Network" icon={Shield}>
+          <PropertyList>
+            {spec.clusterNetwork?.pod?.cidrBlock && <Property label="Pod CIDR" value={spec.clusterNetwork.pod.cidrBlock} />}
+            {spec.clusterNetwork?.service?.cidrBlock && <Property label="Service CIDR" value={spec.clusterNetwork.service.cidrBlock} />}
+            {spec.clusterNetwork?.useIPAliases != null && <Property label="IP Aliases" value={spec.clusterNetwork.useIPAliases ? 'Enabled' : 'Disabled'} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Services */}
+      {(spec.loggingService || spec.monitoringService) && (
+        <Section title="Services" icon={Settings}>
+          <PropertyList>
+            {spec.loggingService && <Property label="Logging" value={spec.loggingService} />}
+            {spec.monitoringService && <Property label="Monitoring" value={spec.monitoringService} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Master Authorized Networks */}
+      {masterAuth?.cidr_blocks?.length > 0 && (
+        <Section title="Authorized Networks" icon={Shield}>
+          <div className="flex flex-wrap gap-1">
+            {masterAuth.cidr_blocks.map((block: any, i: number) => (
+              <span key={i} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border font-mono text-[10px]">
+                {block.display_name ? `${block.display_name}: ` : ''}{block.cidr_block}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}