several UI Fixes

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

@@ -59,6 +59,9 @@ const ArtemisPreferencesForm: React.FunctionComponent = () => {
   const format = formats.find(format => format.index === artemisPreferences.artemisBrowseBytesMessages);
   const [selectedFormat, setSelectedFormat] = useState(format ? format.description : off.description);
 
+  const [selectedPageSize, setSelectedPageSize] = useState(artemisPreferencesService.loadArtemisPreferences().artemisDefaultPageSize)
+  const [isPageSizeDropdownOpen, setPageSizeDropdownOpen] = React.useState(false);
+
   const updatePreferences = (value: string | number | boolean, key: keyof ArtemisOptions): void => {
     const updatedPreferences = { ...artemisPreferences, ...{ [key]: value } }
 
@@ -78,6 +81,10 @@ const ArtemisPreferencesForm: React.FunctionComponent = () => {
     setDropdownOpen(!isDropdownOpen)
   }
 
+  const handlePageSizeToggle = () => {
+    setPageSizeDropdownOpen(!isPageSizeDropdownOpen)
+  }
+
   const handleFormatChange = (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => {
     setSelectedFormat(value as string);
     setDropdownOpen(false);
@@ -87,6 +94,13 @@ const ArtemisPreferencesForm: React.FunctionComponent = () => {
     }
   }
 
+  const handlePageSizeChange = (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => {
+    setSelectedPageSize(value as number);
+    setPageSizeDropdownOpen(false);
+    updatePreferences(value as number, 'artemisDefaultPageSize');
+    artemisPreferencesService.resetPageSizes();
+  }
+
 
   return (
     <FormSection title='Artemis' titleElement='h2'>
@@ -151,6 +165,37 @@ const ArtemisPreferencesForm: React.FunctionComponent = () => {
           </FlexItem>
         </Flex>
       </FormGroup>
+      <FormGroup
+        hasNoPaddingTop
+        label='Default Page Size'
+        fieldId='artemis-form-default-pagesize'
+        labelIcon={
+          <TooltipHelpIcon tooltip='he default page size to use for Artemis table views. This will replace all page sizes to the default' />
+        }>
+        <Flex>
+          <FlexItem flex={{ default: 'flexNone', md: 'flex_2' }}>
+            {' '}
+            <Select
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle isFullWidth role='menu' ref={toggleRef} onClick={handlePageSizeToggle}>
+                    {selectedPageSize}
+                  </MenuToggle>
+                )}
+              aria-label='Select Format'
+              onSelect={handlePageSizeChange}
+              selected={selectedPageSize}
+              isOpen={isPageSizeDropdownOpen}
+            >
+              <SelectList>
+                <SelectOption label={"10"} value={"10"}>{"10"}</SelectOption>
+                <SelectOption label={"20"} value={"20"}>{"20"}</SelectOption>
+                <SelectOption label={"50"} value={"50"}>{"50"}</SelectOption>
+                <SelectOption label={"100"} value={"100"}>{"100"}</SelectOption>
+              </SelectList>
+            </Select>
+          </FlexItem>
+        </Flex>
+      </FormGroup>
 
     </FormSection>
   )

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx

@@ -28,6 +28,7 @@ import { CreateAddress } from './CreateAddress';
 import { SendMessage } from '../messages/SendMessage';
 import { createAddressObjectName } from '../util/jmx';
 import { useNavigate } from 'react-router-dom';
+import { columnStorage } from '../artemis-preferences-service';
 
 export const AddressesTable: React.FunctionComponent<Navigate> = (navigate) => {
   const getQueueFilter = (row: any) => {
@@ -169,7 +170,7 @@ export const AddressesTable: React.FunctionComponent<Navigate> = (navigate) => {
 
   return (
     <ArtemisContext.Provider value={{ tree, selectedNode, brokerNode, setSelectedNode, findAndSelectNode }}>
-      <ArtemisTable getRowActions={getRowActions} allColumns={allColumns} getData={listAddresses} toolbarActions={[createAction]} navigate={navigate.search} filter={navigate.filter}/>
+      <ArtemisTable getRowActions={getRowActions} allColumns={allColumns} getData={listAddresses} storageColumnLocation={columnStorage.addresses}  toolbarActions={[createAction]} navigate={navigate.search} filter={navigate.filter}/>
       <Modal
         aria-label='create-queue-modal'
         variant={ModalVariant.medium}

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-preferences-service.ts

@@ -16,6 +16,17 @@
  */
 import { Column } from "./table/ArtemisTable"
 
+const PAGE_SIZE = ".pageSize";
+
+export const columnStorage = {
+  queues: "queuesColumnDefs",
+  addresses: "addressesColumnDefs",
+  connections: "connectionsColumnDefs",
+  consumers: "consumerColumnDefs",
+  producers: "producerColumnDefs",
+  sessions: "sessionsColumnDefs",
+  messages: "messagesColumnDefs"
+}
 export interface IArtemisPreferencesService {
   loadArtemisPreferences(): ArtemisOptions
   saveArtemisPreferences(newValues: Partial<ArtemisOptions>): void
@@ -27,12 +38,14 @@ export type ArtemisOptions = {
   artemisDLQ: string
   artemisExpiryQueue: string
   artemisBrowseBytesMessages: number
+  artemisDefaultPageSize: number
 }
 
 export const ARTEMIS_PREFERENCES_DEFAULT_VALUES: ArtemisOptions = {
   artemisDLQ: "^DLQ$",
   artemisExpiryQueue: "^ExpiryQueue$",
   artemisBrowseBytesMessages: 99,
+  artemisDefaultPageSize: 10
 } as const
 
 export const STORAGE_KEY_ARTEMIS_PREFERENCES = 'artemis.preferences'
@@ -68,6 +81,28 @@ class ArtemisPreferencesService implements IArtemisPreferencesService {
     localStorage.setItem(storageLocation, JSON.stringify(data));
   }
 
+  loadTablePageSize(storageLocation: string|undefined): number {
+    const localStorageData = localStorage.getItem(storageLocation + PAGE_SIZE);
+    if (localStorageData) {
+        return Number(localStorageData);
+    }
+    return this.loadArtemisPreferences().artemisDefaultPageSize;
+  }
+
+  saveTablePageSize(storageLocation: string, size: number) {
+    localStorage.setItem(storageLocation + PAGE_SIZE, size.toString());
+  }
+
+  resetPageSizes() {
+    localStorage.removeItem(columnStorage.queues + PAGE_SIZE);
+    localStorage.removeItem(columnStorage.addresses + PAGE_SIZE);
+    localStorage.removeItem(columnStorage.connections + PAGE_SIZE);
+    localStorage.removeItem(columnStorage.consumers + PAGE_SIZE);
+    localStorage.removeItem(columnStorage.producers + PAGE_SIZE);
+    localStorage.removeItem(columnStorage.sessions + PAGE_SIZE);
+    localStorage.removeItem(columnStorage.messages + PAGE_SIZE);
+  }
+
   private loadFromStorage(): Partial<ArtemisOptions> {
     const localStorageData = localStorage.getItem(STORAGE_KEY_ARTEMIS_PREFERENCES)
 

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx

@@ -21,6 +21,7 @@ import { artemisService } from '../artemis-service';
 import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 import { IAction } from '@patternfly/react-table';
 import { eventService } from '@hawtio/react';
+import { columnStorage } from '../artemis-preferences-service';
 
 export const ConnectionsTable: React.FunctionComponent<Navigate> = (navigate) => {
   const getSessionFilter = (row: any) => {
@@ -89,7 +90,7 @@ export const ConnectionsTable: React.FunctionComponent<Navigate> = (navigate) =>
 
   return (
     <>
-      <ArtemisTable allColumns={defaultColumns} getData={listConnections} storageColumnLocation="connectionsColumnDefs" getRowActions={getRowActions} loadData={loadData} navigate={navigate.search} filter={navigate.filter}/>
+      <ArtemisTable allColumns={defaultColumns} getData={listConnections} storageColumnLocation={columnStorage.connections} getRowActions={getRowActions} loadData={loadData} navigate={navigate.search} filter={navigate.filter}/>
       <Modal
         aria-label='connection-close-modal'
         variant={ModalVariant.medium}

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/consumers/ConsumerTable.tsx

@@ -21,6 +21,7 @@ import { artemisService } from '../artemis-service';
 import { eventService } from '@hawtio/react';
 import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 import { IAction } from '@patternfly/react-table';
+import { columnStorage } from '../artemis-preferences-service';
 
 export const ConsumerTable: React.FunctionComponent<Navigate> = navigate => {
   const getSessionFilter = (row: any) => {
@@ -120,7 +121,7 @@ export const ConsumerTable: React.FunctionComponent<Navigate> = navigate => {
 
     return (
       <>
-      <ArtemisTable allColumns={allColumns} getData={listConsumers} getRowActions={getRowActions} storageColumnLocation="consumerColumnDefs"  navigate={navigate.search} filter={navigate.filter}/>
+      <ArtemisTable allColumns={allColumns} getData={listConsumers} getRowActions={getRowActions} storageColumnLocation={columnStorage.consumers}  navigate={navigate.search} filter={navigate.filter}/>
       <Modal
         aria-label='consumer-close-modal'
         variant={ModalVariant.medium}

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

@@ -28,6 +28,7 @@ import { SendMessage } from './SendMessage';
 import { Message } from './MessageView';
 import { ArtemisContext } from '../context';
 import { log } from '../globals';
+import { artemisPreferencesService, columnStorage } from '../artemis-preferences-service';
 
 export type MessageProps = {
   address: string,
@@ -66,6 +67,7 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => {
   const [rows, setRows] = useState([])
   const [perPage, setPerPage] = useState(10);
   const [columns, setColumns] = useState(allColumns);
+  const [columnsLoaded, setColumnsLoaded] = useState(false);
   const [columnsModalOpen, setColumnsModalOpen] = useState(false);
   const [resultsSize, setresultsSize] = useState(0);
   const [selectedMessages, setSelectedMessages] = useState<number[]>([]);
@@ -90,6 +92,12 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => {
       const response = await artemisService.getMessages(queueMBean, page, perPage, filter);
       return response;
     }
+    setPerPage(artemisPreferencesService.loadTablePageSize(columnStorage.messages));
+    if (!columnsLoaded) {
+      const updatedColumns: Column[] = artemisPreferencesService.loadColumnPreferences(columnStorage.messages, allColumns);
+      setColumns(updatedColumns);
+      setColumnsLoaded(true);
+    }
     listData();
 
   }, [props.address, props.routingType, props.queue, page, perPage, filter, selectedMessages])
@@ -99,6 +107,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);
   };
 
@@ -155,6 +164,7 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => {
 
   const onSave = () => {
     setColumnsModalOpen(!columnsModalOpen);
+    artemisPreferencesService.saveColumnPreferences(columnStorage.messages, columns);
   };
 
   const updateColumnStatus = (index: number, column: Column) => {

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/producers/ProducerTable.tsx

@@ -18,6 +18,7 @@ import React, { } from 'react'
 import { Navigate } from '../views/ArtemisTabView.js';
 import { ActiveSort, ArtemisTable, Column, Filter } from '../table/ArtemisTable';
 import { artemisService } from '../artemis-service';
+import { columnStorage } from '../artemis-preferences-service';
 
 export const ProducerTable: React.FunctionComponent<Navigate> = navigate => {
   const getSessionFilter = (row: any) => {
@@ -60,5 +61,5 @@ export const ProducerTable: React.FunctionComponent<Navigate> = navigate => {
         return data;
       }
 
-    return <ArtemisTable allColumns={allColumns} getData={listProducers} storageColumnLocation="producerColumnDefs" navigate={navigate.search} filter={navigate.filter}/>
+    return <ArtemisTable allColumns={allColumns} getData={listProducers} storageColumnLocation={columnStorage.producers} navigate={navigate.search} filter={navigate.filter}/>
 }

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/QueuesTable.tsx

@@ -25,6 +25,7 @@ import { QueueNavigate } from './QueuesView.js';
 import { ArtemisContext } from '../context';
 import { createQueueObjectName } from '../util/jmx';
 import { useNavigate } from 'react-router-dom';
+import { columnStorage } from '../artemis-preferences-service';
 
 export const QueuesTable: React.FunctionComponent<QueueNavigate> = navigate => {
   const getAddressFilter = (row: any) => {
@@ -254,7 +255,7 @@ export const QueuesTable: React.FunctionComponent<QueueNavigate> = navigate => {
   };
 
   return (
-    <><ArtemisTable allColumns={allColumns} getData={listQueues} getRowActions={getRowActions} loadData={loadData} storageColumnLocation="queuesColumnDefs" navigate={navigate.search} filter={navigate.filter} /><Modal
+    <><ArtemisTable allColumns={allColumns} getData={listQueues} getRowActions={getRowActions} loadData={loadData} storageColumnLocation={columnStorage.queues} navigate={navigate.search} filter={navigate.filter} /><Modal
       aria-label='queue-delete-modal'
       variant={ModalVariant.medium}
       title="Delete Queue?"

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/sessions/SessionsTable.tsx

@@ -21,6 +21,7 @@ import React, { useState } from 'react'
 import { artemisService } from '../artemis-service';
 import { Navigate } from '../views/ArtemisTabView.js';
 import { ActiveSort, ArtemisTable, Column, Filter } from '../table/ArtemisTable';
+import { columnStorage } from '../artemis-preferences-service';
 
 export const SessionsTable: React.FunctionComponent<Navigate> = navigate => {  
   const getConnectionFilter = (row: any) => {
@@ -109,7 +110,7 @@ export const SessionsTable: React.FunctionComponent<Navigate> = navigate => {
 
 
   return (
-    <><ArtemisTable allColumns={allColumns} getData={listSessions} storageColumnLocation="sessionsColumnDefs" getRowActions={getRowActions} loadData={loadData} navigate={navigate.search} filter={navigate.filter}/>
+    <><ArtemisTable allColumns={allColumns} getData={listSessions} storageColumnLocation={columnStorage.sessions} getRowActions={getRowActions} loadData={loadData} navigate={navigate.search} filter={navigate.filter}/>
     <Modal
       aria-label='session-close-modal'
       variant={ModalVariant.medium}

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/table/ArtemisTable.tsx

@@ -141,6 +141,9 @@ const operationOptions = [
       setColumns(updatedColumns);
       setColumnsLoaded(true);
     }
+    if(broker.storageColumnLocation) {
+      setPerPage(artemisPreferencesService.loadTablePageSize(broker.storageColumnLocation));
+    }
     listData();
 
   }, [columns, page, activeSort, filter, perPage, columnsLoaded, broker])
@@ -215,6 +218,9 @@ const operationOptions = [
   };
 
   const handlePerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number) => {
+    if(broker.storageColumnLocation) {
+      artemisPreferencesService.saveTablePageSize(broker.storageColumnLocation, newPerPage)
+    }
     setPerPage(newPerPage);
   };