概要

ここでは Grafana のパネルプラグインの開発手順を記載する。

目次

事前準備

docker のインストール

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

Nodejs 及び yarn のインストール

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

環境構築

ディレクトリ作成(dockerイメージへのマウント用)

mkdir influxdb
mkdir grafana
mkdir grafana-plugins

docker-compose.yml の作成

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 を選択。

plugin-menu.png

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

plugin-list.png

オリジナルのプラグイン作成

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

TODO:

添付ファイル: fileplugin-list.png 8件 [詳細] fileplugin-menu.png 6件 [詳細]

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-06-15 (月) 03:00:39 (27d)