#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 › Build a plugin › 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 ✔ 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/ }} #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>)