はじめに

hawtio用のHello worldプラグインを作成する動画があったので、試してみようと思います。

First Hawtio 2.x Plugin project example

2015年と3年前の動画ですが、バージョンは最新の2系なのでたぶん大丈夫でしょう。
→と、思って試したのですがどうも最新の2系とは違うような気がする。
hawtio v2.1を動かしてバージョンを確認すると、hawtioを構成する（？）ライブラリのバージョンはv4.xとなっている。動画の2.xがこのバージョンを指すなら、完全に古いバージョンということになる。

公式サイト自体が古い情報と新しい情報が混じっていて分かりにくく、公式サイト以外の情報が少ない。
とりあえずメモ書きとして残しておきますが、（たぶん）古い情報ということは明記しておきます。

hawtioとは

公式サイト

hawtioは「ホゥート・アイオー」と読みます。私は知らなかったので「ハウティオ」と読んでいました。「ホゥート・アイオー」なんて読みにくいのでこれからも「ハウティオ」と読みますが。

hawtio ってなんて読むんですか？

以下の動画も良いと思います。英語ですが画面操作（デモ）があるのでなんとなく理解できます。

JDK IO 2018 - Martin Skarsaune - Hawt and spicy Java monitoring

サンプルプラグイン作成の前提

・動画ではLinuxで動かしていますが、今回はWindows上で動かします。
・今回使用したWindows端末にはNode.jsがインストール済みです。

開発環境構築

まずプラグイン用のディレクトリを作成
> mkdir my-awesome-plugin
> cd my-awesome-plugin/
> npm install -g gulp slush slush-hawtio-typescript bower

hawtioプラグインのテンプレートを作成
> slush hawtio-typescript
[slush] Using slushfile /usr/lib/node_modules/slush-hawtio-typescript/slushfile.js
[10:23:01] Starting 'hawtio-typescript:default'...
[?] What is the name of your project? my-awesome-plugin
[?] What is the description? 
[?] What is the version of your project? 0.1.0
[?] What is the author name? 
[?] What is the author email? 
[?] What is the github username? root
[?] Continue? Yes
[10:23:29] [conflict] Keeping 
～省略～

以下は動画にありませんでしたが、エラーになったので追加。かなり試行錯誤したので不要なものもあるかもしれません。
>bower install jQuery
>bower install es5-dom-shim
>bower install momentjs
>bower install patternfly

>npm install -g typescript@2.0.0

tscでエラーになったので、以下のようにexampleGlobals.tsを修正します。

my-awesome-plugin/plugins/example/ts/exampleGlobals.ts

//  export var log: Logging.Logger = Logger.get(pluginName);
  export var log = Logger.get(pluginName);

hawtioをデバッグ起動する

> cd my-awesome-plugin/
> gulp

ブラウザで以下のURLにアクセスすると開発中の画面が表示されます。

サンプルでは、「Example」-「Page 1」というタブに「Page 1 Hello World!」と表示されます。

my-awesome-plugin\plugins\example\ts
page1.ts

page1.ts

module Example {

  export var Page1Controller = _module.controller("Example.Page1Controller", ["$scope", ($scope) => {
    $scope.target = "World! Changed";
  }]);

}

page1.tsを「$scope.target = "World! Changed";」のように修正して保存すると、自動でリロードされて以下のように表示される。（私はバックエンドエンジニアなので分かりませんが）AngularJSの知識があればたぶん開発できるのではないでしょうか。

構成ファイル

サンプルプラグインを構成するファイルは以下の7ファイル。
プラグインはフロントエンドのHTML, CSS, JavaScriptだけ作成すれば良いようになっています。

my-awesome-plugin/plugins/main.less
my-awesome-plugin/plugins/includes.ts
my-awesome-plugin/plugins/example/html/page1.html
my-awesome-plugin/plugins/example/less/example.less
my-awesome-plugin/plugins/example/ts/exampleGlobals.ts
my-awesome-plugin/plugins/example/ts/examplePlugin.ts
my-awesome-plugin/plugins/example/ts/page1.ts

examplePlugin.tsでタブを定義している。

.subPath("Page 1", "page1", builder.join(Example.templatePath, "page1.html"))

examplePlugin.ts

module Example {

  export var _module = angular.module(Example.pluginName, []);

  var tab = undefined;

  _module.config(["$locationProvider", "$routeProvider", "HawtioNavBuilderProvider",
    ($locationProvider, $routeProvider: ng.route.IRouteProvider, builder: HawtioMainNav.BuilderFactory) => {
    tab = builder.create()
      .id(Example.pluginName)
      .title(() => "Example")
      .href(() => "/example")
      .subPath("Page 1", "page1", builder.join(Example.templatePath, "page1.html"))
      .build();
    builder.configureRouting($routeProvider, tab);
    $locationProvider.html5Mode(true);
  }]);

  _module.run(["HawtioNav", (HawtioNav: HawtioMainNav.Registry) => {
    HawtioNav.add(tab);
    log.debug("loaded");
  }]);


  hawtioPluginLoader.addModule(Example.pluginName);
}

タブに追加した"page1.html"

page1.html

<div class="row">
  <div class="col-md-12" ng-controller="Example.Page1Controller">
    <h1 class="example-1-class">Page 1</h1>
    <p class='customClass'>Hello {{target}}</p>
  </div>
</div>

page1.htmlの「{{target}}」はpage1.tsの「$scope.target = "World! Changed";」で値がセットされている。

page1.ts

module Example {

  export var Page1Controller = _module.controller("Example.Page1Controller", ["$scope", ($scope) => {
    $scope.target = "World! Changed";
  }]);

}