hawtio/hawtio-integration

Core integration plugins for Hawtio: Apache ActiveMQ, Camel, Karaf, OSGi, and Spring Boot

hawtio-integration

This project provides ActiveMQ, Camel, Karaf and Spring Boot plugins for hawtio.

Installation

yarn add @hawtio/integration

Set up development environment

Clone the repository

git clone https://github.com/hawtio/hawtio-integration
cd hawtio-integration

Install development tools

• Node.js
• Yarn
• gulp

Install project dependencies

yarn install

Developing

Run the web application

yarn start

Change the default proxy port

To proxy to a local JVM running on a different port than 8282 specify the --port CLI arguement to gulp:

yarn start -- --port=8181

Output build to a different directory

When developing this plugin in a dependent console you can change the output directory where the compiled .js and .css go. Just use the --out flag to set a different output directory, for example:

gulp watch --out=../fabric8-console/libs/hawtio-integration/dist/

Whenever the build completes the compiled .js file will be put into the target directory. Don't forget to first do a gulp build without this flag before committing changes!

Turn on source maps generation for debugging TypeScript

If you want to debug .ts using a browser developer tool such as Chrome DevTools, pass the --sourcemap flag to gulp:

gulp --sourcemap

Do not use this flag when you are committing the compiled .js file, as it embeds source maps to the output file. Use this flag only during development.

Upgrade Apache Camel

In order to support the latest Camel meta model in Camel plugin, you need to update the camelModel.js with the latest camel-catalog. To do so, first update the Camel version in the camel-model-generator pom.xml:

    <version.org.apache.camel>3.14.2</version.org.apache.camel>

then run the following yarn script:

yarn update-camel-model

hawtio-integration's Issues

Camel tab tree view does not list all camel contexts

I've been playing with 2.0-M2 on WildFly / EAP and noticed an issue with the Camel context tree.

The tree view only seems to display one Camel context. If I deploy 2 camel applications into the container, I only ever see one of them.

In addition, the displayed Camel context changes depending on the name of the context. E.g it's picking the first one based on ascending order of context names.

OSGi Feature details page shows sections with no data

Feature details page shows section headers and table headers even when there is no data to show and it looks a bit ugly. Those sections could be hidden when they have data.

Some icons for ActiveMQ plugin are not shown

See the screenshot. Its that client connector icon. It refers to a img src. Where as other icons in the tree that works are a a css class style instead.

master vs v2 branch

Hi @alexkieling @gashcrumb what is up with this new v2 branch? We normally use master for hawtio v2 stuff.

It seems Alex did some PRs to the v2 branch. Should we not merge them to master and then delete that v2 branch?

Cannot connect to remote JBoss Fuse 6.3

With the current v1-ports branch, trying to connect to remote JBoss Fuse 6.3 fails getting the following dialog:

Opening the browser console, it says:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8181/hawtio/jolokia/list?canonicalNaming=false&ignoreErrors=true&_=1483714506643. (Reason: CORS header 'Access-Control-Allow-Origin' missing). (unknown)
[workspace] Failed to load JMX tree, status:  error  error:    jqXHR:  Object { readyState: 0, getResponseHeader: .ajax/jqXHR.getResponseHeader(), getAllResponseHeaders: .ajax/jqXHR.getAllResponseHeaders(), setRequestHeader: .ajax/jqXHR.setRequestHeader(), overrideMimeType: .ajax/jqXHR.overrideMimeType(), statusCode: .ajax/jqXHR.statusCode(), abort: .ajax/jqXHR.abort(), state: .Deferred/promise.state(), always: .Deferred/promise.always(), then: .Deferred/promise.then(), 11 more… } hawtio-core.js:83:11
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8181/hawtio/jolokia?con=fuse/&maxDepth=7&maxCollectionSize=500&ignoreErrors=true&canonicalNaming=false. (Reason: CORS header 'Access-Control-Allow-Origin' missing). (unknown)

so it seems to have something to do with CORS header.

