テンプレートテスト

ラベル Chronograf の投稿を表示しています。すべての投稿を表示

2019/06/25

Chronograf で OAuth 認証を行う

ユーザーを登録して認証を行いたいなと思いましたが、現時点では OAuth 認証にしか対応していないようです。  - https://docs.influxdata.com/chronograf/v1.7/administration/managing-security/ - https://community.influxdata.com/t/creating-user-for-login-into-chronograf/1009  ちなみに、Chronograf の UI でユーザー登録を行えますが、これは Chronograf ではなく InfluxDB のユーザー登録のようです。  OAuth 認証に使用するサービスはいろいろ選べるようですが、ここでは例として、GitHub アカウントでの OAuth 認証を設定してみます。  ## GitHub アカウントでの OAuth 認証  やり方は以下に書いてあるので、この通りにやるだけなんですけどね。  - https://docs.influxdata.com/chronograf/v1.7/administration/managing-security/#creating-github-oauth-2-0-applications  ### GitHub の設定  GitHub にログインし、Settings > Developer settings > OAuth Apps > Register a new application を選択します。  以下のように Chronograf の URL などを入力して Register application をクリックします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cyTK6qAks_yT9R6DA1XIk6OdbVBSXkYr1tS0jBRkmCAjNlF8fbWb_4iR75cLvx04YX1IojlJcy5iA3OQsf6QbG3vYT_vFkZlOCafy8p7N2LoaIojBgV1AQ6DB0oB9xVF0th6D8JGwE/s1600/oauth00.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cyTK6qAks_yT9R6DA1XIk6OdbVBSXkYr1tS0jBRkmCAjNlF8fbWb_4iR75cLvx04YX1IojlJcy5iA3OQsf6QbG3vYT_vFkZlOCafy8p7N2LoaIojBgV1AQ6DB0oB9xVF0th6D8JGwE/s320/oauth00.png" width="314" height="320" data-original-width="1047" data-original-height="1066" /></a> すると `Client ID` と `Client Secret` が表示されるので、これを Chronograf 側に設定します。  ### Chronograf の設定  docker-compose を使っているので、`docker-compose.yml` に設定を追加します。  Chronograf の箇所に以下のように環境変数を追加して起動します。  ```yml environment:   - GH_CLIENT_ID=取得した Client ID   - GH_CLIENT_SECRET=取得した Client Secret   - TOKEN_SECRET=Super5uperUdn3verGu355! ```  `TOKEN_SECRET` は任意の文字列で良いそうです。  この状態で Chronograf を起動してアクセスすると以下のような画面が表示され、GitHub アカウントでログインできるようになります。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zKI4rG84ok6DcsbJCX5mAmCK9Q_m0mWczI8rnOx90b1zv9hpWrCehz2iqNRrHcDgIteNkifTqJEAnPKQBPeepCK8JVoO1jh-3MtlNY4aFrX2YkvbCNsfwo-Qrcadlhyphenhyphen2ohzbk9-gbFs/s1600/oauth01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zKI4rG84ok6DcsbJCX5mAmCK9Q_m0mWczI8rnOx90b1zv9hpWrCehz2iqNRrHcDgIteNkifTqJEAnPKQBPeepCK8JVoO1jh-3MtlNY4aFrX2YkvbCNsfwo-Qrcadlhyphenhyphen2ohzbk9-gbFs/s320/oauth01.png" width="299" height="320" data-original-width="665" data-original-height="711" /></a>

Chronograf を使ってみた

