본문으로 건너뛰기

사용자 정의 대시보드

사용자 정의 대시보드 페이지에서는 사용자가 직접 대시보드를 생성하고, 필요한 위젯을 배치하여 개인화된 모니터링 환경을 구성할 수 있습니다.

1. 페이지 개요​

1.1 기능 설명​

기능설명
대시보드 생성새로운 사용자 정의 대시보드 생성
위젯(Widget) 배치드래그 앤 드롭으로 위젯 배치
레이아웃 편집격자(그리드, Grid) 레이아웃 자유 구성
템플릿 선택기본 템플릿에서 시작
내보내기대시보드를 JSON 파일로 다운로드 (카드 컨텍스트 메뉴)
가져오기JSON 파일에서 대시보드 가져오기 (헤더 버튼)
제목/설명 편집카드 목록에서 직접 수정 (편집 팝업창)
대시보드 공유생성한 대시보드 목록 관리

1.2 접근 경로​

URL: /workgroup/[workgroupId]/customized
메뉴: 대시보드 > 사용자 정의
접근 권한

로그인한 사용자면 조회할 수 있습니다. 생성/편집은 쓰기 권한이 필요합니다.

2. 화면 구성​

2.1 주요 영역​

영역설명
대시보드 목록생성된 사용자 정의 대시보드 목록
격자(그리드, Grid) 영역위젯이 배치되는 그리드 레이아웃
편집 도구위젯 추가, 레이아웃 편집 도구
카운터 에디터위젯(Widget) 추가/설정 패널

2.2 전체 화면​

사용자 정의 대시보드 전체 화면

2.3 UI 구성도​

3. 사용 방법​

3.1 대시보드 생성​

대시보드 생성은 2단계로 진행됩니다.

1단계 — 템플릿 선택:

  1. 목록 페이지에서 "+" 버튼을 클릭합니다.
  2. 기본 템플릿 목록에서 원하는 템플릿을 선택하거나 "빈 대시보드"를 선택합니다.

2단계 — 대시보드 정보 입력: 3. 대시보드 제목을 입력합니다 (필수). 4. 설명을 입력합니다 (선택). 5. "생성" 버튼을 클릭하면 대시보드가 생성되고 자동으로 편집 모드로 진입합니다.

3.2 위젯 추가​

  1. 편집 모드 진입: "편집" 버튼을 클릭합니다.
  2. 위젯 선택: 카운터 에디터에서 추가할 위젯을 선택합니다.
  3. 드래그 앤 드롭: 위젯을 원하는 위치로 드래그합니다.
  4. 크기 조절: 위젯 모서리를 드래그하여 크기를 조절합니다.
  5. 저장: "저장" 버튼을 클릭합니다.
반응형 그리드

그리드는 화면 크기에 따라 자동으로 조정됩니다. Desktop(12컬럼), Tablet(6컬럼), Mobile(1컬럼)을 지원합니다.

3.3 사용 가능한 위젯(Widget)​

사용자 정의 대시보드는 37개 위젯 타입을 지원합니다. 카테고리별로 분류하면 다음과 같습니다.

성능 카운터​

위젯 타입설명
COUNTER (성능 카운터)라인/바/숫자/스택라인/스택바/영역라인 6가지 서브 차트 유형을 선택할 수 있습니다. SERVER 뷰와 GROUP 뷰 전환도 지원합니다.
카운터 위젯 뷰 모드 전환

성능 카운터 위젯은 NUMBER, TIME LINE, STACK BAR 등 6가지 뷰 모드 중 선택할 수 있습니다. 위젯 설정에서 원하는 시각화 형태를 변경하십시오.

활성 서비스​

위젯 타입설명
ACTIVE_SPEED활성 서비스 속도 게이지
ACTIVE_SPEED_BAR활성 서비스 속도 바 차트
ActiveVerticalBar서버별 활성 서비스 수직 바 차트
ActiveSummary활성 서비스 요약 카드
ActiveSummaryV2활성 서비스 요약 v2 (뱃지 스타일)
HorizontalActiveSpeed가로 방향 활성 서비스 속도
ACTIVE_SERVICE_BAR활성 서비스 현황 바 차트

트랜잭션 로그​

위젯 타입설명
XLOG트랜잭션 산점도 — Canvas 기반 고성능 렌더링. 점 클릭 시 프로파일 팝업창, 드래그 시 영역 선택 및 필터링 가능

이벤트 및 알람​

위젯 타입설명
Event이벤트 목록 (헥사곤 뷰/테이블 뷰 전환 가능)
Alert알람 목록 (헥사곤 뷰/테이블 뷰 전환 가능, 알람 레벨 색상 인디케이터 포함)
AlertTable가상 스크롤 알람 데이터 테이블 — Alert과 독립적인 별도 위젯

비교 차트​

위젯 타입설명
TPSDiff오늘/어제 TPS 비교 라인 차트
RecentUserDiff오늘/어제 최근 사용자 수 비교
ServiceCallDiff오늘/어제 서비스 호출 건수 비교
ServiceHourCallDiff시간별 서비스 호출 건수 비교
VisitorHourDiff시간별 방문자 수 비교 바 차트

