대시보드 만들기

대시보드는 프리셋, 탭 패널, 위젯이 컨테이너와 같은 구조를 이루고 있습니다. 프리셋 안에 여러 개의 탭 패널이, 하나의 탭 패널 안에 여러 개의 위젯이 포함될 수 있습니다.

하나의 대시보드를 구성하려면 순서대로 프리셋, 탭 패널, 위젯이 필요합니다. 또한 위젯은 데이터 위젯과 컨트롤 위젯으로 나뉩니다. 여기서는 로그프레소 엔터프라이즈/스탠다드의 기본 앱인 성능 모니터를 기준으로 설명합니다.

프리셋 및 탭 패널 만들기

사용자는 빈 프리셋에서 시작해 새로 만들거나, 기존 프리셋을 복제하여 수정하거나, 재사용할 수 있습니다.

빈 프리셋에서 시작
  1. 대시보드 도구 모음에서 새 프리셋 > 빈 프리셋을 누릅니다.
  2. 새 프리셋 이름을 입력하세요 대화상자에 새 이름을 입력하고 확인을 누릅니다.
  3. 대시보드 도구 모음에서 다시 불러오기를 누르고, 목록에 새 프리셋이 추가된 것을 확인합니다.
Tip
빈 프리셋을 만들고 성능 모니터 앱의 대시보드를 그대로 따라 만들어보십시오. 대시보드의 사용법을 이해하는데 도움이 됩니다.
복제본에서 시작
  1. 대시보드 도구 모음에서 새 프리셋 > 현재 프리셋을 다른 이름으로 저장을 누릅니다.
  2. 저장할 새 프리셋 이름을 입력하세요 대화상자에 새 이름을 입력하고 확인을 누릅니다.
  3. 대시보드 도구 모음에서 다시 불러오기를 누르고, 목록에 새 프리셋이 추가된 것을 확인합니다..
파일에서 가져오기

확장자가 preset인 파일을 가져와 사용할 수 있습니다. preset 파일은 파일로 내보내기를 참고하십시오.

  1. 대시보드 도구 모음에서 불러오기를 누릅니다.
  2. 프리셋 불러오기를 누르고, 프리셋 파일을 업로드합니다.
  3. 대시보드 도구 모음에서 다시 불러오기를 누르고, 목록에 새 프리셋이 추가된 것을 확인합니다.
탭 패널 설정

필요하다면 탭 패널을 새로 추가합니다.

데이터 위젯 설정

데이터 위젯은 프리셋 탭 패널의 최소 구성 단위로, 일정한 주기마다 쿼리를 실행한 다음, 쿼리 결과를 가공하여 시각화해서 보여줍니다. 여기서는 성능 모니터 앱을 기준으로 설명합니다.

1 단계: 위젯 이름 및 타입 지정

먼저 위젯의 이름과 타입을 지정합니다.

타입 선택에서 고를 수 있는 데이터 위젯

  1. 대시보드 도구 모음에서 새 위젯 추가를 눌러서 위젯 추가 작업을 시작합니다.
  2. 위젯 이름을 지정합니다.
  3. 타입 선택에서 사용할 위젯을 선택합니다. 목록에 있는 항목 중에서 데이터 위젯은 다음과 같습니다: 차트, 그리드, 단어 구름, 경고 상자, 세계 지도, 대한민국 지도, 3D 네트워크 그래프, 3D 지구본, 3D 토폴로지.
2 단계: 데이터 쿼리문 작성

위젯이 가공해서 보여줄 데이터를 추출하는 쿼리문을 작성하고, 새로고침 주기를 지정합니다.

위젯 추가 화면의 데이터소스 및 쿼리문 설정 섹션

데이터소스

하나의 프리셋 탭 패널에 쓰이는 위젯들은 동일한 출처에서 데이터를 가져와 각각 다른 형식으로 시각화하는 경우가 많습니다. 위젯마다 일일이 데이터 쿼리문을 설정하는 것은 번거로운 일입니다. 데이터 추출에 사용되는 쿼리문을 일종의 코드 조각처럼 데이터소스로 등록하고 호출해 사용할 수 있습니다.

