From 501362706a2046cdfef381c3ba5e8982df46331d Mon Sep 17 00:00:00 2001 From: Tadayoshi Sato Date: Fri, 27 Oct 2023 16:39:44 +0900 Subject: [PATCH 1/2] fix(connect): change header hint from expandable section to popover --- .../hawtio/src/plugins/connect/Connect.css | 5 + .../hawtio/src/plugins/connect/Connect.tsx | 101 ++++++++++-------- 2 files changed, 60 insertions(+), 46 deletions(-) create mode 100644 packages/hawtio/src/plugins/connect/Connect.css diff --git a/packages/hawtio/src/plugins/connect/Connect.css b/packages/hawtio/src/plugins/connect/Connect.css new file mode 100644 index 00000000..0f8acf42 --- /dev/null +++ b/packages/hawtio/src/plugins/connect/Connect.css @@ -0,0 +1,5 @@ +#connect-header-title svg { + margin-left: 0.5rem; + width: 1rem; + vertical-align: middle; +} diff --git a/packages/hawtio/src/plugins/connect/Connect.tsx b/packages/hawtio/src/plugins/connect/Connect.tsx index abdb88b7..31907235 100644 --- a/packages/hawtio/src/plugins/connect/Connect.tsx +++ b/packages/hawtio/src/plugins/connect/Connect.tsx @@ -11,25 +11,27 @@ import { Dropdown, DropdownItem, DropdownPosition, - ExpandableSection, KebabToggle, Modal, ModalVariant, PageSection, + Popover, Text, TextContent, + Title, Toolbar, ToolbarContent, ToolbarItem, } from '@patternfly/react-core' import { OutlinedQuestionCircleIcon, PluggedIcon, PlusIcon, UnpluggedIcon } from '@patternfly/react-icons' import React, { useContext, useEffect, useState } from 'react' +import { Route, Routes } from 'react-router-dom' +import './Connect.css' import { ConnectImportModal } from './ConnectImportModal' import { ConnectModal } from './ConnectModal' import { DELETE } from './connections' import { ConnectContext, useConnections } from './context' import { log } from './globals' -import { Route, Routes } from 'react-router-dom' import { ConnectLogin } from './login/ConnectLogin' export const Connect: React.FunctionComponent = () => { @@ -38,10 +40,9 @@ export const Connect: React.FunctionComponent = () => { return ( - - Connect - - + + Connect <ConnectHint /> + @@ -53,48 +54,56 @@ export const Connect: React.FunctionComponent = () => { ) } -const ConnectHint: React.FunctionComponent = () => ( - - Hint +const ConnectHint: React.FunctionComponent = () => { + const content = ( + + + This page allows you to connect to remote processes which{' '} + + already have a{' '} + + Jolokia agent + {' '} + running inside them + + . You will need to know the host name, port and path of the Jolokia agent to be able to connect. - } - > - - This page allows you to connect to remote processes which{' '} - - already have a{' '} - - Jolokia agent + + If the process you wish to connect to does not have a Jolokia agent inside, please refer to the{' '} + + Jolokia documentation {' '} - running inside them - - . You will need to know the host name, port and path of the Jolokia agent to be able to connect. - - - If the process you wish to connect to does not have a Jolokia agent inside, please refer to the{' '} - - Jolokia documentation - {' '} - for how to add a JVM, servlet or OSGi based agent inside it. - - - If you are using{' '} - - Red Hat Fuse{' '} - - or{' '} - - Apache ActiveMQ - - , then a Jolokia agent is included by default (use context path of Jolokia agent, usually - jolokia). Or you can always just deploy hawtio inside the process (which includes the Jolokia agent, - use Jolokia servlet mapping inside hawtio context path, usually hawtio/jolokia). - - -) + for how to add a JVM, servlet or OSGi based agent inside it. + + + If you are using{' '} + + Red Hat Fuse{' '} + + or{' '} + + Apache ActiveMQ + + , then a Jolokia agent is included by default (use context path of Jolokia agent, usually + jolokia). Or you can always just deploy hawtio inside the process (which includes the Jolokia + agent, use Jolokia servlet mapping inside hawtio context path, usually hawtio/jolokia). + + + ) + + return ( + + + + ) +} const ConnectContent: React.FunctionComponent = () => { const { connections } = useContext(ConnectContext) From 1e5e033b7595981259acc0aad0e80a4ad511955c Mon Sep 17 00:00:00 2001 From: Tadayoshi Sato Date: Fri, 27 Oct 2023 16:56:26 +0900 Subject: [PATCH 2/2] fix(connect): rephrase and polish hint text for Connect plugin Fix #490 --- .../hawtio/src/plugins/connect/Connect.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/hawtio/src/plugins/connect/Connect.tsx b/packages/hawtio/src/plugins/connect/Connect.tsx index 31907235..c0fc3497 100644 --- a/packages/hawtio/src/plugins/connect/Connect.tsx +++ b/packages/hawtio/src/plugins/connect/Connect.tsx @@ -73,20 +73,16 @@ const ConnectHint: React.FunctionComponent = () => { Jolokia documentation {' '} - for how to add a JVM, servlet or OSGi based agent inside it. + for how to add a JVM, servlet, or OSGi based agent inside it. - If you are using{' '} - - Red Hat Fuse{' '} - - or{' '} - - Apache ActiveMQ - - , then a Jolokia agent is included by default (use context path of Jolokia agent, usually - jolokia). Or you can always just deploy hawtio inside the process (which includes the Jolokia - agent, use Jolokia servlet mapping inside hawtio context path, usually hawtio/jolokia). + Some Java applications such as{' '} + + Apache ActiveMQ Artemis + {' '} + include a Jolokia agent by default (use context path of Jolokia agent, usually jolokia). Or you can + always just deploy Hawtio inside the process, which includes the Jolokia servlet agent (use Jolokia servlet + mapping inside Hawtio context path, usually hawtio/jolokia). )