Grafanaのデータソースの作成

通常、Webサーバーからの情報を表示するには、データを監視システムにアップロードしてからGrafanaに転送します 。 どうやってそれを直接行うか、そしてゴールに向かう途中のいくつかのニュアンスについて-カットの下で。

免責事項

著者がGrafanaがインターフェースに使用する時代遅れのAngularJSの研究を掘り下げたくないこと、およびプラグイン開発ドキュメントがほぼ完全に欠如しているため、この記事には不正確な記述、ピーナッツの痕跡、その他のナッツが含まれる場合があります。

準備する

Grafanaのプラグインの開発はJavaScript（es6）またはTypeScriptで行われ、 Node.jsを何らかのビルダーと組み合わせて使用​​することを意味します。 うなり声 。





まず最初に、 package.json 、 gruntfile.jsおよびその他のファイルを追加するプロジェクトフォルダーを作成します。







package.jsonの作成後、プロジェクトフォルダーで実行することにより、開発とコレクターに必要なすべての依存関係をインストールできます。

 npm install --only=dev npm install grunt -g
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、約50MBの補助ファイルを含むnode_modulesフォルダーが作成され、配布フォルダーをdistフォルダーにビルドするためにgrunt



コマンドが使用可能になります。



次に、必要な構造を持つsrcフォルダーを作成します。 plugin.jsonファイルで 、プロジェクトid



を--datasource



として設定し、 metrics



、 alerting



、 annotations



変数の値を設定することにより、提供する情報を設定します。 plugin.jsonの詳細については、 こちらを ご覧 ください 。





プラグインは、データソースまたは新しいタイプのパネルだけでなく、ソリューションのグループも実装できることに注意してください。 この場合、 plugin.jsonは優れた構造になります。

html要素

/ src / partials フォルダーに、ソースへの接続時に表示されるブロックを含むconfig.htmlファイルを追加します 。 通常、httpの標準で十分です。





一部のプラグインでは、メトリックの設定を含むquery.options.htmlを見つけることができます。 バージョン4.5以降、これらの設定はplugin.jsonから読み取られます 。



次のファイル-query.editor.htmlは、メトリック（インターフェースの行）の設定方法を実装します。 通常、入力フィールドだけでなく、ドロップダウンリストを使用します。 Angularの場合、 ctrl.target.myprop



変数に関連付けられたコンボボックスは次のようになります

 <select ng-model="ctrl.target.myprop" ng-options="v.value as v.name for v in ctrl.myprops"> </select>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ctrl.myprops



含まれる値のリストを非同期にロードする必要がある場合は、 コントローラーを作成する必要があります。 Grafanaには、適切な実装を持つコンポーネントが既にあります。

 <gf-form-dropdown model="ctrl.target.myprop" class = "max-width-12" lookup-text="true" allow-custom = "false" get-options = "ctrl.getMyProps()" on-change = "ctrl.panelCtrl.refresh()" > </gf-form-dropdown>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ctrl



は、現在のメトリックに関連付けられたquery_ctrl.jsによって実装されるクラスのオブジェクトです。

ctrl.target



には、リクエストでソースに送信されるメトリックプロパティが含まれます。

ctrl.panelCtrl.refresh()



により、パネルは再びデータを要求します。

lookup-text



は、ドロップダウンリストのフィールドでツールチップを使用できるかどうかを設定します。

ドロップダウンリストからではなくアイテムを選択allow-custom



セット。

ドロップダウンリスト項目を取得するget-options



メソッド。 この場合、値またはプロミスとして返されるメソッドの結果は、 {text: "", value: ""}



という形式の要素の配列でなければなりません。

model



、 get-options



およびon-change



は、元のng-model



、 ng-options



およびng-change



とは異なることに注意してください。



gf-form-dropdown



加えて、 metric-segment-model



もありmetric-segment-model



。 ここで使用方法を見ることができます 。 コンポーネントのドキュメントはありません。そのため、それらのリストと機能は、 ソースを調べることによってのみ見つけることができます。





私はそれに注意する：



1.クラスgf-form--grow



の最後の要素-growは、行の未割り当て部分を背景で塗りつぶすために必要です。



2. ng-if = "ctrl.panel.type == 'graph'"



条件付きで表示することにより、パネルのタイプに応じてメトリックラインに要素を追加/非表示にできます。