Note
데이터소스는 앱에 종속적인 설정입니다. 대시보드를 구성하고자 하는 앱 공간에 추가한 데이터소스만 사용할 수 있습니다.
  1. 데이터소스를 사용하려면 데이터소스 선택을 누릅니다.

  2. 데이터소스 관리에서 새 데이터소스를 추가하거나, 이미 등록된 데이터소스를 선택하고, 선택을 누릅니다.

    아파치 웹 서버 앱의 대시보드에서 볼 수 있는 데이터소스 관리 창

데이터소스를 추가하거나 등록된 데이터소스를 수정하려면 다음과 같이 진행합니다.

  1. 데이터소스를 추가하려면 새 데이터소스를 누릅니다. 등록된 데이터소스를 수정하려면 목록에서 데이터소스를 선택하고 편집을 누릅니다.

  2. 데이터소스 추가에서 이름쿼리문을 입력하고 실행을 누릅니다.

    데이터소스 쿼리문을 실행한 결과

  3. 쿼리문이 가져온 데이터를 확인합니다.

  4. 추가를 눌러서 데이터소스의 추가/수정을 마칩니다.

선택한 데이터소스를 사용하지 않으려면 선택한 데이터소스 오른편에 있는 닫기 버튼를 누릅니다. 위젯에서 사용할 수 있는 데이터소스는 하나입니다. 다른 데이터소스를 선택하면 선택되어 있던 데이터소스를 대체합니다.

선택한 데이터소스를 취소하는 버튼의 위치

쿼리문 및 새로고침 주기

쿼리문 입력 상자에 들어가는 쿼리문은 데이터소스와 목적이 동일합니다.

  1. 쿼리문에 위젯이 주기적으로 실행할 쿼리문을 입력합니다.

  2. 새로고침 주기를 초 단위로 입력합니다(기본값: 5초).

  3. 데이터 조회를 누른 후 데이터 원본 영역에 데이터가 원하는대로 출력되는지 확인합니다. 데이터를 가져올 수 없으면 다음 단계로 진행할 수 없습니다.

    데이터 조회를 눌러서 데이터 원본을 가져온 예

    • 타입 선택에서 3D 토폴로지를 선택한 경우, 데이터 조회가 아니라 쿼리 검증을 누릅니다. 자세한 내용은 3D 토폴로지를 참고하십시오.
Note
데이터소스와 함께 사용하는 경우, 데이터소스에서 처리한 결과를 가공하는 쿼리문은 파이프('|')로 시작해야 하지만, 여기서는 파이프를 사용하지 않고 작성해도 동작합니다.
쿼리문 작성 시 고려사항

데이터소스쿼리문에 입력할 쿼리문은 다음과 같은 사항을 고려해서 작성하십시오.

  • 데이터소스쿼리문은 모두 새로고침 주기에 따라 주기적으로 실행됩니다. 지나치게 많은 데이터를 가져오지 않도록 작성하십시오.

  • 컨트롤 위젯을 사용하려면 탭 패널 안에서 사용할 쿼리 매개변수 이름을 미리 정해두십시오.

  • 데이터의 출처는 크게 보면 테이블, 로거, 스트림이 있습니다. 테이블은 권한이 있는 사용자라면 누구나 접근할 수 있지만 로거나 다른 데이터 스트림에서 데이터를 가져오려면 관리자 권한이 필요합니다.

  • 관리자는 사용자들이 로거, 스트림 등에서 필요한 데이터만 가져와 사용할 수 있도록 프로시저를 구성해 제공할 수 있습니다. 사용자는 proc 명령으로 프로시저를 호출해 사용하면 됩니다.

  • 예약어 $filter$를 이용해 데이터 쿼리문에서 필터링 이벤트 쿼리문을 삽입할 위치를 지정할 수 있습니다. 데이터 쿼리문에 $filter$가 포함되어 있지 않으면 쿼리문의 맨 뒤에 "| $filter$"가 있는 것과 동일하게 동작합니다.

  • 데이터 위젯은 일정 기간 동안 발생한 데이터만 가져오도록 하는 것이 좋습니다. 예를 들어, "table duration=1d sys_cpu_logs"과 같이 작성하면 특정한 기간동안 발생한 데이터만 가져오게 할 수 있습니다.

  • 데이터소스쿼리문쿼리 매개변수를 선언해서 사용할 수 있습니다. 아래에 예시로 든 쿼리문은 from, to를 쿼리 매개변수로 사용합니다. 이렇게 작성하면 날짜 컨트롤, 텍스트 컨트롤 등으로 쿼리 매개변수의 값을 임의로 변경해 데이터 위젯들이 보여주는 정보를 한번에 갱신해서 조회할 수 있습니다.

    set from=nvl($("from"), dateadd(now(), "day", -7))
    | set to=nvl($("to"), string(now(), "yyyyMMddHHmmss"))
    | table from=$("from") to=$("to") araqne_cpu_logs
    
