konchangakita

KPSを一番楽しんでいたブログ 会社の看板を背負いません 転載はご自由にどうぞ

【Nutanix UUIDエクスプローラーを作ってみよう】Flask表示までのまとめ

しばらく時間があいてしまいましたが、UUIDエクスプローラーを作ってみようプロジェクト再開です

ここから、また長いみちのりになりそうです
ここまでは、Jupyter notebook 上で個別に実行しながら、Nutanix REST API 、Elasticsearch と Flask で表示までの動きを確認してきました
ここまでの全体像がどうなっているのかわかりにくかったので
ここで一度、復習がてらPythonの2つのプログラム(app.py, data_broker.py)にまとめて全体を晒しておきます

 ・app.py ・・・ ブラウザ表示、ゲートウェイ的な担当
 ・data_broker.py ・・・実データの入出力担当
  ※関数名を整理して変更しています

【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ
REST APIしてみる
REST API 結果を Elasticsearch へ
Elasticsearch から Flask
・Flask表示までのまとめ イマココ
React で JavaScript へ挑戦 - CDN導入編

ディレクトリ全体像はこんな感じ
python直下のappフォルダいらないな。。。)

.
├── docker-compose.yml
├── elastic
│        └── es-data/この配下にelasticserchのデータがはいる
└── python
       ├── app
       │     └── flaskr
       │            ├── app.py
       │            ├── data_broker.py
       │            ├── static
       │            │     ├── image
       │            │     │     └── Nutanix_X_White.png
       │            │     └── style.css
       │            └── templates
       │                   └── index.html
       └── dockerfile

今回のゴール1.フォームでNutanixクラスタ情報を入力
2.REST API でデータ取得
3.Elasticsearch へデータ入力
4.FlaskでElasticsearch内の最新タイムスタンプの一覧を表示

実装コードたち

docker-compose.yml:Dockerまとめて制御するやつ
python/dockerfile:python環境のdocker
python/app/flaskr/app.py:Flask制御用
python/app/flaskr/data_broker.py:NutanixとElasticsearchデータ入出力python/app/flaskr/templates/index.html:Flaskテンプレート

まとめてこちら(Github)で公開
1.0307配下のdocker-compose -f "docker-compose.yml" up -d --buildを実行
2.pythonコンテナで、

> python app.py

3.ブラウザにて http://localhost:777にアクセス


docker-compose.yml

Elasticsearch と Kibina はそのまま使ってます

dockerfile

Jupyter Lab起動しているのは、検証しながら作っている名残り
最終的には、app.py を実行することになるでしょう

app.py

Webインターフェース
Flask レンダー機能を使って、index.html をテンプレートとして読み込んでいます
index.html で操作されたボタンによって動きを分岐させています


data_broker.py

データ入出力クラス
NutanixAPI:Nutanixクラスタからデータ取得するクラス
- 取得したいデータが増えてくるとここに追加
ElasticAPI:Elasticsearchとデータ入出力クラス
- REST APIで取得したデータ単位で index を作成し入力
- 検索用にエイリアスを作成

index.html

app.py で呼び出される Flask独特のテンプレートです
app.py からの変数を受け取り、ちょっとしたスクリプト(if や for)を使うことができます
取得した VM、Volume Gourpのリストを for文を使って、表示させています


Java Script へつづく

Flaskを使えば ローカルでWebサーバを立ち上げ、 Pythonで取得したデータを簡単に Webページで表示をすることができます

というわけで、
 ・Nutanixクラスタからデータ取得
 ・Elasticsearchでインプット、検索して表示
まではなんとなくできたので、ここからは Java Script を使って、もう少しリッチな Web UI 作る練習していきます