From c3d4be6281984d9bbd5e0c21c3a09596f0774538 Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Fri, 6 Dec 2024 11:21:59 +0000 Subject: [PATCH 1/3] ARTEMIS-5193 - Add page size to saved preferences --- .../artemis/artemis-preferences-service.ts | 14 ++++++++++++++ .../artemis/messages/MessagesTable.tsx | 3 +++ .../artemis/table/ArtemisTable.tsx | 6 ++++++ 3 files changed, 23 insertions(+) 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 4863670..46c57d0 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 @@ -16,6 +16,8 @@ */ import { Column } from "./table/ArtemisTable" +const PAGE_SIZE = ".pageSize"; + export interface IArtemisPreferencesService { loadArtemisPreferences(): ArtemisOptions saveArtemisPreferences(newValues: Partial): void @@ -68,6 +70,18 @@ class ArtemisPreferencesService implements IArtemisPreferencesService { localStorage.setItem(storageLocation, JSON.stringify(data)); } + loadTablePageSize(storageLocation: string|undefined, size: number): number { + const localStorageData = localStorage.getItem(storageLocation + PAGE_SIZE); + if (localStorageData) { + return Number(localStorageData); + } + return size; + } + + saveTablePageSize(storageLocation: string, size: number) { + localStorage.setItem(storageLocation + PAGE_SIZE, size.toString()); + } + private loadFromStorage(): Partial { const localStorageData = localStorage.getItem(STORAGE_KEY_ARTEMIS_PREFERENCES) 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 632fd62..46ad6b8 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,6 +28,7 @@ import { SendMessage } from './SendMessage'; import { Message } from './MessageView'; import { ArtemisContext } from '../context'; import { log } from '../globals'; +import { artemisPreferencesService } from '../artemis-preferences-service'; export type MessageProps = { address: string, @@ -90,6 +91,7 @@ export const MessagesTable: React.FunctionComponent = props => { const response = await artemisService.getMessages(queueMBean, page, perPage, filter); return response; } + setPerPage(artemisPreferencesService.loadTablePageSize("messagesColumnDefs", 10)); listData(); }, [props.address, props.routingType, props.queue, page, perPage, filter, selectedMessages]) @@ -99,6 +101,7 @@ export const MessagesTable: React.FunctionComponent = props => { }; const handlePerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number) => { + artemisPreferencesService.saveTablePageSize("messagesColumnDefs", newPerPage) setPerPage(newPerPage); }; 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 0722618..6c7257b 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 @@ -141,6 +141,9 @@ const operationOptions = [ setColumns(updatedColumns); setColumnsLoaded(true); } + if(broker.storageColumnLocation) { + setPerPage(artemisPreferencesService.loadTablePageSize(broker.storageColumnLocation, 10)); + } 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); }; From 11f50c9087717867cfa71acf515e94578bad8165 Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Fri, 6 Dec 2024 13:11:48 +0000 Subject: [PATCH 2/3] ARTEMIS-5194 - remember columns when browsing addresses and messages --- .../artemis-extension/artemis/addresses/AddressesTable.tsx | 2 +- .../artemis-extension/artemis/messages/MessagesTable.tsx | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) 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 bc19182..00ec09e 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 @@ -169,7 +169,7 @@ export const AddressesTable: React.FunctionComponent = (navigate) => { return ( - + = 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([]); @@ -92,6 +93,11 @@ export const MessagesTable: React.FunctionComponent = props => { return response; } setPerPage(artemisPreferencesService.loadTablePageSize("messagesColumnDefs", 10)); + if (!columnsLoaded) { + const updatedColumns: Column[] = artemisPreferencesService.loadColumnPreferences("messagesColumnDefs", allColumns); + setColumns(updatedColumns); + setColumnsLoaded(true); + } listData(); }, [props.address, props.routingType, props.queue, page, perPage, filter, selectedMessages]) @@ -158,6 +164,7 @@ export const MessagesTable: React.FunctionComponent = props => { const onSave = () => { setColumnsModalOpen(!columnsModalOpen); + artemisPreferencesService.saveColumnPreferences("messagesColumnDefs", columns); }; const updateColumnStatus = (index: number, column: Column) => { From 65bbb130598b37cd601ce0f5a61e7d1dbceade81 Mon Sep 17 00:00:00 2001 From: Andy Taylor Date: Fri, 6 Dec 2024 16:48:39 +0000 Subject: [PATCH 3/3] 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, value?: string | number) => { setSelectedFormat(value as string); setDropdownOpen(false); @@ -87,6 +94,13 @@ const ArtemisPreferencesForm: React.FunctionComponent = () => { } } + const handlePageSizeChange = (event?: React.MouseEvent, value?: string | number) => { + setSelectedPageSize(value as number); + setPageSizeDropdownOpen(false); + updatePreferences(value as number, 'artemisDefaultPageSize'); + artemisPreferencesService.resetPageSizes(); + } + return ( @@ -151,6 +165,37 @@ const ArtemisPreferencesForm: React.FunctionComponent = () => { + + }> + + + {' '} + + + + ) 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) => { const getQueueFilter = (row: any) => { @@ -169,7 +170,7 @@ export const AddressesTable: React.FunctionComponent = (navigate) => { return ( - + ): 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 { 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) => { const getSessionFilter = (row: any) => { @@ -89,7 +90,7 @@ export const ConnectionsTable: React.FunctionComponent = (navigate) => return ( <> - + = navigate => { const getSessionFilter = (row: any) => { @@ -120,7 +121,7 @@ export const ConsumerTable: React.FunctionComponent = navigate => { return ( <> - + = 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 = 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 = 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 => { const getSessionFilter = (row: any) => { @@ -60,5 +61,5 @@ export const ProducerTable: React.FunctionComponent = navigate => { return data; } - return + return } \ 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 = navigate => { const getAddressFilter = (row: any) => { @@ -254,7 +255,7 @@ export const QueuesTable: React.FunctionComponent = navigate => { }; return ( - <> = navigate => { const getConnectionFilter = (row: any) => { @@ -109,7 +110,7 @@ export const SessionsTable: React.FunctionComponent = navigate => { return ( - <> + <>