3 단계: 위젯 속성 설정

이제 쿼리문으로 가져온 데이터를 시각화하는데 필요한 속성을 지정합니다. 1단계에서 타입 선택에 지정한 값에 따라 지정할 수 있는 속성이 변경됩니다.

2단계에서 데이터 조회를 눌러 데이터 원본을 가져온 상태에서 진행합니다.

  1. 데이터 위젯의 속성은 기본 속성과 위젯 타입별 속성으로 나뉩니다. 선택한 위젯 타입에 따라 필요한 속성을 선택하거나, 입력합니다. 위젯별 속성은 데이터 위젯을 참고하십시오.
  2. 모든 속성을 선택한 후, 위젯 미리보기 영역에서 미리보기를 누릅니다.
  3. 원하는대로 위젯이 구성되었으면 이 위젯 추가를 눌러서 데이터 위젯 설정을 마칠 수 있습니다. 사용자가 위젯 내에서 클릭이나 드래그를 했을 때 이를 이벤트로 간주해 위젯의 동작을 지정하려면 4단계 이벤트 설정을 한 다음에 이 위젯 추가를 누르십시오.

다음은 성능 모니터 앱에서 24시간 기준 CPU 사용량을 차트 위젯으로 작업한 예시입니다.

누적 영역 그래프로 24시간 기준 CPU 사용량을 작업하는 예시

4 단계: 이벤트 설정(선택사항)

차트, 그리드, 3D 네트워크 그래프, 3D 지구본 위젯에서 사용자가 클릭하거나 드래그하면 이벤트로 간주해 실행할 동작을 지정할 수 있습니다. 이벤트를 구성하는 방법은 이벤트를 참고하십시오.

위젯이벤트액션설명
공통클릭, 드래그쿼리 실행쿼리 > 쿼리에서 이벤트 쿼리문을 실행하고 결과를 보여줍니다.
공통클릭, 드래그필터링위젯 쿼리문에서 $filter$으로 지정된 위치에 필터 쿼리문을 적용합니다.
공통클릭브라우저 실행지정된 필드로부터 URL 값을 인자로 받아 웹 브라우저를 실행합니다.
그리드클릭백그라운드 쿼리 실행쿼리를 실행하고 결과에 따라 모든 위젯을 갱신해 보여줍니다.
  • 위젯 열에서 공통차트, 그리드, 3D 네트워크 그래프, 3D 지구본 위젯을 의미합니다.
  • 차트 위젯 중에서 파이, 2단계 파이, 박스 플롯, 트리맵은 드래그 이벤트를 지원하지 않습니다.
  • 클릭 이벤트의 액션이 쿼리 실행일 때, 이벤트 쿼리문에 $필드이름$, $series$, $xfield$ 등의 예약어를 사용할 수 있습니다.
  • 클릭 이벤트의 액션이 필터링일 때
    • 이벤트 쿼리문에 $xfield$, $from$, $to$ 예약어를 사용할 수 있습니다.
    • 데이터소스쿼리문$filter$ 예약어를 이용해 필터링을 적용할 위치를 지정해야 합니다.
  • 드래그 이벤트는 독립 변수가 시간 타입인 경우에만 사용할 수 있습니다.
    • 이벤트 쿼리문에 $xfield$, $from$, $to$ 예약어를 사용할 수 있습니다.
