This is an automated email from the ASF dual-hosted git repository. andytaylor pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/activemq-artemis-console.git
commit 65b66a8ec4a4991294df26bb3b3a9c4c5b73cd47 Author: Grzegorz Grzybek <[email protected]> AuthorDate: Tue Jul 22 10:34:01 2025 +0200 ARTEMIS-5497: Synchronizing model changes on layout animation --- .../artemis-console-plugin/src/artemis-service.ts | 2 - .../src/brokers/BrokerDiagram.tsx | 59 ++++++++++++++-------- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemis-service.ts b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemis-service.ts index c04cea0..28be3d0 100644 --- a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemis-service.ts +++ b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/artemis-service.ts @@ -218,7 +218,6 @@ class ArtemisService { var addresses: string[] = (await this.getAllAddresses(addressFilter)); var max: number = maxAddresses < addresses.length ? maxAddresses: addresses.length; addresses = addresses.slice(0, max); - log.info() for (const address of addresses) { var queuesJson: string = await this.getQueuesForAddress(address); var queues: Queue[] = JSON.parse(queuesJson).data; @@ -404,7 +403,6 @@ class ArtemisService { return new Promise<string[]>(async (resolve, reject) => { var addressesString = await jolokiaService.execute(await this.getBrokerObjectName(), LIST_ALL_ADDRESSES_SIG, [',']) as string; if (addressesString) { - var addressArray = addressesString.split(',') if (addressFilter && addressFilter.length > 0) { var filtered = addressArray.filter(function (str) { return str.includes(addressFilter); }); diff --git a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/brokers/BrokerDiagram.tsx b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/brokers/BrokerDiagram.tsx index ef1f436..6b24632 100644 --- a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/brokers/BrokerDiagram.tsx +++ b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/brokers/BrokerDiagram.tsx @@ -57,10 +57,10 @@ import { withTargetDrag, TopologySideBar } from '@patternfly/react-topology'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { artemisService, BrokerInfo, BrokerTopology } from '../artemis-service'; import { Attributes } from '@hawtio/react'; -import { ToolbarItem, Select, SelectOption, Button, MenuToggleElement, MenuToggle, SelectList, TextInput, Label, SearchInput, Text } from '@patternfly/react-core'; +import { ToolbarItem, Select, SelectOption, Button, MenuToggleElement, MenuToggle, SelectList, SearchInput } from '@patternfly/react-core'; import { createAddressObjectName, createQueueObjectName } from '../util/jmx'; import { ArtemisContext } from '../context'; import { log } from '../globals'; @@ -306,6 +306,13 @@ export const BrokerDiagram: React.FunctionComponent = () => { const [ topologyLoaded, setTopologyLoaded ] = React.useState(false); const [ addressFilter, setAddressFilter ] = React.useState(''); + const latch = useRef<{ p?: Promise<boolean>, r?: (v: boolean) => void, t: number }>() + + if (!latch.current) { + latch.current = { + t: performance.now() + } + } const maxAddresses: number = artemisPreferencesService.loadArtemisPreferences().artemisMaxDiagramAddressSize; @@ -343,8 +350,6 @@ export const BrokerDiagram: React.FunctionComponent = () => { } }, [findAndSelectNode]) - - const controller = React.useMemo(() => { const model: Model = { nodes: NODES, @@ -356,8 +361,6 @@ export const BrokerDiagram: React.FunctionComponent = () => { } }; - - const newController = new Visualization(); newController.registerLayoutFactory(customLayoutFactory); newController.registerComponentFactory(customComponentFactory); @@ -365,6 +368,7 @@ export const BrokerDiagram: React.FunctionComponent = () => { newController.addEventListener(SELECTION_EVENT, setSelectedIds); newController.addEventListener(GRAPH_LAYOUT_END_EVENT, () => { newController.getGraph().fit(80); + latch.current?.r?.(true) }); newController.fromModel(model, false); @@ -372,11 +376,14 @@ export const BrokerDiagram: React.FunctionComponent = () => { }, []); useEffect(() => { + let backupBrokerNode: NodeModel + let brokerEdge: EdgeModel if (!topologyLoaded) { artemisService.createBrokerTopology(maxAddresses, addressFilter).then(brokerTopology => { setTopologyLoaded(true); setBrokerTopology(brokerTopology); }); + return } if (topologyLoaded && brokerTopology) { var brokerNode: NodeModel = { @@ -414,7 +421,7 @@ export const BrokerDiagram: React.FunctionComponent = () => { for (const broker of brokerTopology.broker.networkTopology.brokers) { if (brokerTopology.broker.nodeID !== broker.nodeID) { - var remoteBrokerNode: NodeModel = { + const remoteBrokerNode: NodeModel = { id: broker.nodeID, type: 'broker', label: broker.live, @@ -432,18 +439,18 @@ export const BrokerDiagram: React.FunctionComponent = () => { } newBrokerNodes.push(remoteBrokerNode); if (viewOptions.showConnectors) { - var brokerEdge: EdgeModel = { + brokerEdge = { id: 'broker-edge-' + brokerTopology.broker.nodeID + '-broker-node-' + broker.nodeID, type: 'edge', source: brokerTopology.broker.nodeID, target: broker.nodeID, edgeStyle: EdgeStyle.default - }; + } newBrokerEdges.push(brokerEdge); } if(broker.backup) { log.debug("adding backup to this live") - var backupBrokerNode: NodeModel = { + backupBrokerNode = { id: broker.nodeID + "backup", type: 'backupBroker', label: broker.backup, @@ -461,19 +468,19 @@ export const BrokerDiagram: React.FunctionComponent = () => { } newBrokerNodes.push(backupBrokerNode); if (viewOptions.showConnectors) { - var brokerEdge: EdgeModel = { + brokerEdge = { 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 = { + backupBrokerNode = { id: broker.nodeID + "backup", type: 'backupBroker', label: broker.backup, @@ -491,13 +498,13 @@ export const BrokerDiagram: React.FunctionComponent = () => { } newBrokerNodes.push(backupBrokerNode); if (viewOptions.showConnectors) { - var brokerEdge: EdgeModel = { + brokerEdge = { 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); } } @@ -518,13 +525,25 @@ export const BrokerDiagram: React.FunctionComponent = () => { } } } - controller.fromModel(model, false); + // controller.fromModel(model, false); + if (latch.current?.p) { + latch.current.p!.then(() => { + controller.fromModel(model, false) + }) + } else { + controller.fromModel(model, false) + } + if (model.nodes && model.nodes.length > 0) { + latch.current!.p = new Promise(resolve => { + latch.current!.r = resolve + }) + } else { + latch.current!.p = latch.current!.r = undefined + } } }, [viewOptions, controller, selectNode, topologyLoaded, brokerTopology]) - - const contextToolbar = ( <><ToolbarItem> <Select @@ -641,7 +660,6 @@ function addAddress(address: string, newBrokerNodes: NodeModel[], brokerInfo: Br }; newBrokerEdges.push(addressEdge); } - controller.fromModel(model, false); } function addInternalAddress(address: string, newBrokerNodes: NodeModel[], brokerInfo: BrokerInfo, newBrokerEdges: EdgeModel[], controller: Visualization, model: Model, showConnectors: boolean, selectNode: Function) { @@ -672,7 +690,6 @@ function addInternalAddress(address: string, newBrokerNodes: NodeModel[], broker }; newBrokerEdges.push(addressEdge); } - controller.fromModel(model, false); } function addQueue(address: string, queue: string, routingType: string, newBrokerNodes: NodeModel[], brokerInfo: BrokerInfo, newBrokerEdges: EdgeModel[], controller: Visualization, model: Model, showAddresses: boolean, showConnectors: boolean, selectNode: Function) { @@ -705,7 +722,6 @@ function addQueue(address: string, queue: string, routingType: string, newBroke }; newBrokerEdges.push(queueEdge); } - controller.fromModel(model, false); } function addInternalQueue(address: string, queue: string, routingType: string, newBrokerNodes: NodeModel[], brokerInfo: BrokerInfo, newBrokerEdges: EdgeModel[], controller: Visualization, model: Model, showInternalAddresses: boolean, showConnectors: boolean, selectNode: Function) { @@ -738,6 +754,5 @@ function addInternalQueue(address: string, queue: string, routingType: string, n }; newBrokerEdges.push(queueEdge); } - controller.fromModel(model, false); } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected] For further information, visit: https://activemq.apache.org/contact