방문자 통계​

위젯 타입설명
TodayAll오늘 전체 통계
TodayVisitor오늘 방문자 수
TodayVisitorDiff오늘/어제 방문자 수 비교

TopN 트래픽 분석​

위젯 타입설명
TopNIp상위 IP 트래픽 목록
TopNIpUrl상위 IP별 URL 트래픽
TopNUrl상위 URL 트래픽 목록
TopNUserAgent상위 사용자 에이전트 목록
TopNUserAgentIp상위 사용자 에이전트별 IP

오브젝트 시각화​

위젯 타입설명
Hexagon오브젝트 메시 — 전체 오브젝트를 헥사곤 배열로 시각화하는 토폴로지 맵

기타​

위젯 타입설명
Clock현재 시각을 실시간으로 표시하는 시계 위젯
MD_EDITOR마크다운 에디터 — 대시보드에 메모나 안내문 삽입 가능
SERVER_META서버 메타 정보 표시
BANNER배너 이미지 또는 텍스트 표시
REQUESTS요청 현황 (게이지는 이 위젯의 하위 컴포넌트이며 독립 위젯이 아님)
DATA_THROUGH_PUT데이터 처리량 — 네트워크 입출력 처리량 실시간 표시
ServiceQPSBar서비스 QPS 바 차트 — SQL/API 응답시간 분포 바 차트

각 위젯의 상세 읽는 법은 차트 위젯 참조 가이드를 참고하십시오.

3.4 대시보드 카드 컨텍스트 메뉴​

대시보드 카드의 더보기(⋮) 버튼을 클릭하면 다음 액션을 수행할 수 있습니다:

메뉴설명
편집대시보드 제목/설명 수정 팝업창
시작 페이지 설정/해제해당 대시보드를 로그인 후 첫 화면으로 설정합니다
내보내기대시보드 설정을 JSON 파일로 다운로드합니다
삭제대시보드를 삭제합니다 (삭제 권한 필요)
시작 페이지

"시작 페이지"로 설정된 대시보드는 카드에 "시작 페이지" 태그가 표시됩니다. 로그인 후 자동으로 해당 대시보드로 이동합니다.

3.5 내보내기 (Export)​

  1. 대시보드 카드의 더보기(⋮) 버튼 → "내보내기"를 클릭합니다.
  2. 대시보드 설정이 JSON 파일로 다운로드됩니다.
내보내기 용도

내보내기 기능으로 대시보드 구성을 백업하거나 다른 사용자와 공유할 수 있습니다.

3.6 가져오기 (Import)​

  1. 가져오기 버튼 클릭: 목록 헤더의 "가져오기" 버튼을 클릭합니다.
  2. JSON 파일 선택: 내보내기한 JSON 파일을 선택합니다.
  3. 검증 및 생성: FlowKat 포맷 검증 후 대시보드가 생성됩니다.
가져오기 검증

가져오기는 FlowKat 포맷(widget + layouts)을 검증합니다. 잘못된 포맷의 파일은 거부됩니다.

4. 편집 기능​

4.1 레이아웃 편집​

기능설명
드래그 이동위젯을 드래그하여 위치 변경 — 12컬럼 그리드에 스냅됩니다
크기 조절위젯 모서리를 드래그하여 크기 변경 — 위젯마다 최소/최대 크기 제한이 있습니다
위젯 삭제위젯의 삭제 버튼 클릭
전체 삭제모든 위젯 일괄 삭제
그리드 스냅 동작

편집 모드에서 위젯은 12컬럼 그리드에 자동으로 스냅됩니다. 위젯이 겹치지 않도록 자동으로 재배치되며, 설정된 최소/최대 크기 범위 내에서만 조절할 수 있습니다.

4.2 편집 모드 전환​

  • 편집 모드 ON: 위젯 이동/크기 조절 가능
  • 편집 모드 OFF: 위젯 상호작용만 가능 (차트 줌, 클릭 이벤트 등)

5. 데이터 갱신​

5.1 자동 갱신​

  • 갱신 주기: 2초 (WebWorker 기반 고정 주기)
  • 갱신 방법: WebWorker 기반 스케줄링 폴링

5.2 수동 갱신​

페이지 새로고침 또는 대시보드 재선택 시 데이터가 갱신됩니다.

6. 문제 해결​

6.1 자주 발생하는 문제​

증상원인해결 방법
위젯이 이동되지 않음편집 모드 OFF편집 버튼 클릭
레이아웃이 저장되지 않음권한 없음권한 확인
위젯이 표시되지 않음데이터 없음오브젝트 선택 확인
대시보드가 생성되지 않음권한 없음관리자에게 요청
레이아웃 저장

편집 후 반드시 저장 버튼을 클릭해야 변경 사항이 유지됩니다. 취소 버튼을 클릭하면 변경 사항이 삭제됩니다.

7. 관련 문서​