@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,138 @@
+import { Globe, Layers, Container } 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 KnativeServiceRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function KnativeServiceRenderer({ data, onNavigate }: KnativeServiceRendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const url = data.status?.url
+  const traffic = data.status?.traffic || []
+  const templateSpec = data.spec?.template?.spec || {}
+  const containers = templateSpec.containers || []
+  const templateAnnotations = data.spec?.template?.metadata?.annotations || {}
+
+  const latestReady = data.status?.latestReadyRevisionName
+  const latestCreated = data.status?.latestCreatedRevisionName
+  const generation = data.metadata?.generation
+
+  // Autoscaling config from template annotations
+  const minScale = templateAnnotations['autoscaling.knative.dev/minScale']
+  const maxScale = templateAnnotations['autoscaling.knative.dev/maxScale']
+  const concurrency = templateSpec.containerConcurrency
+  const timeoutSeconds = templateSpec.timeoutSeconds
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Service" />
+
+      <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 hover:underline break-all">
+              {url}
+            </a>
+          ) : undefined} />
+          <Property label="Latest Ready" value={latestReady ? (
+            <ResourceLink
+              name={latestReady}
+              kind="revisions"
+              namespace={ns}
+              onNavigate={onNavigate}
+            />
+          ) : '-'} />
+          <Property label="Latest Created" value={latestCreated ? (
+            <ResourceLink
+              name={latestCreated}
+              kind="revisions"
+              namespace={ns}
+              onNavigate={onNavigate}
+            />
+          ) : '-'} />
+          <Property label="Generation" value={generation} />
+        </PropertyList>
+      </Section>
+
+      {(minScale || maxScale || concurrency != null || timeoutSeconds != null) && (
+        <Section title="Scaling & Configuration" defaultExpanded>
+          <PropertyList>
+            {minScale && <Property label="Min Scale" value={minScale} />}
+            {maxScale && <Property label="Max Scale" value={maxScale} />}
+            <Property label="Concurrency" value={concurrency != null ? (concurrency === 0 ? 'Unlimited' : String(concurrency)) : undefined} />
+            <Property label="Timeout" value={timeoutSeconds != null ? `${timeoutSeconds}s` : undefined} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {traffic.length > 0 && (
+        <Section title={`Traffic (${traffic.length} targets)`} icon={Layers} 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.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>
+                )}
+                {t.url && (
+                  <a href={t.url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 text-xs">
+                    {t.tag || 'link'}
+                  </a>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {containers.length > 0 && (
+        <Section title="Template" 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>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,220 @@
+import { Clock, Server, Container, Link2 } 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 SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavigate?: RendererProps['onNavigate'] }) {
+  if (!sink) return <Property label="Sink" value="-" />
+
+  if (sink.ref) {
+    return (
+      <Property label="Sink" value={
+        <ResourceLink
+          name={sink.ref.name}
+          kind={(sink.ref.kind?.toLowerCase() || 'services') + (sink.ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+          namespace={sink.ref.namespace || ns}
+          onNavigate={onNavigate}
+        />
+      } />
+    )
+  }
+
+  if (sink.uri) {
+    return <Property label="Sink URI" value={
+      <span className="text-theme-text-primary break-all">{sink.uri}</span>
+    } />
+  }
+
+  return <Property label="Sink" value="-" />
+}
+
+// ============================================================================
+// PingSource
+// ============================================================================
+
+export function PingSourceRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="PingSource" />
+
+      <Section title="Overview" icon={Clock} 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="Schedule" value={spec.schedule} />
+          <Property label="Timezone" value={spec.timezone} />
+          <Property label="Content Type" value={spec.contentType} />
+          <Property label="Data" value={spec.data ? (
+            <span className="font-mono text-xs break-all">{spec.data.length > 200 ? spec.data.slice(0, 200) + '...' : spec.data}</span>
+          ) : undefined} />
+          <SinkProperty sink={spec.sink} ns={ns} onNavigate={onNavigate} />
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// ApiServerSource
+// ============================================================================
+
+export function ApiServerSourceRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const resources = spec.resources || []
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="ApiServerSource" />
+
+      <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={spec.mode || spec.eventMode} />
+          <Property label="Service Account" value={spec.serviceAccountName} />
+          <SinkProperty sink={spec.sink} ns={ns} onNavigate={onNavigate} />
+        </PropertyList>
+      </Section>
+
+      {resources.length > 0 && (
+        <Section title={`Watched Resources (${resources.length})`} defaultExpanded>
+          <div className="space-y-1.5">
+            {resources.map((r: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <span className="text-theme-text-primary">{r.apiVersion}/{r.kind}</span>
+                {r.selector && (
+                  <div className="text-xs text-theme-text-tertiary mt-0.5">
+                    selector: {typeof r.selector === 'string' ? r.selector : JSON.stringify(r.selector.matchLabels || r.selector)}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// ContainerSource
+// ============================================================================
+
+export function ContainerSourceRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const template = spec.template?.spec || {}
+  const containers = template.containers || []
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="ContainerSource" />
+
+      <Section title="Overview" icon={Container} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <SinkProperty sink={spec.sink} ns={ns} onNavigate={onNavigate} />
+        </PropertyList>
+      </Section>
+
+      {containers.length > 0 && (
+        <Section title={`Containers (${containers.length})`} 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.args && c.args.length > 0 && (
+                  <div className="text-xs text-theme-text-tertiary mt-1 font-mono truncate">
+                    $ {c.args.join(' ')}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// SinkBinding
+// ============================================================================
+
+export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const subjectRef = spec.subject
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="SinkBinding" />
+
+      <Section title="Overview" icon={Link2} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          {subjectRef && (
+            <>
+              <Property label="Subject Kind" value={subjectRef.kind} />
+              <Property label="Subject API" value={subjectRef.apiVersion} />
+              {subjectRef.name && (
+                <Property label="Subject" value={
+                  <ResourceLink
+                    name={subjectRef.name}
+                    kind={(subjectRef.kind?.toLowerCase() || 'deployments') + 's'}
+                    namespace={subjectRef.namespace || ns}
+                    onNavigate={onNavigate}
+                  />
+                } />
+              )}
+              {subjectRef.selector && (
+                <Property label="Selector" value={
+                  <span className="text-xs font-mono">
+                    {JSON.stringify(subjectRef.selector.matchLabels || subjectRef.selector)}
+                  </span>
+                } />
+              )}
+            </>
+          )}
+          <SinkProperty sink={spec.sink} ns={ns} onNavigate={onNavigate} />
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,151 @@
+import { Layers, FolderTree } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
+import { fluxConditionsToGitOpsStatus, parseFluxInventory, type FluxCondition } from '../../../types/gitops'
+
+interface KustomizationRendererProps {
+  data: any
+}
+
+export function KustomizationRenderer({ data }: KustomizationRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = (status.conditions || []) as FluxCondition[]
+  const inventoryEntries = status.inventory?.entries || []
+
+  // Convert to unified GitOps status
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+
+  // Parse inventory to managed resources
+  const managedResources = parseFluxInventory(inventoryEntries)
+
+  // Problem detection for alerts
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (gitOpsStatus.suspended) {
+    problems.push({ color: 'yellow', message: 'Kustomization is suspended' })
+  }
+
+  if (gitOpsStatus.health === 'Degraded' && gitOpsStatus.message) {
+    problems.push({ color: 'red', message: gitOpsStatus.message })
+  }
+
+  const healthyCondition = conditions.find(c => c.type === 'Healthy')
+  if (healthyCondition?.status === 'False' && healthyCondition.message) {
+    problems.push({
+      color: 'yellow',
+      message: healthyCondition.message || 'Deployed resources are not healthy',
+    })
+  }
+
+  // Source reference
+  const sourceRef = spec.sourceRef || {}
+
+  return (
+    <>
+      <ProblemAlerts problems={problems} />
+
+      {/* Status section */}
+      <Section title="Status">
+        <div className="space-y-3">
+          <GitOpsStatusBadge status={gitOpsStatus} />
+          {spec.interval && (
+            <SyncCountdown
+              interval={spec.interval}
+              lastSyncTime={status.lastHandledReconcileAt}
+              suspended={gitOpsStatus.suspended}
+            />
+          )}
+        </div>
+      </Section>
+
+      {/* Source Reference section */}
+      <Section title="Source" icon={FolderTree}>
+        <PropertyList>
+          <Property label="Kind" value={sourceRef.kind} />
+          <Property label="Name" value={sourceRef.name} />
+          {sourceRef.namespace && (
+            <Property label="Namespace" value={sourceRef.namespace} />
+          )}
+          <Property label="Path" value={spec.path || './'} />
+        </PropertyList>
+      </Section>
+
+      {/* Configuration section */}
+      <Section title="Configuration" icon={Layers}>
+        <PropertyList>
+          <Property
+            label="Prune"
+            value={spec.prune ? 'Enabled' : 'Disabled'}
+          />
+          <Property label="Target Namespace" value={spec.targetNamespace} />
+          <Property label="Service Account" value={spec.serviceAccountName} />
+          <Property label="Timeout" value={spec.timeout} />
+          {spec.retryInterval && (
+            <Property label="Retry Interval" value={spec.retryInterval} />
+          )}
+          {spec.force !== undefined && (
+            <Property label="Force" value={spec.force ? 'Yes' : 'No'} />
+          )}
+          {spec.wait !== undefined && (
+            <Property label="Wait" value={spec.wait ? 'Yes' : 'No'} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Health checks */}
+      {spec.healthChecks && spec.healthChecks.length > 0 && (
+        <Section title={`Health Checks (${spec.healthChecks.length})`} defaultExpanded={false}>
+          <div className="space-y-1">
+            {spec.healthChecks.map((check: any, idx: number) => (
+              <div
+                key={idx}
+                className="text-sm px-2 py-1 bg-theme-elevated/30 rounded"
+              >
+                <span className="text-theme-text-tertiary">{check.kind}/</span>
+                <span className="text-theme-text-primary">{check.name}</span>
+                {check.namespace && (
+                  <span className="text-theme-text-tertiary ml-1">
+                    ({check.namespace})
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Managed Resources (Inventory) */}
+      {managedResources.length > 0 && (
+        <ManagedResourcesList
+          resources={managedResources}
+          title={`Inventory (${managedResources.length} resources)`}
+        />
+      )}
+
+      {/* Revision info */}
+      {(status.lastAppliedRevision || status.lastAttemptedRevision) && (
+        <Section title="Revision" defaultExpanded={false}>
+          <PropertyList>
+            {status.lastAppliedRevision && (
+              <Property label="Applied" value={status.lastAppliedRevision} />
+            )}
+            {status.lastAttemptedRevision && status.lastAttemptedRevision !== status.lastAppliedRevision && (
+              <Property label="Attempted" value={status.lastAttemptedRevision} />
+            )}
+            {status.lastHandledReconcileAt && (
+              <Property
+                label="Last Reconciled"
+                value={formatAge(status.lastHandledReconcileAt)}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions section */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}