• 본 포스팅은 2023년 06월 01일 기준으로 작성되었습니다.

Why Vega?

Kibana에서는 이미 다양한 시각화 기능들을 제공하고 있습니다.

Lens, Aggregation Based, TSVB 등, Elasticsearch의 데이터를 기반으로 각 데이터들의 특성에 맞는 패널들을 생성할 수 있고, 각 패널들을 Dashboard에 배치하는 것도 가능합니다.

그럼에도 Kibana에서는 Custom Visualization 이라는 이름으로 Vega Language를 통해 별도의 시각화 기능을 추가로 제공하고 있습니다.

Kibana가 꾸준히 Visualization 방면의 업데이트를 이어오고는 있으나, 아직 Kibana의 내장 기능으로는 구현 불가능한 그래프들이 존재합니다.
데이터의 흐름을 직관적으로 나타낼 수 있는 San-key 다이어그램이나, Child - Parent 구조를 나타내기 용이한 그래프들이 그 예시입니다.

Kibana 시각화는 Raw 데이터 기반이 아니고, 데이터들의 Aggregation 값을 기반으로 표현하는 것에 최적화되어있습니다. Aggregation 기반으로 시각화를 구성하게 되면 많은 양의 데이터를 간단하게 표현할 수 있고, 필요 이상의 데이터 document를 로드하게 되었을 때 발생하는 문제를 예방할 수 있습니다.
하지만 실시간으로 수집/가공/호출되는 데이터들의 상태를 확인해야 하는 상황에서는 실제 데이터 한 건 한 건을 모두 확인할 수 있도록 시각화해야 합니다. 

위와 같은 몇 가지 이유가 있어 Vega Visualization을 Kibana에서 사용하게 됩니다. Kibana Dashboard의 다른 패널들과 함께 사용하기 편하도록 Kibana에서 제공하는 Vega 관련 추가 기능도 일부 존재하므로, Vega를 사용해 Dashboard로 확인할 수 있는 Insight를 조금 더 강화할 수 있습니다.

What is Vega?

Vega는 JSON 형식의 선언형 시각화 문법입니다. 다양한 시각화 디자인을 위한 기본 Building Block들을 제공하며, 입력되는 이벤트를 기반으로 현재 그래프를 동적으로 수정할 수 있어 시각화 패널과 일정 수준의 상호작용도 가능합니다.

Kibana에서 사용 가능한 Vega Schema는 크게 2가지인데, 일반적인 Vega와 Vega-lite 두 가지를 사용할 수 있습니다.
Vega-Lite의 경우는 Vega의 단순화 버전입니다. Vega 문법을 단순화하여 자주 사용하는 그래프들을 Vega보다 간단하게 생성할 수 있습니다. 다만 Vega만큼 다양한 시각화를 만들기에는 어려움이 있고, Interaction도 보다 제한됩니다.

Vega, Vega-Lite를 통해 생성 가능한 다양한 그래프들과 그 코드는 아래 링크에서 확인할 수 있습니다.

Vega: https://vega.github.io/vega/examples/
Vega-Lite: https://vega.github.io/vega-lite/examples/

Vega in Kibana

어떤 그래프를 구성하느냐에 따라서 Vega를 사용할지 Vega-Lite를 사용할지, 그에 맞춰 어떤 함수를 사용해 데이터를 가공해야 하는지 등에 대한 내용에는 차이가 많아 모든 내용을 설명하기에는 어려움이 있습니다.

따라서 이 포스팅에는 Vega 문법 전체를 설명하기보다는, Kibana에서 Vega를 사용할 때 필수적으로 알아야 하는 것들을 우선으로 설명하도록 하겠습니다. Vega 문법에 대한 자세한 내용은 아래 링크의 공식 문서를 확인하시거나, Examples 내의 코드를 확인해보시면 됩니다.

Vega: https://vega.github.io/vega/docs/
Vega-Lite: https://vega.github.io/vega-lite/docs/

Custom Visualization 편집 메뉴에 진입하면 다음과 같이 기본 그래프가 생성되어 있습니다. 기본 그래프는 모든 인덱스의 시간별 document 수를 라인그래프로 표시한 그래프입니다. 우측의 코드 입력 창을 수정하는 것으로 Vega Visualization을 수정할 수 있습니다.

상단의 Add filter, KQL Query Bar, Time Range 등의 기능은 기타 Visualization들과 동일한 기능입니다. 단, Kibana의 Filter / Timerange 기능을 사용하기 위해서는 필수로 적용해야 하는 옵션이 있습니다. 해당 옵션의 경우에는 아래에서 다시 이야기하도록 하겠습니다.

코드 입력 부분 하단의 Update 버튼을 누르면 수정한 코드가 적용됩니다. Ctrl + Enter 키를 통해 Update할 수도 있습니다. Auto Apply를 켜게 되면 Update 버튼을 누르지 않고도 코드를 편집할 때 마다 자동 수정되는데, 복잡한 연산이 필요한 그래프의 경우 수정될 때마다 Kibana의 성능을 크게 요구할 수 있어 주의가 필요합니다.

Vega와 Vega-Lite 문법을 사용하기 위해서는 Schema 설정을 해야 합니다.

코드 최상단의 "$schema" 부분에 입력하는 URL에 따라서 Vega / Vega-Lite 사용을 지정할 수 있습니다.

Vega: "$schema": "https://vega.github.io/schema/vega/v5.json"
Vega-Lite: "$schema": "https://vega.github.io/schema/vega-lite/v5.json"

다른 Visualization 기능과 다르게, Vega Visualization은 Data View를 사용하지 않습니다.

Elasticsearch에서 Vega로 데이터를 가져오기 위해서는 대상 인덱스에 직접 Query를 진행해야 합니다.

"data":{
    "url":{
        "index": "<인덱스명>",
        "body":{
            <쿼리 내용>
        }
    }
}

위 형식 내에 Query DSL 문법대로 필요한 데이터를 가져오는데 필요한 Query문을 입력하는 방식으로 데이터를 가져옵니다.

앞서 이야기한 Kibana의 Filter를 Vega Visualization에 적용하기 위해서 Kibana에서 추가한 기능이 있습니다.

"%context%": true로 설정하게 되면 해당 패널 / Dashboard의 필터값이 Vega로 Elasticsearch 데이터를 불러올 때 적용됩니다.

"%timefield%": "<타임 필드 이름>"으로 설정하게 되면 설정한 Timerange의 기간만큼의 데이터를 불러올 수 있습니다.