@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,84 @@
+import { Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList } from '../../ui/drawer-components'
+import {
+  getPeerAuthenticationMode,
+  getPeerAuthenticationSelector,
+  getPeerAuthenticationPortLevelMtls,
+} from '../resource-utils-istio'
+
+const modeColors: Record<string, string> = {
+  STRICT: 'bg-green-500/20 text-green-400',
+  PERMISSIVE: 'bg-yellow-500/20 text-yellow-400',
+  DISABLE: 'bg-red-500/20 text-red-400',
+  UNSET: 'bg-gray-500/20 text-gray-400',
+}
+
+interface IstioPeerAuthenticationRendererProps {
+  data: any
+}
+
+export function IstioPeerAuthenticationRenderer({ data }: IstioPeerAuthenticationRendererProps) {
+  const mode = getPeerAuthenticationMode(data)
+  const selector = getPeerAuthenticationSelector(data)
+  const portLevelMtls = getPeerAuthenticationPortLevelMtls(data)
+  const hasSelector = Object.keys(selector).length > 0
+  const hasPortOverrides = Object.keys(portLevelMtls).length > 0
+
+  return (
+    <>
+      {/* mTLS Configuration */}
+      <Section title="Peer Authentication" icon={Shield} defaultExpanded>
+        <PropertyList>
+          <Property label="mTLS Mode" value={
+            <span className={clsx(
+              'px-2 py-0.5 rounded text-xs font-medium',
+              modeColors[mode] || modeColors.UNSET
+            )}>
+              {mode}
+            </span>
+          } />
+          <Property label="Scope" value={
+            hasSelector ? 'Workload-scoped' : 'Namespace-wide'
+          } />
+        </PropertyList>
+
+        {/* Mode description */}
+        <div className="mt-2 text-xs text-theme-text-tertiary">
+          {mode === 'STRICT' && 'All connections must use mTLS. Plaintext connections will be rejected.'}
+          {mode === 'PERMISSIVE' && 'Accepts both plaintext and mTLS connections. Useful during migration.'}
+          {mode === 'DISABLE' && 'mTLS is disabled. All connections will be plaintext.'}
+          {mode === 'UNSET' && 'Inherits mTLS mode from parent (mesh or namespace).'}
+        </div>
+      </Section>
+
+      {/* Selector */}
+      {hasSelector && (
+        <Section title="Workload Selector" defaultExpanded>
+          <KeyValueBadgeList items={selector} />
+        </Section>
+      )}
+
+      {/* Port-level mTLS overrides */}
+      {hasPortOverrides && (
+        <Section title={`Port-Level mTLS (${Object.keys(portLevelMtls).length})`} defaultExpanded>
+          <div className="space-y-1">
+            {Object.entries(portLevelMtls).map(([port, config]) => (
+              <div key={port} className="flex items-center gap-2 text-sm">
+                <span className="text-theme-text-secondary font-mono">Port {port}</span>
+                <span className={clsx(
+                  'px-1.5 py-0.5 rounded text-xs font-medium',
+                  modeColors[config.mode] || modeColors.UNSET
+                )}>
+                  {config.mode}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,112 @@
+import { Globe } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getServiceEntryStatus,
+  getServiceEntryHostsList,
+  getServiceEntryLocation,
+  getServiceEntryPorts,
+  getServiceEntryResolution,
+  getServiceEntryEndpoints,
+} from '../resource-utils-istio'
+
+interface IstioServiceEntryRendererProps {
+  data: any
+}
+
+export function IstioServiceEntryRenderer({ data }: IstioServiceEntryRendererProps) {
+  const status = getServiceEntryStatus(data)
+  const hosts = getServiceEntryHostsList(data)
+  const location = getServiceEntryLocation(data)
+  const ports = getServiceEntryPorts(data)
+  const resolution = getServiceEntryResolution(data)
+  const endpoints = getServiceEntryEndpoints(data)
+
+  const hasNoHosts = hosts.length === 0
+
+  return (
+    <>
+      {hasNoHosts && (
+        <AlertBanner
+          variant="error"
+          title="No Hosts Configured"
+          message="This ServiceEntry has no hosts defined."
+        />
+      )}
+
+      {/* Service Entry info */}
+      <Section title="Service Entry" 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="Hosts" value={hosts.join(', ') || '-'} />
+          <Property label="Location" value={
+            <span className={clsx(
+              'px-2 py-0.5 rounded text-xs font-medium',
+              location === 'MESH_EXTERNAL'
+                ? 'bg-orange-500/20 text-orange-400'
+                : 'bg-blue-500/20 text-blue-400'
+            )}>
+              {location}
+            </span>
+          } />
+          <Property label="Resolution" value={resolution} />
+        </PropertyList>
+      </Section>
+
+      {/* Ports */}
+      {ports.length > 0 && (
+        <Section title={`Ports (${ports.length})`} defaultExpanded>
+          <div className="space-y-1">
+            {ports.map((port, i) => (
+              <div key={i} className="flex items-center gap-2 text-sm">
+                <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                  {port.number}/{port.protocol || 'TCP'}
+                </span>
+                {port.name && (
+                  <span className="text-theme-text-tertiary">{port.name}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Endpoints */}
+      {endpoints.length > 0 && (
+        <Section title={`Endpoints (${endpoints.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {endpoints.map((endpoint, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="text-sm text-theme-text-primary">{endpoint.address}</div>
+                {endpoint.ports && Object.keys(endpoint.ports).length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    {Object.entries(endpoint.ports).map(([name, port]) => (
+                      <span key={name} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {name}: {port}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {endpoint.labels && Object.keys(endpoint.labels).length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    {Object.entries(endpoint.labels).map(([k, v]) => (
+                      <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {k}={v}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,288 @@
+import { Network, Route } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getVirtualServiceStatus,
+  getVirtualServiceHostsList,
+  getVirtualServiceGatewaysList,
+  getVirtualServiceHttpRoutes,
+  getVirtualServiceTcpRoutes,
+  getVirtualServiceTlsRoutes,
+  getVirtualServiceRouteCount,
+} from '../resource-utils-istio'
+
+interface IstioVirtualServiceRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualServiceRendererProps) {
+  const status = getVirtualServiceStatus(data)
+  const hosts = getVirtualServiceHostsList(data)
+  const gateways = getVirtualServiceGatewaysList(data)
+  const httpRoutes = getVirtualServiceHttpRoutes(data)
+  const tcpRoutes = getVirtualServiceTcpRoutes(data)
+  const tlsRoutes = getVirtualServiceTlsRoutes(data)
+  const routeCount = getVirtualServiceRouteCount(data)
+  const ns = data.metadata?.namespace || ''
+
+  const hasNoRoutes = routeCount === 0
+  const hasFaultInjection = httpRoutes.some((r: any) => r.fault)
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {hasNoRoutes && (
+        <AlertBanner
+          variant="error"
+          title="No Routes Configured"
+          message="This VirtualService has no HTTP, TCP, or TLS routes defined."
+        />
+      )}
+      {hasFaultInjection && (
+        <AlertBanner
+          variant="warning"
+          title="Fault Injection Active"
+          message="One or more routes have fault injection configured (delay or abort)."
+        />
+      )}
+
+      {/* Hosts & Gateways */}
+      <Section title="Routing" 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="Hosts" value={hosts.length > 0 ? hosts.join(', ') : '-'} />
+          <Property label="Gateways" value={
+            gateways.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {gateways.map((gw, i) => {
+                  // Gateway reference can be "namespace/name" or just "name" or "mesh"
+                  if (gw === 'mesh') {
+                    return <span key={i} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">mesh</span>
+                  }
+                  const parts = gw.split('/')
+                  const gwNs = parts.length === 2 ? parts[0] : ns
+                  const gwName = parts.length === 2 ? parts[1] : parts[0]
+                  return (
+                    <ResourceLink
+                      key={i}
+                      name={gwName}
+                      kind="gateways"
+                      namespace={gwNs}
+                      onNavigate={onNavigate}
+                    />
+                  )
+                })}
+              </div>
+            ) : '-'
+          } />
+        </PropertyList>
+      </Section>
+
+      {/* HTTP Routes */}
+      {httpRoutes.length > 0 && (
+        <Section title={`HTTP Routes (${httpRoutes.length})`} icon={Route} defaultExpanded>
+          <div className="space-y-3">
+            {httpRoutes.map((route: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                {/* Route header */}
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm font-medium text-theme-text-primary">
+                    {route.name || `Route ${i + 1}`}
+                  </span>
+                  {route.timeout && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary">
+                      timeout: {route.timeout}
+                    </span>
+                  )}
+                  {route.fault && (
+                    <span className="px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded text-[10px] font-medium">
+                      fault injection
+                    </span>
+                  )}
+                  {route.mirror && (
+                    <span className="px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded text-[10px] font-medium">
+                      mirroring
+                    </span>
+                  )}
+                </div>
+
+                {/* Match conditions */}
+                {route.match && route.match.length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Match</div>
+                    <div className="space-y-1">
+                      {route.match.map((m: any, mi: number) => (
+                        <div key={mi} className="flex flex-wrap gap-1 text-xs">
+                          {m.uri && (
+                            <span className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded">
+                              URI {Object.keys(m.uri)[0]}: {Object.values(m.uri)[0] as string}
+                            </span>
+                          )}
+                          {m.method && (
+                            <span className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded">
+                              Method: {m.method.exact || Object.values(m.method)[0]}
+                            </span>
+                          )}
+                          {m.headers && Object.entries(m.headers).map(([hk, hv]: [string, any]) => (
+                            <span key={hk} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded">
+                              Header {hk}: {typeof hv === 'object' ? Object.values(hv)[0] as string : String(hv)}
+                            </span>
+                          ))}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Destinations with weights */}
+                {route.route && route.route.length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Destinations</div>
+                    <div className="space-y-1.5">
+                      {route.route.map((dest: any, di: number) => {
+                        const weight = dest.weight ?? (route.route.length === 1 ? 100 : undefined)
+                        const destHost = dest.destination?.host || ''
+                        const destPort = dest.destination?.port?.number
+                        const destSubset = dest.destination?.subset
+
+                        return (
+                          <div key={di} className="flex items-center gap-2 text-xs">
+                            {weight !== undefined && (
+                              <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: `${weight}%` }}
+                                  />
+                                </div>
+                                <span className="text-theme-text-secondary font-medium">{weight}%</span>
+                              </div>
+                            )}
+                            <ResourceLink
+                              name={destHost.split('.')[0]}
+                              kind="services"
+                              namespace={destHost.includes('.') ? destHost.split('.')[1] : ns}
+                              label={destHost}
+                              onNavigate={onNavigate}
+                            />
+                            {destPort && (
+                              <span className="text-theme-text-tertiary">:{destPort}</span>
+                            )}
+                            {destSubset && (
+                              <span className="px-1.5 py-0.5 bg-theme-hover rounded text-theme-text-secondary">
+                                subset: {destSubset}
+                              </span>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Retries */}
+                {route.retries && (
+                  <div className="flex flex-wrap gap-1 text-xs mb-1">
+                    <span className="text-theme-text-tertiary">Retries:</span>
+                    <span className="text-theme-text-secondary">
+                      {route.retries.attempts} attempts
+                      {route.retries.perTryTimeout && `, ${route.retries.perTryTimeout} per try`}
+                      {route.retries.retryOn && ` on ${route.retries.retryOn}`}
+                    </span>
+                  </div>
+                )}
+
+                {/* Fault injection details */}
+                {route.fault && (
+                  <div className="flex flex-wrap gap-2 text-xs">
+                    {route.fault.delay && (
+                      <span className="px-1.5 py-0.5 bg-yellow-500/10 text-yellow-400 rounded">
+                        Delay: {route.fault.delay.fixedDelay}
+                        {route.fault.delay.percentage?.value && ` (${route.fault.delay.percentage.value}%)`}
+                      </span>
+                    )}
+                    {route.fault.abort && (
+                      <span className="px-1.5 py-0.5 bg-red-500/10 text-red-400 rounded">
+                        Abort: HTTP {route.fault.abort.httpStatus}
+                        {route.fault.abort.percentage?.value && ` (${route.fault.abort.percentage.value}%)`}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                {/* Mirror */}
+                {route.mirror && (
+                  <div className="flex items-center gap-1 text-xs mt-1">
+                    <span className="text-theme-text-tertiary">Mirror:</span>
+                    <span className="text-theme-text-secondary">
+                      {route.mirror.host}
+                      {route.mirror.port?.number && `:${route.mirror.port.number}`}
+                    </span>
+                    {route.mirrorPercentage?.value !== undefined && (
+                      <span className="text-theme-text-tertiary">({route.mirrorPercentage.value}%)</span>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* TCP Routes */}
+      {tcpRoutes.length > 0 && (
+        <Section title={`TCP Routes (${tcpRoutes.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {tcpRoutes.map((route: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                {route.match && (
+                  <div className="text-xs text-theme-text-tertiary mb-1">
+                    Match: {JSON.stringify(route.match)}
+                  </div>
+                )}
+                {route.route && route.route.map((dest: any, di: number) => (
+                  <div key={di} className="text-xs text-theme-text-secondary">
+                    {dest.destination?.host}
+                    {dest.destination?.port?.number && `:${dest.destination.port.number}`}
+                    {dest.weight !== undefined && ` (${dest.weight}%)`}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* TLS Routes */}
+      {tlsRoutes.length > 0 && (
+        <Section title={`TLS Routes (${tlsRoutes.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {tlsRoutes.map((route: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                {route.match && (
+                  <div className="text-xs text-theme-text-tertiary mb-1">
+                    SNI: {route.match.map((m: any) => m.sniHosts?.join(', ')).join('; ')}
+                  </div>
+                )}
+                {route.route && route.route.map((dest: any, di: number) => (
+                  <div key={di} className="text-xs text-theme-text-secondary">
+                    {dest.destination?.host}
+                    {dest.destination?.port?.number && `:${dest.destination.port.number}`}
+                    {dest.weight !== undefined && ` (${dest.weight}%)`}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,103 @@
+import { Clock } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { formatDuration } from '../resource-utils'
+
+interface JobRendererProps {
+  data: any
+}
+
+// Extract problems from Job status and conditions
+function getJobProblems(data: any): string[] {
+  const problems: string[] = []
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.conditions || []
+
+  // Check for Failed condition
+  const failedCondition = conditions.find((c: any) => c.type === 'Failed' && c.status === 'True')
+  if (failedCondition) {
+    if (failedCondition.reason === 'BackoffLimitExceeded') {
+      problems.push(`Job failed: reached backoff limit (${spec.backoffLimit ?? 6} retries)`)
+    } else if (failedCondition.reason === 'DeadlineExceeded') {
+      problems.push(`Job failed: exceeded active deadline (${spec.activeDeadlineSeconds}s)`)
+    } else {
+      problems.push(`Job failed: ${failedCondition.reason}${failedCondition.message ? ' - ' + failedCondition.message : ''}`)
+    }
+  }
+
+  // Check for pod failures without terminal condition yet
+  if (!failedCondition && status.failed > 0) {
+    const remaining = (spec.backoffLimit ?? 6) - status.failed
+    if (remaining > 0) {
+      problems.push(`${status.failed} pod(s) failed — ${remaining} retries remaining`)
+    } else {
+      problems.push(`${status.failed} pod(s) failed — no retries remaining`)
+    }
+  }
+
+  // Check for suspended
+  if (spec.suspend) {
+    problems.push('Job is suspended — pods will not be created')
+  }
+
+  return problems
+}
+
+export function JobRenderer({ data }: JobRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.conditions || []
+
+  const startTime = status.startTime ? new Date(status.startTime) : null
+  const completionTime = status.completionTime ? new Date(status.completionTime) : null
+  const duration = startTime && completionTime
+    ? formatDuration(completionTime.getTime() - startTime.getTime(), true)
+    : startTime
+    ? formatDuration(Date.now() - startTime.getTime(), true) + ' (running)'
+    : null
+
+  // Check for problems
+  const problems = getJobProblems(data)
+  const hasProblems = problems.length > 0
+
+  // Check if job completed successfully
+  const isComplete = conditions.some((c: any) => c.type === 'Complete' && c.status === 'True')
+
+  return (
+    <>
+      {/* Problems alert */}
+      {hasProblems && (
+        <AlertBanner variant="error" title="Job Issues" items={problems} />
+      )}
+
+      {/* Success banner */}
+      {isComplete && !hasProblems && (
+        <AlertBanner variant="success" title="Job Completed Successfully" />
+      )}
+
+      <Section title="Status" icon={Clock}>
+        <PropertyList>
+          <Property label="Succeeded" value={status.succeeded || 0} />
+          <Property label="Failed" value={status.failed || 0} />
+          <Property label="Active" value={status.active || 0} />
+          <Property label="Completions" value={`${status.succeeded || 0}/${spec.completions || 1}`} />
+          {duration && <Property label="Duration" value={duration} />}
+        </PropertyList>
+      </Section>
+
+      <Section title="Configuration">
+        <PropertyList>
+          <Property label="Parallelism" value={spec.parallelism || 1} />
+          <Property label="Completions" value={spec.completions || 1} />
+          <Property label="Backoff Limit" value={spec.backoffLimit ?? 6} />
+          {spec.activeDeadlineSeconds && <Property label="Deadline" value={`${spec.activeDeadlineSeconds}s`} />}
+          {spec.ttlSecondsAfterFinished !== undefined && (
+            <Property label="TTL After Finish" value={`${spec.ttlSecondsAfterFinished}s`} />
+          )}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}