A Hawtio reimplementation based on TypeScript + React. This project reimplements the following Hawtio JS components in one project:

• hawtio-core
• hawtio-integration
• hawtio-oauth

This project uses tsup and Webpack for building packages.

See also Developing Hawtio.next for the project styling, guidelines, and more details on development.

You need to have installed the following tools before developing the project.

• Node.js >= 18
• Yarn v4

$ /usr/bin/yarn install
yarn install v1.22.19
[1/5] Validating package.json...
error @hawtio/[email protected]: The engine "yarn" is incompatible with this module. Expected version ">=4". Got "1.22.19"
error Found incompatible module.

corepack enable

$ yarn --version
4.0.1

After checking out the project, run the following command to set up the project dependencies.

yarn install

Then, build the whole project first.

yarn build:all

You can start developing the project by running the following command and then opening http://localhost:3000/ in the browser.

yarn start

Then run another Java application which has a Jolokia endpoint from a different terminal, and connect to it from the Connect tab in the Hawtio console. For example, you can run this Spring Boot example in background.

mvn spring-boot:run

You can connect to this example application at the Jolokia URL: http://localhost:10001/actuator/hawtio/jolokia. Open the Connect tab and create a connection with the following parameters:

• Name: <any name>
• Scheme: HTTP
• Host: localhost
• Port: 10001
• Path: /actuator/hawtio/jolokia

To build the project for production, run the following command. It's built into the build/ directory.

yarn build:all

To execute the unit tests, run the following command.

yarn test:all

It is recommended to run linting against the code periodically with the following command.

yarn lint && yarn format:check

Read Running E2E tests locally.

When yarn start is run, the test application located in app is the project actually executed. This uses webpack for the bundling of project compiled source and assets. By default, webpack has been configured to not generate any source-maps since these are often unnecessary for development and can make the application memory-intensive.

However, there maybe an occasion when the developer needs to debug an issue during runtime in the browser and as such source-maps can be vital. Therefore, in this use-case, the developer should update the webpack configuration file and specifically change the devtool property in order to generate source-maps. The property should be modified to a value consistent with the information provided by the webpack documentation, eg. source-map may be a good start while eval-source-map can be helpful for very tricky debugging problems but is the most memory-intensive.

Once the configuration file is updated, yarn start should be re-run and the source-maps should then be available to use in the host browser.

When making a PR E2E tests from hawtio/hawtio will be run against your frontend. If you want to specify a different branch to run the tests from you can add `branch: [remote:]branch` to the PR description, ie. branch: e2e-test-fix or in your own fork branch: jdoe:my-branch.