[Grafana] Panel Plugin 만들기

회사에서 고객사에 제품 판매시, Grafana로 대시보드를 만들어서 배포할 일이 생겼다.

그래서 Grafana에서 기본으로 제공되는 차트(Panel)를 수정하거나, 추가로 생성하는 것이 가능한지(React로)에 대한 문의가 들어와 해당 내용을 검토하고, 검증한 내용이다.

 

우선 GPT에게 대시보드를 커스텀하는 방식이 있냐고 물어봤고, 아래와 같은 방식을 추천 받았다.

GPT의 대답

 

각각 장단점도 설명해줬는데, 우리 상황에서는 Grafana Plugin 개발이 적합하다는 판단을 하게 되었다.

하지만, GPT를 무조건 믿을 수 없고, 어떻게 개발 > 배포 > 사용되는지 검증하게 되었다.

 

1. 개발 환경 세팅

 

처음 Plugin을 만드는 설명에 대한 영상과 명령어 들을 살펴보고, 개발 환경 세팅을 시작했다.

https://grafana.com/developers/plugin-tools/

Get started | Grafana Plugin Tools

 

그런데, 처음부터 난관에 봉착. 

$ npx @grafana/create-plugin@latest

 

위 명령어로 Plugin 만드는 모듈을 설치하려고 하자. 에러메세지가 떨어졌다.

Unsupported operating system 'Windows' detected. Please use WSL with create-plugin. For more info visit: 
https://grafana.com/developers/plugin-tools/troubleshooting#i-am-getting-unsupported-operating-system-windows-detected-please-use-wsl-with-create-plugin

 

회사 컴퓨터가 window인데, window를 지원하지 않는다고........ 허허..

에러메세지에 나온 링크로 들어가보니 컴퓨터에 WSL(Windows Subsystem for Linux)을 설치하고, 그 환경에서 해당 모듈을 설치하라고 안내하더라.

 

처음에는 WSL을 설치하고 그 환경에서 해보려고 했는데,

어차피 Grafana에 커스텀한 플러그인을 붙히기 위해서는 로컬에서 grafana 서버를 띄워주어야 했다.

grafana 서버를 띄우기 위해서 Docker에서 이미지를 제공해주길래 Docker를 사용해보기로 결정했다.

 

Docker에 Grafana 서버 및 Create-Plugin 개발환경 서버 세팅

Docker Desktop을 설치한 후, cmd에서 도커 이미지를 두 개 다운받았다.

한 개는 create-plugin을 설치해서 개발할 환경을 위해, 한 개는 grafana 서버를 띄우기 위해.

 

1) create-plugin 서버는 ubuntu 이미지를 다운받아 설치했고, 내부에 접속해서 nodejs 설치를 한 후, create-plugin 모듈 설치 명령어를 다시 실행했더니 성공적으로 설치되었다.

 

2) grafana 서버는 제공되는 이미지를 다운받고 실행했다. 그저 되어버림 (도커가 이렇게 쉬운거였나)

https://hub.docker.com/r/grafana/grafana

https://hub.docker.com/r/grafana/grafana

$ docker pull grafana/grafana
$ docker run -d --name=grafana -p 3000:3000 grafana/grafana

Grafana 서버를 실행해 띄워진 화면

 

** 최초 로그인 아이디 및 비번 : admin/admin  (로그인 시, 새 비밀번호 설정 페이지로 이동됨)

 

우선 각각 설치를 한 후, create-plugin 으로 받은 모듈 코드를 수정하기 위해 컨테이너를 VsCode에 연결을 했다.

 

VSCode에 연결하는 방법은 Extension에서 아래 패키지(Remote Devlopment)를 설치한 후, 

 

VSCode 를 재실행 하면,  Extension이 있는 탭에 아래와 같은 아이콘(Remote Explorer)이 생긴다.

 

선택 후, 실행되어있는 container가 검색되면 버튼을 통해 해당 컨테이너와 연결된다.

파일이 있는 경로를 입력하면 기존 VsCode를 사용하듯이 똑같이 사용할 수 있다!!!

 

 

2. Recharts 라이브러리 적용

 

우선 Recharts 라이브러리를 다운받아, 적용해서 띄워보기로 했다.

$ npm i recharts

 

라이브러리를 다운받은 후, API 중 AreaChart의 예제를 그대로 복사해서 붙혀넣었다. 데이터도 고정값으로.

 

3. 작성한 Plugin 빌드 및 배포

빌드 파일을 만들기

$ npm run build

 

빌드 파일은 /dist 경로에 생성된다.

 

빌드된 파일을 Grafana 서버에 plugin을 추가

Grafana에 Plugin을 추가하기 위해서는

 

1) 빌드된 파일을 Grafana서버의 /var/lib/grafana/plugins 경로에 새로운 폴더를 만들어 이동시킨다.

예를 들면 /var/lib/grafana/plugins/custom-plugin 이라는 경로에 빌드된 파일들이 모두 들어가면 된다. (dist 경로에 생긴 파일)

 

2) 인증되지 않은 plugin 을 사용하기 위해서 Grafana서버의 /etc/grafana/grafana.ini 파일을 수정한다.

# allow_loading_unsigned_plugins = plugin의 id

allow_loading_unsigned_plugins = lily_plugin

# plugin이 여러개인 경우 ',' 기호로 구분자를 작성
# allow_loading_unsigned_plugins = id1, id2

 

>> 이때 plugin의 id는 plugin 소스의 plugin.json에서 설정한 id로 작성한다. (폴더 이름 아님 주의)

 

+ name은 Grafana 페이지에서 보여질 plugin 이름이다.

 

 

3) Grafana 서버를 재기동한다.

 

 

4) Dashboards에서 배포한 Plugin이 있는지 확인하고, 선택할 수 있다.

DashBoard에 panel을 추가 또는 편집하는 화면

 

custom 한 panel

 

위 패널은 Recharts 라이브러리를 적용하여 띄운 화면이다.

 

기본 사용 방법 습득 완료!!