CloudStack4.2.0から管理サーバのWeb UIに対してプラグインが作れる
ようになった。
リリースノートにはUIプラグインの作り方については
「詳しくはDeveloper Guideを読んでね」と書いてあった。
しかしDeveloper Guideが4.2.0リリースされて1ヶ月以上経つのに
ちっともでてこない..
なので、自分でちょっと管理サーバのWebコンテンツ内を
覗いてみることにした。
管理サーバのWebコンテンツディレクトリ内には
/usr/share/cloudstack-management/webapps
が管理サーバWeb UIのコンテンツが入っている。
更に下の
/usr/share/cloudstack-management/webapps/client/plugins
というディレクトリをみてみると、
plugins.jsとtestPluginディレクトリがおいてあった。
plugins.js上のcloudstack.pluginsへ
プラグイン名を入れれば、
その名前のディレクトリ上のJavaScriptを読んでくれそうだな
と直感的にわかれよ、ということらしい。
むかしCloudStackのAPIを呼び出すURL文字列を作成する
AppEngineアプリ
CloudStack API Creator
https://cloudstacktools.appspot.com/
CloudStack API Creatorサイト作成に関する投稿
http://fight-tsk.blogspot.jp/2013/03/cloudstack-apiurl.html
を作ったのでこれをなんちゃってプラグインにしてみることにした。
まずプラグインIDを決める（apiUrlCreatorにした）。
そして、
/usr/share/cloudstack-management/webapps/client/plugins/plugins.js
を
(function($, cloudStack) {
cloudStack.plugins = [
'testPlugin',
'apiUrlCreator'
];
}(jQuery, cloudStack));
と書き換え、
testPluginディレクトリを丸々
/usr/share/cloudstack-management/webapps/client/plugins/
ディレクトリ下にプラグインIDとおなじディレクトをつくってコピーして
/usr/share/cloudstack-management/webapps/client/plugins/apiUrlCreator
/usr/share/cloudstack-management/webapps/client/plugins/apiUrlCreator/apiUrlCreator.js （testPlugin.jsをリネーム）
/usr/share/cloudstack-management/webapps/client/plugins/apiUrlCreator/apiUrlCreator.css （testPlugin.cssをリネーム）
/usr/share/cloudstack-management/webapps/client/plugins/apiUrlCreator/config.js
/usr/share/cloudstack-management/webapps/client/plugins/apiUrlCreator/icon.png
を作成し（念のためroot.rootで同じパーミッションにしておき）、
cofig.js は以下のソースに書き換え、
(function (cloudStack) {
cloudStack.plugins.apiUrlCreator.config = {
title: 'API URL String creator Plugin',
desc: 'To create URL string with CloudStack API',
externalLink: 'http://fight-tsk.blogspot.jp/',
authorName: 'Hara Hara Development',
authorEmail: 'SammoHungGambou@gmail.com'
};
}(cloudStack));
apiUrlCreator.jsも以下のソースに書き換え、
(function (cloudStack) {
cloudStack.plugins.apiUrlCreator = function(plugin) {
plugin.ui.addSection({
id: 'apiUrlCreator',
title: 'API URL Creator',
preFilter: function(args) {
return true;//isAdmin();
}, show: function() {
return $('<div>').css('width', '100%').css('height', '700px').css('overflow', 'auto').html('<iframe height="98%" width="100%" src="https://cloudstacktools.appspot.com/" />');
}
});
};
}(cloudStack));
最後に
service cloudstack-management restartをかけて
管理サーバWeb UIを使って一般ユーザ(ロールがuser)でログインすると..
左下に「プラグイン」と「API URL Creator」ってのができた。
以下の画面スナップは「プラグイン」を押下したところ。
現時点で有効なプラグイン情報が表示されていて、
今回作成した「API URL String creator plugin」も表示されている。
「API URL String Creator Plugin」を選択すると、
config.jsに書いた詳細情報がでてくる。
次に左側のメニューの一番下の「API URL Creator」の方をクリックすると
以下のスナップのようにGoogle App Engine上のWebサイトが表示される。
高さがあふれたのはご愛嬌..
apiUrlCreator.jsのpreFilterで常にtrueを返すようにすれば
一般ユーザも見えるプラグインになる。
＜プラグインID＞.js というファイルのshow部分
（divタグにhtmlを埋め込むサンプルコード部分）を、
うまく書き換えてやれば複雑なプログラムも組むことができる。
DOM対象となる実際のHTMLファイルのdivタグにidが振られていないので
jQueryの呼び出しをそのまま使った。
＃一つ上にid=shadowというdivタグがあって
＃こっちを操作してやろうとしたらうまく行かなかった。
UIプラグイン作成の鍵はCloudStack側が用意している
plugin.ui.addSessionというJavaScript関数。
この使い方のドキュメントがあればもっといろいろできるのに..
今回プラグイン関連ファイルをさわっているうちに
iframeが使えるがわかったので
前に作ったApp Engineサイトを流用したが、
同じコンテンツ内にServlet/JSPなりを書いてアプリを組む
なんてことも可能だろう。
CloudStackはAPIがREST通信なので同じサーバでなくてももちろん可能だが、
どうせならログイン中のユーザIDの権限でAPI操作できるような
JavaScriptを組みたい。
にしても..最近はJavaScriptを直接書く技術が必要なケースが増えてきた。
jQueryとかいちいちGoogleって書いていると生産性が悪いし..
企業内でCloudStackを使用する場合、
足りないのは利用などの申請系のワークフローと
課金機能なんだけど..
..誰か作ってくれんかなあ..
