ClusterSelectionPanel

@jennifersoft/apm-components@1.4.5의 MSA 토폴로지 클러스터 선택 패널입니다. 클러스터 검색·필터·정렬, 추천 및 일괄 선택, 중심 노드와 호출 방향·탐색 단계 설정, 관계도 미리보기를 제공합니다.

패널은 선택 중인 값을 내부 초안으로 관리합니다. 클러스터 목록과 미리보기 데이터는 사용하는 화면이 제공하며, 적용을 누르면 최종 선택을 apply 이벤트로 전달합니다. 다이얼로그가 필요하면 호스트 화면에서 패널을 감싸세요.

입력

Prop	타입	설명
clusters	TopologyCluster[]	탐지된 클러스터 목록
nodes	TopologyNode[]	중심 노드 후보와 관계도에 사용할 노드
selection	ClusterSelectionState	처음 표시할 선택 상태
maxNodes	number	적용 가능한 최대 노드 수
messages	Record<string, string>	버튼·필터·상태 문구. 사용하는 화면의 언어에 맞게 제공
preview	TopologyProjection	현재 선택에 대한 미리보기 결과. 선택 사항
previewLoading	boolean	미리보기 계산 중 표시. 선택 사항
previewWorker	Worker	미리보기 관계도의 force simulation Worker

TopologyCluster, ClusterSelectionState, TopologyProjection은 @jennifersoft/apm-core/topology-selection에서 가져옵니다. ClusterPreviewRequest와 ClusterSelectionMessages는 @jennifersoft/apm-components에서 가져올 수 있습니다.

이벤트

이벤트	값	호스트에서 할 일
preview	{ clusterIds: string[], focus: ClusterFocus | null }	선택에 맞는 미리보기를 계산해 preview prop으로 전달
clear-preview	없음	미리보기 데이터 정리
apply	ClusterSelectionState	최종 선택 저장 및 패널 닫기
cancel	없음	변경을 저장하지 않고 패널 닫기
refresh	없음	최신 클러스터 목록 다시 조회
catalog-changed	없음	목록 구성이 바뀌었음을 사용자에게 알릴 때 활용

preview 이벤트는 패널이 열릴 때에도 발생합니다. clusters가 갱신되면 편집 중인 선택을 새 목록과 맞추고, 구성 변화가 있으면 catalog-changed를 알립니다. 적용 버튼은 선택된 클러스터가 없거나, 중심 탐색을 사용하지 않을 때 선택 노드가 maxNodes를 넘으면 비활성화됩니다.

연결 예시

호스트 화면이 클러스터 탐지, 미리보기 계산, Worker 생성과 정리를 담당합니다. 아래는 패널과 호스트 간 연결 형태입니다.

<!-- 사용하는 화면에서 각 입력값과 이벤트 핸들러를 준비합니다. -->
<template>
    <ClusterSelectionPanel
        :clusters="clusters"
        :nodes="nodes"
        :selection="selection"
        :max-nodes="200"
        :messages="messages"
        :preview="preview"
        :preview-loading="previewLoading"
        :preview-worker="previewWorker"
        @preview="requestPreview"
        @clear-preview="closePreview"
        @refresh="refreshCatalog"
        @apply="saveSelection"
        @cancel="closePanel"
    />
</template>

previewWorker에는 사용하는 화면의 force simulation Worker를 전달하고, 화면을 떠날 때 terminate()로 정리합니다. 실제 서비스에서는 @jennifersoft/apm-core/topology-selection의 detectClusters(), createClusterSelection(), projectTopology()를 이용해 입력과 미리보기를 만들 수 있습니다. 관계도 입력 형식은 TopologyChart를 참고하세요.