Customize the openstack horizon as you like

openstack Open source software to build public and private clouds.

OpenStack Advent Calendar 2014 entry #13

HorizonでOpenStackじゃない何かをコントロールしてみる

2014.12.13

NTTデータ先端技術株式会社

志田 隆弘

モチベーション

• Hinemos WorldというイベントのためのデモでHorizonからHinemosを操作するデモをしてみた – 折角作ったのでノウハウを少しは展開しよう

• OpenStackのコンポーネントは個々で結構作りこまれている – 独立したコンポーネントとしても利用できることをアピールしてみよう

今回のネタ元

• Tutorial: Building a Dashboard using Horizon

– http://docs.openstack.org/developer/horizon/topics/tutorial.html

• ここに 99% 書いてあります

–このチュートリアルを簡単に説明します

デフォルトのHorizon

devstack! そして

いつもの画面ですね (…微妙に綺麗になってる)

用語

• 多分こんな感じで定義されています

Dashboard Group

Panel

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

全部無効にすると流石にエラーになるので注意

Dashboardの非表示

ProjectとAdminが無くなりました

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)

最小限のDashboard

空のパネルになります

openstack_dashboard/enabled/ 以下にDashboard有効のためのファイルを置く DASHBOARD = 'mydashboard‘ DISABLED = False ADD_INSTALLED_APPS = [ 'openstack_dashboard.dashboards.mydashboard', ]

何かのデータを表示してみる

• 今回はこんな構成で

1. TwitterのツイートをStream APIでせっせと

あつめて

2. Elasticsearchに全部投入

3. Horizonでツイートを表示

出来たやつ

ほぼスパムツイート

と、すいません

• ここから、UIを構成する他の以下の方法について解説する予定でした

– Horizonで画面をどのように構成するか

–表示するためのデータをどのように取ってくるか

–設定値の書き方と取ってくる方法

– Horizonで用意されているコンポーネント群

• ちょっと時間切れで説明しきれません

まとめ

• 解説しきれませんでしたが、意外とHorizonのカスタマイズは簡単です

• 標準的なトップメニュー、左メニュー、メインコンテンツな構成がすぐに作れます

• Keystoneとの連動も組み込まれているので、ユーザ管理のUI等々は検討する必要なし

• なので、普通のWeb管理ツールを作るにはHorizonはいい選択肢になると思います