Grafana 에서 graphql을 통해 데이터 받아와서 그래프 그리기

 

 

우리 회사에서 예전부터 유저들의 동향을 그래프로 표시하고 싶다는 욕심이 있긴 했다. 그럴 때마다 Firebase 쓰세요~ 라고 했지만 뭔가 자세한 로그가 보고 싶다고 한다. 그래서 이것저것 알아봤더니 모니터링 프로그램은 Grafana가 제일 좋아 보여서 Grafana를 쓰기로 했다. 하지만 data source는 뭐로 쓸까 고민을 했다. 찾아 보니 prometeus라는 프로그램이랑 grafana와 궁합이 제일 잘 맞아 보였다. 서버에서 생긴 로그들을 다 prometeus로 몰아넣고 grafana에서 가져와 쓰면 되는 듯 했다. 하지만 우리 서버는 예전에 있던 로그들도 사용해야 해서 고민하다가 결국 기존에 사용중인 graphql을 grafana에서 사용해 보기로 했다. 

 

구상과 제작

---

기본적인 구상은 다음과 같이 했다. 여기서 graphql server는 nestjs를 이용해서 구현했다. 

 

 

번호 순서대로 따라가면 된다. 이 구조를 구현하는 것은 그렇게 난항이 없던 것으로 기억한다. 그나마 하나 있자면, grafana에서 graphql 데이터 소스를 연결하는 것이다. 확장 플러그인에다 설명서도 부실하고 http header를 추가할때 살짝 헤메었다. 확장 플러그인은 다음과 같은 방법으로 설치하면 된다.

 

 

먼저 Configuration 에서 plugin을 설치한다. 검색하면 바로 나온다.

 

 

 

설치한 후에 graphql 서버를 연결해 주자. 주소와 http header를 설정하는 법이 살짝 특이했던 것으로 기억한다.

 

주소 맨 뒤에 graphql을 붙여 graphql을 받을 수 있는 주소로 입력한다. 맨 밑에 http 헤서는 우리 서버의 경우는 jwt 토큰을 사용한 인증을 사용하기 때문에 Header에 authorization을 입력하고 value는 Bearer + '토큰' 을 채웠다.

 

그 다음 graph 차트에서 쿼리를 만들어 쏴 준다. 이 때 받는 데이터의 형식은 다음과 같다.

 

const data = [{isostring, data} , {isostring, data} ... ]  

 

배열 데이터 안의 1개의 원소는 (시계열 데이터 기준) 시간을 표시할 isostring data와 실제 값 data가 있다. 나의 경우에는 이러한 데이터를 보내주는 동시에 시간 데이터를 기준으로 오름차순으로 정렬해서 graphql서버에서 grafana에 보내주면 graph data는 거의 바로 볼 수 있었다. 하지만 datapath는 꼭 정해줘야 한다. 나머지는 알아서 해 준다 해도 이것은 확실히 정해주어야 하는 것 같았다.

 

 

다음 쿼리를 보면은 getDailyReportDataForGrafana 안에 데이터 배열이 있는 것을 볼 수 있다. 이 때의 DataPath는 getDailyReportDataForGrafana가 된다. 이렇게 지정하면 grafana에서 알아서 그래프를 그려 준다. 참 영리하지 않을 수가 없다. 아 그리고 시간에 대한 데이터를 처음에는 bigint 형태로 보내려고 했다. 사실 js에서 64비트 정수로 계산하기 때문에 graphql에서도 하는 줄 알았다. 하지만 graphql은 32비트 정수만 지원한다. 왜 지원을 하지 않는지는 다음 깃허브 이슈에서 알아서 토론 중이다. 요약하면, 64비트 정수는 여러 플랫폼에서 오류를 초래할 수 있다는 것 같다. 

https://github.com/graphql/graphql-spec/issues/73

Support of `Long` (64-bit integer) scalar · Issue #73 · graphql/graphql-spec

 

그래서 그냥 isostring으로 넘겨버렸다. 결과는 알아서 시간값을 계산해서 보여준다.

 

 

마지막 사진은 grafana와 graphql을 이용한 데이터를 보여주는 모습이다. 결과물을 보니 Grafana를 사용하는 이유를 알 것 같다. 다음에는 prometeus를 이용하여 데이터를 정리해야겠다.