github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.17] [Inspector]: fix pagination not working (#223537) (#224214)

Browse source 
# Backport

This will backport the following commits from `main` to `8.17`:
- [[Inspector]: fix pagination not working
(#223537)](https://github.com/elastic/kibana/pull/223537)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marco
Vettorello","email":"marco.vettorello@elastic.co"},"sourceCommit":{"committedDate":"2025-06-17T10:33:38Z","message":"[Inspector]:
fix pagination not working (#223537)\n\n## Summary\n\nfix
https://github.com/elastic/kibana/issues/223536\n\nIt wasn't possible to
change the page index in the Inspector Data View.\nThe table was using
the `onTableChange` callback, coming from the\n`useEuiTablePersist` hook
in the wrapping function, in the `onChange`\nprop of the `EuiTable`
instead of being attached to the `onTableChange`\nprop.\n\nWhen using
the `onChange` the EuiTable leave all the pagination/size etc\nhandling
to the consumer, where the `onTableChange` is just a callback\nrelated
to the changes, used within the `useEuiTablePersist` to store\nsome
configuration across tabels.\n\nThe PR fixes the `onTableChange`
callback to the correct prop.\n\nA functional test was also added to
check the pagination works within\nLens. I haven't used the existing
`inspector.ts` functional tests\nbecause they where within the Legacy
Visualize.\n\nI've checked the usage of `useEuiTablePersist` and the
returned\n`onTableChange` and is correctly used everywhere except for
ESQL query\nhistory that doesn't seems to have enabled pagination cc
@stratoula\n\n90f65c3dba/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx (L383)\n\n---------\n\nCo-authored-by:
Marco Liberati
<dej611@users.noreply.github.com>","sha":"d4fb29bb2deac21fa88ffb0e69f7ecd0d6baf4f4","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","regression","release_note:fix","Team:Visualizations","backport:prev-minor","backport:prev-major","v9.1.0"],"title":"[Inspector]:
fix pagination not
working","number":223537,"url":"https://github.com/elastic/kibana/pull/223537","mergeCommit":{"message":"[Inspector]:
fix pagination not working (#223537)\n\n## Summary\n\nfix
https://github.com/elastic/kibana/issues/223536\n\nIt wasn't possible to
change the page index in the Inspector Data View.\nThe table was using
the `onTableChange` callback, coming from the\n`useEuiTablePersist` hook
in the wrapping function, in the `onChange`\nprop of the `EuiTable`
instead of being attached to the `onTableChange`\nprop.\n\nWhen using
the `onChange` the EuiTable leave all the pagination/size etc\nhandling
to the consumer, where the `onTableChange` is just a callback\nrelated
to the changes, used within the `useEuiTablePersist` to store\nsome
configuration across tabels.\n\nThe PR fixes the `onTableChange`
callback to the correct prop.\n\nA functional test was also added to
check the pagination works within\nLens. I haven't used the existing
`inspector.ts` functional tests\nbecause they where within the Legacy
Visualize.\n\nI've checked the usage of `useEuiTablePersist` and the
returned\n`onTableChange` and is correctly used everywhere except for
ESQL query\nhistory that doesn't seems to have enabled pagination cc
@stratoula\n\n90f65c3dba/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx (L383)\n\n---------\n\nCo-authored-by:
Marco Liberati
<dej611@users.noreply.github.com>","sha":"d4fb29bb2deac21fa88ffb0e69f7ecd0d6baf4f4"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/223537","number":223537,"mergeCommit":{"message":"[Inspector]:
fix pagination not working (#223537)\n\n## Summary\n\nfix
https://github.com/elastic/kibana/issues/223536\n\nIt wasn't possible to
change the page index in the Inspector Data View.\nThe table was using
the `onTableChange` callback, coming from the\n`useEuiTablePersist` hook
in the wrapping function, in the `onChange`\nprop of the `EuiTable`
instead of being attached to the `onTableChange`\nprop.\n\nWhen using
the `onChange` the EuiTable leave all the pagination/size etc\nhandling
to the consumer, where the `onTableChange` is just a callback\nrelated
to the changes, used within the `useEuiTablePersist` to store\nsome
configuration across tabels.\n\nThe PR fixes the `onTableChange`
callback to the correct prop.\n\nA functional test was also added to
check the pagination works within\nLens. I haven't used the existing
`inspector.ts` functional tests\nbecause they where within the Legacy
Visualize.\n\nI've checked the usage of `useEuiTablePersist` and the
returned\n`onTableChange` and is correctly used everywhere except for
ESQL query\nhistory that doesn't seems to have enabled pagination cc
@stratoula\n\n90f65c3dba/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx (L383)\n\n---------\n\nCo-authored-by:
Marco Liberati
<dej611@users.noreply.github.com>","sha":"d4fb29bb2deac21fa88ffb0e69f7ecd0d6baf4f4"}}]}]
BACKPORT-->

Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2025-06-17 14:44:35 +02:00 • committed by GitHub
parent 2118142601
commit 137a71bf35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 72 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/shared-ux/table_persist/README.md
View file

@ -45,6 +45,7 @@ const MyTableComponent: FunctionComponent<Props> = ({ items }) => {
columns={columns}
pagination={pagination}
sorting={sorting}
onTableChange={onTableChange}
/>
);
};

2
src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
View file

@ -210,7 +210,7 @@ class DataTableFormatClass extends Component<
items={rows}
sorting={sorting}
pagination={pagination}
onChange={onTableChange}
onTableChange={onTableChange}
css={css`
// Set a min width on each column - you can use [data-test-subj] to target specific columns
.euiTableHeaderCell {

1
x-pack/test/functional/apps/lens/group1/index.ts
View file

@ -78,6 +78,7 @@ export default ({ getService, loadTestFile, getPageObjects }: FtrProviderContext
loadTestFile(require.resolve('./smokescreen')); // 12m 12s
loadTestFile(require.resolve('./ad_hoc_data_view')); // 3m 40s
loadTestFile(require.resolve('./multiple_data_views'));
loadTestFile(require.resolve('./inspector'));
}
});
};

69
x-pack/test/functional/apps/lens/group1/inspector.ts Normal file
View file

@ -0,0 +1,69 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { FtrProviderContext } from '../../../ftr_provider_context';
export default function ({ getService, getPageObjects }: FtrProviderContext) {
const { visualize, lens, timePicker } = getPageObjects(['visualize', 'lens', 'timePicker']);
const testSubjects = getService('testSubjects');
const inspector = getService('inspector');
describe('Inspector', () => {
it('should allow switch between table page', async () => {
await visualize.navigateToNewVisualization();
await visualize.clickVisType('lens');
await timePicker.setDefaultAbsoluteRange();
await lens.configureDimension({
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
operation: 'date_histogram',
field: '@timestamp',
});
await lens.configureDimension({
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
operation: 'average',
field: 'bytes',
});
await lens.configureDimension({
dimension: 'lnsXY_splitDimensionPanel > lns-empty-dimension',
operation: 'terms',
field: 'geo.dest',
});
await inspector.open('lnsApp_inspectButton');
await inspector.setTablePageSize(10);
await inspector.expectTableData([
['BT', '2015-09-19 06:00', '-'],
['BT', '2015-09-19 09:00', '-'],
['BT', '2015-09-19 12:00', '-'],
['BT', '2015-09-19 15:00', '-'],
['BT', '2015-09-19 18:00', '-'],
['BT', '2015-09-19 21:00', '-'],
['BT', '2015-09-20 00:00', '-'],
['BT', '2015-09-20 03:00', '-'],
['BT', '2015-09-20 06:00', '-'],
['BT', '2015-09-20 09:00', '-'],
]);
await testSubjects.click('pagination-button-1');
await inspector.expectTableData([
['BT', '2015-09-20 12:00', '-'],
['BT', '2015-09-20 15:00', '-'],
['BT', '2015-09-20 18:00', '-'],
['BT', '2015-09-20 21:00', '-'],
['BT', '2015-09-21 00:00', '-'],
['BT', '2015-09-21 03:00', '-'],
['BT', '2015-09-21 06:00', '-'],
['BT', '2015-09-21 09:00', '-'],
['BT', '2015-09-21 12:00', '-'],
['BT', '2015-09-21 15:00', '-'],
]);
});
});
}