2026-09-18Active

Istio Headlamp Plugin

Headlamp에서 Istio 리소스의 spec을 상세 화면에서 바로 보여주고, Ambient 모드의 Waypoint, ztunnel 상태와 L4/L7 정책 적용 위치까지 확인할 수 있는 플러그인. Istio 설정 하나 보려고 매번 Edit를 여는 불편함에서 시작한 개인 프로젝트로, Artifact Hub 배포와 Headlamp 공식 plugins 저장소 External plugin 목록 등재까지 진행.

TypeScriptReactKubernetesIstioHeadlamp
Istio Headlamp Plugin

Summary

Headlamp에서 Istio 설정을 편집기 없이 읽고, Ambient 모드 구성을 확인하려고 만든 개인 플러그인

Why I Built It

  • 상세 화면에 spec이 없어, DestinationRule 설정 하나 확인에도 매번 Edit 필요
  • Ambient 모드에서 L7 AuthorizationPolicy가 ztunnel에 걸려 트래픽이 막혀도 UI에서 확인 불가

Approach

  • 리소스 레지스트리 하나로 사이드바, 라우트, 목록, 상세 페이지를 모두 생성
  • 주요 필드는 타입별 섹션, 나머지는 재귀 렌더러로 그려 새 버전 필드도 표시
  • 분석 로직은 순수 함수로 분리해 Istio 1.30.1 Ambient 클러스터 fixture로 테스트
  • kind 클러스터와 Playwright E2E로 실제 Headlamp 화면에서 검증

Key Features

  • DestinationRule, ServiceEntry, VirtualService, AuthorizationPolicy 등 Istio 리소스별 spec 상세 화면과 Full spec 렌더러
  • Mesh Overview(컨트롤 플레인 버전, ztunnel/istio-cni 상태)와 Waypoints 화면
  • L7 AuthorizationPolicy의 실제 적용 위치(waypoint/ztunnel) 확인 및 fail closed 경고
  • 엔드포인트 없는 STATIC ServiceEntry 등 아무 효과 없는 구성 경고
  • Headlamp 기본 Service, Pod, Namespace 화면에 Istio 정보와 Ambient/Sidecar Mesh 컬럼 추가
  • Istio 1.2x, 1.3x 지원 및 클러스터에 설치된 CRD만 사이드바에 노출
  • GitHub Release, GHCR 이미지, Artifact Hub로 배포

Tech Stack

TypeScriptReactHeadlamp Plugin SDKIstioKuberneteskindPlaywrightDockerGitHub Actions