コード記述

module.jsファイルとquery_ctrl.jsファイルは非常にシンプルで、他のデータソースとの類推によって記述できます。 シンプルなJSON メインロジックはdatasource.jsにあります 。



このモジュールで説明するクラスは、少なくとも2つのメソッドtestDatasource()



およびquery(options)



実装する必要がありquery(options)



。 1つ目は登録中にソースとの接続をテストするために使用され（「保存してテスト」ボタン）、2つ目はパネルがデータを要求するたびに呼び出されます。 これについて詳しく説明します。





上記の例から、すべてのメトリックのデータが同時に要求されていることが簡単にわかります。 主なフィールドはrange



であり、これには情報が必要な期間が含まれますquery_ctrl



はメトリックのリストです。各メトリックはquery_ctrl



定義されたクラスオブジェクトのtarget



プロパティに対応します。



targets



のリストは、「非表示」メトリックの結果を要求しないように、たとえば未定義のパラメーターを使用して明らかに「間違った」メトリックを削除するために、 hide



プロパティでフィルターtargets



必要があります。 次に、受信したリストに従って、各メトリックのデータが要求され、受信したメトリックはGrafanaでサポートされている形式に変換する必要があります。



1つのメトリックの場合、答えはいくつかの結果、たとえば いくつかのグラフ。 それらを共通の配列に追加すると、最終的なセットに表示され、このメトリックまたはこの結果が取得されたメトリックにとって重要ではなくなります。



query



によって返されるデータ形式はパネルのタイプによって異なるため、グラフにデータが要求された場合、結果を{target: -, datapoints: --[, ]}



に変換する必要があります。 {columns: --{text: -, type: --}, rows: }







Simple Jsonでは、形式の選択は追加のメトリック属性によって解決されることが提案されていますが、これはあまり良くありません。







this.panel.type



に基づくtype



属性をtarget



オブジェクトにthis.panel.type



し、それに基づいて結果を変換することにより、これを自動的に行うことができるためです。 パネルタイプがoptions



渡されないのは少し奇妙です。



query



メソッドの結果は、 {data: -}



を返すpromiseである必要があります。



データを要求するには、 backendSrv.datasourceRequest(options)



メソッドを使用しbackendSrv.datasourceRequest(options)



。このメソッドは、選択したデータソースのタイプに応じて、データをGrafanaにリダイレクトするか、ブラウザーで直接要求を実行します。







ブラウザーの場合、ポーリングされたWebサーバーはCORSをサポートする必要があります。



すべてのメトリックの結果を取得するには、ソースに対して複数のクエリを実行する必要がある場合、 Promise.all



を使用できますPromise.all

 var requests = this.targets.map((target) => ... ); var scope = requests.map((req) => this.backendSrv.datasourceRequest(req)); return Promise.all(scope).then(function (results) { // results   data,    ... return Promise.resolve({data}); })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データソースが変数をサポートするには、 metricFindQuery(options)



メソッドを実装する必要があります。このメソッドは、 {text: "", value: ""}



の形式の要素を持つ配列（おそらくpromiseを介して）を返します。 さらに、 query



options.targets



をoptions.targets



し、変数を置換できるすべてのプロパティのこの配列の各要素について、変換を実行する必要があります。

 target.myprop = this.templateSrv.replace(target.myprop, options.scopedVars, 'regex');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注釈には、 annotationQuery(options)



実装が必要です。

インストールと公開

インストールするには、 プラグインをWindowsの場合は％GRAFANA_PATH％/ data / pluginsフォルダーに、または他のシステムの場合は/ var / lib / grafana / pluginsにコピーして、 Grafanaを再起動します 。



使用可能なプラグインのリストにプラグインを追加する場合は、プラグインリポジトリにプルリクエストを行うか、フォーラムを通じて開発者に連絡する必要があります 。

参照資料

• 開発者向けの簡単な公式ドキュメント
• 公式フォーラム、開発者向けセクション
• 他のデータソースのソース
  
  
  
  
  • Simple Jsonは最も簡単に学ぶことができます
  • IBM APMはもう少し複雑です
  • GrafanaのZabbixは、最も機能的で洗練されたベンチマークです。
  • PRTGは、Zabbixのプラグインの単純化された類似物です。
  • Httpsqlは、データベースクエリの作成者データソースです。