@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,195 @@
+import { Globe, ArrowRight, Network } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+
+interface SimpleRouteRendererProps {
+  data: any
+  kind: 'TCPRoute' | 'TLSRoute'
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRendererProps) {
+  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 isTLS = kind === 'TLSRoute'
+
+  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>
+          {isTLS && (
+            <Property
+              label="SNI 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 backendRefs = rule.backendRefs || []
+            const hasWeights = backendRefs.length > 1 && backendRefs.some((b: any) => b.weight !== undefined)
+            const totalWeight = hasWeights ? backendRefs.reduce((sum: number, b: any) => sum + (b.weight ?? 1), 0) : 0
+
+            return (
+              <div key={ruleIdx} className="bg-theme-elevated/30 rounded p-2.5">
+                {rules.length > 1 && (
+                  <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">
+                    Rule {ruleIdx + 1}
+                  </div>
+                )}
+
+                {backendRefs.length > 0 ? (
+                  <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                    <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                    {backendRefs.map((b: any, bi: number) => {
+                      const pct = hasWeights ? Math.round(((b.weight ?? 1) / totalWeight) * 100) : null
+                      return (
+                        <span key={bi} className="flex items-center gap-1">
+                          <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>
+                          )}
+                        </span>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  <div className="text-xs text-theme-text-tertiary italic">No backends</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/StorageClassRenderer.tsx

@@ -0,0 +1,82 @@
+import { Database, Settings } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface StorageClassRendererProps {
+  data: any
+}
+
+export function StorageClassRenderer({ data }: StorageClassRendererProps) {
+  const parameters = data.parameters || {}
+  const mountOptions = data.mountOptions || []
+  const hasParameters = Object.keys(parameters).length > 0
+  const hasMountOptions = mountOptions.length > 0
+
+  return (
+    <>
+      <Section title="Configuration" icon={Database}>
+        <PropertyList>
+          <Property label="Provisioner" value={data.provisioner} />
+          <Property
+            label="Reclaim Policy"
+            value={
+              data.reclaimPolicy ? (
+                <span className={data.reclaimPolicy === 'Delete' ? 'text-red-400' : 'text-green-400'}>
+                  {data.reclaimPolicy}
+                </span>
+              ) : undefined
+            }
+          />
+          <Property
+            label="Volume Binding Mode"
+            value={
+              data.volumeBindingMode ? (
+                <span title={
+                  data.volumeBindingMode === 'WaitForFirstConsumer'
+                    ? 'Volume binding is delayed until a Pod using this PVC is created'
+                    : undefined
+                }>
+                  {data.volumeBindingMode}
+                </span>
+              ) : undefined
+            }
+          />
+          <Property
+            label="Allow Volume Expansion"
+            value={
+              data.allowVolumeExpansion != null ? (
+                <span className={data.allowVolumeExpansion ? 'text-green-400' : undefined}>
+                  {data.allowVolumeExpansion ? 'Yes' : 'No'}
+                </span>
+              ) : undefined
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      {hasParameters && (
+        <Section title="Parameters" icon={Settings}>
+          <PropertyList>
+            {Object.entries(parameters).map(([key, value]) => (
+              <Property key={key} label={key} value={value as string} />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {hasMountOptions && (
+        <Section title="Mount Options">
+          <div className="flex flex-wrap gap-1.5">
+            {mountOptions.map((option: string) => (
+              <span
+                key={option}
+                className="px-2 py-0.5 rounded text-xs bg-blue-500/20 text-blue-400"
+              >
+                {option}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,257 @@
+import { Globe, Route, Layers, Lock } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface TraefikIngressRouteRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function TraefikIngressRouteRenderer({ data, onNavigate }: TraefikIngressRouteRendererProps) {
+  const spec = data.spec || {}
+  const routes = spec.routes || []
+  const entryPoints = spec.entryPoints || []
+  const tls = spec.tls
+  const ns = data.metadata?.namespace || ''
+
+  // Collect unique services and middleware across all routes
+  const allServices: Array<{ name: string; kind: string; port?: number; namespace?: string; serversTransport?: string }> = []
+  const allMiddlewares: Array<{ name: string; namespace?: string }> = []
+  const seenSvc = new Set<string>()
+  const seenMw = new Set<string>()
+
+  for (const route of routes) {
+    for (const svc of route.services || []) {
+      const key = `${svc.kind || 'Service'}/${svc.namespace || ''}/${svc.name}`
+      if (!seenSvc.has(key)) {
+        seenSvc.add(key)
+        allServices.push(svc)
+      }
+    }
+    for (const mw of route.middlewares || []) {
+      const key = `${mw.namespace || ''}/${mw.name}`
+      if (!seenMw.has(key)) {
+        seenMw.add(key)
+        allMiddlewares.push(mw)
+      }
+    }
+  }
+
+  const hasNoRoutes = routes.length === 0
+  const hasNoServices = allServices.length === 0 && routes.length > 0
+
+  // Determine kind label from apiVersion/kind
+  const kindLabel = data.kind || 'IngressRoute'
+
+  return (
+    <>
+      {hasNoRoutes && (
+        <AlertBanner
+          variant="warning"
+          title="No Routes Defined"
+          message={`This ${kindLabel} has no routes configured. No traffic will be routed.`}
+        />
+      )}
+
+      {hasNoServices && (
+        <AlertBanner
+          variant="info"
+          title="No Backend Services"
+          message="Routes are defined but none reference backend services."
+        />
+      )}
+
+      <Section title={kindLabel} icon={Globe} defaultExpanded>
+        <PropertyList>
+          <Property label="Entry Points" value={entryPoints.length > 0 ? entryPoints.join(', ') : '-'} />
+          <Property label="Routes" value={`${routes.length}`} />
+          <Property label="Services" value={`${allServices.length}`} />
+          <Property label="Middlewares" value={allMiddlewares.length > 0 ? `${allMiddlewares.length}` : 'None'} />
+          <Property label="TLS" value={tls ? 'Enabled' : 'None'} />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Routes (${routes.length})`} icon={Route} defaultExpanded>
+        <div className="space-y-3">
+          {routes.map((route: any, i: number) => {
+            const services = route.services || []
+            const middlewares = route.middlewares || []
+
+            return (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                {/* Match expression */}
+                <div className="flex items-start gap-2 mb-2">
+                  <span className="text-sm font-medium text-theme-text-primary break-all">
+                    {route.match || 'No match rule'}
+                  </span>
+                  {route.priority && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary shrink-0">
+                      priority: {route.priority}
+                    </span>
+                  )}
+                  {route.kind && route.kind !== 'Rule' && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary shrink-0">
+                      {route.kind}
+                    </span>
+                  )}
+                </div>
+
+                {/* Services */}
+                {services.length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Services</div>
+                    <div className="space-y-1">
+                      {services.map((svc: any, si: number) => {
+                        const svcKind = svc.kind || 'Service'
+                        const svcNs = svc.namespace || ns
+                        const isTraefikSvc = svcKind === 'TraefikService'
+                        const port = svc.port ? `:${svc.port}` : ''
+                        const weight = svc.weight !== undefined ? ` (${svc.weight}%)` : ''
+
+                        return (
+                          <div key={si} className="flex items-center gap-2 text-xs">
+                            {isTraefikSvc && (
+                              <span className="px-1.5 py-0.5 bg-cyan-500/10 text-cyan-400 rounded text-[10px]">
+                                TraefikService
+                              </span>
+                            )}
+                            <ResourceLink
+                              name={svc.name}
+                              kind={isTraefikSvc ? 'traefikservices' : 'services'}
+                              namespace={svcNs}
+                              label={<span className="text-blue-400">{svc.name}{port}{weight}</span>}
+                              onNavigate={onNavigate}
+                            />
+                            {svc.serversTransport && (
+                              <span className="text-theme-text-tertiary">
+                                transport: <ResourceLink
+                                  name={svc.serversTransport}
+                                  kind="serverstransports"
+                                  namespace={ns}
+                                  onNavigate={onNavigate}
+                                />
+                              </span>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Middlewares */}
+                {middlewares.length > 0 && (
+                  <div>
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Middlewares</div>
+                    <div className="flex flex-wrap gap-1">
+                      {middlewares.map((mw: any, mi: number) => {
+                        const mwNs = mw.namespace || ns
+                        return (
+                          <ResourceLink
+                            key={mi}
+                            name={mw.name}
+                            kind="middlewares"
+                            namespace={mwNs}
+                            label={
+                              <span className="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 rounded text-[10px] inline-block">
+                                {mw.namespace && mw.namespace !== ns ? `${mw.namespace}/` : ''}{mw.name}
+                              </span>
+                            }
+                            onNavigate={onNavigate}
+                          />
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </Section>
+
+      {tls && (
+        <Section title="TLS" icon={Lock} defaultExpanded>
+          <PropertyList>
+            {tls.secretName && (
+              <Property label="Secret" value={
+                <ResourceLink
+                  name={tls.secretName}
+                  kind="secrets"
+                  namespace={ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {tls.options?.name && (
+              <Property label="TLS Option" value={
+                <ResourceLink
+                  name={tls.options.name}
+                  kind="tlsoptions"
+                  namespace={tls.options.namespace || ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {tls.store?.name && (
+              <Property label="TLS Store" value={
+                <ResourceLink
+                  name={tls.store.name}
+                  kind="tlsstores"
+                  namespace={tls.store.namespace || ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {tls.certResolver && (
+              <Property label="Cert Resolver" value={tls.certResolver} />
+            )}
+            {tls.domains && tls.domains.length > 0 && (
+              <Property label="Domains" value={
+                <div className="space-y-1">
+                  {tls.domains.map((d: any, i: number) => (
+                    <div key={i} className="text-xs">
+                      {d.main && <span className="text-theme-text-secondary">{d.main}</span>}
+                      {d.sans && d.sans.length > 0 && (
+                        <span className="text-theme-text-tertiary"> + {d.sans.length} SAN(s)</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              } />
+            )}
+            {!tls.secretName && !tls.certResolver && (
+              <Property label="Mode" value="TLS termination (no explicit secret or resolver)" />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {allMiddlewares.length > 0 && (
+        <Section title={`Middleware Chain (${allMiddlewares.length})`} icon={Layers}>
+          <div className="space-y-1">
+            {allMiddlewares.map((mw, i) => {
+              const mwNs = mw.namespace || ns
+              const isCrossNs = mw.namespace && mw.namespace !== ns
+              return (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <span className="text-theme-text-tertiary w-4 text-right">{i + 1}.</span>
+                  <ResourceLink
+                    name={mw.name}
+                    kind="middlewares"
+                    namespace={mwNs}
+                    onNavigate={onNavigate}
+                  />
+                  {isCrossNs && (
+                    <span className="px-1.5 py-0.5 bg-yellow-500/10 text-yellow-400 rounded text-[10px]">
+                      {mw.namespace}
+                    </span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}