@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,49 @@
+import { Globe } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface IngressClassRendererProps {
+  data: any
+}
+
+export function IngressClassRenderer({ data }: IngressClassRendererProps) {
+  const spec = data.spec || {}
+  const annotations = data.metadata?.annotations || {}
+
+  const isDefault = annotations['ingressclass.kubernetes.io/is-default-class'] === 'true'
+
+  return (
+    <>
+      <Section title="Ingress Class" icon={Globe}>
+        <PropertyList>
+          <Property label="Controller" value={spec.controller} />
+          <Property
+            label="Default"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isDefault
+                  ? 'bg-green-500/20 text-green-400'
+                  : 'bg-gray-500/20 text-gray-400'
+              )}>
+                {isDefault ? 'Yes' : 'No'}
+              </span>
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      {spec.parameters && (
+        <Section title="Parameters Reference">
+          <PropertyList>
+            {spec.parameters.apiGroup && <Property label="API Group" value={spec.parameters.apiGroup} />}
+            <Property label="Kind" value={spec.parameters.kind} />
+            <Property label="Name" value={spec.parameters.name} />
+            {spec.parameters.namespace && <Property label="Namespace" value={spec.parameters.namespace} />}
+            {spec.parameters.scope && <Property label="Scope" value={spec.parameters.scope} />}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,104 @@
+import { Globe, Shield, Clock } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface IngressRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
+  const spec = data.spec || {}
+  const rules = spec.rules || []
+  const tls = spec.tls || []
+  const lbIngress = data.status?.loadBalancer?.ingress || []
+
+  // Check for issues
+  const hasNoAddress = lbIngress.length === 0
+  const hasNoClass = !spec.ingressClassName && !data.metadata?.annotations?.['kubernetes.io/ingress.class']
+  const hasNoRules = rules.length === 0
+
+  return (
+    <>
+      {/* No address warning */}
+      {hasNoAddress && (
+        <AlertBanner
+          variant="warning"
+          icon={Clock}
+          title="Address Not Assigned"
+          message={hasNoClass
+            ? 'No ingress class specified — an ingress controller may not pick up this resource.'
+            : 'Waiting for ingress controller to provision address. Check Events if this persists.'}
+        />
+      )}
+
+      {/* No rules warning */}
+      {hasNoRules && (
+        <AlertBanner
+          variant="info"
+          title="No Routing Rules"
+          message="This ingress has no rules defined. Traffic will not be routed."
+        />
+      )}
+
+      <Section title="Ingress" icon={Globe}>
+        <PropertyList>
+          <Property label="Class" value={spec.ingressClassName || data.metadata?.annotations?.['kubernetes.io/ingress.class']} />
+          {lbIngress.length > 0 && (
+            <Property label="Address" value={lbIngress[0].ip || lbIngress[0].hostname} />
+          )}
+          <Property label="TLS" value={tls.length > 0 ? `${tls.length} certificate(s)` : 'None'} />
+        </PropertyList>
+      </Section>
+
+      <Section title="Rules" 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 items-center gap-2 mb-2">
+                {tls.some((t: any) => t.hosts?.includes(rule.host)) && (
+                  <Shield className="w-3.5 h-3.5 text-green-400" />
+                )}
+                <span className="text-sm font-medium text-theme-text-primary">{rule.host || '*'}</span>
+              </div>
+              <div className="space-y-1">
+                {rule.http?.paths?.map((path: any) => (
+                  <div key={path.path || '/'} className="text-xs text-theme-text-secondary flex items-center gap-2">
+                    <span className="text-theme-text-tertiary">{path.pathType || 'Prefix'}:</span>
+                    <span>{path.path || '/'}</span>
+                    <span className="text-theme-text-tertiary">→</span>
+                    {path.backend?.service?.name ? (
+                      <ResourceLink
+                        name={path.backend.service.name}
+                        kind="services"
+                        namespace={data.metadata?.namespace || ''}
+                        label={<span className="text-blue-400">{path.backend.service.name}:{path.backend.service.port?.number || path.backend.service.port?.name}</span>}
+                        onNavigate={onNavigate}
+                      />
+                    ) : (
+                      <span className="text-blue-400">-</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {tls.length > 0 && (
+        <Section title="TLS" icon={Shield}>
+          <div className="space-y-2">
+            {tls.map((t: any) => (
+              <div key={t.secretName} className="text-sm">
+                <div className="text-theme-text-secondary">Secret: {t.secretName ? (
+                  <ResourceLink name={t.secretName} kind="secrets" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+                ) : '-'}</div>
+                <div className="text-xs text-theme-text-tertiary">Hosts: {t.hosts?.join(', ') || '*'}</div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,175 @@
+import { Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import {
+  getAuthorizationPolicyAction,
+  getAuthorizationPolicyRules,
+  getAuthorizationPolicySelector,
+} from '../resource-utils-istio'
+
+const actionColors: Record<string, string> = {
+  ALLOW: 'bg-green-500/20 text-green-400',
+  DENY: 'bg-red-500/20 text-red-400',
+  CUSTOM: 'bg-blue-500/20 text-blue-400',
+  AUDIT: 'bg-yellow-500/20 text-yellow-400',
+}
+
+interface IstioAuthorizationPolicyRendererProps {
+  data: any
+}
+
+export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPolicyRendererProps) {
+  const action = getAuthorizationPolicyAction(data)
+  const rules = getAuthorizationPolicyRules(data)
+  const selector = getAuthorizationPolicySelector(data)
+  const hasSelector = Object.keys(selector).length > 0
+
+  // Special case: DENY with no rules = deny all
+  const isDenyAll = action === 'DENY' && rules.length === 0
+  // Special case: ALLOW with no rules = allow nothing (deny all)
+  const isAllowNothing = action === 'ALLOW' && rules.length === 0 && !data.spec?.rules
+
+  return (
+    <>
+      {isDenyAll && (
+        <AlertBanner
+          variant="error"
+          title="Deny All"
+          message="This policy denies all traffic to the target workload (DENY action with no rules)."
+        />
+      )}
+      {isAllowNothing && (
+        <AlertBanner
+          variant="warning"
+          title="Allow Nothing"
+          message="This policy has ALLOW action but no rules, which means no traffic is allowed."
+        />
+      )}
+
+      {/* Policy info */}
+      <Section title="Authorization Policy" icon={Shield} defaultExpanded>
+        <PropertyList>
+          <Property label="Action" value={
+            <span className={clsx(
+              'px-2 py-0.5 rounded text-xs font-medium',
+              actionColors[action] || 'bg-gray-500/20 text-gray-400'
+            )}>
+              {action}
+            </span>
+          } />
+          <Property label="Scope" value={hasSelector ? 'Workload-scoped' : 'Namespace-wide'} />
+          <Property label="Rules" value={String(rules.length)} />
+          {data.spec?.provider?.name && (
+            <Property label="Provider" value={data.spec.provider.name} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Selector */}
+      {hasSelector && (
+        <Section title="Workload Selector" defaultExpanded>
+          <KeyValueBadgeList items={selector} />
+        </Section>
+      )}
+
+      {/* Rules */}
+      {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="text-sm font-medium text-theme-text-primary mb-2">Rule {i + 1}</div>
+
+                {/* From (sources) */}
+                {rule.from && rule.from.length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">From (Sources)</div>
+                    {rule.from.map((f: any, fi: number) => (
+                      <div key={fi} className="flex flex-wrap gap-1 mb-1">
+                        {f.source?.principals?.map((p: string, pi: number) => (
+                          <span key={`p-${pi}`} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded text-xs">
+                            principal: {p}
+                          </span>
+                        ))}
+                        {f.source?.namespaces?.map((n: string, ni: number) => (
+                          <span key={`n-${ni}`} className="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 rounded text-xs">
+                            namespace: {n}
+                          </span>
+                        ))}
+                        {f.source?.ipBlocks?.map((ip: string, ipi: number) => (
+                          <span key={`ip-${ipi}`} className="px-1.5 py-0.5 bg-orange-500/10 text-orange-400 rounded text-xs">
+                            IP: {ip}
+                          </span>
+                        ))}
+                        {f.source?.requestPrincipals?.map((rp: string, rpi: number) => (
+                          <span key={`rp-${rpi}`} className="px-1.5 py-0.5 bg-cyan-500/10 text-cyan-400 rounded text-xs">
+                            reqPrincipal: {rp}
+                          </span>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* To (operations) */}
+                {rule.to && rule.to.length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">To (Operations)</div>
+                    {rule.to.map((t: any, ti: number) => (
+                      <div key={ti} className="flex flex-wrap gap-1 mb-1">
+                        {t.operation?.hosts?.map((h: string, hi: number) => (
+                          <span key={`h-${hi}`} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded text-xs">
+                            host: {h}
+                          </span>
+                        ))}
+                        {t.operation?.ports?.map((p: string, pi: number) => (
+                          <span key={`p-${pi}`} className="px-1.5 py-0.5 bg-orange-500/10 text-orange-400 rounded text-xs">
+                            port: {p}
+                          </span>
+                        ))}
+                        {t.operation?.methods?.map((m: string, mi: number) => (
+                          <span key={`m-${mi}`} className="px-1.5 py-0.5 bg-green-500/10 text-green-400 rounded text-xs">
+                            method: {m}
+                          </span>
+                        ))}
+                        {t.operation?.paths?.map((p: string, pi: number) => (
+                          <span key={`path-${pi}`} className="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 rounded text-xs">
+                            path: {p}
+                          </span>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* When (conditions) */}
+                {rule.when && rule.when.length > 0 && (
+                  <div>
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">When (Conditions)</div>
+                    {rule.when.map((w: any, wi: number) => (
+                      <div key={wi} className="flex flex-wrap gap-1 mb-1 text-xs">
+                        <span className="text-theme-text-secondary font-medium">{w.key}</span>
+                        {w.values && (
+                          <span className="text-theme-text-tertiary">
+                            = [{w.values.join(', ')}]
+                          </span>
+                        )}
+                        {w.notValues && (
+                          <span className="text-red-400">
+                            != [{w.notValues.join(', ')}]
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,176 @@
+import { Network } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ResourceLink, KeyValueBadgeList } from '../../ui/drawer-components'
+import {
+  getDestinationRuleHost,
+  getDestinationRuleSubsets,
+  getDestinationRuleTrafficPolicy,
+  getDestinationRuleLoadBalancer,
+} from '../resource-utils-istio'
+
+interface IstioDestinationRuleRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function IstioDestinationRuleRenderer({ data, onNavigate }: IstioDestinationRuleRendererProps) {
+  const host = getDestinationRuleHost(data)
+  const subsets = getDestinationRuleSubsets(data)
+  const trafficPolicy = getDestinationRuleTrafficPolicy(data)
+  const loadBalancer = getDestinationRuleLoadBalancer(data)
+  const ns = data.metadata?.namespace || ''
+
+  // Parse host to create service link
+  const hostParts = host.split('.')
+  const svcName = hostParts[0]
+  const svcNs = hostParts.length >= 2 ? hostParts[1] : ns
+
+  return (
+    <>
+      {/* Host reference */}
+      <Section title="Destination" icon={Network} defaultExpanded>
+        <PropertyList>
+          <Property label="Host" value={
+            host !== '-' ? (
+              <ResourceLink
+                name={svcName}
+                kind="services"
+                namespace={svcNs}
+                label={host}
+                onNavigate={onNavigate}
+              />
+            ) : '-'
+          } />
+          <Property label="Load Balancer" value={loadBalancer} />
+        </PropertyList>
+      </Section>
+
+      {/* Traffic Policy */}
+      {trafficPolicy && (
+        <Section title="Traffic Policy" defaultExpanded>
+          <div className="space-y-3">
+            {/* Connection Pool */}
+            {trafficPolicy.connectionPool && (
+              <div>
+                <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Connection Pool</div>
+                <PropertyList>
+                  {trafficPolicy.connectionPool.tcp && (
+                    <>
+                      {trafficPolicy.connectionPool.tcp.maxConnections !== undefined && (
+                        <Property label="Max TCP Connections" value={String(trafficPolicy.connectionPool.tcp.maxConnections)} />
+                      )}
+                      {trafficPolicy.connectionPool.tcp.connectTimeout && (
+                        <Property label="Connect Timeout" value={trafficPolicy.connectionPool.tcp.connectTimeout} />
+                      )}
+                    </>
+                  )}
+                  {trafficPolicy.connectionPool.http && (
+                    <>
+                      {trafficPolicy.connectionPool.http.h2UpgradePolicy && (
+                        <Property label="H2 Upgrade" value={trafficPolicy.connectionPool.http.h2UpgradePolicy} />
+                      )}
+                      {trafficPolicy.connectionPool.http.http1MaxPendingRequests !== undefined && (
+                        <Property label="Max Pending Requests" value={String(trafficPolicy.connectionPool.http.http1MaxPendingRequests)} />
+                      )}
+                      {trafficPolicy.connectionPool.http.http2MaxRequests !== undefined && (
+                        <Property label="Max Requests (H2)" value={String(trafficPolicy.connectionPool.http.http2MaxRequests)} />
+                      )}
+                      {trafficPolicy.connectionPool.http.maxRequestsPerConnection !== undefined && (
+                        <Property label="Max Req/Connection" value={String(trafficPolicy.connectionPool.http.maxRequestsPerConnection)} />
+                      )}
+                      {trafficPolicy.connectionPool.http.maxRetries !== undefined && (
+                        <Property label="Max Retries" value={String(trafficPolicy.connectionPool.http.maxRetries)} />
+                      )}
+                    </>
+                  )}
+                </PropertyList>
+              </div>
+            )}
+
+            {/* Load Balancer */}
+            {trafficPolicy.loadBalancer && (
+              <div>
+                <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Load Balancer</div>
+                <PropertyList>
+                  {trafficPolicy.loadBalancer.simple && (
+                    <Property label="Algorithm" value={trafficPolicy.loadBalancer.simple} />
+                  )}
+                  {trafficPolicy.loadBalancer.consistentHash && (
+                    <Property label="Consistent Hash" value={
+                      trafficPolicy.loadBalancer.consistentHash.httpHeaderName
+                        ? `Header: ${trafficPolicy.loadBalancer.consistentHash.httpHeaderName}`
+                        : trafficPolicy.loadBalancer.consistentHash.httpCookie
+                          ? `Cookie: ${trafficPolicy.loadBalancer.consistentHash.httpCookie.name}`
+                          : trafficPolicy.loadBalancer.consistentHash.useSourceIp
+                            ? 'Source IP'
+                            : 'Configured'
+                    } />
+                  )}
+                </PropertyList>
+              </div>
+            )}
+
+            {/* Outlier Detection */}
+            {trafficPolicy.outlierDetection && (
+              <div>
+                <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Outlier Detection</div>
+                <PropertyList>
+                  {trafficPolicy.outlierDetection.consecutiveErrors !== undefined && (
+                    <Property label="Consecutive Errors" value={String(trafficPolicy.outlierDetection.consecutiveErrors)} />
+                  )}
+                  {trafficPolicy.outlierDetection.consecutive5xxErrors !== undefined && (
+                    <Property label="Consecutive 5xx" value={String(trafficPolicy.outlierDetection.consecutive5xxErrors)} />
+                  )}
+                  {trafficPolicy.outlierDetection.interval && (
+                    <Property label="Interval" value={trafficPolicy.outlierDetection.interval} />
+                  )}
+                  {trafficPolicy.outlierDetection.baseEjectionTime && (
+                    <Property label="Ejection Time" value={trafficPolicy.outlierDetection.baseEjectionTime} />
+                  )}
+                  {trafficPolicy.outlierDetection.maxEjectionPercent !== undefined && (
+                    <Property label="Max Ejection %" value={`${trafficPolicy.outlierDetection.maxEjectionPercent}%`} />
+                  )}
+                </PropertyList>
+              </div>
+            )}
+
+            {/* TLS */}
+            {trafficPolicy.tls && (
+              <div>
+                <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">TLS</div>
+                <PropertyList>
+                  <Property label="Mode" value={trafficPolicy.tls.mode || '-'} />
+                </PropertyList>
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {/* Subsets */}
+      {subsets.length > 0 && (
+        <Section title={`Subsets (${subsets.length})`} defaultExpanded>
+          <div className="space-y-3">
+            {subsets.map((subset, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                <div className="text-sm font-medium text-theme-text-primary mb-2">{subset.name}</div>
+                {Object.keys(subset.labels).length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Labels</div>
+                    <KeyValueBadgeList items={subset.labels} />
+                  </div>
+                )}
+                {subset.trafficPolicy && (
+                  <div className="text-xs text-theme-text-tertiary">
+                    Has traffic policy override
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,125 @@
+import { Globe, Lock } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import {
+  getIstioGatewayStatus,
+  getIstioGatewayServers,
+  getIstioGatewaySelector,
+} from '../resource-utils-istio'
+
+const protocolColors: Record<string, string> = {
+  HTTP: 'bg-blue-500/20 text-blue-400',
+  HTTPS: 'bg-green-500/20 text-green-400',
+  HTTP2: 'bg-blue-500/20 text-blue-400',
+  GRPC: 'bg-purple-500/20 text-purple-400',
+  TCP: 'bg-orange-500/20 text-orange-400',
+  TLS: 'bg-green-500/20 text-green-400',
+  MONGO: 'bg-emerald-500/20 text-emerald-400',
+  MYSQL: 'bg-cyan-500/20 text-cyan-400',
+}
+
+interface IstioGatewayRendererProps {
+  data: any
+}
+
+export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
+  const status = getIstioGatewayStatus(data)
+  const servers = getIstioGatewayServers(data)
+  const selector = getIstioGatewaySelector(data)
+
+  const hasNoServers = servers.length === 0
+
+  return (
+    <>
+      {hasNoServers && (
+        <AlertBanner
+          variant="error"
+          title="No Servers Configured"
+          message="This Istio Gateway has no server definitions."
+        />
+      )}
+
+      {/* Gateway info */}
+      <Section title="Gateway" 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="Workload Selector" value={
+            Object.keys(selector).length > 0 ? (
+              <KeyValueBadgeList items={selector} />
+            ) : '-'
+          } />
+        </PropertyList>
+      </Section>
+
+      {/* Servers */}
+      {servers.length > 0 && (
+        <Section title={`Servers (${servers.length})`} defaultExpanded>
+          <div className="space-y-3">
+            {servers.map((server, i) => {
+              const isSecure = server.tls !== undefined
+              const protocol = server.port.protocol || 'TCP'
+
+              return (
+                <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      {isSecure && <Lock className="w-3.5 h-3.5 text-green-400" />}
+                      <span className="text-sm font-medium text-theme-text-primary">
+                        {server.port.name || `Port ${server.port.number}`}
+                      </span>
+                      <span className={clsx(
+                        'px-1.5 py-0.5 rounded text-[10px] font-medium',
+                        protocolColors[protocol] || 'bg-gray-500/20 text-gray-400'
+                      )}>
+                        {protocol}:{server.port.number}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Hosts */}
+                  <div className="space-y-1 text-xs text-theme-text-secondary">
+                    <div>
+                      <span className="text-theme-text-tertiary">Hosts: </span>
+                      <span className="break-all">{server.hosts.join(', ')}</span>
+                    </div>
+
+                    {/* TLS settings */}
+                    {server.tls && (
+                      <>
+                        <div>
+                          <span className="text-theme-text-tertiary">TLS Mode: </span>
+                          <span className={clsx(
+                            'px-1.5 py-0.5 rounded text-[10px] font-medium',
+                            server.tls.mode === 'SIMPLE' || server.tls.mode === 'MUTUAL'
+                              ? 'bg-green-500/20 text-green-400'
+                              : server.tls.mode === 'PASSTHROUGH'
+                                ? 'bg-blue-500/20 text-blue-400'
+                                : 'bg-gray-500/20 text-gray-400'
+                          )}>
+                            {server.tls.mode || 'SIMPLE'}
+                          </span>
+                        </div>
+                        {server.tls.credentialName && (
+                          <div>
+                            <span className="text-theme-text-tertiary">Credential: </span>
+                            <span>{server.tls.credentialName}</span>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}