Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

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 の最上位レベルでは現在、次のオプションが提供されています。

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

Expand
オプション説明

branding

コンソールのブランディングオプション。

login

ログインページの設定。

about

about モーダル設定。

disabledRoutes

コンソールに表示しないプラグインのリスト。

jmx

JMX プラグインの設定。

online

HawtIO Online 設定。

3.5.1.1. ブランディング
リンクのコピー

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

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

Expand
オプションデフォルト説明

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 ログインページに表示される情報をカスタマイズするオプションが提供されます。

ログイン設定オプション

Expand
オプションデフォルト説明

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
リンクのコピー

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

About 設定オプション

Expand
オプションデフォルト説明

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 プラグイン設定オプション

Expand
オプションデフォルト説明

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 オンライン設定オプション

Expand
オプションデフォルト説明

projectSelector

 

プロジェクトの監視に使用するセレクターを設定します。これは、HawtIO デプロイメントタイプが cluster と等しい場合にのみ該当します。デフォルトでは、ログインしているユーザーがアクセスできるプロジェクトがすべて監視されます。kubectl get コマンドの --selector または -l オプションで要求されているように、セレクターの文字列表現を指定する必要があります。こちら を参照してください。

consoleLink

 

OpenShift Web コンソールリンクを設定します。HawtIO デプロイメントが cluster と等しい場合、アプリケーションメニューにリンクが追加されます。それ以外の場合は、HawtIO プロジェクトダッシュボードにリンクが追加されます。値は、text、section、imageRelativePath のプロパティーを持つオブジェクトである必要があります。

ConsoleLink 設定オプション

Expand
オプションデフォルト説明

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 プラグインプロジェクトの例は こちら にあります。

Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

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

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

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

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

Theme

© 2026 Red Hatトップに戻る