Code Monkey home page Code Monkey logo

hawtio-next's Introduction

Hawtio.next

Test E2E Test Lint

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

Development

This project uses tsup and Webpack for building packages.

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

Prerequisites

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

Important

Building requires Yarn Berry (v2+). The default installation version of yarn on many operating systems is 1.22.19 (the classic version). This might cause a problem when building the project. As a result, the mandated minimum version has been set to 4.0.0.

If yarn install is attempted with a version lower than 4.0.0 then an error message is displayed, eg.

$ /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.

If you have enabled corepack already, the project should automatically use the version of yarn committed to the repository itself.

corepack enable
$ yarn --version
4.0.1

Developing

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

Building

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

yarn build:all

Testing

To execute the unit tests, run the following command.

yarn test:all

Linting

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

yarn lint && yarn format:check

E2E

Read Running E2E tests locally.

Contributing

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.

hawtio-next's People

Contributors

dependabot[bot] avatar five-iron avatar grgrzybek avatar joshiraez avatar kahboom avatar lhein avatar mmelko avatar mmuzikar avatar msarawan avatar phantomjinx avatar tadayosi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hawtio-next's Issues

Camel - Endpoints view

Camel plugin should provide the view for managing Camel endpoints from the web console, which includes:

  • Add a new endpoint
  • Browse messages in an endpoint
  • Send a test message to an endpoint

Endpoints

Camel - Specialised tree view for Camel contexts

JMX plugin provides the general JMX MBean tree from workspace. A plugin that works on top of the MBean tree like Camel plugin needs to implement a way to postprocess and decorate them into a specialised view of the tree.

  • Extract only Camel-related MBeans from the entire JMX tree
  • Assign custom icons according to the types of Camel MBeans

The Camel tree view from the original Hawtio looks like this:

Camel context tree

Convert project to NPM package and publish it

Right now the project is private and cannot publish to NPM registry as-is. Making it a publich package is necessary for the downstream projects such as hawtio and hawtio-online to consume it.

Connect - Import connections

Export connections is already available, but Import connections is not yet implemented.

This feature should basically just import the JSON file exported using Export connections and then persist the config into local storage.

Import connections

Camel - Context view

Camel plugin should provide the view for managing Camel contexts that enables users to start, stop, resume, and delete them from the web console.

Context view

Warning `findDOMNode is deprecated in StrictMode` in browser console when invoking a JMX operation

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of FindRefWrapper which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

This should be fixed by upgrading to the latest PatternFly 4 and apply removeFindDomNode to ClipboardCopy component:
patternfly/patternfly-react#8368

Core - Define plugin interface and mechanism

The plugin interface and mechanism have already been implemented for the Connect and JMX plugins, but we need to further polish and stabilise them with new built-in plugins such as Camel, etc. and then expose the interface for external plugin developers, including Artemis plugin.

What we need to complete on the design and implementation of Hawtio.next plugin are:

  • How to provide the JMX MBean tree to other plugins
  • How to allow other plugins to post-process the JMX tree
  • How to load external plugins dynamically at runtime

This also includes the following sub tasks:

Camel - Routes view

Camel plugin should provide the view for managing Camel routes from the web console.

It should provides the following features:

  • Start, stop, resume, and delete Camel routes
  • View and update the source of the routes on the fly (Updating routes on the fly is no longer supported in Camel 3 hawtio/hawtio#2779)
  • #144
  • #145

Routes

Routes

Source

Source

Exchanges

Exchanges

Type converters

Type converters

Core - hawtconfig.json

Hawtio.next should provide the ability to read the external configuration named hawtconfig.json from the server and customise the application settings based on the JSON file.

Among others, hawtconfig.json should be able to configure:

  • branding info
  • login page detail info
  • about modal
  • explicit disabling of specific routes

hawtconfig.json

{
  "branding": {
    "appName": "Hawtio Management Console",
    "appLogoUrl": "img/hawtio-logo.svg",
    "companyLogoUrl": "img/hawtio-logo.svg",
    "css": "",
    "favicon": ""
  },
  "login": {
    "description": "",
    "links": []
  },
  "about": {
    "title": "Hawtio Management Console",
    "productInfo": [],
    "additionalInfo": "",
    "copyright": "",
    "imgSrc": "img/hawtio-logo.svg"
  },
  "disabledRoutes": []
}

Core - Home preferences

The Home preferences is not fully implemented yet.

What should be implemented:

  • Switch to show/hide the vertical navigation by default
  • Reset button to clear all Hawtio settings in the local storage

Home

Camel - Attributes & Operations views

They are mostly the same as what JMX plugin provides, but they are embedded in the Camel plugin. We need to find a way to reuse the parts of JMX plugin from a different plugin.

Attributes

Attributes

Operations

Operations

Should hawtio plugin retain use of the @hawtiosrc alias

Due to the introduction of a new package (camel-model), the @hawtio ident prioritizes the new purpose of being an organisation. In order to avoid confusion and failure, the ident referencing src paths is modified to @Hawtiosrc (see #93).

Is this the correct alias?
Should this alias even be retained or is there something better?

E2E testing strategy

One of the key things that were missing in the original Hawtio project was an E2E test suite; without E2E testing, we were unable to perform automated quality assurance on each new version release. We should ensure that this does not happen in Hawtio.next. Hawtio.next development should take E2E testing into account well into the early stages of the project.

The E2E testing strategy I'm considering at this time is as follows:

  • E2E tests with runtimes to be run at hawtio and hawtio-online projects
    • hawtio - E2E tests for Spring Boot and Quarkus standalone
    • hawtio-online - E2E tests on Kubernetes and OpenShift (with microshift-action or a self-hosted runner)
  • Component-level UI testing can be done at hawtio-next project

Relating issue:

Camel - Route diagram view

Camel plugin should provide the view for visualising Camel routes.

Since the functionality of visualising Camel routes is a recurring common feature required by various Camel development tools, including Karavan, Camel Designer, VS Code extension, and Kaoto, it is not desirable to implement it independently in Hawtio. Rather, we should consider reusing code from the aforementioned tools or developing the feature as a reusable JS library together with the developers of those tools so that they can reuse it later.

Route diagram

Connect - Preferences

Connect prefenreces is not yet fully implemented. See // TODO comments in ConnectPreferences.tsx.

What should be implemented:

  • Apply the parameters to Jolokia instance
  • Reset the connections settings persisted in local storage

Connect preferences

RBAC

Hawtio.next needs to provide RBAC on UI based on the canInvoke info from Jolokia. Port the feature from hawtio-integration.

This includes the following subtasks:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.