This is an automated email from the ASF dual-hosted git repository. jbertram pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/activemq-artemis-console.git
commit 3c3b830a9873bbbd04a1f500b7c751d3b96c1283 Author: Andy Taylor <[email protected]> AuthorDate: Fri Dec 6 16:48:39 2024 +0000 ARTEMIS-5198 - Make the default page size configurable on the web console --- .../artemis/ArtemisPreferences.tsx | 45 ++++++++++++++++++++++ .../artemis/addresses/AddressesTable.tsx | 3 +- .../artemis/artemis-preferences-service.ts | 25 +++++++++++- .../artemis/connections/ConnectionsTable.tsx | 3 +- .../artemis/consumers/ConsumerTable.tsx | 3 +- .../artemis/messages/MessagesTable.tsx | 10 ++--- .../artemis/producers/ProducerTable.tsx | 3 +- .../artemis/queues/QueuesTable.tsx | 3 +- .../artemis/sessions/SessionsTable.tsx | 3 +- .../artemis/table/ArtemisTable.tsx | 2 +- 10 files changed, 86 insertions(+), 14 deletions(-) diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisPreferences.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisPreferences.tsx index c782011..9a9b906 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/ArtemisPreferences.tsx +++ b/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> ) diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx index 00ec09e..649bff8 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx +++ b/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} storageColumnLocation="addressesColumnDefs" 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} diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-preferences-service.ts b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-preferences-service.ts index 46c57d0..bf3acc9 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-preferences-service.ts +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/artemis-preferences-service.ts @@ -18,6 +18,15 @@ 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 @@ -29,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' @@ -70,18 +81,28 @@ class ArtemisPreferencesService implements IArtemisPreferencesService { localStorage.setItem(storageLocation, JSON.stringify(data)); } - loadTablePageSize(storageLocation: string|undefined, size: number): number { + loadTablePageSize(storageLocation: string|undefined): number { const localStorageData = localStorage.getItem(storageLocation + PAGE_SIZE); if (localStorageData) { return Number(localStorageData); } - return size; + 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) diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx index 6e0b681..37ed001 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx +++ b/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} diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/consumers/ConsumerTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/consumers/ConsumerTable.tsx index 710996f..866486d 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/consumers/ConsumerTable.tsx +++ b/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} 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 82880de..4347b8e 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 @@ -28,7 +28,7 @@ import { SendMessage } from './SendMessage'; import { Message } from './MessageView'; import { ArtemisContext } from '../context'; import { log } from '../globals'; -import { artemisPreferencesService } from '../artemis-preferences-service'; +import { artemisPreferencesService, columnStorage } from '../artemis-preferences-service'; export type MessageProps = { address: string, @@ -92,9 +92,9 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => { const response = await artemisService.getMessages(queueMBean, page, perPage, filter); return response; } - setPerPage(artemisPreferencesService.loadTablePageSize("messagesColumnDefs", 10)); + setPerPage(artemisPreferencesService.loadTablePageSize(columnStorage.messages)); if (!columnsLoaded) { - const updatedColumns: Column[] = artemisPreferencesService.loadColumnPreferences("messagesColumnDefs", allColumns); + const updatedColumns: Column[] = artemisPreferencesService.loadColumnPreferences(columnStorage.messages, allColumns); setColumns(updatedColumns); setColumnsLoaded(true); } @@ -107,7 +107,7 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => { }; const handlePerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number) => { - artemisPreferencesService.saveTablePageSize("messagesColumnDefs", newPerPage) + artemisPreferencesService.saveTablePageSize(columnStorage.messages, newPerPage) setPerPage(newPerPage); }; @@ -164,7 +164,7 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => { const onSave = () => { setColumnsModalOpen(!columnsModalOpen); - artemisPreferencesService.saveColumnPreferences("messagesColumnDefs", columns); + artemisPreferencesService.saveColumnPreferences(columnStorage.messages, columns); }; const updateColumnStatus = (index: number, column: Column) => { diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/producers/ProducerTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/producers/ProducerTable.tsx index 5ed698e..a709702 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/producers/ProducerTable.tsx +++ b/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}/> } \ No newline at end of file diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/QueuesTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/QueuesTable.tsx index 04c662f..223549b 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/QueuesTable.tsx +++ b/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?" diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/sessions/SessionsTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/sessions/SessionsTable.tsx index 1442714..4dd4cbd 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/sessions/SessionsTable.tsx +++ b/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} diff --git a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/table/ArtemisTable.tsx b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/table/ArtemisTable.tsx index 6c7257b..fafe09a 100644 --- a/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/table/ArtemisTable.tsx +++ b/artemis-console-extension/artemis-extension/src/artemis-extension/artemis/table/ArtemisTable.tsx @@ -142,7 +142,7 @@ const operationOptions = [ setColumnsLoaded(true); } if(broker.storageColumnLocation) { - setPerPage(artemisPreferencesService.loadTablePageSize(broker.storageColumnLocation, 10)); + setPerPage(artemisPreferencesService.loadTablePageSize(broker.storageColumnLocation)); } listData(); --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected] For further information, visit: https://activemq.apache.org/contact
