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

追加された行はこの色です。
削除された行はこの色です。
Grafanaプラグイン開発(grafana/toolkit版) へ行く。
#author("2024-01-09T04:04:31+09:00","","")
#author("2024-01-09T04:04:54+09:00","","")
#mynavi(Grafana);
#setlinebreak(on);

* 概要 [#ga94c522]
#html(<div class="pl10">)
ここでは Grafana のパネルプラグインの開発手順を記載する。

&color(red){''(注意)''};
&color(red){本ページの内容は grafana/toolkit を使用した場合の覚書となっており、内容が古い。};
&color(red){最新の create-plugin を使用する場合は [[Grafanaパネルプラグイン開発(create-plugin版)]] を参照。};
&color(red){最新の create-plugin を使用する場合は}; [[Grafanaパネルプラグイン開発(create-plugin版)]] &color(red){を参照。};

#html(</div>)

* 目次 [#s4a88cd0]
#contents
- 関連
-- [[Grafana]]
-- [[Grafanaバックエンドデータソースプラグイン開発]]
- 参考
-- [[Developers &#8250; Build a plugin &#8250; Legacy plugins:https://grafana.com/docs/grafana/latest/developers/plugins/legacy/]]
-- [[Build a panel plugin:https://grafana.com/tutorials/build-a-panel-plugin/]]
-- [[Build a panel plugin with D3.js:https://grafana.com/tutorials/build-a-panel-plugin-with-d3/]]
-- [[Build a data source plugin:https://grafana.com/tutorials/build-a-data-source-plugin/]]
-- [[Build a data source backend plugin:https://grafana.com/tutorials/build-a-data-source-backend-plugin/]]

* 事前準備 [#m14dec69]
#html(<div class="pl10">)

** docker のインストール [#wbcb3da4]
#html(<div class="pl10">)
今回は docker イメージの grafana を使用する為、docker 及び docker-compose を事前にインストールしておく。
#html(</div>)

** Nodejs 及び yarn のインストール [#uab5c344]
#html(<div class="pl10">)
ビルドに必要なので nodejs 12 及び yarn をインストールしておく
#html(</div>)

#html(</div>)

* 環境構築 [#y6c463e6]

#html(<div class="pl10">)

** ディレクトリ作成（dockerイメージへのマウント用） [#fc4c857d]
#html(<div class="pl10">)

#myterm2(){{
mkdir influxdb
mkdir grafana
mkdir grafana-plugins
}}

#html(</div>)

** docker-compose.yml の作成 [#u0232ce3]
#html(<div class="pl10">)

#mycode2(){{
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
}}
#html(</div>)

#html(</div>)

* 空のプラグインを作成してみる [#nb85aa86]
#html(<div class="pl10">)

** 雛形の作成 [#hbaf9e00]
#html(<div class="pl10">)

#myterm2(){{
mkdir work && cd work
npx @grafana/toolkit plugin:create my-plugin
? Select plugin type Panel Plugin
&#10004; 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
&#10004; Saving package.json and plugin.json files
&#10004; 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/
}}
#html(</div>)


** ビルド [#vb3e6000]
#html(<div class="pl10">)

いったんそのままビルドしてみる
#myterm2(){{
cd my-plugin
yarn install      # 依存ライブラリのダウンロード
yarn dev          # 開発用にビルド
}}

dist 配下にビルドされているので、Grafanaのプラグインディレクトリ配下にコピーして Grafana を再起動する。
#myterm2(){{
cp -R dist ../../grafana-plugins/my-plugin
docker-compose restart
}}


*** インストールされているか確認 [#k9f3d675]
#html(<div>)

#html(<div style="display: inline-block;">)
Grafanaのメニューから plugin を選択。
#ref(plugin-menu.png,nolink)
#html(</div>)

#html(<div style="display: inline-block; margin-left: 40px; vertical-align: top;">)
検索ボックスに my- を打ち込んで my-plugin が表示されればOK
#ref(plugin-list.png,nolink)
#html(</div>)

#html(</div>)



#html(</div>)


#html(</div>)


* オリジナルのプラグイン作成 [#fc8cb1fe]
#html(<div class="pl10">)

上記まででプラグインの作成方法の流れが追えたので、ここからはプラグインを作成する際のお作法などを確認しながら、実際に動くプラグインを作成していく。

#TODO


#html(</div>)