How to customize the OpenStack Horizon

1. openstack Open source software to build public and private clouds.
OpenStack Advent Calendar 2014 entry #13
HorizonでOpenStackじゃない何かをコ ントロールしてみる
2014.12.13
NTTデータ先端技術株式会社
志田 隆弘

2. モチベーション
•Hinemos Worldというイベントのためのデモ でHorizonからHinemosを操作するデモをし てみた
–折角作ったのでノウハウを少しは展開しよう
•OpenStackのコンポーネントは個々で結構作 りこまれている
–独立したコンポーネントとしても利用できること をアピールしてみよう

3. 今回のネタ元
•Tutorial: Building a Dashboard using Horizon
–http://docs.openstack.org/developer/horizon/topics/tutorial.html
•ここに 99% 書いてあります
–このチュートリアルを簡単に説明します

4. デフォルトのHorizon
devstack! そして
いつもの画面ですね
(…微妙に綺麗になってる)

5. 用語
•多分こんな感じで定義されています
Dashboard
Group
Panel

6. Dashboardの有効/無効化
•openstack_dashboard/enabled/
–Dashboardの有効無効はここで管理しています
–何も考えずにdevstackすると以下が有効になっています
•_10_project : ユーザの持つリソースの情報
•_20_admin : ハイパーバイザとか、ホストとかの情報
•_25_identity : Keystoneのプロジェクトとユーザ
•_30_settings : ユーザの言語設定とか
–おもむろに、_10_project、_20_admin を無効にします
The name of the dashboard to be added to HORIZON['dashboards']. Required.
DASHBOARD = 'project'
# If set to True, this dashboard will be set as the default dashboard.
DEFAULT = True
# A dictionary of exception classes to be added to HORIZON['exceptions'].
ADD_EXCEPTIONS = {}
# A list of applications to be added to INSTALLED_APPS.
ADD_INSTALLED_APPS = ['openstack_dashboard.dashboards.project']
DISABLED = True
全部無効にすると流石に エラーになるので注意

7. Dashboardの非表示
ProjectとAdminが無くな りました

8. Dashboardを追加する
•Horizonのテストケースから雛形を追加
–これで、mydashboard以下にコードが生成される
•生成された雛形を微修正
$ mkdir openstack_dashboard/dashboards/mydashboard
$ ./run_tests.sh -m startdash mydashboard --target openstack_dashboard/dashboards/mydashboard
$ mkdir openstack_dashboard/dashboards/mydashboard/mypanel
$ ./run_tests.sh -m startpanel mypanel --dashboard=openstack_dashboard.dashboards.mydashboard -- target=openstack_dashboard/dashboards/mydashboard/mypanel
class Mydashboard(horizon.Dashboard): name = _("Mydashboard") slug = "mydashboard" panels = () default_panel = '' horizon.register(Mydashboard)
class Mydashboard(horizon.Dashboard):
name = _("Mydashboard")
slug = "mydashboard"
panels = (‘mypanel')
default_panel = ‘mypanel'
horizon.register(Mydashboard)

9. 最小限のDashboard
空のパネルになります
openstack_dashboard/enabled/ 以下にDashboard有効のためのファイルを置く DASHBOARD = 'mydashboard‘ DISABLED = False ADD_INSTALLED_APPS = [ 'openstack_dashboard.dashboards.mydashboard', ]

10. 何かのデータを表示してみる
•今回はこんな構成で
1. Twitterのツイートを Stream APIでせっせと あつめて
2. Elasticsearch に全部投入
3. Horizonでツ イートを表示

11. 出来たやつ
ほぼスパムツイート

12. と、すいません
•ここから、UIを構成する他の以下の方法に ついて解説する予定でした
–Horizonで画面をどのように構成するか
–表示するためのデータをどのように取ってく るか
–設定値の書き方と取ってくる方法
–Horizonで用意されているコンポーネント群
•ちょっと時間切れで説明しきれません

13. まとめ
•解説しきれませんでしたが、意外と Horizonのカスタマイズは簡単です
•標準的なトップメニュー、左メニュー、メ インコンテンツな構成がすぐに作れます
•Keystoneとの連動も組み込まれているの で、ユーザ管理のUI等々は検討する必要な し
•なので、普通のWeb管理ツールを作るには Horizonはいい選択肢になると思います