Chronograf のインストールについてですが、[InfluxDB のインストール](https://kuttsun.blogspot.com/2019/06/influxdb-docker-compose.html)の時に `docker-compose.yml` に一緒に書いていたので、省略します。  ## 初回起動  Chronograf に初めてアクセスしたら、まずは InfluxDB への接続画面が表示されます。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixH-HTNubCEHFCPOnW2HfVZEKkrF6Uqwzu0ixiUrbdHBt2e1VUEJT66SvTB8e6PqczW7MlaYVL0w7GBb9xJfYLJ3bGBO-ulHHVI70lB04ZfYDRTJh_O-TipCt0nrZlRK4czqxsCWQCpMU/s1600/01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixH-HTNubCEHFCPOnW2HfVZEKkrF6Uqwzu0ixiUrbdHBt2e1VUEJT66SvTB8e6PqczW7MlaYVL0w7GBb9xJfYLJ3bGBO-ulHHVI70lB04ZfYDRTJh_O-TipCt0nrZlRK4czqxsCWQCpMU/s320/01.png" width="320" height="197" data-original-width="827" data-original-height="508" /></a> Get Started をクリックすると、InfluxDB への接続設定画面に移ります。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGkfh1JHJjTOg133UU3cHoGp-1HudfKACY-cXQmaC1Ho_PDPZ-TTWxShkhDby1Bsqa3OVd8G0H_R_ii6hvLlW3VLjGPACPp3ipUe2gKRF3w5iZMkUsINZxxujV16mDxeL76wB8w8oH9Y/s1600/chronograf01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGkfh1JHJjTOg133UU3cHoGp-1HudfKACY-cXQmaC1Ho_PDPZ-TTWxShkhDby1Bsqa3OVd8G0H_R_ii6hvLlW3VLjGPACPp3ipUe2gKRF3w5iZMkUsINZxxujV16mDxeL76wB8w8oH9Y/s320/chronograf01.png" width="320" height="172" data-original-width="817" data-original-height="438" /></a> `Connection Name` は何でも構いません。  また、InfluxDB はデフォルトではユーザー認証を行わないので、`Username` と `Password` は空欄で構いません。  `Connection URL` には InfluxDB の URL を入力すればいいのですが、今回の私の場合、`docker-compose.yml` で `links` で関連付けていたので、Docker のコンテナ名で指定しています。  次に Dashboard の作成画面になりますが、後からでも作成できるので、今回は Skip しました。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Z6nrG76LX2l58_MX1gKSADCa1sGSxqletMuhEWUX-mZjzd49ldsMWj22exEbn2eGwbnVlnuiSUeGNCOZe-1kGiz6Y8zqFeCDgr0zMBPcU6CkV24NiEHufsROlyX14XvYCKEv0DJPZ4U/s1600/02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Z6nrG76LX2l58_MX1gKSADCa1sGSxqletMuhEWUX-mZjzd49ldsMWj22exEbn2eGwbnVlnuiSUeGNCOZe-1kGiz6Y8zqFeCDgr0zMBPcU6CkV24NiEHufsROlyX14XvYCKEv0DJPZ4U/s320/02.png" width="320" height="283" data-original-width="747" data-original-height="661" /></a> 次に Kapacitor の接続設定画面が表示されますが、Kapacitor は使っていないので、これも Skip しました。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihovhPOrxGJCR1zc3mFKd-OJys7fyoqIV33OKBlTGz1KbYn_8nm3dgSS2wJdxHh_we2FOzWUnWXQD9pEZMIolxm3byM1o4_m3C4afqe9BP3S61vJ0V8SDSjYaf3ikiKR-MX9R3223BuAQ/s1600/03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihovhPOrxGJCR1zc3mFKd-OJys7fyoqIV33OKBlTGz1KbYn_8nm3dgSS2wJdxHh_we2FOzWUnWXQD9pEZMIolxm3byM1o4_m3C4afqe9BP3S61vJ0V8SDSjYaf3ikiKR-MX9R3223BuAQ/s320/03.png" width="320" height="173" data-original-width="744" data-original-height="402" /></a> 以上で完了です。   View All Connections をクリックします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2U24k3dYzi-Rj0JrPxkuSYvbGxwnJk6MDOO_bM5K1DpGW33MVwIz_BZPtshAddn2FpEvbPnIgd6XwzuWEtmReMgtZvg5IRDLspUfFWZ7Wuu2Sxaim407a08bwcLhhHH_-WzjInBk1Rc/s1600/04.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2U24k3dYzi-Rj0JrPxkuSYvbGxwnJk6MDOO_bM5K1DpGW33MVwIz_BZPtshAddn2FpEvbPnIgd6XwzuWEtmReMgtZvg5IRDLspUfFWZ7Wuu2Sxaim407a08bwcLhhHH_-WzjInBk1Rc/s320/04.png" width="320" height="202" data-original-width="743" data-original-height="470" /></a> ## とりあえずデータをみたい  サイドバーから Explore を選択し、 Database, Measurements, Fields, をポチポチ選択してくだけでグラフが表示されました。   楽ちん。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif46gaJBwW-_jvwBswR8egSm9_vXZ-RCPwD_PlwHGzEC3134sgf35DyV-ZFfRfmHVyUhc0iEhH21FpGqIGFg1qPzOa4m08bnh3qWVUGjHDMjv8z9J_3dZKTtz-j38vpEIc09rwacQ_mwk/s1600/01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif46gaJBwW-_jvwBswR8egSm9_vXZ-RCPwD_PlwHGzEC3134sgf35DyV-ZFfRfmHVyUhc0iEhH21FpGqIGFg1qPzOa4m08bnh3qWVUGjHDMjv8z9J_3dZKTtz-j38vpEIc09rwacQ_mwk/s320/01.png" width="320" height="168" data-original-width="1221" data-original-height="642" /></a> ## Dashboard の作成  以前の記事で作成したデータを例として、`CPU` と `Network` のグラフを表示するダッシュボードを作成してみます。  まずはサイドバーで Dashboard を選択し、Create Dashboard をクリックします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKsC_W1iiCDUhW2ZYPYTZDnpaUoOZk2TWRRPTuDAfeIA1yhjoXrVc6emOgl-enNU2pzQ05j4fMiQa_zEGZMU1zCE7oaZ8_xQjUnx8qSkuEuaCC24a46zj0Fe7CnaipnmHdG22v07qnqY/s1600/dashboard01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKsC_W1iiCDUhW2ZYPYTZDnpaUoOZk2TWRRPTuDAfeIA1yhjoXrVc6emOgl-enNU2pzQ05j4fMiQa_zEGZMU1zCE7oaZ8_xQjUnx8qSkuEuaCC24a46zj0Fe7CnaipnmHdG22v07qnqY/s320/dashboard01.png" width="320" height="152" data-original-width="1058" data-original-height="504" /></a> 新規にグラフを作成するため、`Add Data` をクリックします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ao3mbtKE5-9paJhoSXLJF5DCH5aTEvd0lYWQthfMNI7Zfb68rsVVO3DbrKHB1XJauj8sE549onRJchJUpMqorviHQuCqvtunvnPmFtx7srdk9Wra3hJdIEZ5RroJaBZcrIkgVrT-D1s/s1600/dashboard02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ao3mbtKE5-9paJhoSXLJF5DCH5aTEvd0lYWQthfMNI7Zfb68rsVVO3DbrKHB1XJauj8sE549onRJchJUpMqorviHQuCqvtunvnPmFtx7srdk9Wra3hJdIEZ5RroJaBZcrIkgVrT-D1s/s320/dashboard02.png" width="301" height="320" data-original-width="481" data-original-height="512" /></a> グラフの作成画面になります。    画面左上でグラフの名前を入力します。   クエリは自分で入力してもいいですが、Database, Measurements, Fields をポチポチ選択していくだけでもできます。   ここでは CPU の全 Fields を選択します。  完了したら画面右上のボタンをクリックします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mkbUWiDkTTpiTTB0eLRpNg4sP2W9HaFrYD4DJWX44yLyrrjmbCa3LMF4Kqpzm0DmDdq5S5Remmr7kz5Yxk32SGvKBdzWMsRhaIwIYRCcsjeGXC0-okYF4HgX9ShAlrqv0SbHB5-J_gk/s1600/dashboard03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mkbUWiDkTTpiTTB0eLRpNg4sP2W9HaFrYD4DJWX44yLyrrjmbCa3LMF4Kqpzm0DmDdq5S5Remmr7kz5Yxk32SGvKBdzWMsRhaIwIYRCcsjeGXC0-okYF4HgX9ShAlrqv0SbHB5-J_gk/s320/dashboard03.png" width="320" height="170" data-original-width="1183" data-original-height="627" /></a> これで１つ目として `CPU` のグラフが出来ました。   次に `Network` のグラフを作成します。 画面上部の `Add a Cell to Dashboard` のボタンをクリックします。（文字はマウスオーバーで表示されます）  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96_gZuANBtGSDjcEgXqYQB_Dkx2RYZv0mUO1niXGLMPDhy57LbES6N320jo_pg90xFbHskHFyCn3EKT9LzyTi7PAV3js9CQ6GGLspEcdZ_oi_BvSJGI0BbFae4x3swBZBVmXnI6p2Edg/s1600/dashboard04.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96_gZuANBtGSDjcEgXqYQB_Dkx2RYZv0mUO1niXGLMPDhy57LbES6N320jo_pg90xFbHskHFyCn3EKT9LzyTi7PAV3js9CQ6GGLspEcdZ_oi_BvSJGI0BbFae4x3swBZBVmXnI6p2Edg/s320/dashboard04.png" width="320" height="141" data-original-width="1173" data-original-height="517" /></a> 先ほどと同様に、グラフの名前を入力し、今回は Network の全 Fields まで選択したら画面右上のボタンをクリックします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyr6rk4sZyQ-IMCHtppdlgdbzqiB15sohqWLaACChkBAqkK38avOJ2sX-laV5x5tepXV0s1SPOLcQrijbIDTwAYiutpxjGuA6DC98AzP00d9fzjWPfjMgTYF7ZuZYMtLTTb5CCgi_96dA/s1600/dashboard05.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyr6rk4sZyQ-IMCHtppdlgdbzqiB15sohqWLaACChkBAqkK38avOJ2sX-laV5x5tepXV0s1SPOLcQrijbIDTwAYiutpxjGuA6DC98AzP00d9fzjWPfjMgTYF7ZuZYMtLTTb5CCgi_96dA/s320/dashboard05.png" width="320" height="195" data-original-width="1178" data-original-height="719" /></a> これで２つ目のグラフができました。  ２つの情報を１画面で見れて便利です。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7R983GBOMqN5TeOIRWa6g5a1_vwq61Bq1nGgEk4YYxw_hpfORX9nLHQxuUzURS5dq27tNIFV6wfDutEt28k7_eu2upS8pNYurP-9_-Em5sQEB5fLH-QR4fcbteIg1BT7MhPIvLC2mVc/s1600/dashboard06.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7R983GBOMqN5TeOIRWa6g5a1_vwq61Bq1nGgEk4YYxw_hpfORX9nLHQxuUzURS5dq27tNIFV6wfDutEt28k7_eu2upS8pNYurP-9_-Em5sQEB5fLH-QR4fcbteIg1BT7MhPIvLC2mVc/s320/dashboard06.png" width="320" height="141" data-original-width="1174" data-original-height="518" /></a> ### テンプレート変数について   クエリ入力画面に `:dashboardTime:` という文字がありましたが、これはテンプレート変数というものです。  `:dashboardTime:` の場合は、画面右上で選択した時間に応じて動的に値が設定されます。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6JFmyR1sVfczo6Wb5rdSIwRt6_YASw6shSfrPQiCiOqdgfurQDC0TtxFXxEmEQnahBKl_UY4T9A4ZV_sMjwj0v6c3k2YwRztjj-axAmBhjUcZKC-IweuwAeWi5WXyn2elN-GtTu28ECI/s1600/dashboard07.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6JFmyR1sVfczo6Wb5rdSIwRt6_YASw6shSfrPQiCiOqdgfurQDC0TtxFXxEmEQnahBKl_UY4T9A4ZV_sMjwj0v6c3k2YwRztjj-axAmBhjUcZKC-IweuwAeWi5WXyn2elN-GtTu28ECI/s320/dashboard07.png" width="320" height="293" data-original-width="444" data-original-height="406" /></a> `Show Templete Values` をクリックすると、現在の設定によってどのようなクエリになるかを確認できます。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOqJJF2hJ1_d5bZeVbzJz-qTm8FjubLVyT-fJdZFZiLUcRbKl2DAFBD_jTnG9GMdAUvq8Tx2a8KZIryRO1KTwmTFsN2aZdedwU597a8S0kTAMV2CxnE_GkZNPCBLiMZgrsnc0ioMxseo/s1600/dashboard08.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOqJJF2hJ1_d5bZeVbzJz-qTm8FjubLVyT-fJdZFZiLUcRbKl2DAFBD_jTnG9GMdAUvq8Tx2a8KZIryRO1KTwmTFsN2aZdedwU597a8S0kTAMV2CxnE_GkZNPCBLiMZgrsnc0ioMxseo/s320/dashboard08.png" width="320" height="65" data-original-width="476" data-original-height="96" /></a> この例では `Past 24h` を選択しているため、現在日時から 24 時間を引いた `now() - 24h` という値がクエリに反映されることになります。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZp3t0_yrztR0E3PfHxLxEchVq_gTGwS_7BUacO64hJKg0IiMoW7IEhHU2RkEnykPzbB_53-7UmQiQcWRXJ83PANEXSisn6iq1YxCEeLfjikOtip5FXParzJ4lQi3pAqpVaDFYFNYbF7s/s1600/dashboard09.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZp3t0_yrztR0E3PfHxLxEchVq_gTGwS_7BUacO64hJKg0IiMoW7IEhHU2RkEnykPzbB_53-7UmQiQcWRXJ83PANEXSisn6iq1YxCEeLfjikOtip5FXParzJ4lQi3pAqpVaDFYFNYbF7s/s320/dashboard09.png" width="320" height="72" data-original-width="480" data-original-height="108" /></a> 自分でクエリを編集することで、テンプレート変数ではなく固定値に変更できます。

2019/06/19

NO IMAGE

InfluxDB を docker-compose で動かしてみる

Chronograf Docker Grafana InfluxDB

## 環境  - Docker for Windows 2.0.0.3 - InfluxDB 1.7.6  ### UI について  InfluxDB 1.3 以降、Web UI はサポートされなくなったようです。   （Docker コンテナを起動してもアクセスできず、何故だろうとちょっとはまってしまった・・・）  その代わり、InfluxDB 専用の可視化ツールとして Chronograf というのが提供されているようです。   他には Grafana などがよく使われるようですね。   ## docker-compose.yml  `docker-compose.yml` のサンプルです。    可視化ツールとして Chronograf と Grafana の両方を設定していますが、普通はどちらかしか使わないと思うので、必要に応じて使わないほうを削除してください。  ```yml version: '3.1' services:   influxdb:     container_name: influxdb     image: influxdb     ports:       - "8086:8086"     volumes:       - influxdb:/var/lib/influxdb    chronograf:     container_name: chronograf     image: chronograf     ports:       - "8888:8888"     links:       - influxdb     volumes:       - chronograf:/var/lib/chronograf    grafana:     container_name: grafana     image: grafana/grafana     links:       - influxdb     ports:       - "3000:3000"     volumes:       - grafana:/var/lib/grafana  volumes:   influxdb:   chronograf:   grafana: ```  InfluxDB へのデータ読み書きや、可視化ツールの使い方については別途記事を書こうと思います。  - [[C#] InfluxDB へのデータ書き込み](https://kuttsun.blogspot.com/2019/06/influxdb-net.html) - [Chronograf を使ってみた](https://kuttsun.blogspot.com/2019/06/chronograf.html)  ## InfluxDB へ接続できない場合  私の場合ですが、`docker-compose.yml` で links で各サービスを関連付けていたので、Chronograf や Grafana で InfluxDB へ接続する場合は、localhost などではなく、Docker のコンテナ名で指定しないと繋がりませんでした。

テンプレートテスト

2019/06/25

Chronograf で OAuth 認証を行う

2019/06/23

Chronograf を使ってみた

2019/06/19

InfluxDB を docker-compose で動かしてみる

Translate

Popular Posts

Labels

Blog Archive