5 단계: 위젯 레이아웃 지정

이제 탭 패널에 새로 추가한 위젯을 배치합니다. 새 위젯을 추가한 직후 탭 패널에 주황색 핸들이 표시된 위젯이 떠 있는 것을 볼 수 있습니다.

빈 탭 패널 위에 있는 새 위젯

빈 탭 패널에 첫 번째 위젯 배치

핸들에 포인터를 올려놓고 마우스 버튼을 누른 상태에서 위젯을 임의의 위치에 끌어다 놓으면 위젯이 배치될 영역이 파란색으로 표시되고, 마우스 버튼을 놓으면 해당 위치에 위젯이 배치됩니다. 빈 탭 패널에 첫 위젯을 추가하면 아무 위젯도 없으므로 탭 패널 전체 공간에 위젯이 배치됩니다.

첫 번째 위젯을 배치하는 모습

위젯을 더 배치하기

두 번째 위젯을 추가할 때부터는 위젯을 임의의 위치에 끌어다 놓으면 레이아웃 포인터가 나타납니다. 이 포인터에 위젯을 드래그하면 위젯이 배치될 영역이 파란색으로 표시되고, 마우스 버튼을 놓으면 해당 위치에 위젯이 배치됩니다.

다음은 탭 패널을 기준으로 오른쪽 레이아웃 포인터에 위젯을 올려놓았을 때 볼 수 있는 화면입니다.

레이아웃 포인터의 위치

  • 탭 패널의 상하좌우에 표시되는 포인터들은 탭 패널을 기준으로 위젯을 배치할 때 사용됩니다.
  • 위젯의 가운데에 표시되는 포인터들은 해당 위젯의 위치를 기준으로 새 위젯을 배치할 때 사용됩니다.

위 그림과 같은 위치에서 마우스 버튼을 놓으면 다음과 같이 위젯이 배치됩니다.

나란히 정렬된 위젯

데이터 위젯 실습

데이터 위젯을 이해할 수 있도록 다음과 같은 데이터 위젯을 만들어보시기 바랍니다.

성능 모니터에 새로 추가한 탭 패널에 데이터 위젯을 추가한 예

  1. 성능 모니터 앱에 로그 발생 현황 탭 패널을 추가해보십시오.
  2. 로그 발생 현황 탭 패널에 위에 제시된 화면과 같이 3개의 데이터 위젯(그리드 위젯, 누적 세로 막대 차트, 라인 차트)을 추가해보십시오.

위젯을 추가할 때 다음 데이터 쿼리문을 "araqne_query_logs 7d"라는 이름의 데이터소스로 등록해서 사용하십시오.

set from=nvl($("from"), dateadd(now(), "day", -7))
| set to=nvl($("to"), string(now(), "yyyyMMddHHmmss"))
| table from=$("from") to=$("to") araqne_query_logs
| search
    case(
        isnull($("source")),true,
        typeof($("source"))=="string",source==$("source"),
        typeof($("source"))=="object[]",in( source, valueof($("source"),0), valueof($("source"),1), valueof($("source"),2), valueof($("source"),3) )
    )
    and if(isnull($("login_name")),true,login_name==$("login_name"))
    and _time >= $("from",dateadd(now(),"day",-7)) and _time <= $("to",now())
    and if(isnull($("query_string")),true,contains(query_string,$("query_string")))
| eval d=datetrunc(_time,"1d")
| stats count by d, source, login_name
그리드 위젯

