You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@activemq.apache.org by jb...@apache.org on 2024/11/27 15:33:47 UTC
(activemq-artemis-console) branch main updated: ARTEMIS-5186 - UI Consistency Improvements
This is an automated email from the ASF dual-hosted git repository.
jbertram 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 9a041be ARTEMIS-5186 - UI Consistency Improvements
9a041be is described below
commit 9a041be0a5666ad65bf133e200d8289b8fcc7a7b
Author: Andy Taylor <an...@gmail.com>
AuthorDate: Wed Nov 27 13:14:52 2024 +0000
ARTEMIS-5186 - UI Consistency Improvements
---
.../artemis-extension/public/css/activemq.css | 4 ++
.../artemis/addresses/AddressesTable.tsx | 2 +
.../artemis/addresses/CreateAddress.tsx | 15 +++++--
.../artemis/addresses/DeleteAddress.tsx | 17 ++++++--
.../artemis/brokers/BrokerDiagram.tsx | 12 +++---
.../artemis/connections/ConnectionsTable.tsx | 2 +-
.../artemis/messages/SendMessage.tsx | 2 +-
.../artemis/queues/CreateQueue.tsx | 4 +-
.../artemis/queues/DeleteQueue.tsx | 26 +++++++++---
.../artemis-extension/artemis/util/ConnectHint.tsx | 47 ----------------------
10 files changed, 61 insertions(+), 70 deletions(-)
diff --git a/artemis-console-extension/artemis-extension/public/css/activemq.css b/artemis-console-extension/artemis-extension/public/css/activemq.css
index 4f0adf3..c679062 100644
--- a/artemis-console-extension/artemis-extension/public/css/activemq.css
+++ b/artemis-console-extension/artemis-extension/public/css/activemq.css
@@ -47,6 +47,10 @@ svg text {
font-family: PatternFlyIcons-webfont;
}
+svg.pf-v5-svg {
+ fill: #c12766;
+}
+
.pf-topology__node.artemisBroker.pf-m-info .pf-topology__node__background {
stroke: #801944;
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx
index 329525e..bc19182 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx
@@ -215,6 +215,7 @@ export const AddressesTable: React.FunctionComponent<Navigate> = (navigate) => {
aria-label='attributes-modal'
variant={ModalVariant.medium}
isOpen={showAttributesDialog}
+ onClose={() => setShowAttributesDialog(false)}
actions={[
<Button key="close" variant="primary" onClick={() => setShowAttributesDialog(false)}>
Close
@@ -226,6 +227,7 @@ export const AddressesTable: React.FunctionComponent<Navigate> = (navigate) => {
aria-label='operations-modal'
variant={ModalVariant.medium}
isOpen={showOperationsDialog}
+ onClose={() => setShowOperationsDialog(false)}
actions={[
<Button key="close" variant="primary" onClick={() => setShowOperationsDialog(false)}>
Close
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/CreateAddress.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/CreateAddress.tsx
index 7403d62..f119ec4 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/CreateAddress.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/CreateAddress.tsx
@@ -14,11 +14,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ActionGroup, Button, Form, FormGroup, Radio, TextInput, Title } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, FormGroup, Text, Popover, Radio, TextContent, TextInput, Title } from '@patternfly/react-core';
import React, { useState } from 'react'
import { artemisService } from '../artemis-service';
import { eventService } from '@hawtio/react';
-import { ConnectHint } from '../util/ConnectHint';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
export const CreateAddress: React.FunctionComponent = () => {
const [addressName, setAddressName] = useState('');
@@ -48,10 +48,17 @@ export const CreateAddress: React.FunctionComponent = () => {
})
};
+ const Hint = () => (
+ <TextContent>
+ <Text component='p'>
+ Use this page to create a new address on the broker. If you want the address to support JMS-like queues, that is point-to-point messaging, choose Anycast. If you want the address to support JMS-like topic subscriptions, that is publish-subscribe messaging, choose Multicast.
+ </Text>
+ </TextContent>
+)
+
return (
<>
- <Title headingLevel="h2">Create Address</Title>
- <ConnectHint text={['Use this page to create a new address on the broker. If you want the address to support JMS-like queues, that is point-to-point messaging, choose Anycast. If you want the address to support JMS-like topic subscriptions, that is publish-subscribe messaging, choose Multicast.']}/>
+ <Title headingLevel="h2">Create Address{' '}<Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover></Title>
<br/>
<Form>
<FormGroup label="Address Name">
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/DeleteAddress.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/DeleteAddress.tsx
index f10e34d..de5a419 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/DeleteAddress.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/DeleteAddress.tsx
@@ -14,12 +14,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ActionGroup, Text, Button, Form, Icon, Modal, ModalVariant, TextContent, Title } from '@patternfly/react-core';
+import { ActionGroup, Text, Button, Form, Icon, Modal, ModalVariant, TextContent, Title, Popover } from '@patternfly/react-core';
import React, { useState } from 'react'
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import { ConnectHint } from '../util/ConnectHint';
import { eventService, workspace } from '@hawtio/react';
import { artemisService } from '../artemis-service';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
type DeleteAddressProps = {
address: string
@@ -47,10 +47,19 @@ export const DeleteAddress: React.FunctionComponent<DeleteAddressProps> = (props
})
};
+ const Hint = () => (
+ <TextContent>
+ <Text component='p'>
+ Use this page to delete the selected address on the broker. The address is deleted only if it has no queues bound to it.
+ </Text>
+ </TextContent>
+)
+
return (
<>
- <Title headingLevel="h2">Delete Address {props.address}</Title>
- <ConnectHint text={["Use this page to delete the selected address on the broker. The address is deleted only if it has no queues bound to it."]}/>
+ <Title headingLevel="h2">Delete Address {props.address}{' '}
+ <Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover>
+ </Title>
<Form>
<ActionGroup>
<Button variant="primary" onClick={() => setShowDeleteModal(true)} >Delete</Button>
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/brokers/BrokerDiagram.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/brokers/BrokerDiagram.tsx
index e6f1645..2823f0f 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/brokers/BrokerDiagram.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/brokers/BrokerDiagram.tsx
@@ -450,32 +450,32 @@ export const BrokerDiagram: React.FunctionComponent = () => {
isOpen={viewOptionsOpen}>
<SelectList>
<SelectOption
- value="show Labels"
+ value="Labels"
hasCheckbox
isSelected={viewOptions.showLabels}
onClick={() => setViewOptions(prev => ({ ...prev, showLabels: !prev.showLabels }))}>show Labels</SelectOption>
<SelectOption
- value="show Addresses"
+ value="Addresses"
hasCheckbox
isSelected={viewOptions.showAddresses}
onClick={() => setViewOptions(prev => ({ ...prev, showAddresses: !prev.showAddresses }))}>show Addresses</SelectOption>
<SelectOption
- value="show Queues"
+ value="Queues"
hasCheckbox
isSelected={viewOptions.showQueues}
onClick={() => setViewOptions(prev => ({ ...prev, showQueues: !prev.showQueues }))}>show Queues</SelectOption>
<SelectOption
- value="show Internal Addresses"
+ value="Internal Addresses"
hasCheckbox
isSelected={viewOptions.showInternalAddresses}
onClick={() => setViewOptions(prev => ({ ...prev, showInternalAddresses: !prev.showInternalAddresses }))}>show Internal Addresses</SelectOption>
<SelectOption
- value="show Internal Queues"
+ value="Internal Queues"
hasCheckbox
isSelected={viewOptions.showInternalQueues}
onClick={() => setViewOptions(prev => ({ ...prev, showInternalQueues: !prev.showInternalQueues }))}>show Internal Queues</SelectOption>
<SelectOption
- value="show Connectors"
+ value="Connectors"
hasCheckbox
isSelected={viewOptions.showConnectors}
onClick={() => setViewOptions(prev => ({ ...prev, showConnectors: !prev.showConnectors }))}>show Connectors</SelectOption>
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx
index e7dff41..6e0b681 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx
@@ -38,7 +38,7 @@ export const ConnectionsTable: React.FunctionComponent<Navigate> = (navigate) =>
{ id: 'protocol', name: 'Protocol', visible: true, sortable: true, filterable: true },
{ id: 'sessionCount', name: 'Session Count', visible: true, sortable: true, filterable: true, filter: getSessionFilter, filterTab: 2 },
{ id: 'remoteAddress', name: 'Remote Address', visible: true, sortable: true, filterable: true },
- { id: 'localAddress', name: 'Local Address"', visible: true, sortable: true, filterable: true },
+ { id: 'localAddress', name: 'Local Address', visible: true, sortable: true, filterable: true },
{ id: 'session', name: 'Session ID', visible: true, sortable: true, filterable: false },
{ id: 'creationTime', name: 'Creation Time', visible: true, sortable: true, filterable: false }
];
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/SendMessage.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/SendMessage.tsx
index 5fd9ffd..1231581 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/SendMessage.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/SendMessage.tsx
@@ -292,7 +292,7 @@ export const SendMessage: React.FunctionComponent<SendMessageProps> = (props: Se
return (
<PageSection variant='light'>
- <Title headingLevel='h1'>Send Message to {props.isAddress ? 'Address' : 'Queue'} {props.address}
+ <Title headingLevel='h2'>Send Message to {props.isAddress ? 'Address' : 'Queue'} {props.address}{' '}
<Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover></Title>
<Text component='p'> <br /></Text>
<Form onSubmit={handleSubmit}>
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/CreateQueue.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/CreateQueue.tsx
index 18cae5e..3951d82 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/CreateQueue.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/CreateQueue.tsx
@@ -127,7 +127,7 @@ export const CreateQueue: React.FunctionComponent<CreateQueueProps> = (props: Cr
)
return (
<>
- <Title headingLevel="h2">Create Queue on Address {props.address}
+ <Title headingLevel="h2">Create Queue on Address {props.address}{' '}
<Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover>
</Title>
<Text component='p'> <br /></Text>
@@ -193,7 +193,7 @@ export const CreateQueue: React.FunctionComponent<CreateQueueProps> = (props: Cr
onChange={() => handlePurgeChange(!isPurgeChecked)}
id="purge" />
</FormGroup>
- <FormGroup label="extra configuration" labelIcon={
+ <FormGroup label="Extra configuration" labelIcon={
<Tooltip content={<Text>Specify additional configuration items, that are not exposed, as a set of key-value pairs in JSON format. For example, <code>delay-before-dispatch</code> or <code>auto-delete</code>.</Text>}><InfoCircleIcon /></Tooltip>}
>
{/* eslint-disable-next-line react/jsx-no-undef */}
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/DeleteQueue.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/DeleteQueue.tsx
index fa7c28e..f66e50a 100644
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/DeleteQueue.tsx
+++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/DeleteQueue.tsx
@@ -14,11 +14,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ActionGroup, Button, Form, Modal, ModalVariant, Title } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, Modal, ModalVariant, Popover, TextContent, Title, Text } from '@patternfly/react-core';
import React, { useState } from 'react'
-import { ConnectHint } from '../util/ConnectHint';
import { eventService, workspace } from '@hawtio/react';
import { artemisService } from '../artemis-service';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
type DeleteQueueProps = {
queue: string
@@ -70,19 +70,35 @@ export const DeleteQueue: React.FunctionComponent<DeleteQueueProps> = (props: De
});
};
+ const HintDelete = () => (
+ <TextContent>
+ <Text component='p'>
+ Delete the selected broker queue. The queue is deleted only if it has no consumers bound to it.
+ </Text>
+ </TextContent>
+ )
+ const HintPurge = () => (
+ <TextContent>
+ <Text component='p'>
+ Delete all the messages in the selected broker queue.
+ </Text>
+ </TextContent>
+ )
+
return (
<>
- <Title headingLevel="h2">Delete/Purge Queue {props.queue}</Title>
- <ConnectHint text={["Delete the selected broker queue. The queue is deleted only if it has no consumers bound to it."]}/>
+ <Title headingLevel="h2">Delete/Purge Queue {props.queue}{' '}
+ </Title>
<Form>
<ActionGroup>
<Button variant="primary" onClick={() => setShowDeleteModal(true)} >Delete</Button>
+ <Text>{' '}<Popover bodyContent={HintDelete}><OutlinedQuestionCircleIcon /></Popover></Text>
</ActionGroup>
</Form>
- <ConnectHint text={["Delete all the messages in the selected broker queue."]}/>
<Form>
<ActionGroup>
<Button variant="primary" onClick={() => setShowPurgeModal(true)} >Purge</Button>
+ <Text>{' '}<Popover bodyContent={HintPurge}><OutlinedQuestionCircleIcon /></Popover></Text>
</ActionGroup>
</Form>
<Modal
diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/util/ConnectHint.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/util/ConnectHint.tsx
deleted file mode 100644
index 0814eaa..0000000
--- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/util/ConnectHint.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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 React from "react"
-import { ExpandableSection, Text } from "@patternfly/react-core"
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'
-
-export type ConnectProps = {
- text: string[]
-}
-
-export const ConnectHint: React.FunctionComponent<ConnectProps> = props => {
-
- return (
- <ExpandableSection
- displaySize='lg'
- toggleContent={
- <Text>
- <OutlinedQuestionCircleIcon />
- </Text>
- }
- >
- {
- props.text.map((text) => {
- return (
- <Text component='p'>
- {text}
- </Text>
- )
- })
- }
- </ExpandableSection>
- )
-}
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@activemq.apache.org
For additional commands, e-mail: commits-help@activemq.apache.org
For further information, visit: https://activemq.apache.org/contact