Grafanaプラグイン開発(grafana/toolkit版) - 闘うITエンジニアの覚え書き

今回は docker イメージの grafana を使用する為、docker 及び docker-compose を事前にインストールしておく。

ビルドに必要なので nodejs 12 及び yarn をインストールしておく

mkdir influxdb
mkdir grafana
mkdir grafana-plugins

version: "3" 
services:
  influxdb:
    image: influxdb:latest
    container_name: grafana-sample-influxdb
    hostname: grafana-sample-influxdb
    ports:
      - "8086:8086"
    volumes:
      - ./influxdb/data:/var/lib/influxdb
  grafana:
    image: grafana/grafana:7.0.3-ubuntu
    container_name: grafana-sample
    hostname: grafana-sample
    ports:
      - "3000:3000"
    volumes:
      - ./grafana/dashboards:/etc/grafana/provisioning/dashboards
      - ./grafana/datasources:/etc/grafana/provisioning/datasources
      - ./grafana-plugins:/var/lib/grafana/plugins
    depends_on:
      - influxdb
    environment:
      - GF_SERVER_ROOT_URL=http://localhost:3000
      - GF_SECURITY_ADMIN_PASSWORD=admin

mkdir work && cd work
npx @grafana/toolkit plugin:create my-plugin
? Select plugin type Panel Plugin
✔ Fetching plugin template...
? Plugin name my-plugin
? Organization (used as part of plugin ID) dev
? Description 
? Keywords (separated by comma) 
? Author Daisuke M
? Your URL (i.e. organisation url) 
    
    Your plugin details
    ---
    Name:  my-plugin
    ID:  dev-my-plugin
    Description:  
    Keywords:  []
    Author:  Daisuke M
    Organisation:  dev
    Website:  
    
? Is that ok? Yes
✔ Saving package.json and plugin.json files
✔ Cleaning
    
    Congrats! You have just created Grafana Panel Plugin.
    
    Grafana Panel Plugin tutorial: https://grafana.com/tutorials/build-a-panel-plugin
    Learn more about Grafana Plugins at https://grafana.com/docs/grafana/latest/plugins/developing/development/

いったんそのままビルドしてみる

cd my-plugin
yarn install      # 依存ライブラリのダウンロード
yarn dev          # 開発用にビルド

dist 配下にビルドされているので、Grafanaのプラグインディレクトリ配下にコピーして Grafana を再起動する。

cp -R dist ../../grafana-plugins/my-plugin
docker-compose restart

インストールされているか確認 †

Grafanaのメニューから plugin を選択。

検索ボックスに my- を打ち込んで my-plugin が表示されればOK