@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,263 @@
+import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+
+interface GRPCRouteRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const parentRefs = spec.parentRefs || []
+  const hostnames = spec.hostnames || []
+  const rules = spec.rules || []
+  const parentStatuses = status.parents || []
+  const routeNs = data.metadata?.namespace || ''
+
+  const notAcceptedParents = parentStatuses.filter((p: any) =>
+    (p.conditions || []).some((c: any) => c.type === 'Accepted' && c.status === 'False')
+  )
+  const unresolvedRefsParents = parentStatuses.filter((p: any) =>
+    (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
+  )
+
+  const firstParentConditions = parentStatuses.length > 0
+    ? parentStatuses[0].conditions
+    : undefined
+
+  function toGatewayRef(ref: any): ResourceRef {
+    return {
+      kind: 'Gateway',
+      namespace: ref.namespace || routeNs,
+      name: ref.name,
+      group: 'gateway.networking.k8s.io',
+    }
+  }
+
+  function toServiceRef(backend: any): ResourceRef {
+    return {
+      kind: 'Service',
+      namespace: backend.namespace || routeNs,
+      name: backend.name,
+    }
+  }
+
+  return (
+    <>
+      {notAcceptedParents.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Route Not Accepted"
+          message={notAcceptedParents.map((p: any) => {
+            const cond = (p.conditions || []).find((c: any) => c.type === 'Accepted' && c.status === 'False')
+            const gwName = p.parentRef?.name || 'unknown'
+            return cond?.reason
+              ? `Gateway "${gwName}": ${cond.reason}${cond.message ? ' — ' + cond.message : ''}`
+              : `Gateway "${gwName}" has not accepted this route.`
+          }).join('; ')}
+        />
+      )}
+
+      {unresolvedRefsParents.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Unresolved References"
+          message="Some backend references could not be resolved. Check that the target services exist and are accessible."
+        />
+      )}
+
+      <Section title="Status" icon={Globe}>
+        <PropertyList>
+          <Property
+            label="Hostnames"
+            value={
+              hostnames.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {hostnames.map((h: string) => (
+                    <span key={h} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">{h}</span>
+                  ))}
+                </div>
+              ) : (
+                <span className="text-xs text-theme-text-tertiary">Any</span>
+              )
+            }
+          />
+          <Property
+            label="Parent Gateways"
+            value={
+              parentRefs.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {parentRefs.map((ref: any, i: number) => (
+                    <ResourceRefBadge key={`${ref.namespace || ''}-${ref.name}-${i}`} resourceRef={toGatewayRef(ref)} onClick={onNavigate} />
+                  ))}
+                </div>
+              ) : 'None'
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Rules (${rules.length})`} icon={Network} defaultExpanded>
+        <div className="space-y-1.5">
+          {rules.map((rule: any, ruleIdx: number) => {
+            const matches = rule.matches || []
+            const backendRefs = rule.backendRefs || []
+            const filters = rule.filters || []
+            const totalWeight = backendRefs.reduce((sum: number, b: any) => sum + (b.weight ?? 1), 0)
+            const hasWeights = backendRefs.length > 1 && backendRefs.some((b: any) => b.weight !== undefined)
+            const multiBackend = backendRefs.length > 1
+
+            return (
+              <div key={ruleIdx} className="bg-theme-elevated/30 rounded p-2.5">
+                <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">
+                  Rule {ruleIdx + 1}
+                </div>
+
+                {/* gRPC matches → backends */}
+                <div className="space-y-1">
+                  {matches.length === 0 && backendRefs.length === 0 && (
+                    <div className="text-xs text-theme-text-secondary italic">Match all</div>
+                  )}
+                  {matches.length === 0 && backendRefs.length > 0 && !multiBackend && (
+                    <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                      <span className="italic text-theme-text-tertiary">all</span>
+                      <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                      <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                      {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
+                    </div>
+                  )}
+                  {matches.length === 0 && multiBackend && (
+                    <>
+                      <div className="text-xs text-theme-text-secondary italic">all</div>
+                      {backendRefs.map((b: any, bi: number) => {
+                        const pct = hasWeights ? Math.round(((b.weight ?? 1) / totalWeight) * 100) : null
+                        return (
+                          <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
+                            <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                            <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                            {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
+                            {pct !== null && <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>}
+                          </div>
+                        )
+                      })}
+                    </>
+                  )}
+                  {matches.map((match: any, matchIdx: number) => (
+                    <div key={matchIdx} className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                      {match.method && (
+                        <>
+                          {match.method.type && match.method.type !== 'Exact' && (
+                            <span className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded text-[10px]">{match.method.type}</span>
+                          )}
+                          {match.method.service && (
+                            <span>
+                              <span className="text-theme-text-primary font-medium">{match.method.service}</span>
+                              {match.method.method && <span className="text-theme-text-tertiary">/{match.method.method}</span>}
+                            </span>
+                          )}
+                          {!match.method.service && match.method.method && (
+                            <span><span className="text-theme-text-tertiary">*/</span><span className="text-theme-text-primary">{match.method.method}</span></span>
+                          )}
+                        </>
+                      )}
+                      {match.headers && match.headers.length > 0 && (
+                        <span className="text-theme-text-tertiary">
+                          headers: [{match.headers.map((h: any) => `${h.name}=${h.value}`).join(', ')}]
+                        </span>
+                      )}
+                      {/* Single backend inline on first match */}
+                      {matchIdx === 0 && backendRefs.length === 1 && (
+                        <>
+                          <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                          <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                          {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
+                        </>
+                      )}
+                    </div>
+                  ))}
+                  {/* Multiple backends as aligned column below matches */}
+                  {matches.length > 0 && multiBackend && (
+                    backendRefs.map((b: any, bi: number) => {
+                      const pct = hasWeights ? Math.round(((b.weight ?? 1) / totalWeight) * 100) : null
+                      return (
+                        <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
+                          <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                          <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                          {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
+                          {pct !== null && <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>}
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+
+                {/* Filters */}
+                {filters.length > 0 && (
+                  <div className="mt-1.5">
+                    <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                      <Filter className="w-3 h-3 text-theme-text-tertiary" />
+                      {filters.map((filter: any, filterIdx: number) => (
+                        <span key={filterIdx} className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded">
+                          {filter.type}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </Section>
+
+      {/* Parent Status */}
+      {parentStatuses.length > 0 && (
+        <Section title={`Parent Status (${parentStatuses.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {parentStatuses.map((parent: any, idx: number) => {
+              const ref = parent.parentRef || {}
+              const conditions = parent.conditions || []
+              const accepted = conditions.find((c: any) => c.type === 'Accepted')
+              const resolved = conditions.find((c: any) => c.type === 'ResolvedRefs')
+
+              return (
+                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="bg-theme-elevated/30 rounded p-2.5">
+                  <div className="text-sm font-medium text-theme-text-primary mb-1.5">
+                    {ref.namespace ? `${ref.namespace}/` : ''}{ref.name || 'unknown'}
+                    {ref.sectionName ? ` (${ref.sectionName})` : ''}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {accepted && (
+                      <span className={clsx(
+                        'px-2 py-0.5 rounded text-xs font-medium',
+                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
+                      )}>
+                        {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
+                      </span>
+                    )}
+                    {resolved && (
+                      <span className={clsx(
+                        'px-2 py-0.5 rounded text-xs font-medium',
+                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
+                      )}>
+                        {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
+                      </span>
+                    )}
+                  </div>
+                  {accepted?.message && accepted.status === 'False' && (
+                    <div className="text-xs text-theme-text-tertiary mt-1">{accepted.message}</div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={firstParentConditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,68 @@
+import { Cpu } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+
+interface GatewayClassRendererProps {
+  data: any
+}
+
+export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const acceptedCond = conditions.find((c: any) => c.type === 'Accepted')
+  const isAccepted = acceptedCond?.status === 'True'
+  const isNotAccepted = acceptedCond?.status === 'False'
+
+  return (
+    <>
+      {/* Problem detection alert */}
+      {isNotAccepted && (
+        <AlertBanner
+          variant="error"
+          title="GatewayClass Not Accepted"
+          message={<>{acceptedCond.reason && <span className="font-medium">{acceptedCond.reason}: </span>}{acceptedCond.message || 'The gateway class has not been accepted by the controller.'}</>}
+        />
+      )}
+
+      {/* Controller section */}
+      <Section title="Gateway Class" icon={Cpu}>
+        <PropertyList>
+          <Property label="Controller" value={spec.controllerName} />
+          {spec.description && <Property label="Description" value={spec.description} />}
+          <Property
+            label="Accepted"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isAccepted
+                  ? 'bg-green-500/20 text-green-400'
+                  : isNotAccepted
+                    ? 'bg-red-500/20 text-red-400'
+                    : 'bg-gray-500/20 text-gray-400'
+              )}>
+                {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
+              </span>
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      {/* Parameter references (if any) */}
+      {spec.parametersRef && (
+        <Section title="Parameters Reference">
+          <PropertyList>
+            <Property label="Group" value={spec.parametersRef.group} />
+            <Property label="Kind" value={spec.parametersRef.kind} />
+            <Property label="Name" value={spec.parametersRef.name} />
+            {spec.parametersRef.namespace && <Property label="Namespace" value={spec.parametersRef.namespace} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,218 @@
+import { Globe, Radio, Lock } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+const protocolColors: Record<string, string> = {
+  HTTP: 'bg-blue-500/20 text-blue-400',
+  HTTPS: 'bg-green-500/20 text-green-400',
+  TLS: 'bg-green-500/20 text-green-400',
+  TCP: 'bg-orange-500/20 text-orange-400',
+  UDP: 'bg-purple-500/20 text-purple-400',
+}
+
+interface GatewayRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const listeners = spec.listeners || []
+  const statusListeners = status.listeners || []
+  const statusAddresses = status.addresses || []
+  const specAddresses = spec.addresses || []
+
+  const acceptedCond = conditions.find((c: any) => c.type === 'Accepted')
+  const programmedCond = conditions.find((c: any) => c.type === 'Programmed')
+  const isAccepted = acceptedCond?.status === 'True'
+  const isNotAccepted = acceptedCond?.status === 'False'
+  const isProgrammed = programmedCond?.status === 'True'
+  const isNotProgrammed = programmedCond?.status === 'False'
+
+  // Merge spec and status addresses for display
+  const allAddresses = statusAddresses.length > 0 ? statusAddresses : specAddresses
+
+  // Helper to find status for a listener by name
+  function getListenerStatus(name: string) {
+    return statusListeners.find((sl: any) => sl.name === name)
+  }
+
+  return (
+    <>
+      {/* Problem detection alerts */}
+      {isNotAccepted && (
+        <AlertBanner
+          variant="error"
+          title="Gateway Not Accepted"
+          message={<>{acceptedCond.reason && <span className="font-medium">{acceptedCond.reason}: </span>}{acceptedCond.message || 'The gateway has not been accepted by the controller.'}</>}
+        />
+      )}
+
+      {isNotProgrammed && (
+        <AlertBanner
+          variant="warning"
+          title="Gateway Not Programmed"
+          message={<>{programmedCond.reason && <span className="font-medium">{programmedCond.reason}: </span>}{programmedCond.message || 'The gateway configuration has not been programmed into the data plane.'}</>}
+        />
+      )}
+
+      {/* Status section */}
+      <Section title="Gateway" icon={Globe}>
+        <PropertyList>
+          <Property label="Gateway Class" value={
+            spec.gatewayClassName ? <ResourceLink name={spec.gatewayClassName} kind="gatewayclasses" onNavigate={onNavigate} /> : undefined
+          } />
+          <Property
+            label="Accepted"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isAccepted
+                  ? 'bg-green-500/20 text-green-400'
+                  : isNotAccepted
+                    ? 'bg-red-500/20 text-red-400'
+                    : 'bg-gray-500/20 text-gray-400'
+              )}>
+                {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
+              </span>
+            }
+          />
+          <Property
+            label="Programmed"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isProgrammed
+                  ? 'bg-green-500/20 text-green-400'
+                  : isNotProgrammed
+                    ? 'bg-red-500/20 text-red-400'
+                    : 'bg-gray-500/20 text-gray-400'
+              )}>
+                {isProgrammed ? 'True' : isNotProgrammed ? 'False' : 'Unknown'}
+              </span>
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      {/* Addresses section */}
+      {allAddresses.length > 0 && (
+        <Section title="Addresses" defaultExpanded>
+          <div className="space-y-2">
+            {allAddresses.map((addr: any, i: number) => (
+              <div key={`${addr.type}-${addr.value}-${i}`} className="flex items-center gap-2 text-sm">
+                <span className="text-theme-text-tertiary w-28 shrink-0">{addr.type || 'Unknown'}</span>
+                <span className="text-theme-text-primary break-all">{addr.value}</span>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Listeners section */}
+      <Section title={`Listeners (${listeners.length})`} icon={Radio} defaultExpanded>
+        <div className="space-y-3">
+          {listeners.map((listener: any) => {
+            const listenerStatus = getListenerStatus(listener.name)
+            const listenerConditions = listenerStatus?.conditions || []
+            const listenerAccepted = listenerConditions.find((c: any) => c.type === 'Accepted')
+            const listenerConflicted = listenerConditions.find((c: any) => c.type === 'Conflicted')
+            const listenerResolvedRefs = listenerConditions.find((c: any) => c.type === 'ResolvedRefs')
+            const isListenerAccepted = listenerAccepted?.status === 'True'
+            const isListenerNotAccepted = listenerAccepted?.status === 'False'
+            const isConflicted = listenerConflicted?.status === 'True'
+            const hasUnresolvedRefs = listenerResolvedRefs?.status === 'False'
+            const isHTTPS = listener.protocol === 'HTTPS' || listener.protocol === 'TLS'
+
+            return (
+              <div key={listener.name} className="bg-theme-elevated/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    {isHTTPS && <Lock className="w-3.5 h-3.5 text-green-400" />}
+                    <span className="text-sm font-medium text-theme-text-primary">{listener.name}</span>
+                    <span className={clsx(
+                      'px-1.5 py-0.5 rounded text-[10px] font-medium',
+                      protocolColors[listener.protocol] || 'bg-gray-500/20 text-gray-400'
+                    )}>
+                      {listener.protocol}:{listener.port}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    {isConflicted && (
+                      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-500/20 text-red-400">
+                        Conflicted
+                      </span>
+                    )}
+                    {hasUnresolvedRefs && (
+                      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-yellow-500/20 text-yellow-400">
+                        Unresolved Refs
+                      </span>
+                    )}
+                    {listenerAccepted && (
+                      <span className={clsx(
+                        'w-4 h-4 rounded-full flex items-center justify-center text-xs shrink-0',
+                        isListenerAccepted
+                          ? 'bg-green-500/20 text-green-400'
+                          : isListenerNotAccepted
+                            ? 'bg-red-500/20 text-red-400'
+                            : 'bg-gray-500/20 text-gray-400'
+                      )}>
+                        {isListenerAccepted ? '\u2713' : isListenerNotAccepted ? '\u2717' : '?'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="space-y-1 text-xs text-theme-text-secondary">
+                  {listener.hostname && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Hostname: </span>
+                      <span>{listener.hostname}</span>
+                    </div>
+                  )}
+
+                  {isHTTPS && listener.tls && (
+                    <div>
+                      <span className="text-theme-text-tertiary">TLS Mode: </span>
+                      <span>{listener.tls.mode || 'Terminate'}</span>
+                      {listener.tls.certificateRefs?.length > 0 && (
+                        <span className="ml-2">
+                          <span className="text-theme-text-tertiary">Certs: </span>
+                          {listener.tls.certificateRefs.map((ref: any, ci: number) => (
+                            <span key={ci}>
+                              {ci > 0 && ', '}
+                              <ResourceLink name={ref.name} kind="secrets" namespace={ref.namespace || data.metadata?.namespace || ''} onNavigate={onNavigate} />
+                            </span>
+                          ))}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  {listener.allowedRoutes && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Allowed Routes: </span>
+                      <span>{listener.allowedRoutes.namespaces?.from || 'Same'}</span>
+                    </div>
+                  )}
+
+                  {listenerStatus && (
+                    <div>
+                      <span className="text-theme-text-tertiary">Attached Routes: </span>
+                      <span className="text-theme-text-primary font-medium">{listenerStatus.attachedRoutes ?? 0}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </Section>
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}