[Cloudhub] Kubernetes 토폴로지에서 리소스 갱신 후 노드/파드 색상이 사라지는 문제

[kim-jinhyeong]

요약

리소스 목록을 다시 가져온 뒤(새로고침·자동 갱신 등) Kubernetes 토폴로지가 다시 그려질 때, 노드/파드에 적용되던 CPU·메모리 사용률 색상이 사라지는 현상이 있었습니다.

재현 방법

1. Kubernetes 페이지에서 토폴로지를 연다.
2. 노드/파드에 색상(사용률)이 적용된 상태를 확인한다.
3. 리소스 목록이 다시 로드되도록 한다. (새로고침, 네임스페이스 변경, 자동 갱신 등)
4. 토폴로지가 다시 그려진 뒤, 이전에 색이 있던 노드/파드가 흰색으로 보인다.

원인

1. 토폴로지만 다시 그리기
   kubernetesD3Data가 바뀌면 KubernetesHexagon의 componentDidUpdate에서
   d3.select('svg.kubernetes-svg').selectAll('g').remove() 후 drawChart()로 SVG를 통째로 다시 그립니다.
   그 과정에서 이전에 setD3K8sSeries()로 칠해 둔 색상이 모두 사라집니다.

2. 색상은 한 번만 적용
   색상 적용은 kubernetesObject가 바뀔 때만 setD3K8sSeries()가 호출됩니다.
   kubernetesD3Data만 바뀌는 경우(리소스 목록만 갱신)에는 setD3K8sSeries()가 호출되지 않아, 새로 그려진 SVG에는 색이 다시 칠해지지 않습니다.

3. 실행 순서
   부모의 componentDidUpdate가 자식보다 먼저 실행되기 때문에,
   kubernetesD3Data 변경 시점에 부모에서 setD3K8sSeries()를 호출해도
   아직 Hexagon이 g를 지우고 다시 그리기 전이라, 그때 적용한 색은 곧바로 지워집니다.

해결 방법

1. kubernetesD3Data가 바뀔 때도 색상 재적용
   KubernetesPage의 componentDidUpdate에서 kubernetesD3Data가 변경된 경우,
   자식이 DOM을 다시 그린 뒤 색상을 다시 칠하도록
   requestAnimationFrame으로 setD3K8sSeries()를 한 번 더 호출합니다.

2. 항상 토폴로지 SVG만 대상으로 하기
   setD3K8sSeries() 안에서 d3.select('svg') 대신
   d3.select('svg.kubernetes-svg')를 사용해, 다른 SVG가 있어도 토폴로지 SVG만 갱신하도록 합니다.

3. SVG가 없을 때 처리
   setD3K8sSeries() 초반에 !node.node() 체크를 넣어,
   토폴로지 SVG나 g가 아직 없을 때는 early return 하도록 합니다.

수정 후 동작

리소스 목록을 다시 가져와 토폴로리가 한 번 다시 그려진 뒤에도,
다음 프레임에서 setD3K8sSeries()가 한 번 더 실행되어 노드/파드 색상이 유지됩니다.