다음과 같은 속성을 갖는 그리드 위젯을 추가합니다.

  • 위젯 이름: 쿼리 건수

  • 타입 선택: 그리드

  • 데이터소스 선택: araqne_query_logs 7d

  • 쿼리문

    rename d as _time | fields _time, source, login_name, count
    
  • 새로고침 주기: 60초

  • 경보 무시 주기: 10초

  • 알림음: 없음

  • 클릭하여 알림 닫기: 선택 해제

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

그리드 위젯 추가 화면

누적 세로 막대 차트 위젯

다음과 같은 속성을 갖는 누적 세로 막대 차트 위젯을 추가합니다.

  • 위젯 이름: 사용자별 쿼리 건수

  • 타입 선택: 차트

  • 데이터소스 선택: araqne_query_logs 7d

  • 쿼리문

    rename d as _time | timechart span=1d sum(count) by login_name
    
  • 새로고침 주기: 5초

  • 차트 타입: 누적 세로 막대

  • 독립 변수: _time

  • 종속 변수 자동 추가: 선택

  • 로그 스케일: 선택

  • 백분율로 스택 표시: 해제

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

누적 세로 막대 차트 위젯 추가 화면

라인 차트 위젯

다음과 같은 속성을 갖는 라인 차트 위젯을 추가합니다.

  • 위젯 이름: 소스별 쿼리 건수

  • 타입 선택: 차트

  • 데이터소스 선택: araqne_query_logs 7d

  • 쿼리문

    rename d as _time | timechart span=1d sum(count) by source
    
  • 새로고침 주기: 5초

  • 차트 타입: 라인

  • 독립 변수: _time

  • 종속 변수 자동 추가: 선택

  • 로그 스케일: 선택

  • 빈 값을 연결해서 표시: 선택

  • 끝 점을 부드럽게 연결: 해제

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

라인 위젯 추가 화면

컨트롤 위젯 설정

컨트롤 위젯은 탭 패널 안에 있는 데이터 위젯들이 보여주는 정보를 한번에 갱신해서 조회할 수 있게 하는 도구입니다. 컨트롤 위젯은 필수 항목이 아니므로 설정을 생략해도 됩니다. 컨트롤 위젯과 유사한 기능으로 필터링이 있습니다.

1단계: 컨트롤 이름 및 타입 지정

먼저 위젯의 이름과 타입을 지정합니다.

타입 선택에서 고를 수 있는 컨트롤 위젯

  1. 대시보드 도구 모음에서 새 위젯 추가를 눌러서 위젯 추가 작업을 시작합니다.
  2. 위젯 이름을 지정합니다.
  3. 타입 선택에서 사용할 컨트롤 위젯을 선택합니다. 목록에 있는 항목 중에서 컨트롤 위젯은 다음과 같습니다: 다중 선택 컨트롤, 날짜 선택 컨트롤, 리스트 선택 컨트롤, 텍스트 선택 컨트롤
2단계: 컨트롤 속성 설정

컨트롤 위젯의 속성은 모두 쿼리 매개변수와 쿼리 매개변수를 열거/선택하는 방식에 관한 것입니다.

  1. 1단계에서 지정한 컨트롤 위젯 타입에 따라 쿼리 매개변수와 기타 속성을 설정합니다. 컨트롤 위젯별 속성은 컨트롤 위젯을 참고하십시오.
  2. 이 위젯 추가를 눌러서 컨트롤 위젯 설정을 마칩니다.
3단계: 컨트롤 레이아웃 지정

컨트롤 위젯의 레이아웃 설정 방법은 데이터 위젯의 레이아웃을 지정하는 방식을 참고하십시오.

컨트롤 위젯 실습

이제 데이터 위젯 실습에서 구성한 데이터 위젯을 제어하는 컨트롤 위젯을 만들어볼 차례입니다. 다음과 같이 이미 구성한 탭 패널에 컨트롤 위젯을 만들어보시기 바랍니다.

성능 모니터 앱에서 새로 추가한 탭 패널에 컨트롤 위젯을 추가한 예

다중 선택 컨트롤

