@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,142 @@
+import { ListOrdered, GitFork } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { getKnativeConditionStatus } from '../resource-utils-knative'
+
+interface RendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function RefDisplay({ ref: destRef, ns, onNavigate }: { ref: any; ns: string; onNavigate?: RendererProps['onNavigate'] }) {
+  if (!destRef) return <span className="text-theme-text-tertiary">-</span>
+
+  if (destRef.ref) {
+    return (
+      <ResourceLink
+        name={destRef.ref.name}
+        kind={(destRef.ref.kind?.toLowerCase() || 'services') + (destRef.ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+        namespace={destRef.ref.namespace || ns}
+        onNavigate={onNavigate}
+      />
+    )
+  }
+
+  if (destRef.uri) {
+    return <span className="text-theme-text-primary break-all text-xs">{destRef.uri}</span>
+  }
+
+  return <span className="text-theme-text-tertiary">-</span>
+}
+
+// ============================================================================
+// Sequence
+// ============================================================================
+
+export function SequenceRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const steps = spec.steps || []
+  const reply = spec.reply
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Sequence" />
+
+      <Section title="Overview" icon={ListOrdered} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Steps" value={String(steps.length)} />
+          {reply && (
+            <Property label="Reply" value={
+              <RefDisplay ref={reply} ns={ns} onNavigate={onNavigate} />
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      {steps.length > 0 && (
+        <Section title={`Steps (${steps.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {steps.map((step: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 flex items-center gap-2">
+                <span className="text-xs font-medium text-theme-text-tertiary w-6 shrink-0">#{i + 1}</span>
+                <RefDisplay ref={step} ns={ns} onNavigate={onNavigate} />
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// Parallel
+// ============================================================================
+
+export function ParallelRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const branches = spec.branches || []
+  const reply = spec.reply
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Parallel" />
+
+      <Section title="Overview" icon={GitFork} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Branches" value={String(branches.length)} />
+          {reply && (
+            <Property label="Reply" value={
+              <RefDisplay ref={reply} ns={ns} onNavigate={onNavigate} />
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      {branches.length > 0 && (
+        <Section title={`Branches (${branches.length})`} defaultExpanded>
+          <div className="space-y-3">
+            {branches.map((branch: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                <div className="text-sm font-medium text-theme-text-primary mb-2">Branch {i + 1}</div>
+                <PropertyList>
+                  {branch.filter && (
+                    <Property label="Filter" value={
+                      <RefDisplay ref={branch.filter} ns={ns} onNavigate={onNavigate} />
+                    } />
+                  )}
+                  <Property label="Subscriber" value={
+                    <RefDisplay ref={branch.subscriber} ns={ns} onNavigate={onNavigate} />
+                  } />
+                  {branch.reply && (
+                    <Property label="Reply" value={
+                      <RefDisplay ref={branch.reply} ns={ns} onNavigate={onNavigate} />
+                    } />
+                  )}
+                </PropertyList>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,232 @@
+import { Network, ShieldCheck, Server, Globe } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { getKnativeConditionStatus } from '../resource-utils-knative'
+
+interface RendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+// ============================================================================
+// KnativeIngress (Ingress from networking.internal.knative.dev)
+// ============================================================================
+
+export function KnativeIngressRenderer({ data }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const spec = data.spec || {}
+  const rules = spec.rules || []
+  const ingressClass = data.metadata?.annotations?.['networking.knative.dev/ingress.class']
+  const httpOption = spec.httpOption
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Ingress" />
+
+      <Section title="Overview" icon={Network} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Ingress Class" value={ingressClass} />
+          <Property label="HTTP" value={httpOption} />
+        </PropertyList>
+      </Section>
+
+      {rules.length > 0 && (
+        <Section title={`Rules (${rules.length})`} defaultExpanded>
+          <div className="space-y-3">
+            {rules.map((rule: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                <div className="flex flex-wrap gap-1 mb-2">
+                  {(rule.hosts || []).map((host: string, hi: number) => (
+                    <span key={hi} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded text-xs">
+                      {host}
+                    </span>
+                  ))}
+                  {rule.visibility && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary">
+                      {rule.visibility}
+                    </span>
+                  )}
+                </div>
+                {rule.http?.paths && rule.http.paths.length > 0 && (
+                  <div className="space-y-1.5">
+                    {rule.http.paths.map((path: any, pi: number) => (
+                      <div key={pi} className="text-xs">
+                        <span className="text-theme-text-tertiary">
+                          {path.path || '/'}
+                        </span>
+                        {path.splits && path.splits.length > 0 && (
+                          <div className="ml-3 mt-1 space-y-0.5">
+                            {path.splits.map((split: any, si: number) => (
+                              <div key={si} className="text-theme-text-secondary">
+                                {split.serviceName}:{split.servicePort}
+                                {split.percent !== undefined && (
+                                  <span className="text-theme-text-tertiary ml-1">({split.percent}%)</span>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// KnativeCertificate (Certificate from networking.internal.knative.dev)
+// ============================================================================
+
+export function KnativeCertificateRenderer({ data }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const spec = data.spec || {}
+  const dnsNames = spec.dnsNames || []
+  const secretName = spec.secretName || data.status?.http01Challenges?.[0]?.secretName
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Certificate" />
+
+      <Section title="Overview" icon={ShieldCheck} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Secret Name" value={secretName} />
+          <Property label="Domain" value={spec.domain} />
+        </PropertyList>
+      </Section>
+
+      {dnsNames.length > 0 && (
+        <Section title={`DNS Names (${dnsNames.length})`} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {dnsNames.map((name: string, i: number) => (
+              <span key={i} className="px-1.5 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+                {name}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// ServerlessService (from networking.internal.knative.dev)
+// ============================================================================
+
+export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const mode = spec.mode
+  const numActivators = spec.numActivators
+  const protocolType = spec.protocolType
+  const objectRef = spec.objectRef
+  const privateServiceName = data.status?.privateServiceName
+  const serviceName = data.status?.serviceName
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="ServerlessService" />
+
+      <Section title="Overview" icon={Server} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Mode" value={mode ? (
+            <span className={clsx(
+              'px-2 py-0.5 rounded text-xs font-medium',
+              mode === 'Proxy' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-green-500/20 text-green-400'
+            )}>
+              {mode}
+            </span>
+          ) : undefined} />
+          <Property label="Activators" value={numActivators != null ? String(numActivators) : undefined} />
+          <Property label="Protocol" value={protocolType} />
+          {objectRef && (
+            <Property label="Target" value={
+              <ResourceLink
+                name={objectRef.name}
+                kind={(objectRef.kind?.toLowerCase() || 'deployments') + 's'}
+                namespace={ns}
+                onNavigate={onNavigate}
+              />
+            } />
+          )}
+          {serviceName && <Property label="Public Service" value={serviceName} />}
+          {privateServiceName && <Property label="Private Service" value={privateServiceName} />}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// DomainMapping (serving.knative.dev/v1beta1)
+// ============================================================================
+
+export function DomainMappingRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const url = data.status?.url
+  const ref = data.spec?.ref
+  const tlsSecret = data.spec?.tls?.secretName
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="DomainMapping" />
+
+      <Section title="Overview" icon={Globe} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="URL" value={url ? (
+            <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 break-all">
+              {url}
+            </a>
+          ) : undefined} />
+          {ref && (
+            <Property label="Target" value={
+              <ResourceLink
+                name={ref.name}
+                kind={(ref.kind?.toLowerCase() || 'services') + (ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                namespace={ns}
+                onNavigate={onNavigate}
+              />
+            } />
+          )}
+          {tlsSecret && <Property label="TLS Secret" value={tlsSecret} />}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,97 @@
+import { Container, Settings } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner } from '../../ui/drawer-components'
+import { getRevisionStatus } from '../resource-utils-knative'
+
+interface KnativeRevisionRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function KnativeRevisionRenderer({ data }: KnativeRevisionRendererProps) {
+  const status = getRevisionStatus(data)
+  const spec = data.spec || {}
+  const containers = spec.containers || []
+  const containerConcurrency = spec.containerConcurrency
+  const timeoutSeconds = spec.timeoutSeconds
+  const serviceAccountName = spec.serviceAccountName
+
+  const firstContainer = containers[0] || {}
+  const image = firstContainer.image
+
+  // Runtime status
+  const actualReplicas = data.status?.actualReplicas
+  const desiredReplicas = data.status?.desiredReplicas
+  const routingState = data.metadata?.labels?.['serving.knative.dev/routingState']
+  const imageDigest = data.status?.containerStatuses?.[0]?.imageDigest
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Revision" />
+
+      <Section title="Overview" icon={Settings} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Image" value={image} />
+          {imageDigest && <Property label="Image Digest" value={
+            <span className="text-xs font-mono text-theme-text-secondary break-all">{imageDigest}</span>
+          } />}
+          {routingState && <Property label="Routing" value={
+            <span className={clsx(
+              'px-2 py-0.5 rounded text-xs font-medium',
+              routingState === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'
+            )}>
+              {routingState}
+            </span>
+          } />}
+          {(actualReplicas != null || desiredReplicas != null) && (
+            <Property label="Replicas" value={`${actualReplicas ?? 0} / ${desiredReplicas ?? 0}`} />
+          )}
+          <Property label="Concurrency" value={containerConcurrency != null ? (containerConcurrency === 0 ? 'Unlimited' : String(containerConcurrency)) : undefined} />
+          <Property label="Timeout" value={timeoutSeconds != null ? `${timeoutSeconds}s` : undefined} />
+          <Property label="Service Account" value={serviceAccountName} />
+        </PropertyList>
+      </Section>
+
+      {containers.length > 0 && (
+        <Section title={`Containers (${containers.length})`} icon={Container} defaultExpanded>
+          <div className="space-y-2">
+            {containers.map((c: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div className="font-medium text-theme-text-primary">{c.name || 'container'}</div>
+                <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
+                {c.ports && c.ports.length > 0 && (
+                  <div className="text-xs text-theme-text-tertiary mt-1">
+                    Ports: {c.ports.map((p: any) => `${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
+                  </div>
+                )}
+                {c.resources && (c.resources.requests || c.resources.limits) && (
+                  <div className="text-xs text-theme-text-tertiary mt-1">
+                    {c.resources.requests && (
+                      <span>Requests: {Object.entries(c.resources.requests).map(([k, v]) => `${k}=${v}`).join(', ')}</span>
+                    )}
+                    {c.resources.requests && c.resources.limits && ' | '}
+                    {c.resources.limits && (
+                      <span>Limits: {Object.entries(c.resources.limits).map(([k, v]) => `${k}=${v}`).join(', ')}</span>
+                    )}
+                  </div>
+                )}
+                {c.env && c.env.length > 0 && (
+                  <div className="text-xs text-theme-text-tertiary mt-1">
+                    Env: {c.env.length} variable{c.env.length !== 1 ? 's' : ''}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,74 @@
+import { Route } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { getKnativeConditionStatus } from '../resource-utils-knative'
+
+interface KnativeRouteRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function KnativeRouteRenderer({ data, onNavigate }: KnativeRouteRendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const traffic = data.status?.traffic || data.spec?.traffic || []
+  const ns = data.metadata?.namespace || ''
+  const url = data.status?.url || data.status?.address?.url
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Route" />
+
+      <Section title="Overview" icon={Route} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="URL" value={url ? (
+            <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 hover:underline break-all">
+              {url}
+            </a>
+          ) : undefined} />
+        </PropertyList>
+      </Section>
+
+      {traffic.length > 0 && (
+        <Section title={`Traffic Targets (${traffic.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {traffic.map((t: any, i: number) => (
+              <div key={i} className="flex items-center gap-2 text-sm">
+                <div className="flex items-center gap-1 w-16 shrink-0">
+                  <div className="flex-1 h-1.5 bg-theme-hover rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-blue-500 rounded-full"
+                      style={{ width: `${t.percent || 0}%` }}
+                    />
+                  </div>
+                  <span className="text-theme-text-secondary font-medium text-xs">{t.percent || 0}%</span>
+                </div>
+                {t.revisionName ? (
+                  <ResourceLink
+                    name={t.revisionName}
+                    kind="revisions"
+                    namespace={ns}
+                    onNavigate={onNavigate}
+                  />
+                ) : (
+                  <span className="text-theme-text-secondary">{t.configurationName || (t.latestRevision ? '@latest' : '-')}</span>
+                )}
+                {t.tag && (
+                  <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary">
+                    tag: {t.tag}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}