diff --git a/x-pack/plugins/ml/public/application/explorer/calculate_row_options.test.ts b/x-pack/plugins/ml/public/application/explorer/calculate_row_options.test.ts new file mode 100644 index 0000000000000..5b378805ea058 --- /dev/null +++ b/x-pack/plugins/ml/public/application/explorer/calculate_row_options.test.ts @@ -0,0 +1,34 @@ +/* + * 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 { calculateRowOptions } from './calculate_row_options'; + +describe('calculateRowOptions', () => { + it('should return all options when cardinality is greater than all row options', () => { + const rowOptions = [5, 10, 20, 50, 100]; + const cardinality = 150; + expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5, 10, 20, 50, 100]); + }); + + it('should return options up to and including cardinality', () => { + const rowOptions = [5, 10, 20, 50, 100]; + const cardinality = 30; + expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5, 10, 20, 50]); + }); + + it('should return at least one option even if cardinality is less than all options', () => { + const rowOptions = [5, 10, 20, 50, 100]; + const cardinality = 3; + expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5]); + }); + + it('should handle cardinality of zero', () => { + const rowOptions = [5, 10, 20, 50, 100]; + const cardinality = 0; + expect(calculateRowOptions(rowOptions, cardinality)).toEqual([5]); + }); +}); diff --git a/x-pack/plugins/ml/public/application/explorer/calculate_row_options.ts b/x-pack/plugins/ml/public/application/explorer/calculate_row_options.ts new file mode 100644 index 0000000000000..e258c3d304d22 --- /dev/null +++ b/x-pack/plugins/ml/public/application/explorer/calculate_row_options.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export const calculateRowOptions = (rowOptions: number[], cardinality: number): number[] => { + return rowOptions.reduce((acc, v) => { + if (v <= cardinality) { + acc.push(v); + } else if (acc.length === 0 || acc[acc.length - 1] < cardinality) { + acc.push(v); + } + return acc; + }, [] as number[]); +}; diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx index e573e2572bed4..5dd1440d7d817 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx +++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx @@ -254,10 +254,10 @@ export const SwimlaneContainer: FC = ({ const isPaginationVisible = (showSwimlane || isLoading) && swimlaneLimit !== undefined && - swimlaneLimit > (perPage ?? 5) && - onPaginationChange && - fromPage && - perPage; + swimlaneLimit > 5 && + !!onPaginationChange && + !!fromPage && + !!perPage; const rowsCount = swimlaneData?.laneLabels?.length ?? 0; diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_pagination.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_pagination.tsx index cdc823b264d3b..55623e5b55ffc 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_pagination.tsx +++ b/x-pack/plugins/ml/public/application/explorer/swimlane_pagination.tsx @@ -18,6 +18,7 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; +import { calculateRowOptions } from './calculate_row_options'; interface SwimLanePaginationProps { fromPage: number; @@ -51,25 +52,26 @@ export const SwimLanePagination: FC = ({ const pageCount = Math.ceil(cardinality / perPage); - const items = [5, 10, 20, 50, 100].map((v) => { - return ( - { - closePopover(); - setPerPage(v); - }} - data-test-subj={`${v} rows`} - > - - - ); - }); + const rowOptions = [5, 10, 20, 50, 100]; + const items = calculateRowOptions(rowOptions, cardinality); + + const menuItems = items.map((v) => ( + { + closePopover(); + setPerPage(v); + }} + data-test-subj={`${v} rows`} + > + + + )); return ( @@ -97,7 +99,7 @@ export const SwimLanePagination: FC = ({ closePopover={closePopover} panelPaddingSize="none" > - +