시리즈 차트의 치명적 단점?!

시리즈 차트는 모니터링 지표의 시간대별 추이 변화를 표현하기 위해 가장 많이 사용하는 방법입니다.

차트 내에 서로 다른 성격을 가진 데이터를 선으로 구분하여 추이를 비교할 때가 있습니다. 그러나 그려야 할 선의 수가 많을 경우, 선들이 겹치는 가운데 중요한 추이 변화를 나타내는 선을 식별하기 어렵다는 단점도 있습니다.

차트 특성 상 불가피한 문제라고 넘어갈 수 있었지만, 표시가 무의미해진 선을 그리는 과정에서 발생하는 자원 낭비는 무시할 수 없었습니다.

문제 발생

프로젝트마다 수 백대의 에이전트를 설치하여 이용 중인 고객이 통합 모니터링을 위해 대시보드를 구성하던 중 화이트아웃 현상이 발생했습니다.

브라우저에서 엄청난 양의 데이터를 처리하는 과정에서 CPU를 과도하게 점유하고, 적시에 데이터 소거 작업이 이뤄지지 않아 메모리 부족과 함께 브라우저가 기능을 중지했습니다

그동안 시계열 데이터를 효율적으로 관리하는 방법이나 차트 렌더링 성능 면에서 수많은 시행착오를 겪어왔기에 '이정도면 문제가 없겠다.' 싶은 생각을 갖고 있었지만, 막상 문제가 발생하자 렌더링 효율을 개선하는 것으로 해결이 어렵다는 생각이 들었습니다.

현상을 조금 더 들여다보니 만 개 이상의 선을 한 번에 그리는 일이 요구됐습니다. 프론트엔드 개발자로서 브라우저에 미안한 마음이 드는 순간이었습니다.

결국 이 문제를 해결하기 위해 TopN 시리즈 차트를 고안하게 됐습니다.

TopN 차트는 선마다 우선 순위를 매겨 상위 몇 개의 선으로 차트에 표시하는 방법입니다.

'TopN' 이라면 보통 비교 정렬을 위해 단일한 값만 가지는 순간 데이터를 이용하기 때문에 시리즈 차트에서 사용하는 시계열 데이터와 연관 지어 차트를 구성할 수 있다는 생각이 들지 않았습니다. 그런 와중에 김성조 CTO님이 차트 아이디어와 함께 데이터 접목 방식을 제안해 주셨습니다.

그렇게 탄생한 TopN 차트

데이터 접목 방식은 어떻게?

• TopN 차트에서 사용하는 데이터는 내부적으로 'MQL'이라고 부르는 질·의문 형태의 매트릭스 조회 API를 이용합니다. 차트 초기화를 위한 최초 데이터 조회 시, 그리고 업데이트가 2분이 경과한 시점에 차트에 그릴 선의 우선순위를 먼저 정합니다.

화면 표현은 어떻게?

• 마지막 조회 시점으로부터 최근 데이터를 업데이트 하는 기존 시계열 데이터 처리 방식을 유지하는 대신, 순위 갱신 시점을 차트에 표시해서 순위 업데이트로 인한 차트 변화가 어색하게 느껴지지 않도록 했습니다.
• 일반 시리즈 차트와 구분되는 '상위' 개념에 따라 상단에 순위 라벨을 추가하고
• 시의성을 강조하기 위해 Y축을 우측으로 이동, 최근 값을 태그로 표시했습니다.

기존 차트와 비교하기

좌 : TopN 시리즈 차트    |    우 : 기존의 시리즈 차트

우선순위는 최근 30초 동안 시계열 데이터의 평균값 또는 최대값을 계산하여 정렬합니다. 불규칙한 추이 변화가 잦거나 그려야 할 선의 수가 많은 경우, 기존 시리즈 차트에서는 개별적인 선을 식별해내기가 불가능합니다. 그런 데에 반해 TopN차트는 식별 가능한 형태로 표현할 수 있습니다. 특히 CPU와 같이 순간적으로 값이 높게 측정되고 다시 하락하여 분석에 크게 의미가 없는 선들을 가려낼 때 유용합니다.결과적으로 향상된 성능과 분석을 하는 관점에서도 유용한 차트가 추가되었다고 생각합니다.

끝으로

TopN 차트는 베타 버전의 와탭 Flex 보드를 통해 위젯 형태로 제공하고 있습니다. 앞으로 여러 위젯 유형과 대시보드 템플릿을 추가하여 사용자 친화적인 대시보드와 분석 서비스를 제공하는 것을 목표로 현재 개발 중입니다.

더욱 더 편리한 모니터링 서비스 제공을 위해 고객 여러분의 피드백은 언제나 환영입니다! 더 궁금하시거나, 필요한 기능으로 제안 주실 내용이 있으신 경우 [email protected]로 메일 부탁드립니다.

지난 [월간 와탭]을 아직 못 보셨다면?

• [월간 와탭 5월] 와탭의 액티브스택 & 5월 사용자교육 & 딥러닝 적용기
• [월간 와탭 6월] 새로워진 와탭 테마기능
• [월간 와탭 7월] 더욱 편리하고 쉬워진 URL 모니터링을 만나보세요!
• [월간 와탭 8월] 8월의 와탭 소식을 전해드립니다.
• [월간 와탭 9월] 새로운 차트를 만나보세요.
• [월간 와탭 10월] 와탭 알림설정과 통계 UI 개편!
• [월간 와탭 11월] 서버별 시스템 현황을 한 눈에 모니터링!
• [월간 와탭 12월] 더 편리하고 유연해진 Flex 보드를 이용해보세요.
• [월간 와탭 1월] 애플리케이션 모니터링 프로파일 활용하기