several UI fixes

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;
@@ -115,7 +119,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 +133,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 +179,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 {

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/Artemis.tsx

@@ -14,24 +14,43 @@
  * 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 ( 
   <Page>
     <PageSection variant={PageSectionVariants.light}>
       <Grid >
         <GridItem span={2}>
           <TextContent>
-            <Text component="h1">Broker</Text>
+            <Text component="h1">Broker: {brokerName}</Text>
           </TextContent>
         </GridItem>
       </Grid>

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,21 +24,39 @@ 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 ( 
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
         <Grid >
           <GridItem span={2}>
           <TextContent>
-            <Text component="h1">Broker</Text>
+            <Text component="h1">Broker: {brokerName}</Text>
             </TextContent>
           </GridItem>
 

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<string>
+    private brokerInfo: Promise<BrokerInfo>
 
     constructor() {
         this.brokerObjectName = this.initBrokerObjectName();
+        this.brokerInfo = this.initBrokerInfo();
     }
 
     private async initBrokerObjectName(): Promise<string> {
@@ -157,7 +159,7 @@ class ArtemisService {
 
 
 
-    async createBrokerInfo(): Promise<BrokerInfo> {
+    async initBrokerInfo(): Promise<BrokerInfo> {
         return new Promise<BrokerInfo>(async (resolve, reject) => {
             var brokerObjectName = await this.brokerObjectName;
             var response = await jolokiaService.readAttributes(brokerObjectName);
@@ -196,10 +198,17 @@ class ArtemisService {
         });
     }
 
+    async getBrokerInfo(): Promise<BrokerInfo> {
+        return await this.brokerInfo;
+    }
+
     async createBrokerTopology(): Promise<BrokerTopology> {
         return new Promise<BrokerTopology>(async (resolve, reject) => {
             try {
-                var brokerInfo = await this.createBrokerInfo();
+                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: []

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<CustomNodeProps & WithSelectionProps & WithDrag
       {...rest}
     >
       <g transform={`translate(25, 25)`}>
-        <Icon style={{ color: '#393F44' }} width={25} height={25}></Icon>
+        <Icon style={{ color: '#000000', fill: '#000000' }} width={25} height={25}></Icon>
+      </g>
+    </DefaultNode>
+  );
+};
+
+const BrokerBackupCustomNode: React.FC<CustomNodeProps & WithSelectionProps & WithDragNodeProps & WithDndDropProps> = ({ 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<ControllerState>();
+
+  return (
+    <DefaultNode 
+      element={element}
+      showStatusDecorator
+      badge={data.badge}
+      badgeColor={badgeColors?.badgeColor}
+      badgeTextColor={badgeColors?.badgeTextColor}
+      badgeBorderColor={badgeColors?.badgeBorderColor}
+      showLabel={viewOptions.showLabels}
+      className="artemisBackupBroker"
+      onSelect={() => selectNode(data)}
+      selected={selected}
+      {...rest}
+    >
+      <g transform={`translate(25, 25)`}>
+        <Icon style={{ color: '#000000', fill: '#000000' }} width={25} height={25}></Icon>
       </g>
     </DefaultNode>
   );
@@ -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);
+          }
         }
       }
 

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/MessagesTable.tsx

@@ -109,6 +109,7 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => {
   const handlePerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number) => {
     artemisPreferencesService.saveTablePageSize(columnStorage.messages, newPerPage)
     setPerPage(newPerPage);
+    selectAllMessages(false);
   };
 
   const handleColumnsModalToggle = () => {

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)
                 })