Translate

2013年12月11日水曜日

CloudStack4.2.0用の簡単なUIプラグインを作ってみる

※本投稿は、CloudStack Advent Calendar 12月11日のエントリです。


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.jstestPluginディレクトリがおいてあった。


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.jspreFilterで常に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を使用する場合、
足りないのは利用などの申請系のワークフローと
課金機能なんだけど..

..誰か作ってくれんかなあ..

0 件のコメント:

既存アプリケーションをK8s上でコンテナ化して動かす場合の設計注意事項メモ

既存アプリをK8sなどのコンテナにして動かすには、どこを注意すればいいか..ちょっと調べたときの注意事項をメモにした。   1. The Twelve Factors (日本語訳からの転記) コードベース   バージョン管理されている1つのコードベースと複数のデプロイ 依存関係 ...