Dashboard 위젯 항목별 기능 가이드
메뉴 경로: Dashboard > 편집 모드 > Widgets
위젯 리스트를 확인할 수 있는 화면입니다. 위젯을 클릭하면 Widget Setting 팝업이 나타납니다.
공통 설정 (Widget Setting Common UI)
모든 위젯에 공통으로 적용되는 설정 화면입니다.
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Widget Type | 위젯 타입을 선택합니다. (Graphs, List, Architecture, Business, Text, Image, Filter) |
| 2 | Widget ID | 위젯 간 관계 생성 및 동작 연계에 사용합니다. 문자, 숫자, _ 사용 가능합니다. |
| 3 | Widget Name | 위젯 이름을 입력합니다. 빈 칸으로 남기면 차트 타입 이름이 적용됩니다. |
| 4 | Text Size | 위젯 제목의 글자 크기를 선택합니다. (12, 15, 20, 25) |
| 5 | Align | 위젯 제목의 정렬을 선택합니다. (왼쪽/중앙/오른쪽) |
| 6 | Color | 위젯 이름 색상을 선택합니다. 추천 색상 및 재설정 기능을 제공합니다. |
| 7 | Hide/Show | 위젯 이름을 숨기거나 표시합니다. |
1. 그래프 (Graphs) 위젯
시간 경과에 따른 데이터를 다양한 차트 형태로 시각화합니다.
1-1. Timeseries Widget
시간 경과에 따른 추이를 보여주는 위젯입니다.
지원 Display Style:
| 스타일 | 이미지 |
|---|---|
| Line |  |
| Area |  |
| Bar |  |
| Stacked Area |  |
| Stacked Bar |  |
Timeseries Widget Setting:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Display Style | 차트 형태를 선택합니다. (Line / Area / Bar / Stacked Area / Stacked Bar) |
| 2 | Show max value at the chart | 차트에 최댓값이 표시됩니다. 지표 개수와 상관없이 1개의 최댓값만 표시됩니다. |
| 3 | Mark by Selected Metrics | Display Style이 Area일 때 표시됩니다. Stat, Target, Aggregation을 설정한 데이터의 Current Value, Percentage Change를 선택합니다. |
| 4 | Thresholds | 차트 데이터의 임계치를 설정합니다. |
| 5 | Decimals | 차트 데이터의 소수점 자리수를 설정합니다. |
1-2. Scatter Widget
시간 경과에 따른 데이터 분포도를 보여주는 위젯입니다.
Scatter Widget Setting:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Set Y Axis | Max Value: Y축 최대값 설정 (Auto Scale / Set Value) Min Value: Y축 최소값 설정 (Default Value=0 / Set Value) |
| 2 | Set Dot Size | 점 크기를 설정합니다. (1~5) |
| 3 | Time Period | $Global Time (지난 5분 / 지난 10분만 반영) Past 5 Minutes / Past 10 Minutes / Select from calendar |
| 4 | Detail Display Mode | 상세 화면 표시 방식을 설정합니다. (Slide / Window Popup) |
Scatter Widget 연계: 차트를 드래그하면 드래그한 영역의 데이터만 확인할 수 있는 Scatter Detail이 출력됩니다.
1-3. Daily Comparison Widget
비교일과 금일 데이터의 24시간 추이를 비교하여 보여주는 차트입니다.
| 스타일 | 이미지 |
|---|---|
| Line |  |
| Bar |  |
Daily Comparison Widget Setting:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Display Style | 차트 형태를 선택합니다. (Line / Bar) |
| 2 | Chart Data | 차트 데이터를 선택합니다. 1개의 시리즈만 설정 가능합니다. |
| 3 | Comparison Date | 비교 날짜를 선택합니다. (Yesterday / Last / This / Compare Date) |
| 4 | Decimals | 차트 데이터의 소수점 자리수를 설정합니다. |
| 5 | Time Period | Past 1 Day로 고정되어 있습니다. |
1-4. Equalizer Widget
지표의 상태별 현재 값을 이퀄라이저 형태로 보여주는 차트입니다.
Equalizer Widget Setting:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Chart Data | 차트 데이터를 선택합니다. 1개의 시리즈만 설정 가능하며, Series Type은 By로 고정됩니다. |
| 2 | Stat setting | 선택한 지표의 데이터를 표시합니다. 데이터 속성이 'Number'인 경우만 표시됩니다. 드래그로 순서 변경, Alias/색상 변경, 목록 숨김이 가능합니다. |
| 3 | Set Y Axis Maximum Value | Axis Auto: 최대값을 자동으로 설정합니다. Axis Fixed: 최대값을 수동으로 설정합니다. |
| 4 | Decimals | 차트 데이터의 소수점 자리수를 설정합니다. |
1-5. Stacked Bar Widget (독립 위젯)
지표들을 누적하여 하나의 바로 보여주는 위젯입니다.
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Chart Data | 차트 데이터를 선택합니다. |
| 2 | Bar Orientation | Horizontal: 막대 방향을 가로로 합니다. Vertical: 막대 방향을 세로로 합니다. |
| 3 | Decimals | 차트 데이터의 소수점 자리수를 설정합니다. |
1-6. Gauge Widget
게이지(원형) 형태로 보여주는 위젯입니다.
Gauge Widget Setting:
Chart Data:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Alias | 게이지 차트의 이름입니다. (Series Type이 BY일 경우 미제공) |
| 2 | Value Range | 게이지 표현 범위입니다. |
| 3 | Thresholds | 임계치를 설정합니다. (Absolute Value: 절대값 / Proportion: 비율) |
| 4 | Add Thresholds | 임계치를 추가합니다. |
Chart Option:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Multi Gauge Setting | 게이지 차트를 추가합니다. |
| 2 | Stat setting | 게이지 차트에 표현할 Stat과 Target을 선택합니다. |
| 3 | Value Range | 게이지 표현 범위입니다. |
| 4 | Thresholds | 임계치를 설정합니다. (Absolute Value / Proportion) |
| 5 | Position Setting | 해당 게이지 차트의 위치를 선택합니다. |
Marker:
| 항목 | 내용 |
|---|---|
| No Mark | Marker를 표시하지 않습니다. |
| Show current values at the center of the chart | Stat의 현재 값을 차트 중앙에 표시합니다. |
2. 목록 (List) 위젯
데이터를 목록 형태로 표시합니다.
2-1. Tree Grid Widget
데이터를 표(트리 그리드) 형태로 보여주는 위젯입니다.
Setting
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Chart Data | Group By : 그룹 기준으로 컬럼을 선택합니다. Order by: Descending / Ascending을 선택합니다. Limit list to: 개수를 선택합니다. 5, 10, 25, 50, 100 |
| 2 | Columns | Chart Data에서 가져온 데이터를 화면에서 정렬할 수 있습니다. |
| 3 | Tree Setting | 리스트의 트리 구조화 기준에 대해 설정합니다. Parent Id : 트리 구조에서 부모로 지정할 ID 컬럼 선택 Child Id : 트리 구조에서 자식으로 지정할 ID 컬럼 선택 |
| 4 | Thresholds | 데이터 조건에 따라 셀 또는 행의 색상을 설정할 수 있습니다. |
2-2. Top List Widget
상위 리스트를 보여주는 위젯입니다.
Setting
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Chart Data | Sort By stat: 정렬 기준이 되는 데이터를 선택합니다. Order by: Descending / Ascending을 선택합니다. Limit list to: 개수를 선택합니다. 5, 10, 25, 50, 100 Display: 차트에 표현되는 이름을 선택합니다. |
3. 아키텍처 (Architecture) 위젯
모니터링 대상의 상태, 연결 관계 등을 시각화합니다.
3-1. Exclusive View Widget
대상을 비교하는 위젯입니다.
Exclusive View Widget Setting:
| 순번 | 항목 | 내용 |
|---|---|---|
| 1 | Chart Target | Target Type: Node, Pod, Container, Application, Database, Host, Network Device, AWS 계열, Kafka 등 선택 Target: 선택한 Type에 해당하는 모니터링 Target을 선택합니다. |
| 2 | Color Style | 색상 스타일을 선택합니다. Custom Color: 데이터 A, B, C, D 색상 선택 |
| 3 | Chart Data | 위젯에서 지표 목록으로 제공할 데이터를 선택합니다. 선택한 Target Type과 일치하는 지표를 선택해야 데이터가 표현됩니다. A, B, C, D 데이터는 삭제 불가합니다. |
3-2. Topology Widget
노드와 엣지를 통해 서비스의 연결 관계와 구조를 한눈에 보여주는 위젯입니다.
주요 설정 항목:
- Display Style: Topology / Point Map 사용 가능
- Node Setting: Target 설정, Node Stat 설정(지표 및 임계치 설정 가능)
- 알람 출력: Node Stat 임계치 설정 시 알람 발생, User Alert 발생 시 User Alert 우선 출력
네트워크 디바이스 모니터링 시: OID 리소스 추가 및 네트워크 디바이스 수집 설정이 필요합니다.
3-3. Alert Widget
실시간 알람 현황을 보여주는 위젯입니다.
사용 방법:
Dashboard > 편집 모드 > Widgets 탭 > Architecture > Alert위젯으로 생성합니다.
- Settings에서 아래 항목을 설정합니다.
| 항목 | 내용 |
|---|---|
| Chart Target > Target Type | Node, Pod, Container, Application, Database, Host, Network Device, AWS 등 선택 |
| Chart Target > Target | Target Type 선택에 따른 Target 선택 |
| Sort by Stat | alertRuleId, alertRuleName, alertRuleType, ruleCriteria, alertLevel 등으로 정렬 |
4. 필터 (Filter) 위젯
다른 위젯과 연계하여 조회 조건을 필터링하는 위젯입니다.
6-1. Horizontal Widget
가로형 필터 위젯입니다.
필터 위젯 연계 방법:
- 필터 위젯을 설정합니다.
- 연계될 위젯의 참조 변수 설정에서 필터 위젯의 변수를 설정합니다.
- 필터 위젯 검색 시 해당 조건으로 조회됩니다.
위젯별 쿼리 매니저 커스텀 지표 지원 여부
| 카테고리 | 위젯 | 커스텀 지표 지원 |
|---|---|---|
| Graphs | Timeseries | ✅ 지원 |
| Graphs | Scatter | ✅ 지원 |
| Graphs | Daily Comparison | ❌ 미지원 |
| Graphs | Equalizer | ✅ 지원 |
| Graphs | Scoreboard | ✅ 지원 |
| Graphs | Pie | ✅ 지원 |
| Graphs | Stacked Bar | ✅ 지원 |
| Graphs | Gauge | ❌ 미지원 |
| Graphs | Action View | ❌ 미지원 |
| Graphs | Heatmap | ❌ 미지원 |
| Architecture | 모든 위젯 | ❌ 미지원 |
| Business | 모든 위젯 | ❌ 미지원 |
참고 문서: