3.5. HawtIO のカスタムブランディング設定

hawtconfig.json は、HawtIO のフロントエンドコンソールを設定するためのエントリーポイント JSON ファイルです。これを使用して、コンソールのさまざまな部分 (ブランディング、スタイル、ログインページやバージョン情報モーダルなどの基本的な UI 部分、および一部の HawtIO プラグインのコンソール固有の動作) をカスタマイズできます。

以下は、hawtconfig.json のファイルの例です。

hawtconfig.json の例:

{
  "branding":
  {
    "appName": "HawtIO Management Console",
    "showAppName": false,
    "appLogoUrl": "hawtio-logo.svg",
    "companyLogoUrl": "hawtio-logo.svg",
    "css": "",
    "favicon": "favicon.ico"
  },
  "login": {
    "description": "Login page for HawtIO Management Console.",
    "links": [
      { "url": "#terms", "text": "Terms of Use" },
      { "url": "#help", "text": "Help" },
      { "url": "#privacy", "text": "Privacy Policy" }
    ]
  },
  "about": {
    "title": "HawtIO Management Console",
    "description": "A HawtIO reimplementation based on TypeScript + React.",
    "imgSrc": "hawtio-logo.svg",
    "productInfo": [
      { "name": "ABC", "value": "1.2.3" },
      { "name": "XYZ", "value": "7.8.9" }
    ],
    "copyright": "© HawtIO project"
  },
  "disabledRoutes": [
    "/disabled"
  ]
}

3.5.1. `hawtconfig.json` の設定オプション

hawtconfig.json の最上位レベルでは現在、次のオプションが提供されています。

最上位レベルの設定オプション

オプション	説明
`branding`	コンソールのブランディングオプション。
`login`	ログインページの設定。
`about`	モーダル設定。
`disabledRoutes`	コンソールに表示しないプラグインのリスト。
`jmx`	JMX プラグインの設定。
`online`	HawtIO Online 設定。

3.5.1.1. ブランディング

branding 設定では、アプリケーション名、ロゴ、スタイル、ファビコン (favicon) など、コンソールのブランディングをカスタマイズするオプションが提供されます。

ブランディング設定オプション

オプション	デフォルト	説明
`appName`	`HawtIO Management Console`	コンソールのアプリケーション名をカスタマイズします。名前はブラウザーのタイトルヘッダーで使用され、オプションでコンソールページのヘッダーでも使用されます。
`showAppName`	`false`	コンソールページのヘッダーにアプリケーション名を表示します。
`appLogoUrl`	`img/hawtio-logo.svg`	アプリケーションロゴの代わりに URL を使用します。
`companyLogoUrl`	`img/hawtio-logo.svg`	会社のロゴの代わりに URL を使用します。
`css`		コンソールに適用するカスタム CSS を提供します。
`favicon`		ファビコンの代わりに URL を使用します。

hawtconfig.json での branding 設定は次のようになります。

"branding": {
  "appName": "HawtIO Management Console",
  "showAppName": false,
  "appLogoUrl": "hawtio-logo.svg",
  "companyLogoUrl": "hawtio-logo.svg",
  "css": "",
  "favicon": "favicon.ico"
}

3.5.1.2. ログイン

login 設定では、HawtIO ログインページに表示される情報をカスタマイズするオプションが提供されます。

ログイン設定オプション

オプション	デフォルト	説明
`description`		ログインページに表示されるテキストを設定します。
`links`	[ ]	ログインページの下部にリンクを提供します。値は、`URL` および `テキスト` プロパティーを含む、オブジェクトの配列である必要があります。

hawtconfig.json での login 設定は次のようになります。

"login": {
  "description": "Login page for HawtIO Management Console.",
  "links": [
    { "url": "#terms", "text": "Terms of Use" },
    { "url": "#help", "text": "Help" },
    { "url": "#privacy", "text": "Privacy Policy" }
  ]
}

3.5.1.3. 概要

About 設定では、HawtIO の About モーダルに表示される情報をカスタマイズするオプションが提供されます。

設定オプションについて

オプション	デフォルト	説明
`title`	`HawtIO Management Console`	About モーダルのタイトルをカスタマイズします。
`description`		About モーダルに説明テキストを入力します。
`imgSrc`	`img/hawtio-logo.svg`	URL を使用して、About モーダルのロゴイメージを置き換えます。
`productInfo`	[ ]	コンソールで使用される追加コンポーネントの名前とバージョンの情報を提供します。値は、`name` および `value` のプロパティーを含むオブジェクトの配列である必要があります。
`copyright`		バージョン情報モーダルで著作権情報を設定します。

hawtconfig.json の about 設定は次のようになります。

"about":
{
  "title": "HawtIO Management Console",
  "description": "A HawtIO reimplementation based on TypeScript + React.",
  "imgSrc": "hawtio-logo.svg",
  "productInfo": [
    { "name": "ABC", "value": "1.2.3" },
    { "name": "XYZ", "value": "7.8.9" }
  ],
  "copyright": "© HawtIO project"
}

3.5.1.4. 無効なルート

disabledRoutes 設定では、コンソールからプラグインを非表示にするオプションが提供されます。

オプションの値は、表示しないプラグインのパスを表す文字列の配列である必要があります。

hawtconfig.json での disabledRoutes 設定は次のようになります。

"disabledRoutes": [
  "/disabled"
]

3.5.1.5. JMX プラグイン

JMX プラグインは hawtconfig.json の jmx 設定を介してカスタマイズできます。

ヒント

デフォルトでは、HawtIO は JMX プラグインを介してすべての MBean をワークスペースにロードします。場合によっては、アプリケーションの負荷を軽減するために、カスタム HawtIO コンソールで MBean の一部のみをロードする必要がある場合があります。jmx 設定には、ワークスペースにロードされる MBean を制限するオプションが用意されています。

JMX プラグイン設定オプション

オプション	デフォルト	説明
`workspace`		JMX プラグインワークスペースにロードする MBean ドメインとオブジェクト名のリストを指定します。

このオプションでは、false を設定してワークスペースを完全に無効にするか、次の形式で MBean パスの配列を指定できます。

<domain>/<prop1>=<value1>,<prop2>=<value2>,...

ワークスペースにロードする MBean を微調整します。

警告

ワークスペースを無効にすると、ワークスペースによって提供される MBean に依存するすべてのプラグインも非アクティブになります。

hawtconfig.json での jmx 設定は次のようになります。

"jmx": {
  "workspace": [
    "hawtio",
    "java.lang/type=Memory",
    "org.apache.camel",
    "no.such.domain"
  ]
}

3.5.1.6. HawtIO オンライン

HawtIO Online のフロントエンド要素は、hawtconfig.json の Online 設定で指定できます。

HawtIO オンライン設定オプション

オプション	デフォルト	説明
`projectSelector`		プロジェクトの監視に使用するセレクターを設定します。これは、HawtIO デプロイメントタイプが `cluster` と等しい場合にのみ該当します。デフォルトでは、ログインしているユーザーがアクセスできるプロジェクトがすべて監視されます。`kubectl get` コマンドの `--selector` または `-l` オプションで要求されているように、セレクターの文字列表現を指定する必要があります。こちらを参照してください。
`consoleLink`		OpenShift Web コンソールリンクを設定します。HawtIO デプロイメントが `cluster` と等しい場合、アプリケーションメニューにリンクが追加されます。それ以外の場合は、HawtIO プロジェクトダッシュボードにリンクが追加されます。値は、`text`、`section`、`imageRelativePath` のプロパティーを持つオブジェクトである必要があります。

ConsoleLink 設定オプション

オプション	デフォルト	説明
`text`		リンクのテキスト表示を設定します。
`section`		リンクが表示されるアプリケーションメニューのセクションを設定します。これは、HawtIO デプロイメントタイプが `cluster` と等しい場合にのみ該当します。
`imageRelativePath`		アプリケーションメニューのリンクの前に使用されるアイコンのパスを、HawtIO ステータス URL を基準として設定します。これは、`HawtIO` デプロイメントタイプが `cluster` に等しい場合にのみ該当します。イメージは正方形で、24x24 ピクセルで表示されます。

hawtconfig.json での HawtIO online 設定は次のようになります。

"online": {
  "projectSelector": "myproject",
  "consoleLink": {
      "text": "HawtIO Management Console",
      "section": "HawtIO",
      "imageRelativePath": "/online/img/favicon.ico"
  }
}

3.5.2. `hawtconfig.json` のデプロイ

3.5.2.1. Quarkus

Quarkus アプリケーションの場合、hawtconfig.json ファイルと、CSS ファイルやイメージなど、他に付随する静的リソースは、プロジェクトの src/main/resources ディレクトリーにある META-INF/resources/hawtio の下に配置する必要があります。

Quarkus プロジェクトの例はこちらにあります。

3.5.2.2. Spring Boot

Spring Boot アプリケーションの場合、hawtconfig.json ファイルや CSS ファイルやイメージなどの他の静的リソースは、プロジェクトの src/main/resources ディレクトリーの hawtio-static の下に配置する必要があります。

Spring Boot プロジェクトの例はこちらでご覧いただけます。

3.5.3. プラグインからのカスタマイズ

プラグインはコンソールに hawtconfig.json ファイル自体を直接指定できませんが、メインのコンソールアプリケーションからファイルが読み込まれた後に設定をカスタマイズできます。

@hawtio/react NPM パッケージは configManager API を提供します。プラグインの index.ts でこの API を使用して、プラグインの読み込み中に hawtconfig.json の設定をカスタマイズできます。

プラグインから hawtconfig.json 設定をカスタマイズする方法の例を次に示します。

import
{
  HawtIOPlugin, configManager
  } from '@hawtio/react'
...

/**
 * The entry function of your plugin.
 */
export const plugin: HawtIOPlugin = () =>
{
  ...
}

// Register the custom plugin version to HawtIO
// See package.json "replace-version" script for how to replace the version placeholder with a real version
configManager.addProductInfo('HawtIO Sample Plugin', '__PACKAGE_VERSION_PLACEHOLDER__')

/*
 * This example also demonstrates how branding and styles can be customised from a WAR plugin.
 *
 * The Plugin API `configManager` provides `configure(configurer: (config: Hawtconfig) => void)` method
 * and you can customise the `Hawtconfig` by invoking it from the plugin's `index.ts`.
 */
configManager.configure(config => {
  // Branding & styles
  config.branding =
  {
    appName: 'HawtIO Sample WAR Plugin',
    showAppName: true,
    appLogoUrl: '/sample-plugin/branding/Logo-RedHat-A-Reverse-RGB.png',
    css: '/sample-plugin/branding/app.css',
    favicon: '/sample-plugin/branding/favicon.ico',
  }
  // Login page
  config.login = {
    description: 'Login page for HawtIO Sample WAR Plugin application.',
    links: [
      { url: '#terms', text: 'Terms of use' },
      { url: '#help', text: 'Help' },
      { url: '#privacy', text: 'Privacy policy' },
    ],
  }
  // About modal
  if (!config.about) {
    config.about = {}
  }
  config.about.title = 'HawtIO Sample WAR Plugin'
  config.about.description = 'About page for HawtIO Sample WAR Plugin application.'
  config.about.imgSrc = '/sample-plugin/branding/Logo-RedHat-A-Reverse-RGB.png'
  if (!config.about.productInfo) {
    config.about.productInfo = []
  }
  config.about.productInfo.push(
    { name: 'HawtIO Sample Plugin - simple-plugin', value: '1.0.0' },
    { name: 'HawtIO Sample Plugin - custom-tree', value: '1.0.0' },
  )
  // If you want to disable specific plugins, you can specify the paths to disable them.
  //config.disabledRoutes = ['/simple-plugin']
})

WAR プラグインプロジェクトの例はこちらにあります。

3.5. HawtIO のカスタムブランディング設定

3.5.1. `hawtconfig.json` の設定オプション

3.5.1.1. ブランディング

3.5.1.3. 概要

3.5.1.4. 無効なルート

3.5.1.5. JMX プラグイン

3.5.1.6. HawtIO オンライン

3.5.2. `hawtconfig.json` のデプロイ

3.5.2.1. Quarkus

3.5.2.2. Spring Boot

3.5.3. プラグインからのカスタマイズ

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

多様性を受け入れるオープンソースの強化

会社概要

Red Hat legal and privacy links

Red Hat legal and privacy links

3.5. HawtIO のカスタムブランディング設定

3.5.1. hawtconfig.json の設定オプション

3.5.1.1. ブランディング

3.5.1.2. ログイン

3.5.1.3. 概要

3.5.1.4. 無効なルート

3.5.1.5. JMX プラグイン

3.5.1.6. HawtIO オンライン

3.5.2. hawtconfig.json のデプロイ

3.5.2.1. Quarkus

3.5.2.2. Spring Boot

3.5.3. プラグインからのカスタマイズ

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

多様性を受け入れるオープンソースの強化

会社概要

Red Hat legal and privacy links

Red Hat legal and privacy links

3.5.1. `hawtconfig.json` の設定オプション

3.5.2. `hawtconfig.json` のデプロイ