【Nutanix Advent Calendar 2021】 11日目の記事です！
前回までは、Nutanix REST API からの Elasticsearch 投入までやったみましたので、次は簡単な Web GUI にチャレンジです
【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ
・REST APIしてみる
・REST API 結果を Elasticsearch へ
Flask で Web GUI 作成
今回やってみるイメージ
開発環境のおさらい
==開発環境====
VS Code
Jupyter
Docker
Nutanix
Python
Flask
Elasticsearch
Kibana
=============
Flaskの準備
基本的には前回のコンテナ環境をそのまま使います
こんな感じでコンテナ環境
dockerfile
FROM python:3.9.9-slim RUN apt update -y RUN apt install -y curl RUN pip install -U pip RUN pip install flask RUN pip install jupyterlab RUN pip install elasticsearch #RUN apt install -y netcat WORKDIR /home # execute jpyterlab CMD ["jupyter", "lab", "--ip=0.0.0.0", "--allow-root", "--LabApp.token=''"]
docker-compose
version: '3.7' services: es01: image: elasticsearch:7.14.2 container_name: elasticsearch environment: - discovery.type=single-node ports: - 9200:9200 - 9300:9300 volumes: - ./elastic/es-data:/usr/share/elasticsearch/data:z networks: - elastic kibana: image: kibana:7.14.2 container_name: kibana ports: - 5601:5601 networks: - elastic python: build: context: ./python dockerfile: Dockerfile container_name: python ports: - 1234:8888 - 5678:5000 - 777:777 volumes: - ./python/app:/home/app:z networks: - elastic networks: elastic: driver: bridge
構成ファイル
Flask構築用に flaskr ディレクトリを作って、2つの Pythonファイルで構成
・ app.py
変数を渡しつつレンダリング用の index.html を読み込む
・data_borker.py
データの入出力と整形用クラス・関数
全体のディレクトリ構成はこんな感じになっています
. ├── docker-compose.yml ├── elastic │ └── es-data └── python ├── app │ ├── api-elastic.ipynb │ └── flaskr │ ├── app.py │ ├── data_broker.py │ ├── static │ │ ├── image │ │ └── style.css │ └── templates │ ├── index.html │ └── layout.html └── dockerfile
Flask で Web表示
まずはシンプルに表示だけを試してみます
Flask設定用のapp.py を初期設定とport:777だけ設定してみます
app.py
from flask import Flask from flask import render_template, request import data_broker app = Flask(__name__) @app.route('/') def index(): return render_template('index.html', \ title = 'Welcome to Prism') if __name__ == '__main__': app.run(host="0.0.0.0", port=777, debug=True)
index.hml
{% extends "layout.html" %}
{% block body %}
<div class="container">
<h1>{{title}}</h1>
</div>
{% endblock %}
タイトルだけを表示の状態
（CSSは割愛）
Elasticsearchからデータ取得する
data_borker.py で Elasticsearch のクエリ結果を取得して、Flask を通して Web 表示してみたいと思います
【Elasticsearchから取得の流れ】
１．クラス名でタイムスタンプ一覧を取得
２．タイムスタンプとクラスタ名でクエリしてVMリストを取得
１．タイムスタンプ一覧を取得
app.py
from flask import Flask from flask import render_template, request import data_broker app = Flask(__name__) # set Elasticserch server ELASTIC_SERVER = 'elasticsearch:9200' es = data_broker.Ela(es_server=ELASTIC_SERVER) @app.route('/') def index(): timeslot = es.get_timeslot('POC20') return render_template('index.html', \ title = 'Welcome to Prism', \ timeslot = timeslot ) if __name__ == '__main__': app.run(host="0.0.0.0", port=777, debug=True)
data_broker.py
from elasticsearch import Elasticsearch class Ela(): def __init__(self, es_server): self.es = Elasticsearch(es_server) def get_timeslot(self, cluster_name): es = self.es index_name = 'vm_list' query = { "function_score" : { "query": {"match": { 'status.cluster_reference.name' : cluster_name}} } } aggs = { "group_by_timestamp": {"terms": { "field" : "timestamp", "size" : 1000}} } res = es.search(index=index_name, query=query, aggs=aggs) _timeslot = [slot['key_as_string'] for slot in res['aggregations']['group_by_timestamp']['buckets']] timeslot = sorted(_timeslot, reverse=True) return timeslot
index.html
{% extends "layout.html" %}
{% block body %}
<div class="container">
<h1>{{title}}</h1>
</div>
<div class="container">
{{ timeslot }}
</div>
{% endblock %}
これでずらっとタイムスタンプが取得できました
２．タイムスタンプとクラスタ名でクエリ
取得したタイムスタンプを使って、vmリストを取得するクエリ作ります
app.py
from flask import Flask from flask import render_template, request import data_broker app = Flask(__name__) # set Elasticserch server ELASTIC_SERVER = 'elasticsearch:9200' es = data_broker.Ela(es_server=ELASTIC_SERVER) @app.route('/') def index(): cluster_name = 'POC20' timeslot = es.get_timeslot(cluster_name) info = es.get_eslist('vm_list', timeslot[0], cluster_name) return render_template('index.html', \ title = 'Welcome to Prism', \ timeslot = timeslot, \ cluster_name = cluster_name, \ info = info ) if __name__ == '__main__': app.run(host="0.0.0.0", port=777, debug=True)
data_broker.py の Elaクラスに vmリストを取得する関数を追加
def get_eslist(self, index_name, timestamp, cluster_name): es = self.es query = { "function_score" : { "query": { "bool": { "must": [ {"match": { "timestamp" : timestamp}}, {"match": { "cluster_name" : cluster_name}} ]}} } } res = es.search(index=index_name, query=query, size=512) return [s['_source'] for s in res['hits']['hits'] ]
Flaskで整形する
json 形式の文字列から VM名とuuid だけを抜き出して、表示をすっきりさせてみましょう
Flaskのお作法に従って index.html を加工していってみます
index.html
{% extends "layout.html" %}
{% block body %}
<div class="container">
<h1>{{title}}</h1>
{% if info %}
<div class="output-content">
<h2>Cluster name: {{cluster_name}}</h2>
{% for entity in info %}
<div class="vm-name">{{ entity.spec.name }}</div> <div class="uuid">{{ entity.metadata.uuid }}</div><br clear="all">
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}
これで良い感じに VM名と uuid の対応わかりやすく表示できました
ここからElasticsearch へのクエリを条件を工夫することで、uuid を検索し VM と ボリュームグループや他の関連する情報と紐付けて表示することが出来そうです
その為には、もっと色々と情報を取得して Elasticsearch へ突っ込んでおく必要がありますね
今回はここまで
