This is an automated email from the ASF dual-hosted git repository. andytaylor pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/activemq-artemis-console.git
commit 53eca5870a0567c39b36a75c1d83a4f6124a5947 Author: GChuf <[email protected]> AuthorDate: Wed Sep 3 13:39:36 2025 +0200 ARTEMIS-5424 - small improvements --- .../src/table/ArtemisTable.tsx | 57 +++++++++++++--------- 1 file changed, 35 insertions(+), 22 deletions(-) diff --git a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisTable.tsx b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisTable.tsx index 11727d4..c2a8f1f 100644 --- a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisTable.tsx +++ b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/table/ArtemisTable.tsx @@ -122,6 +122,14 @@ const operationOptions = [ const [perPage, setPerPage] = useState(10); const pageSize = artemisPreferencesService.loadTablePageSize(broker.storageColumnLocation); + const rootElement = document.getElementById('root') as HTMLElement; + const popperProps = { + position: 'right' as const, + appendTo: rootElement, + }; + + const visibleColumns = columns.filter((column) => column.visible); + const initialFilter = () => { if (broker.storageColumnLocation && sessionStorage.getItem(broker.storageColumnLocation + '.filter')) { return JSON.parse(sessionStorage.getItem(broker.storageColumnLocation + '.filter') as string); @@ -230,6 +238,17 @@ const operationOptions = [ return producer[columnName]; } + const handleClick = (column: Column, row: any) => () => { + if (column.filter) { + const filter = column.filter(row); + if (broker.navigate) { + broker.navigate(column.filterTab, filter); + } + } else if (column.link) { + column.link(row); + } + }; + const pageSizeOptions = [ { title: '10 per page', value: 10 }, { title: '20 per page', value: 20 }, @@ -391,8 +410,7 @@ const operationOptions = [ <Table variant="compact" aria-label="Data Table" id='data-table'> <Thead> <Tr> - {columns.map((column, id) => { - if (!column.visible) return null; + {visibleColumns.map((column, id) => { const isSorted = column.id === activeSort.id; const direction = isSorted ? activeSort.order : undefined; @@ -419,26 +437,21 @@ const operationOptions = [ <Tbody> {rows.map((row, rowIndex) => ( <Tr key={rowIndex}> - <> - {columns.filter((column) => column.visible).map((column, id) => { - const key = getKeyByValue(row, column.id) - if(column.filter) { - const filter = column.filter(row); - return <Td key={id}><Link to="" onClick={() => {if (broker.navigate) { broker.navigate(column.filterTab, filter)}}}>{key}</Link></Td> - } else if (column.link) { - return <Td key={id}><Link to="" onClick={() => {if (column.link) column.link(row)}}>{key}</Link></Td> - } else { - return <Td key={id}>{key}</Td> - } - })} - <Td isActionCell> - <ActionsColumn - items={getRowActions(row)} - popperProps={{ position: 'right', appendTo: () => (document.getElementById('root') as HTMLElement) }} - /> - </Td> - </> - </Tr> + {visibleColumns.map((column, id) => { + const key = getKeyByValue(row, column.id) + if(column.filter || column.link) { + return <Td key={id}><Link to="" onClick={handleClick(column, row)}>{key}</Link></Td> + } else { + return <Td key={id}>{key}</Td> + } + })} + <Td isActionCell> + <ActionsColumn + items={getRowActions(row)} + popperProps={popperProps} + /> + </Td> + </Tr> ))} </Tbody> </Table> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected] For further information, visit: https://activemq.apache.org/contact