다음과 같은 속성을 갖는 다중 선택 컨트롤을 추가합니다.

  • 위젯 이름: 소스 선택

  • 타입 선택: 다중 선택 컨트롤

  • 제목 텍스트: 쿼리 소스

  • 쿼리 매개변수 이름: source 입력

  • 선택 대상 목록

    표시할 이름매개변수 값
    시스템system
    예약된 쿼리scheduled-query
    웹 콘솔webconsole
    자바 클라이언트java-client
    Note
    source는 araqne_query_logs의 필드이며, 이 필드는 java-client, scheduled-query, system, webconsole 네 가지 값 중 하나를 갖습니다.

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

다중 선택 컨트롤 위젯 추가 화면

날짜 선택 컨트롤

다음과 같은 속성을 갖는 날짜 선택 컨트롤을 추가합니다.

  • 위젯 이름: 쿼리 실행 기간
  • 타입 선택: 날짜 선택 컨트롤
  • 범위 사용: 선택
  • 제목 텍스트: 쿼리 실행 기간
  • 시작 변수 이름: from 입력
  • 끝 변수 이름: to 입력

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

날짜 선택 컨트롤 위젯 추가 화면

리스트 선택 컨트롤

다음과 같은 속성을 갖는 목록 선택 컨트롤을 추가합니다.

  • 위젯 이름: 소스 선택

  • 타입 선택: 리스트 선택 컨트롤

  • 제목 텍스트: 쿼리 실행 기간

  • 쿼리 매개변수 이름: login_name 입력

  • 선택 대상 목록

    표시할 이름매개변수 값
    시스템system
    Rootroot
    Membermember

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

리스트 선택 컨트롤 위젯 추가 화면

텍스트 선택 컨트롤

다음과 같은 속성을 갖는 날짜 선택 컨트롤을 추가합니다.

  • 위젯 이름: 쿼리 문자열
  • 타입 선택: 텍스트 선택 컨트롤
  • 제목 텍스트: 쿼리 실행 기간
  • 쿼리 매개변수 이름: query_string 입력

모든 값을 입력한 후에 다음 스크린샷과 비교해보십시오.

텍스트 선택 컨트롤 위젯 추가 화면

동작 확인

이제 컨트롤 위젯이 실제로 동작하는지 확인할 차례입니다.

  • 다중 선택 컨트롤(소스 선택)에서 특정 항목만 선택하고 적용을 누릅니다. 데이터 위젯이 선택된 항목에 따라 쿼리 소스가 변경되는지 확인합니다. 동작하는 것을 확인했으면 해제를 누르고 원래대로 데이터 위젯이 초기화되는지 확인합니다.
  • 날짜 선택 컨트롤(쿼리 실행 기간)에 시작 날짜와 끝 날짜를 임의로 선택해 입력하고 적용을 누릅니다. 데이터 위젯이 가져오는 정보의 기간이 변경되는지 확인합니다. 동작하는 것을 확인했으면 해제를 누르고 원래대로 데이터 위젯이 초기화되는지 확인합니다.
  • 리스트 선택 컨트롤(쿼리 사용자)에서 임의의 항목을 선택하고 적용을 누릅니다. 데이터 위젯이 해당 사용자 계정으로 실행된 쿼리 정보만 보여주는지 확인합니다. 동작하는 것을 확인했으면 해제를 누르고 원래대로 데이터 위젯이 초기화되는지 확인합니다.
  • 텍스트 선택 컨트롤(쿼리 문자열)에 임의의 문자열을 입력하고 적용을 누릅니다. 문자열이 포함된 쿼리의 건수가 검색되는지 확인합니다. 동작하는 것을 확인했으면 해제를 누르고 원래대로 데이터 위젯이 초기화되는지 확인합니다.

이 문서에서 설정한 데이터 위젯과 컨트롤 위젯이 포함된 프리셋 파일을 GitHub에서 내려받을 수 있습니다. 파일에서 프리셋을 가져오면 "로그프레소 모니터링 따라하기"라는 이름의 프리셋이 성능 모니터에 추가됩니다: https://raw.githubusercontent.com/logpresso/dataset/main/preset/dashboard-tutorial.preset.