From aff7687d3f25c22e067b247a649c33648ccbdbd0 Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Mon, 9 Dec 2024 08:21:22 +0000 Subject: [PATCH 1/4] ARTEMIS-5197 - List broker name prominently in console --- .../src/artemis-extension/artemis/Artemis.tsx | 23 +++++++++++++++++-- .../artemis-extension/artemis/ArtemisJMX.tsx | 22 ++++++++++++++++-- .../artemis/artemis-service.ts | 10 ++++++-- .../artemis/status/Status.tsx | 2 +- 4 files changed, 50 insertions(+), 7 deletions(-) diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/Artemis.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/Artemis.tsx index 35fec0e..2ca5bb1 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/Artemis.tsx +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/Artemis.tsx @@ -14,16 +14,35 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react' +import React, { useEffect, useState } from 'react' import { ArtemisTabs } from './views/ArtemisTabView'; import { PageSection, TextContent, Text, PageSectionVariants, Page } from '@patternfly/react-core'; import { Grid } from '@patternfly/react-core'; import { GridItem } from '@patternfly/react-core'; +import { artemisService } from './artemis-service'; +import { eventService } from '@hawtio/react'; export const Artemis: React.FunctionComponent = () => { + const [brokerName, setBrokerName] = useState(""); + + useEffect(() => { + const getBrokerInfo = async () => { + artemisService.getBrokerInfo() + .then((brokerInfo) => { + setBrokerName(brokerInfo.name) + }) + .catch((error: string) => { + eventService.notify({ + type: 'warning', + message: error, + }) + }); + } + getBrokerInfo(); + }, [brokerName]) return ( @@ -31,7 +50,7 @@ export const Artemis: React.FunctionComponent = () => { - Broker + Broker: {brokerName} diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisJMX.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisJMX.tsx index 0fcaa01..deb59ba 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisJMX.tsx +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisJMX.tsx @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react' +import React, { useEffect, useState } from 'react' import { CubesIcon } from '@patternfly/react-icons' import Split from 'react-split' import { ArtemisContext, useArtemisTree } from './context'; @@ -24,13 +24,31 @@ import { Grid } from '@patternfly/react-core'; import { GridItem } from '@patternfly/react-core'; import { ArtemisJMXTabs } from './views/ArtemisJMXTabView'; import './artemisJMX.css' +import { eventService } from '@hawtio/react'; +import { artemisService } from './artemis-service'; export const ArtemisJMX: React.FunctionComponent = () => { const { tree, selectedNode, brokerNode, setSelectedNode, findAndSelectNode } = useArtemisTree(); + const [brokerName, setBrokerName] = useState(""); + useEffect(() => { + const getBrokerInfo = async () => { + artemisService.getBrokerInfo() + .then((brokerInfo) => { + setBrokerName(brokerInfo.name) + }) + .catch((error: string) => { + eventService.notify({ + type: 'warning', + message: error, + }) + }); + } + getBrokerInfo(); + }, [brokerName]) return ( @@ -38,7 +56,7 @@ export const ArtemisJMX: React.FunctionComponent = () => { - Broker + Broker: {brokerName} diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts index b97ce7f..52fd901 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts @@ -144,9 +144,11 @@ const typeLabels = ["DEFAULT", "1", "object", "text", "bytes", "map", "stream", class ArtemisService { private brokerObjectName: Promise + private brokerInfo: Promise constructor() { this.brokerObjectName = this.initBrokerObjectName(); + this.brokerInfo = this.initBrokerInfo(); } private async initBrokerObjectName(): Promise { @@ -157,7 +159,7 @@ class ArtemisService { - async createBrokerInfo(): Promise { + async initBrokerInfo(): Promise { return new Promise(async (resolve, reject) => { var brokerObjectName = await this.brokerObjectName; var response = await jolokiaService.readAttributes(brokerObjectName); @@ -196,10 +198,14 @@ class ArtemisService { }); } + async getBrokerInfo(): Promise { + return await this.brokerInfo; + } + async createBrokerTopology(): Promise { return new Promise(async (resolve, reject) => { try { - var brokerInfo = await this.createBrokerInfo(); + var brokerInfo = await this.getBrokerInfo(); var brokerTopology: BrokerTopology = { broker: brokerInfo, addresses: [] diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/status/Status.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/status/Status.tsx index a7b99ec..acc9ba0 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/status/Status.tsx +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/status/Status.tsx @@ -55,7 +55,7 @@ export const Status: React.FunctionComponent = () => { const [showOperationsDialog, setShowOperationsDialog] = useState(false); useEffect(() => { const getBrokerInfo = async () => { - artemisService.createBrokerInfo() + artemisService.getBrokerInfo() .then((brokerInfo) => { setBrokerInfo(brokerInfo) }) From e4777aa4b972a55d895267554b98e7bbadcfafac Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Mon, 9 Dec 2024 08:30:13 +0000 Subject: [PATCH 2/4] ARTEMIS-5192 - Reset selected items when changing page size in web console --- .../src/artemis-extension/artemis/messages/MessagesTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/MessagesTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/MessagesTable.tsx index 4347b8e..13755d8 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/MessagesTable.tsx +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/MessagesTable.tsx @@ -109,6 +109,7 @@ export const MessagesTable: React.FunctionComponent = props => { const handlePerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number) => { artemisPreferencesService.saveTablePageSize(columnStorage.messages, newPerPage) setPerPage(newPerPage); + selectAllMessages(false); }; const handleColumnsModalToggle = () => { From a03c86f793e75d23f24847b54c8d7df54a946ce5 Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Mon, 9 Dec 2024 09:06:17 +0000 Subject: [PATCH 3/4] ARTEMIS-5195 - lightened row hover color --- .../artemis-extension/public/css/activemq.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/artemis-console-extension/artemis-extension/public/css/activemq.css b/artemis-console-extension/artemis-extension/public/css/activemq.css index c679062..211ea38 100644 --- a/artemis-console-extension/artemis-extension/public/css/activemq.css +++ b/artemis-console-extension/artemis-extension/public/css/activemq.css @@ -115,7 +115,7 @@ svg.pf-v5-svg { /*These change the row in a table when hovered over*/ .table-hover>tbody>tr:hover { - background-color: var(--artemis-global--primary-color--200); + background-color: var(--artemis-global--primary-color--300); } .table-hover>tbody>tr:hover td { @@ -129,7 +129,7 @@ select>option:active { } tbody>tr:hover { - background-color: var(--artemis-global--primary-color--200); + background-color: var(--artemis-global--primary-color--300); } /*These button settings control the color of the buttons when clicked, hovered or visited*/ @@ -175,7 +175,7 @@ tbody>tr:hover { /*This changes the hover color in all the tables*/ .table-hover tbody tr:hover td.focus { -background-color: var(--artemis-global--primary-color--200); +background-color: var(--artemis-global--primary-color--300); } :root { From f43dff004d67316f0e416b3c57d896836df8c8f8 Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Mon, 9 Dec 2024 17:19:54 +0000 Subject: [PATCH 4/4] ARTEMIS-5204 - Backups not showing in console --- .../artemis-extension/public/css/activemq.css | 4 + .../artemis/artemis-service.ts | 3 + .../artemis/brokers/BrokerDiagram.tsx | 89 ++++++++++++++++++- 3 files changed, 95 insertions(+), 1 deletion(-) diff --git a/artemis-console-extension/artemis-extension/public/css/activemq.css b/artemis-console-extension/artemis-extension/public/css/activemq.css index 211ea38..979fdea 100644 --- a/artemis-console-extension/artemis-extension/public/css/activemq.css +++ b/artemis-console-extension/artemis-extension/public/css/activemq.css @@ -57,6 +57,10 @@ svg.pf-v5-svg { fill: #c12766; } +.pf-topology__node.artemisBackupBroker.pf-m-info .pf-topology__node__background { + stroke: #82171b; + fill: #cf242a; +} .pf-topology__node.artemisAddress.pf-m-info .pf-topology__node__background { stroke: #2b326e; diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts index 52fd901..85e4ed7 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-service.ts @@ -206,6 +206,9 @@ class ArtemisService { return new Promise(async (resolve, reject) => { try { var brokerInfo = await this.getBrokerInfo(); + var brokerObjectName = await this.brokerObjectName; + const topology = await jolokiaService.execute(brokerObjectName, LIST_NETWORK_TOPOLOGY_SIG) as string; + brokerInfo.networkTopology = new BrokerNetworkTopology(JSON.parse(topology)); var brokerTopology: BrokerTopology = { broker: brokerInfo, addresses: [] 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 2823f0f..873dc2a 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 @@ -63,6 +63,7 @@ import { Attributes } from '@hawtio/react'; import { ToolbarItem, Select, SelectOption, Button, MenuToggleElement, MenuToggle, SelectList } from '@patternfly/react-core'; import { createAddressObjectName, createQueueObjectName } from '../util/jmx'; import { ArtemisContext } from '../context'; +import { log } from '../globals'; const BadgeColors = [ @@ -143,7 +144,35 @@ const BrokerCustomNode: React.FC - + + + + ); +}; + +const BrokerBackupCustomNode: React.FC = ({ element, onSelect, selected, ...rest }) => { + const data = element.getData(); + const selectNode = data.selectNode; + const Icon = ClusterIcon; + const badgeColors = BadgeColors.find(badgeColor => badgeColor.name === data.badge); + const { viewOptions } = element.getController().getState(); + + return ( + selectNode(data)} + selected={selected} + {...rest} + > + + ); @@ -185,6 +214,9 @@ const customComponentFactory: ComponentFactory = (kind: ModelKind, type: string) case 'broker': return withDndDrop(nodeDropTargetSpec([CONNECTOR_TARGET_DROP]))( withDragNode(nodeDragSourceSpec('node', true, true))(BrokerCustomNode)); + case 'backupBroker': + return withDndDrop(nodeDropTargetSpec([CONNECTOR_TARGET_DROP]))( + withDragNode(nodeDragSourceSpec('node', true, true))(BrokerBackupCustomNode)); case 'resource': return withDndDrop(nodeDropTargetSpec([CONNECTOR_TARGET_DROP]))( withDragNode(nodeDragSourceSpec('node', true, true))(ResourceNode)); @@ -408,6 +440,61 @@ export const BrokerDiagram: React.FunctionComponent = () => { }; newBrokerEdges.push(brokerEdge); } + if(broker.backup) { + log.debug("adding backup to this live") + var backupBrokerNode: NodeModel = { + id: broker.nodeID + "backup", + type: 'backupBroker', + label: broker.backup, + width: BROKER_NODE_DIAMETER, + height: BROKER_NODE_DIAMETER, + shape: NodeShape.ellipse, + status: NodeStatus.info, + data: { + badge: 'Broker', + type: "backupBroker", + selectNode: selectNode + } + } + newBrokerNodes.push(backupBrokerNode); + if (viewOptions.showConnectors) { + var brokerEdge: EdgeModel = { + id: 'broker-edge-' + brokerTopology.broker.nodeID + "backup" + '-broker-node-' + broker.nodeID, + type: 'edge', + source: broker.nodeID, + target: broker.nodeID + "backup", + edgeStyle: EdgeStyle.default + }; + newBrokerEdges.push(brokerEdge); + } + } + } else if (broker.backup) { + log.debug("adding backup to this live") + var backupBrokerNode: NodeModel = { + id: broker.nodeID + "backup", + type: 'backupBroker', + label: broker.backup, + width: BROKER_NODE_DIAMETER, + height: BROKER_NODE_DIAMETER, + shape: NodeShape.ellipse, + status: NodeStatus.info, + data: { + badge: 'Broker', + type: "backupBroker", + selectNode: selectNode + } + } + newBrokerNodes.push(backupBrokerNode); + if (viewOptions.showConnectors) { + var brokerEdge: EdgeModel = { + id: 'broker-edge-' + brokerTopology.broker.nodeID + "backup" + '-broker-node-' + broker.nodeID, + type: 'edge', + source: brokerTopology.broker.nodeID, + target: broker.nodeID + "backup", + edgeStyle: EdgeStyle.default + }; + newBrokerEdges.push(brokerEdge); + } } }