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 fcc0256 ARTEMIS-5361 - fix the broker diagram to use only css
fcc0256 is described below
commit fcc0256474fbd2612bacf0fbd519eab90ed68e4c
Author: Andy Taylor <[email protected]>
AuthorDate: Tue Mar 25 14:04:49 2025 +0000
ARTEMIS-5361 - fix the broker diagram to use only css
---
.../artemis-extension/public/css/activemq.css | 143 +++++++++++++++++++--
.../artemis/brokers/BrokerDiagram.tsx | 43 ++++---
2 files changed, 153 insertions(+), 33 deletions(-)
diff --git
a/artemis-console-extension/artemis-extension/public/css/activemq.css
b/artemis-console-extension/artemis-extension/public/css/activemq.css
index d72c5de..380d060 100644
--- a/artemis-console-extension/artemis-extension/public/css/activemq.css
+++ b/artemis-console-extension/artemis-extension/public/css/activemq.css
@@ -51,41 +51,140 @@ svg.pf-v5-svg {
fill: #c12766;
}
-
.pf-topology__node.artemisBroker.pf-m-info .pf-topology__node__background {
- stroke: #801944;
+ stroke: var(--artemis-diag-broker-border);
stroke-width: 3;
- fill: #c12766;
+ fill: var(--artemis-diag-broker-color);
+}
+
+.pf-topology__node__label.artemisBrokerLabel {
+ & > rect {
+ stroke: var(--artemis-diag-broker-border);
+ }
+
+ .pf-topology__node__label__badge {
+ & > rect {
+ stroke: var(--artemis-diag-broker-border);
+ fill: var(--artemis-diag-broker-color);
+ }
+ & > text {
+ fill: var(--artemis-diag-broker-label-text);
+ }
+ }
}
.pf-topology__node.artemisBackupBroker.pf-m-info
.pf-topology__node__background {
- stroke: #82171b;
+ stroke: var(--artemis-diag-backup-broker-border);
stroke-width: 3;
- fill: #cf242a;
+ fill: var(--artemis-diag-backup-broker-color);
+}
+
+.pf-topology__node__label.artemisBackupBrokerLabel {
+ & > rect {
+ stroke: var(--artemis-diag-backup-broker-border);
+ }
+
+ .pf-topology__node__label__badge {
+ & > rect {
+ stroke: var(--artemis-diag-backup-broker-border);
+ fill: var(--artemis-diag-backup-broker-color);
+ }
+ & > text {
+ fill: var(--artemis-diag-backup-broker-label-text);
+ }
+ }
}
.pf-topology__node.artemisAddress.pf-m-info .pf-topology__node__background {
- stroke: #2b326e;
+ stroke: var(--artemis-diag-address-border);
stroke-width: 3;
- fill: #3e489f;
+ fill: var(--artemis-diag-address-color);
+ & > rect {
+ stroke: var(--artemis-diag-address-border);
+ fill: var(--artemis-diag-address-color);
+ }
+}
+
+.pf-topology__node__label.artemisAddressLabel {
+ & > rect {
+ stroke: var(--artemis-diag-address-border);
+ }
+
+ .pf-topology__node__label__badge {
+ & > rect {
+ stroke: var(--artemis-diag-address-border);
+ fill: var(--artemis-diag-address-color);
+ }
+ & > text {
+ fill: var(--artemis-diag-address-label-text);
+ }
+ }
+
}
.pf-topology__node.artemisQueue.pf-m-info .pf-topology__node__background {
- stroke: #50621d;
+ stroke: var(--artemis-diag-queue-border);
stroke-width: 3;
- fill: #78932c;
+ fill: var(--artemis-diag-queue-color);
+}
+
+.pf-topology__node__label.artemisQueueLabel {
+ & > rect {
+ stroke: var(--artemis-diag-queue-border);
+ }
+
+ .pf-topology__node__label__badge {
+ & > rect {
+ stroke: var(--artemis-diag-queue-border);
+ fill: var(--artemis-diag-queue-color);
+ }
+ & > text {
+ fill:var(--artemis-diag-queue-label-text);
+ }
+ }
}
.pf-topology__node.artemisInternalAddress.pf-m-info
.pf-topology__node__background {
- stroke: #2b326e;
+ stroke: var(--artemis-diag-internal-address-border);
stroke-width: 3;
- fill: #fff;
+ fill: var(--artemis-diag-internal-address-color);
+}
+
+.pf-topology__node__label.artemisInternalAddressLabel {
+ & > rect {
+ stroke: var(--artemis-diag-internal-address-border);
+ }
+
+ .pf-topology__node__label__badge {
+ & > rect {
+ stroke: var(--artemis-diag-internal-address-border);
+ fill: var(--artemis-diag-internal-address-color);
+ }
+ & > text {
+ fill: var(--artemis-diag-internal-address-label-text);
+ }
+ }
}
.pf-topology__node.artemisInternalQueue.pf-m-info
.pf-topology__node__background {
- stroke: #50621d;
+ stroke: var(--artemis-diag-internal-queue-border);
stroke-width: 3;
- fill: #fff;
+ fill: var(--artemis-diag-internal-queue-color);
+}
+
+.pf-topology__node__label.artemisInternalQueueLabel {
+ & > rect {
+ stroke: var(--artemis-diag-internal-queue-border);
+ }
+ .pf-topology__node__label__badge {
+ & > rect {
+ stroke: var(--artemis-diag-internal-queue-border);
+ fill: var(--artemis-diag-internal-queue-color);
+ }
+ & > text {
+ fill: var(--artemis-diag-internal-queue-label-text);
+ }
+ }
}
.pf-v5-c-button.pf-m-primary {
@@ -194,6 +293,24 @@ background-color:
var(--artemis-global--primary-color--300);
--artemis-global--primary-color--400: #c77e9c;
--artemis-global--primary-color-dark: #B21054;
--artemis-global--primary-second-color-100: #2b326e;
+ --artemis-diag-broker-color: #c12766;
+ --artemis-diag-broker-border:#801944;
+ --artemis-diag-broker-label-text:#fff;
+ --artemis-diag-backup-broker-color: #c77e9c;
+ --artemis-diag-backup-broker-border:#c12766;
+ --artemis-diag-backup-broker-label-text:#fff;
+ --artemis-diag-address-color: #3e489f;
+ --artemis-diag-address-border:#2b326e;
+ --artemis-diag-address-label-text:#fff;
+ --artemis-diag-queue-color: #78932c;
+ --artemis-diag-queue-border:#50621d;
+ --artemis-diag-queue-label-text:#fff;
+ --artemis-diag-internal-address-color: #fff;
+ --artemis-diag-internal-address-border:#2b326e;
+ --artemis-diag-internal-address-label-text:#000;
+ --artemis-diag-internal-queue-color: #fff;
+ --artemis-diag-internal-queue-border:#50621d;
+ --artemis-diag-internal-queue-label-text:#000;
--pf-v5-c-button--m-primary--BackgroundColor:
var(--artemis-global--primary-color--200);
--pf-v5-c-button--m-primary--BackgroundColor-hover:
var(--artemis-global--primary-color--100);
--pf-v5-global--active-color--100: var(--artemis-global--primary-color--200);
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 d896649..7c50ca0 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
@@ -99,14 +99,14 @@ const BadgeColors = [
},
{
name: 'Internal Address',
- badgeColor: 'white',
- badgeTextColor: 'black',
+ badgeColor: '#cf242a',
+ badgeTextColor: 'white',
badgeBorderColor: '#CBC1FF'
},
{
name: 'Internal Queue',
- badgeColor: 'white',
- badgeTextColor: 'black',
+ badgeColor: '#cf242a',
+ badgeTextColor: 'white',
badgeBorderColor: '#CBC1FF'
}
];
@@ -126,7 +126,6 @@ const BrokerCustomNode: React.FC<CustomNodeProps &
WithSelectionProps & WithDrag
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<ControllerState>();
return (
@@ -134,11 +133,9 @@ const BrokerCustomNode: React.FC<CustomNodeProps &
WithSelectionProps & WithDrag
element={element}
showStatusDecorator
badge={data.badge}
- badgeColor={badgeColors?.badgeColor}
- badgeTextColor={badgeColors?.badgeTextColor}
- badgeBorderColor={badgeColors?.badgeBorderColor}
+ labelClassName={data.labelClassName}
showLabel={viewOptions.showLabels}
- className="artemisBroker"
+ className={data.className}
onSelect={() => selectNode(data)}
selected={selected}
{...rest}
@@ -154,7 +151,6 @@ const BrokerBackupCustomNode: React.FC<CustomNodeProps &
WithSelectionProps & Wi
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<ControllerState>();
return (
@@ -162,11 +158,9 @@ const BrokerBackupCustomNode: React.FC<CustomNodeProps &
WithSelectionProps & Wi
element={element}
showStatusDecorator
badge={data.badge}
- badgeColor={badgeColors?.badgeColor}
- badgeTextColor={badgeColors?.badgeTextColor}
- badgeBorderColor={badgeColors?.badgeBorderColor}
+ labelClassName={data.labelClassName}
showLabel={viewOptions.showLabels}
- className="artemisBackupBroker"
+ className={data.className}
onSelect={() => selectNode(data)}
selected={selected}
{...rest}
@@ -181,7 +175,6 @@ const BrokerBackupCustomNode: React.FC<CustomNodeProps &
WithSelectionProps & Wi
const ResourceNode: React.FC<CustomNodeProps & WithSelectionProps &
WithDragNodeProps & WithDndDropProps> = ({ element, onSelect, selected, ...rest
}) => {
const data = element.getData();
const selectNode = data.selectNode;
- const badgeColors = BadgeColors.find(badgeColor => badgeColor.name ===
data.badge);
const { viewOptions } = element.getController().getState<ControllerState>();
return (
@@ -189,9 +182,7 @@ const ResourceNode: React.FC<CustomNodeProps &
WithSelectionProps & WithDragNode
element={element}
showStatusDecorator
badge={data.badge}
- badgeColor={badgeColors?.badgeColor}
- badgeTextColor={badgeColors?.badgeTextColor}
- badgeBorderColor={badgeColors?.badgeBorderColor}
+ labelClassName={data.labelClassName}
showLabel={viewOptions.showLabels}
className={data.className}
onSelect={() => selectNode(data)}
@@ -313,10 +304,10 @@ export const BrokerDiagram: React.FunctionComponent = ()
=> {
const [ brokerTopology, setBrokerTopology ] =
React.useState<BrokerTopology>();
const[ topologyLoaded, setTopologyLoaded ] = React.useState(false);
-
+
const { findAndSelectNode } = React.useContext(ArtemisContext);
-
+
const selectNode = React.useCallback((data: any) => {
if (data.queue != null) {
@@ -395,6 +386,8 @@ export const BrokerDiagram: React.FunctionComponent = () =>
{
},
data: {
badge: 'Broker',
+ className: 'artemisBroker',
+ labelClassName: 'artemisBrokerLabel',
type: "local",
selectNode: selectNode
}
@@ -425,6 +418,8 @@ export const BrokerDiagram: React.FunctionComponent = () =>
{
status: NodeStatus.info,
data: {
badge: 'Broker',
+ className: 'artemisBroker',
+ labelClassName: 'artemisBrokerLabel',
type: "remote",
selectNode: selectNode
}
@@ -452,6 +447,8 @@ export const BrokerDiagram: React.FunctionComponent = () =>
{
status: NodeStatus.info,
data: {
badge: 'Broker',
+ className: 'artemisBackupBroker',
+ labelClassName: 'artemisBackupBrokerLabel',
type: "backupBroker",
selectNode: selectNode
}
@@ -480,6 +477,8 @@ export const BrokerDiagram: React.FunctionComponent = () =>
{
status: NodeStatus.info,
data: {
badge: 'Broker',
+ className: 'artemisBackupBroker',
+ labelClassName: 'artemisBackupBrokerLabel',
type: "backupBroker",
selectNode: selectNode
}
@@ -603,6 +602,7 @@ function addAddress(address: string, newBrokerNodes:
NodeModel[], brokerInfo: Br
data: {
badge: 'Address',
className: 'artemisAddress',
+ labelClassName: 'artemisAddressLabel',
address: address,
selectNode: selectNode
}
@@ -633,6 +633,7 @@ function addInternalAddress(address: string,
newBrokerNodes: NodeModel[], broker
data: {
badge: 'Internal Address',
className: 'artemisInternalAddress',
+ labelClassName: 'artemisInternalAddressLabel',
address: address,
selectNode: selectNode
}
@@ -663,6 +664,7 @@ function addQueue(address: string, queue: string,
routingType: string, newBroke
data: {
badge: 'Queue',
className: 'artemisQueue',
+ labelClassName: 'artemisQueueLabel',
address: address,
queue: queue,
routingType: routingType,
@@ -695,6 +697,7 @@ function addInternalQueue(address: string, queue: string,
routingType: string, n
data: {
badge: 'Internal Queue',
className: 'artemisInternalQueue',
+ labelClassName: 'artemisInternalQueueLabel',
address: address,
queue: queue,
routingType: routingType,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
For further information, visit: https://activemq.apache.org/contact