Attributes table wider than available width

When selecting the JMImplementation node on the JMX tree, the Attributes page shows a table wider than the available width, forcing the user to scroll horizontally to see all the data.

Camel plugin - Add wobble diagram for in/out endpoints

See #11

We can now link in/out routes together and then should be able to do a wobble diagram of all the routes in Camel context and see if any are connected.

And then take that a level higher for the entire JVM and all the CamelContexts.

Add new icons for new EIPs when upgrading to Apache Camel 2.21

This new release has 2 new EIPs:

• Claim Check
• Saga

We should add specialized icons for those EIPs. There is some code somewhere where these Camel EIPs are mapped to icons, and if there is no mapping then a general icon is used. But the Claim Check EIP should use the icon of "Content Enricher" as it resembles this icon. And Saga should be the icon of a transaction.

Error when clicking on JMX tree nodes

The following error is thrown when a node is selected in the JMX tree of MBeans:

TypeError: selected.any is not a function
at Scope.$scope.anySelectionHasState (hawtio-integration.js:3673)
at $parseFunctionCall (angular.js:12474)
at Object.expressionInputWatch (angular.js:12883)
at Scope.$digest (angular.js:14404)
at Scope.$apply (angular.js:14675)
at Object.$apply (hawtio-utilities.js:656)
at render (hawtio-jmx.js:2958)
at Array.callback.success (hawtio-utilities.js:1678)
at jolokia.js:547
at Object.ajaxParams.success (jolokia.js:232)

We should replace old references to sugarjs with native JavaScript.

ActiveMQ plugin - Port hawtio/hawtio#2200 to v2

Port hawtio/hawtio#2200

Camel plugin - All to delete message from browse endpoints

We can move messages, but we should also allow to delete them.

Add default hawtconfig.json to Docker image

Camel Route Diagram: "totoal" typo

Typo in Camel Route Diagram.

Steps to Reproduce:

1. Open the Web console
2. Go to Camel tab -> Route Diagram tab
3. Hover route
4. You can see typo "totoal"

Fix typo "totoal" to "total".

ActiveMQ plugin - delete queue/topic buttons not showing the names

See the buttons' names are Delete queue '' and Purge queue ''.

Camel plugin - Make it easier to show all routes in routes diagram

So when you click "routes" in the tree we should have a diagram button so you can see all of these routes on the same page.

And as bonus we should maybe have some filter box where you can filter by routes, and/or some selector to include/exclude by route id. Maybe some slider that you can slide in / out to do this.

OSGi Bundle details page shows sections with no data

Bundle details page shows section headers and table headers even when there is no data to show and it looks a bit ugly. Those sections could be hidden when they have data.

Still some absolute icon paths

In https://github.com/hawtio/hawtio-integration/blob/master/plugins/camel/ts/endpointChooser.ts we need to bring in the documentBase service and construct the right URL for these icons.

Camel tree disappears when reloaded

The Camel tree disappears when reloaded.
The tree is reloaded on some user actions, such as deleting a route or pressing F5 to reload the page.
Note: the JMX tree doesn't have this issue.
@astefanutti

Camel route delete: route persists in html page after delete

Route persists in HTML page after delete operation.

Steps to Reproduce:

1. Open Web console
2. Go to Camel tab -> -> Attributes
3. Click Stop
4. Click Delete

Actual results:
Html page is not refreshed after Camel route delete. Camel route is still in the route tree.

Expected results:
Html page is refreshed

Camel - Source view shows a tiny panel

with the source code. We had the same problem with kubernetes, and @gashcrumb fixed this nicely. And also added a widget that used syntax highlighting. As the context in the panel would be xml, then it would be nice with syntax highlight there too.

Camel plugin - Add back button on eip page

eg when you from the route diagram click on an EIP then it shows its properties as shown below. We should add some "back" button to take you back to the route diagram.

Also those turn [x] options on/off should be aligned and maybe styled better.

OSGi plugin - Server tab should not depend on "org.apache.karaf:type=instance,*" MBeans

The instance feature of Karaf which provides org.apache.karaf:type=instance,* MBeans is an old way to manage instances for Karaf, especially in cloud environments like OpenShift.

We should rewrite the page with other MBeans. See also: https://issues.jboss.org/browse/ENTESB-8098

Migrate to CircleCI 2.0

Amq ActiveMQ password edit box

Description of problem:
ActiveMQ password edit box in user preferences should be HTML input type password not normal edit box.

Steps to Reproduce:

1. Go to User -> Preferences -> ActiveMQ -> ActiveMQ password

Actual results:
You can see plain password in edit box ActiveMQ password

Expected results:
You can not see password in edit box.

Amq Send Delete Header raise JavaScript exception

Amq Send Delete Header raise JavaScript exception

Steps to Reproduce:

1. Open Web console
2. Select ActiveMQ tab
3. Send -> Header -> Add some header -> Add some header
4. Delete header
5. See error on JavaScript console

Camel plugin - Make the boxes in the route diagram max widthed

If you have expressions in eips such as the CBR you may have them very long. We should cap the text and show ... and then have the full text in the tooltip. Or when user click on the eip.

Then we can better align the routes and it maybe also looked better.

OSGi issues

Issues:

• Configuration tab: shows nothing
• Bundles tab: TypeError: t.bundles.sortBy is not a function'
• Server tab: shows nothing

Camel plugin - Port blocked v1 to v2

Port this ticket to v2: hawtio/hawtio#2001

Enable outputting source maps for TypeScript debugging

Source maps are necessary for browser debugging.

Upgrade to Camel 2.18.0

Copy the generated schema file from hawtio v1 and override existing file here.

error TS2339: Property 'findIndex' does not exist on type 'NodeSelection[]'

I've just declared more types and it revealed seemingly ES5 incompatibility issues:

plugins/activemq/ts/activemqPlugin.ts(128,41): error TS2339: Property 'findIndex' does not exist on type 'NodeSelection[]'.
plugins/camel/ts/breadcrumbBar.ts(118,56): error TS2339: Property 'find' does not exist on type 'NodeSelection[]'.
plugins/camel/ts/breadcrumbBar.ts(148,54): error TS2339: Property 'find' does not exist on type 'NodeSelection[]'.

I think it's just the tip of the iceberg, as there are many places where types are not declared but any is used so the incompatibility issues are buried.

@alexkieling @astefanutti What do you think would be the right approach to fix it? Introducing es6-shim? Upgrading the target to ES6?

Camel plugin - Port v1 to v2 for tabs in properties

Port this ticket to v2
hawtio/hawtio#1904

The to icon is has wrong link

See the screenshot. The to icon on the left is wrong. And I fixed it in the console on the right hand side.

The wrong url is having /java/java 2 times as prefix instead of only 1.

Camel plugin - Add page for endpoint registry

In the upcoming Camel 2.16 we have more stats about incoming and outgoing endpoints. So lets add a page to show that.

OSGi declarative services Deactivate button attempts to use non-existent MBean method

The OSGi declarative services detail view provides an 'Deactivate button'. This attempts to invoke a non-existent MBean method named 'deactiveateComponent'. It should be 'deactivateComponent'.

Camel - Cannot show message headers

In the browse endpoint and trace and debug functions then the headers are not shown. There is a expander to show them, but the headerHtml is not shown, despite the source code builds a structure with the data.

Camel route fragment source out of date

When updating the Routes source or a specific route source and navigating to a route fragment, the route fragment source is out of date.

Camel Profile: JavaScript errors

Description of problem:
JavaScript errors in Camel Profile tab

Steps to Reproduce:

1. Open Web console in Chrome
2. Select the Camel tab
3. Select a route
4. Select the Profile tab
5. You can see JavaScript error in the Chrome console

