@skyhook-io/k8s-ui 1.7.9 → 1.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/resources/ResourcesView.tsx

@@ -310,6 +310,16 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'externalIP', label: 'External', width: 'w-40', hideOnMobile: true },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  endpointslices: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'service', label: 'Service', width: 'w-48' },
+    { key: 'addressType', label: 'Address Type', width: 'w-28' },
+    { key: 'endpoints', label: 'Endpoints', width: 'w-32' },
+    { key: 'addresses', label: 'Addresses', width: 'w-24' },
+    { key: 'ports', label: 'Ports', width: 'w-40', hideOnMobile: true },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   ingresses: [
     { key: 'name', label: 'Name', width: 'min-w-40' },
     { key: 'namespace', label: 'Namespace', width: 'w-36 shrink-0' },
@@ -4509,6 +4519,8 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <ReplicaSetCell resource={resource} column={column} />
     case 'services':
       return <ServiceCell resource={resource} column={column} />
+    case 'endpointslices':
+      return <EndpointSliceCell resource={resource} column={column} />
     case 'ingresses':
       return <IngressCell resource={resource} column={column} />
     case 'configmaps':
@@ -5333,6 +5345,56 @@ function ServiceCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
+function getEndpointSliceReadyCount(resource: any): number {
+  return (resource.endpoints || []).filter((endpoint: any) => endpoint?.conditions?.ready !== false).length
+}
+
+function getEndpointSliceAddressCount(resource: any): number {
+  return (resource.endpoints || []).reduce((total: number, endpoint: any) => total + (endpoint.addresses?.length || 0), 0)
+}
+
+function getEndpointSlicePorts(resource: any): string {
+  const ports = resource.ports || []
+  if (ports.length === 0) return '-'
+  return ports.map((port: any) => {
+    const name = port.name || 'unnamed'
+    const protocol = port.protocol || 'TCP'
+    return `${name}:${port.port ?? '-'}${protocol !== 'TCP' ? `/${protocol}` : ''}`
+  }).join(', ')
+}
+
+function EndpointSliceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'service': {
+      const service = resource.metadata?.labels?.['kubernetes.io/service-name']
+      return <span className="text-sm text-theme-text-secondary truncate">{service || '-'}</span>
+    }
+    case 'addressType':
+      return <span className="text-sm text-theme-text-secondary">{resource.addressType || '-'}</span>
+    case 'endpoints': {
+      const total = resource.endpoints?.length || 0
+      const ready = getEndpointSliceReadyCount(resource)
+      const color = total === 0 ? SEVERITY_BADGE.neutral :
+        ready === total ? SEVERITY_BADGE.success :
+        ready > 0 ? SEVERITY_BADGE.warning :
+        SEVERITY_BADGE.error
+      return <span className={clsx('badge', color)}>{ready}/{total}</span>
+    }
+    case 'addresses':
+      return <span className="text-sm text-theme-text-secondary">{getEndpointSliceAddressCount(resource)}</span>
+    case 'ports': {
+      const ports = getEndpointSlicePorts(resource)
+      return (
+        <Tooltip content={ports}>
+          <span className="text-sm text-theme-text-secondary truncate">{ports}</span>
+        </Tooltip>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 function IngressCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'class': {

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

@@ -0,0 +1,141 @@
+import { Radio, Server, Waypoints } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+
+interface EndpointSliceRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+function isEndpointReady(endpoint: any): boolean {
+  return endpoint?.conditions?.ready !== false
+}
+
+function endpointAddressCount(endpoints: any[]): number {
+  return endpoints.reduce((total, endpoint) => total + (endpoint.addresses?.length || 0), 0)
+}
+
+function endpointTargetLabel(endpoint: any): string | null {
+  const target = endpoint.targetRef
+  if (!target?.kind || !target?.name) return null
+  return target.namespace ? `${target.kind} ${target.namespace}/${target.name}` : `${target.kind} ${target.name}`
+}
+
+export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendererProps) {
+  const metadata = data.metadata || {}
+  const labels = metadata.labels || {}
+  const endpoints = data.endpoints || []
+  const ports = data.ports || []
+  const serviceName = labels['kubernetes.io/service-name']
+  const readyCount = endpoints.filter(isEndpointReady).length
+  const addresses = endpointAddressCount(endpoints)
+
+  return (
+    <>
+      <Section title="EndpointSlice" icon={Radio}>
+        <PropertyList>
+          <Property label="Address Type" value={data.addressType || '-'} />
+          <Property label="Endpoints" value={`${readyCount}/${endpoints.length} ready`} />
+          <Property label="Addresses" value={addresses} />
+          <Property label="Ports" value={ports.length} />
+          {serviceName && (
+            <Property
+              label="Service"
+              value={onNavigate ? (
+                <button
+                  type="button"
+                  className="text-sm text-accent-text hover:underline font-medium"
+                  onClick={() => onNavigate({ kind: 'Service', namespace: metadata.namespace, name: serviceName })}
+                >
+                  {serviceName}
+                </button>
+              ) : serviceName}
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      {ports.length > 0 && (
+        <Section title="Ports" icon={Waypoints}>
+          <div className="space-y-2">
+            {ports.map((port: any, index: number) => (
+              <div key={`${port.name || 'port'}-${port.port || index}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="font-medium text-theme-text-primary truncate">{port.name || `port-${index + 1}`}</div>
+                    {port.appProtocol && (
+                      <div className="text-xs text-theme-text-tertiary mt-0.5">{port.appProtocol}</div>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{port.protocol || 'TCP'}</span>
+                    <span className="font-mono text-theme-text-secondary">{port.port ?? '-'}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {endpoints.length > 0 && (
+        <Section title="Endpoints" icon={Server}>
+          <div className="space-y-2">
+            {endpoints.map((endpoint: any, index: number) => {
+              const ready = isEndpointReady(endpoint)
+              const targetLabel = endpointTargetLabel(endpoint)
+              const target = endpoint.targetRef
+              return (
+                <div key={`${endpoint.addresses?.join(',') || 'endpoint'}-${index}`} className="card-inner text-sm space-y-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0 space-y-1">
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        {(endpoint.addresses || []).map((address: string) => (
+                          <span key={address} className="badge-sm bg-theme-elevated text-theme-text-primary border border-theme-border font-mono">
+                            {address}
+                          </span>
+                        ))}
+                      </div>
+                      {targetLabel && (
+                        <button
+                          type="button"
+                          className="text-xs text-theme-text-secondary hover:text-accent-text"
+                          disabled={!onNavigate}
+                          onClick={() => onNavigate?.({
+                            kind: target.kind,
+                            namespace: target.namespace || metadata.namespace,
+                            name: target.name,
+                          })}
+                        >
+                          {targetLabel}
+                        </button>
+                      )}
+                    </div>
+                    <div className="flex flex-wrap justify-end gap-1.5 shrink-0">
+                      <span className={clsx('badge-sm', ready ? 'status-healthy' : 'status-unhealthy')}>
+                        {ready ? 'Ready' : 'Not Ready'}
+                      </span>
+                      {endpoint.conditions?.serving === false && (
+                        <span className="badge-sm status-degraded">Not Serving</span>
+                      )}
+                      {endpoint.conditions?.terminating === true && (
+                        <span className="badge-sm status-alert">Terminating</span>
+                      )}
+                    </div>
+                  </div>
+                  {(endpoint.nodeName || endpoint.zone) && (
+                    <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-theme-text-tertiary">
+                      {endpoint.nodeName && <span>Node: {endpoint.nodeName}</span>}
+                      {endpoint.zone && <span>Zone: {endpoint.zone}</span>}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -1,15 +1,34 @@
 import { type ReactNode } from 'react'
-import { Globe, Clock } from 'lucide-react'
+import { Globe, Clock, Radio } from 'lucide-react'
 import { Section, PropertyList, Property, KeyValueBadgeList, CopyHandler, AlertBanner } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
 
 interface ServiceRendererProps {
   data: any
   onCopy: CopyHandler
   copied: string | null
+  endpointSlices?: any[]
+  endpointSlicesLoading?: boolean
+  onNavigate?: (ref: ResourceRef) => void
   renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string }) => ReactNode
 }
 
-export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: ServiceRendererProps) {
+function endpointSliceAddressCount(slice: any): number {
+  return (slice.endpoints || []).reduce((total: number, endpoint: any) => total + (endpoint.addresses?.length || 0), 0)
+}
+
+function endpointSliceReadyCount(slice: any): number {
+  return (slice.endpoints || []).filter((endpoint: any) => endpoint?.conditions?.ready !== false).length
+}
+
+function endpointSliceReadyClass(ready: number, total: number): string {
+  if (total === 0) return 'status-unknown'
+  if (ready === total) return 'status-healthy'
+  if (ready > 0) return 'status-degraded'
+  return 'status-unhealthy'
+}
+
+export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction }: ServiceRendererProps) {
   const spec = data.spec || {}
   const ports = spec.ports || []
   const lbIngress = data.status?.loadBalancer?.ingress || []
@@ -105,6 +124,49 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
           <KeyValueBadgeList items={spec.selector} />
         </Section>
       )}
+
+      {hasNoSelector && !isExternalName && (
+        <Section title="EndpointSlices" icon={Radio}>
+          {endpointSlicesLoading ? (
+            <div className="text-sm text-theme-text-tertiary">Loading EndpointSlices...</div>
+          ) : endpointSlices && endpointSlices.length > 0 ? (
+            <div className="space-y-2">
+              {endpointSlices.map((slice: any) => {
+                const sliceName = slice.metadata?.name
+                const endpoints = slice.endpoints || []
+                const ready = endpointSliceReadyCount(slice)
+                const addresses = endpointSliceAddressCount(slice)
+                return (
+                  <button
+                    key={slice.metadata?.uid || sliceName}
+                    type="button"
+                    className="card-inner w-full text-left hover:bg-theme-hover transition-colors"
+                    onClick={() => onNavigate?.({
+                      kind: 'EndpointSlice',
+                      group: 'discovery.k8s.io',
+                      namespace,
+                      name: sliceName,
+                    })}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium text-theme-text-primary truncate">{sliceName}</div>
+                        <div className="text-xs text-theme-text-tertiary mt-0.5">{slice.addressType || 'Unknown'} address type</div>
+                      </div>
+                      <div className="flex flex-wrap items-center justify-end gap-1.5 shrink-0">
+                        <span className={`badge-sm ${endpointSliceReadyClass(ready, endpoints.length)}`}>{ready}/{endpoints.length} ready</span>
+                        <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{addresses} addresses</span>
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          ) : (
+            <div className="text-sm text-theme-text-tertiary">No EndpointSlices found for this Service.</div>
+          )}
+        </Section>
+      )}
     </>
   )
 }

package/src/components/resources/renderers/index.ts

@@ -25,6 +25,7 @@ export * from './ConfigMapRenderer'
 export * from './CronJobRenderer'
 export * from './eso-cells'
 export * from './EventRenderer'
+export * from './EndpointSliceRenderer'
 export * from './ExposedSecretReportRenderer'
 export * from './ExternalSecretRenderer'
 export * from './flux-cells'

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -110,6 +110,7 @@ import {
   RoleBindingRenderer,
   WebhookConfigRenderer,
   EventRenderer,
+  EndpointSliceRenderer,
   GenericRenderer,
   GitRepositoryRenderer,
   OCIRepositoryRenderer,
@@ -242,6 +243,7 @@ export interface RendererOverrides {
   }>
   ServiceRenderer?: React.ComponentType<{
     data: any; onCopy: CopyHandler; copied: string | null
+    onNavigate?: (ref: ResourceRef) => void
   }>
   WorkloadRenderer?: React.ComponentType<{
     kind: string; data: any
@@ -299,7 +301,7 @@ export interface RendererOverrides {
 // Known resource types with specific renderers (module-level to avoid re-allocation)
 const KNOWN_KINDS = new Set([
   'pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets',
-  'services', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs',
+  'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs',
   'hpas', 'horizontalpodautoscalers', 'nodes', 'persistentvolumeclaims',
   'rollouts', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
@@ -494,7 +496,8 @@ export function ResourceRendererDispatch({
           />
         )}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
-        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} />}
+        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
+        {kind === 'endpointslices' && <EndpointSliceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'configmaps' && <ConfigMapRenderer data={data} />}
         {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
@@ -697,6 +700,16 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
     }
     return getServiceStatus(data)
   }
+  if (k === 'endpointslices') {
+    const endpoints = data.endpoints || []
+    const ready = endpoints.filter((endpoint: any) => endpoint?.conditions?.ready !== false).length
+    const text = endpoints.length === 0 ? 'No endpoints' : `${ready}/${endpoints.length} ready`
+    const color = endpoints.length === 0 ? SEVERITY_BADGE.neutral :
+      ready === endpoints.length ? SEVERITY_BADGE.success :
+      ready > 0 ? SEVERITY_BADGE.warning :
+      SEVERITY_BADGE.error
+    return { text, color }
+  }
   if (k === 'jobs') return getJobStatus(data)
   if (k === 'cronjobs') return getCronJobStatus(data)
   if (k === 'hpas' || k === 'horizontalpodautoscalers') return getHPAStatus(data)

package/src/components/ui/Badge.tsx

@@ -54,6 +54,8 @@ const KIND: Record<string, string> = {
 
   // Networking
   Service:       'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  Endpoints:     'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  EndpointSlice: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
   Internet:      'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
   Ingress:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
   Gateway:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',

package/src/components/ui/MiddleEllipsis.tsx

@@ -64,8 +64,21 @@ export function MiddleEllipsis({ text, className, title, onTruncatedChange }: Mi
       // ctx.measureText says 173.4px and clientWidth rounds to 173 — the
       // integer comparison decides we don't fit and middle-truncates a
       // name that visually would have rendered fine.
-      const width = node.getBoundingClientRect().width
-      if (width <= 0) return
+      const rawWidth = node.getBoundingClientRect().width
+      if (rawWidth <= 0) return
+      // getBoundingClientRect() returns the *rendered* width, which a CSS
+      // transform on this node or any ancestor scales — e.g. the `scale()` in a
+      // menu/popup/dialog entry animation. Measuring during that animation
+      // compares a visually-shrunk container against unscaled canvas text
+      // (measureText is transform-independent) and middle-truncates a name that
+      // actually fits. Worse, a transform never changes the layout box, so the
+      // ResizeObserver below doesn't fire to re-measure once the animation
+      // settles — the wrong truncation then sticks. Divide out the cumulative
+      // ancestor scaleX to recover the unscaled (still subpixel) layout width.
+      // With no transform the scale is 1 and this is a no-op, so the just-fits
+      // subpixel precision noted above is preserved.
+      const scaleX = cumulativeScaleX(node)
+      const width = scaleX > 0 ? rawWidth / scaleX : rawWidth
       const cs = window.getComputedStyle(node)
       // Include fontStyle in the shorthand so italic faces measure correctly.
       // If the assignment ever silently fails (malformed family quoting,
@@ -128,6 +141,29 @@ export function MiddleEllipsis({ text, className, title, onTruncatedChange }: Mi
   )
 }
 
+// Cumulative horizontal scale applied to `el` by CSS transforms on it and its
+// ancestors. Used to convert a transform-scaled getBoundingClientRect() width
+// back to the unscaled layout width, so a `scale()` entry animation on an
+// ancestor (menu/popup/dialog) can't make text middle-truncate when it would
+// otherwise fit. Reads the computed transform matrix's scaleX (`a`) at each
+// level — exact for the scale()/translate() animations this guards against
+// (no rotation, where `a` would fold in cos θ). Returns 1 when nothing in the
+// chain is transformed, making the caller a no-op in the common case.
+function cumulativeScaleX(el: HTMLElement | null): number {
+  let scale = 1
+  for (let cur: HTMLElement | null = el; cur; cur = cur.parentElement) {
+    const t = window.getComputedStyle(cur).transform
+    if (t && t !== 'none') {
+      try {
+        scale *= new DOMMatrixReadOnly(t).a
+      } catch {
+        // Unparseable transform value — skip this level rather than throw.
+      }
+    }
+  }
+  return scale
+}
+
 // Binary-search the largest `n` such that `prefix(n) + … + suffix(n)` fits
 // in `width`. Symmetric on purpose — keeping prefix and suffix balanced is
 // the cheapest way to preserve the most identifying chars on both ends of

package/src/components/ui/drawer-components.tsx

@@ -657,7 +657,7 @@ export function formatKindName(kind: string): string {
   const k = kind.toLowerCase()
   const names: Record<string, string> = {
     pods: 'Pod', deployments: 'Deployment', daemonsets: 'DaemonSet', statefulsets: 'StatefulSet',
-    replicasets: 'ReplicaSet', services: 'Service', ingresses: 'Ingress',
+    replicasets: 'ReplicaSet', services: 'Service', endpointslices: 'EndpointSlice', ingresses: 'Ingress',
     gateways: 'Gateway', httproutes: 'HTTPRoute', grpcroutes: 'GRPCRoute',
     tcproutes: 'TCPRoute', tlsroutes: 'TLSRoute', configmaps: 'ConfigMap',
     secrets: 'Secret', jobs: 'Job', cronjobs: 'CronJob', hpas: 'HPA',

package/src/utils/api-resources.ts

@@ -33,6 +33,7 @@ export const CORE_RESOURCES: APIResource[] = [
   { group: 'batch', version: 'v1', kind: 'CronJob', name: 'cronjobs', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'networking.k8s.io', version: 'v1', kind: 'Ingress', name: 'ingresses', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'networking.k8s.io', version: 'v1', kind: 'NetworkPolicy', name: 'networkpolicies', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'discovery.k8s.io', version: 'v1', kind: 'EndpointSlice', name: 'endpointslices', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'autoscaling', version: 'v2', kind: 'HorizontalPodAutoscaler', name: 'horizontalpodautoscalers', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: '', version: 'v1', kind: 'Event', name: 'events', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'rbac.authorization.k8s.io', version: 'v1', kind: 'Role', name: 'roles', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },

package/src/utils/navigation.test.ts

@@ -32,6 +32,11 @@ describe('kindToPlural', () => {
     expect(pluralToKind('endpoints')).toBe('Endpoints')
   })
 
+  test('handles EndpointSlice before discovery loads', () => {
+    expect(kindToPlural('EndpointSlice')).toBe('endpointslices')
+    expect(pluralToKind('endpointslices')).toBe('EndpointSlice')
+  })
+
   test('handles kinds ending in ss (Class-suffix)', () => {
     expect(kindToPlural('StorageClass')).toBe('storageclasses')
     expect(kindToPlural('IngressClass')).toBe('ingressclasses')

package/src/utils/navigation.ts

@@ -12,6 +12,7 @@ const BUILTIN_PLURAL_TO_KIND: Record<string, string> = {
   pods: 'Pod',
   services: 'Service',
   endpoints: 'Endpoints', // already-plural resource name; englishPlural would yield "endpointses"
+  endpointslices: 'EndpointSlice',
   deployments: 'Deployment',
   daemonsets: 'DaemonSet',
   statefulsets: 'StatefulSet',

package/src/utils/skeleton-yaml.ts

@@ -48,6 +48,25 @@ spec:
       targetPort: 80
   type: ClusterIP`,
 
+  EndpointSlice: `apiVersion: discovery.k8s.io/v1
+kind: EndpointSlice
+metadata:
+  name: my-service-1
+  namespace: default
+  labels:
+    kubernetes.io/service-name: my-service
+addressType: IPv4
+ports:
+  - name: http
+    protocol: TCP
+    port: 80
+endpoints:
+  - addresses:
+      - 10.0.0.10
+    conditions:
+      ready: true
+      serving: true`,
+
   ConfigMap: `apiVersion: v1
 kind: ConfigMap
 metadata: