This is an automated email from the ASF dual-hosted git repository.
tabish pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/activemq-artemis-console.git
The following commit(s) were added to refs/heads/main by this push:
new 72ca0ee ARTEMIS-5510 - add a scrollbar to thr jmx tree
72ca0ee is described below
commit 72ca0ee43f9b0322c5e36c50875076b8bc5d14b1
Author: Andy Taylor <[email protected]>
AuthorDate: Fri May 30 12:06:24 2025 +0100
ARTEMIS-5510 - add a scrollbar to thr jmx tree
This also will add the mbean name back to the top of Artemis JMX as in the
old console
---
.../artemis-console-plugin/src/ArtemisJMX.tsx | 23 +-------
.../src/{artemisJMX.css => ArtemisJMXContent.css} | 10 ++--
.../src/ArtemisJMXContent.tsx | 59 +++++++++++++++++++
.../src/{artemisJMX.css => ArtemisTreeView.css} | 39 +++++++++++--
.../artemis-console-plugin/src/ArtemisTreeView.tsx | 2 +
.../artemis-console-plugin/src/artemisJMX.css | 14 ++++-
.../src/queues/CreateQueue.tsx | 2 +-
.../src/views/ArtemisJMXTabView.tsx | 66 +++++++++++++---------
8 files changed, 158 insertions(+), 57 deletions(-)
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMX.tsx
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMX.tsx
index 2f6e8b5..7471f04 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMX.tsx
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMX.tsx
@@ -14,20 +14,18 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { CubesIcon } from '@patternfly/react-icons'
import Split from 'react-split'
import { ArtemisContext, useArtemisTree } from './context';
import { ArtemisTreeView } from './ArtemisTreeView';
-import { PageSection, TextContent, Text, PageSectionVariants, EmptyState,
EmptyStateIcon, EmptyStateVariant, Title } from '@patternfly/react-core';
-import { ArtemisJMXTabs } from './views/ArtemisJMXTabView';
import './artemisJMX.css'
+import { ArtemisJmxContent } from './ArtemisJMXContent';
export const ArtemisJMX: React.FunctionComponent = () => {
const { tree, selectedNode, brokerNode, setSelectedNode, findAndSelectNode }
= useArtemisTree();
- return (
+ return (
<ArtemisContext.Provider value={{ tree, selectedNode,brokerNode,
setSelectedNode, findAndSelectNode }}>
<Split className='artemis-split' sizes={[30, 70]} minSize={200}
gutterSize={5}>
@@ -35,22 +33,7 @@ export const ArtemisJMX: React.FunctionComponent = () => {
<ArtemisTreeView />
</div>
<div>
- {!selectedNode &&
- <PageSection variant={PageSectionVariants.light} isFilled>
- <EmptyState variant={EmptyStateVariant.full}>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel='h1' size='lg'>
- Select Artemis Node
- </Title>
- </EmptyState>
- </PageSection>
- }
- {selectedNode &&
-
- <PageSection isFilled>
- <ArtemisJMXTabs node={selectedNode}/>
- </PageSection>
- }
+ <ArtemisJmxContent/>
</div>
</Split>
</ArtemisContext.Provider>
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.css
similarity index 89%
copy from
artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
copy to
artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.css
index c5f185a..2e16dec 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.css
@@ -14,7 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.artemis-split {
- display: flex;
- flex-direction: row;
- }
\ No newline at end of file
+#artemis-jmx-content-main > article {
+ overflow: auto;
+}
+#artemis-jmx-content {
+ height: 100%;
+}
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.tsx
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.tsx
new file mode 100644
index 0000000..ea31eba
--- /dev/null
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisJMXContent.tsx
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PageGroup, PageSection, PageSectionVariants, Title, Divider, Text,
EmptyState, EmptyStateIcon, EmptyStateVariant } from "@patternfly/react-core"
+import { useContext } from "react";
+import { ArtemisContext } from "./context";
+import { CubesIcon } from "@patternfly/react-icons";
+import './ArtemisJMXContent.css'
+import { ArtemisJMXTabs } from "./views/ArtemisJMXTabView";
+
+export const ArtemisJmxContent: React.FunctionComponent = () => {
+
+ const { selectedNode } = useContext(ArtemisContext);
+
+ if(!selectedNode) {
+ return (
+ <PageSection variant={PageSectionVariants.light} isFilled>
+ <EmptyState variant={EmptyStateVariant.full}>
+ <EmptyStateIcon icon={CubesIcon} />
+ <Title headingLevel='h1' size='lg'>
+ Select Artemis Node
+ </Title>
+ </EmptyState>
+ </PageSection>
+ )
+ }
+
+ return (
+ <PageGroup id='artemis-jmx-content'>
+ <PageSection id='jmx-content-header'
variant={PageSectionVariants.light}>
+ <Title headingLevel='h1'>{selectedNode.name}</Title>
+ <Text component='small'>{selectedNode.objectName}</Text>
+ </PageSection>
+ <Divider />
+ <PageSection
+ id='artemis-jmx-content-main'
+ variant={PageSectionVariants.light}
+ padding={{ default: 'noPadding' }}
+ hasOverflowScroll
+ aria-label='jmx-content-main'
+ >
+ <ArtemisJMXTabs/>
+ </PageSection>
+ </PageGroup>
+ )
+}
\ No newline at end of file
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.css
similarity index 54%
copy from
artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
copy to
artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.css
index c5f185a..c3fc5c0 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.css
@@ -14,7 +14,38 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.artemis-split {
- display: flex;
- flex-direction: row;
- }
\ No newline at end of file
+#artemis-tree-view .pf-v5-c-tree-view__list {
+ height: 100%;
+}
+
+#artemis-tree-view > .pf-v5-c-tree-view__list {
+ max-height: 83vh;
+ overflow: auto;
+}
+
+#artemis-tree-view .pf-v5-c-tree-view__node {
+ padding-top: 1px;
+ padding-bottom: 1px;
+}
+
+#artemis-tree-view .pf-v5-c-tree-view__node-toggle {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ padding-left: 6px;
+ padding-right: 6px;
+}
+
+#artemis-tree-view .pf-v5-c-tree-view__node-text {
+ padding-top: 2px;
+ font-size: smaller;
+}
+
+#artemis-tree-view .pf-v5-c-tree-view__node-icon {
+ flex-shrink: 0;
+}
+
+#artemis-tree-view .pf-v5-c-tree-view__node-text {
+ overflow-x: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.tsx
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.tsx
index e713c58..4d0340d 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.tsx
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/ArtemisTreeView.tsx
@@ -20,6 +20,8 @@ import React, { ChangeEvent, useContext, useEffect, useState
} from 'react'
import { useNavigate } from 'react-router-dom'
import { ArtemisContext } from './context'
import { artemisJMXPluginPath } from './globals'
+import './ArtemisTreeView.css'
+
/**
* Expansion requires more than 2 states since the expandAll
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
index c5f185a..be5f109 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemisJMX.css
@@ -17,4 +17,16 @@
.artemis-split {
display: flex;
flex-direction: row;
- }
\ No newline at end of file
+ height: calc(100vh - 85px);
+}
+
+.gutter {
+ background-color: #eee;
+ background-repeat: no-repeat;
+ background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+ background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+ cursor: col-resize;
+}
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/CreateQueue.tsx
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/CreateQueue.tsx
index 3b34979..05afa0d 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/CreateQueue.tsx
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/queues/CreateQueue.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ActionGroup, Button, Checkbox, Flex, FlexItem, Form, FormGroup,
NumberInput, Radio, TextInput, Title, Text, TextContent, Popover, Tooltip }
from '@patternfly/react-core';
+import { ActionGroup, Button, Checkbox, Flex, FlexItem, Form, FormGroup,
NumberInput, Radio, TextInput, Title, Text, TextContent, Popover, Tooltip,
PageSection } from '@patternfly/react-core';
import React, { FormEvent, useState } from 'react'
import { TrashIcon, OutlinedQuestionCircleIcon, InfoCircleIcon } from
'@patternfly/react-icons'
import { artemisService } from '../artemis-service';
diff --git
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/views/ArtemisJMXTabView.tsx
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/views/ArtemisJMXTabView.tsx
index f0dabe4..d8e041b 100644
---
a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/views/ArtemisJMXTabView.tsx
+++
b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/views/ArtemisJMXTabView.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import React, { useContext, useState } from 'react'
-import { Tabs, Tab, TabTitleText, Button, Modal, ModalVariant } from
'@patternfly/react-core';
+import { Tabs, Tab, TabTitleText, Button, Modal, ModalVariant, EmptyState,
EmptyStateIcon, EmptyStateVariant, PageSection, PageSectionVariants, Title }
from '@patternfly/react-core';
import { Attributes, Chart, MBeanNode, Operations } from '@hawtio/react';
import { CreateQueue } from '../queues/CreateQueue';
import { DeleteAddress } from '../addresses/DeleteAddress';
@@ -26,13 +26,11 @@ import { Message, MessageView } from
'../messages/MessageView';
import { DeleteQueue } from '../queues/DeleteQueue';
import { artemisService } from '../artemis-service';
import { ArtemisContext } from '../context';
+import { CubesIcon } from '@patternfly/react-icons';
-export type JMXData = {
- node: MBeanNode
-}
-export const ArtemisJMXTabs: React.FunctionComponent<JMXData> = (data:
JMXData) => {
+export const ArtemisJMXTabs: React.FunctionComponent = () => {
const initialMessage: Message = {
messageID: '',
address: '',
@@ -48,18 +46,23 @@ export const ArtemisJMXTabs:
React.FunctionComponent<JMXData> = (data: JMXData)
userID: ''
};
+ const { selectedNode, brokerNode } = useContext(ArtemisContext);
const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
const [ showMessageDialog, setShowMessageDialog ] = useState<boolean>(false);
const [ currentMessage, setCurrentMessage ] =
useState<Message>(initialMessage);
- const isAddress = isAnAddress(data.node)
- const isAQueue = isQueue(data.node);
- const { selectedNode, brokerNode } = useContext(ArtemisContext);
- var prop = data.node.getProperty("routing-type");
+ if(!selectedNode) {
+ return ('');
+ }
+
+ const isAddress = isAnAddress(selectedNode)
+ const isAQueue = isQueue(selectedNode);
+
+ var prop = selectedNode.getProperty("routing-type");
const routingType: string = prop === undefined?'':prop;
- prop = data.node.getProperty("address");
+ prop = selectedNode.getProperty("address");
const address: string | undefined = prop === undefined?'':prop;
- prop = data.node.getProperty("queue");
+ prop = selectedNode.getProperty("queue");
const queue: string | undefined = prop === undefined?'':prop;
const handleTabClick = ( event: React.MouseEvent<any> | React.KeyboardEvent
| MouseEvent, tabIndex: string | number
@@ -97,14 +100,18 @@ export const ArtemisJMXTabs:
React.FunctionComponent<JMXData> = (data: JMXData)
{ isAddress && artemisService.canCreateQueue(brokerNode) &&
<Tab eventKey={3} title={<TabTitleText>Create Queue</TabTitleText>}
aria-label="Create Queue">
{activeTabKey === 3 &&
- <CreateQueue address={data.node.name}/>
+ <PageSection padding={{default: 'padding'}}>
+ <CreateQueue address={selectedNode.name}/>
+ </PageSection>
}
</Tab>
}
{ isAddress && artemisService.canDeleteAddress(brokerNode) &&
<Tab eventKey={4} title={<TabTitleText>Delete
Address</TabTitleText>} aria-label="">
{activeTabKey === 4 &&
- <DeleteAddress address={data.node.name}/>
+ <PageSection padding={{default: 'padding'}}>
+ <DeleteAddress address={selectedNode.name}/>
+ </PageSection>
}
</Tab>
}
@@ -119,32 +126,37 @@ export const ArtemisJMXTabs:
React.FunctionComponent<JMXData> = (data: JMXData)
{ isAQueue && artemisService.checkCanBrowseQueue(selectedNode as
MBeanNode) &&
<Tab eventKey={6} title={<TabTitleText>Browse
Messages</TabTitleText>} aria-label="">
{activeTabKey === 6 &&
- <><MessagesTable address={address} queue={queue}
routingType={routingType} selectMessage={selectMessage} back={undefined}
/><Modal
- aria-label='message-view-modal'
- variant={ModalVariant.medium}
- isOpen={showMessageDialog}
- onClose={() => setShowMessageDialog(false)}
- actions={[
- <Button key="close" variant="secondary" onClick={() =>
setShowMessageDialog(false)}>
- Close
- </Button>
- ]}>
- <MessageView currentMessage={currentMessage} />
- </Modal></>
+ <PageSection padding={{default: 'padding'}}>
+ <MessagesTable address={address} queue={queue}
routingType={routingType} selectMessage={selectMessage} back={undefined} />
+ <Modal
+ aria-label='message-view-modal'
+ variant={ModalVariant.medium}
+ isOpen={showMessageDialog}
+ onClose={() => setShowMessageDialog(false)}
+ actions={[
+ <Button key="close" variant="secondary" onClick={() =>
setShowMessageDialog(false)}>
+ Close
+ </Button>
+ ]}>
+ <MessageView currentMessage={currentMessage} />
+ </Modal>
+ </PageSection>
}
</Tab>
}
{ isAQueue && artemisService.canDeleteQueue(brokerNode) &&
<Tab eventKey={7} title={<TabTitleText>Delete Queue</TabTitleText>}
aria-label="">
{activeTabKey === 7 &&
- <DeleteQueue queue={data.node.name} address={address}
routingType={routingType}/>
+ <PageSection padding={{default: 'padding'}}>
+ <DeleteQueue queue={selectedNode.name} address={address}
routingType={routingType}/>
+ </PageSection>
}
</Tab>
}
{ isAQueue && artemisService.checkCanSendMessageToQueue(selectedNode
as MBeanNode) &&
<Tab eventKey={8} title={<TabTitleText>Send Message</TabTitleText>}
aria-label="">
{activeTabKey === 8 &&
- <SendMessage queue={data.node.name} routingType={routingType}
address={address} isAddress={false}/>
+ <SendMessage queue={selectedNode.name}
routingType={routingType} address={address} isAddress={false}/>
}
</Tab>
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
For further information, visit: https://activemq.apache.org/contact