Actual results:
TypeError: Cannot set property 'length' of undefined
at listener (hawtio-ui.js:113)
at Object.$watchCollectionAction [as fn] (angular.js:14277)
at Scope.$digest (angular.js:14412)
at Scope.$apply (angular.js:14675)
at angular.js:16423
at completeOutstandingRequest (angular.js:4940)
at angular.js:5328

Expected results:
no errors

Camel - the slider should position lower

[16:46:02] gashcrumb howdy, btw i would like the hawtio-slider to be able to position itself lower - currently it slides in on the top of the screen
[16:46:26] i wonder if from top of u head would know if there is an option or so way to say slide with top corner from this position
[16:46:41] eg the idea is to keep top half for the visual camel route and then the 2nd half where it can slide in
[16:54:22] jpkroehling (~jpkroehli@redhat/jboss/jpkroehling) left IRC. (Quit: Leaving)
[16:56:59] jpkroehling (~jpkroehli@redhat/jboss/jpkroehling) joined the channel.
[17:02:58] jcordes (~[email protected]) left IRC. (Ping timeout: 264 seconds)
[17:11:36] wramblin_wreck (~[email protected]) joined the channel.
[17:16:17] wramblin_wreck (~[email protected]) left IRC. (Ping timeout: 265 seconds)
[17:21:47] davsclaus: yeah, think there's a height option, one sec let me check
[17:23:19] davsclaus: yep, you can pass 'top="10%"' or whatever
[17:23:35] and then also 'height="80%"' to change the height of the slideout
[17:23:43] ah thanks
[17:23:45] 10% and 80% there are the defaults
[17:23:58] and it's relative to the window viewport

Camel plugin - hide Debug slideout when not stopped in a breakpoint

In the Camel Debug page, hide the "Breakpoint suspended at" slideout when not stopped at any breakpoint.

Camel route fragment fails to update

Steps to Reproduce:

1. Open Web console
2. Go to Camel tab -> -> Source ->
3. Update source
4. Click Update button

Error printed on the browser console:
[Core] Operation addOrUpdateRoutesFromXml(java.lang.String) failed due to: java.lang.IllegalArgumentException : Unmarshalled object is an unsupported type: org.apache.camel.model.FromDefinition -> From[timer:foo1]

The source code is not updated.

Camel plugin - Add 2.16 model

The model which is generated for v1 should be ported to v2

ActiveMQ - Send message adds a JS header

Sending a message to an ActiveMQ queue adds a JMS header. See screenshot

Deleting all camel contexts leaves camel tab in unclean state

If you delete all available Camel contexts, the view you're left with is a bit messy....

The Camel tab link is removed from the sidebar (as there's no active Camel apps anymore), but the context tree is still visible (but somewhat broken) showing the remnants of the last deleted context.

Primary key not defined for simple data tables

A number of simple data tables aren't working due to missing primary key. The entities don't contain an id, _id, _key, or name property and the configuration options don't specify the primaryKeyFn.
More details in the hawtio-ui demo page.

ActiveMQ plugin - Browse Queue doesn't load messages at initial access

We need to push the refresh button to view messages in a queue. It should show messages immediately instead.

Description element should not generate a new box

Hi
It would be great if the Route Diagram did not display the element as separate box.

Example:

A description
$.name

The above generates a separate box for the description element.

Ideally the description should be shown when hovering over the setProperty box. But even just filter out the description boxes would be an improvement.

Kind regards
/Johan

Camel plugin - Add data format as folder

like components so we can see them and also their documentation. This requires Camel 2.16 onwards.

Camel tracer - The slider does not work to show the traced or debugged message

eg clicking on the blue message id should show a slider with message details. This also does not work for the debugger.

Bower warning about the "main" field

When installing hawtio-integration using Bower, the following message is printed:

bower hawtio-integration#~2.0.3 invalid-meta The "main" field has to contain only 1 file per filetype; found multiple .js files: ["dist/metrics-watcher.js","dist/camelModel.js","dist/hawtio-integration.js"]

Bower expects only one main JavaScript file.