diff --git a/public/components/monitoring/__tests__/use_monitoring.test.tsx b/public/components/monitoring/__tests__/use_monitoring.test.tsx index 03a000b8..272b85bb 100644 --- a/public/components/monitoring/__tests__/use_monitoring.test.tsx +++ b/public/components/monitoring/__tests__/use_monitoring.test.tsx @@ -32,7 +32,7 @@ const setup = ({ wrapper: ({ children }) => ( { planning_worker_nodes: ['node1', 'node2', 'node3'], }, ], - total_models: 1, + total_models: 500, }); }); @@ -481,6 +481,7 @@ describe('useMonitoring', () => { renderHookResult: { waitFor }, } = setup({ initDataSourceContextValue: { + dataSourceEnabled: true, selectedDataSourceOption: null, }, }); @@ -495,6 +496,7 @@ describe('useMonitoring', () => { renderHookResult: { waitFor }, } = setup({ initDataSourceContextValue: { + dataSourceEnabled: true, selectedDataSourceOption: { id: 'foo' }, }, }); @@ -513,6 +515,7 @@ describe('useMonitoring', () => { setSelectedDataSourceOption, } = setup({ initDataSourceContextValue: { + dataSourceEnabled: true, selectedDataSourceOption: { id: 'foo' }, }, }); @@ -546,7 +549,7 @@ describe('useMonitoring', () => { it('should reset connectors, status, source and nameOrId filter after resetSearch called', async () => { const { - renderHookResult: { result }, + renderHookResult: { result, waitFor }, } = setup(); act(() => { result.current.searchByNameOrId('foo'); @@ -565,14 +568,60 @@ describe('useMonitoring', () => { act(() => { result.current.resetSearch(); }); - expect(result.current.params).toEqual( - expect.objectContaining({ - nameOrId: '', - connector: [], - source: [], - status: undefined, - }) + await waitFor(() => { + expect(result.current.params).toEqual( + expect.objectContaining({ + nameOrId: '', + connector: [], + source: [], + status: undefined, + }) + ); + expect(Model.prototype.search).toHaveBeenCalledTimes(3); + }); + }); + + it('should reset to max page when current page greater than max page', async () => { + const { + renderHookResult: { result, waitFor }, + } = setup(); + await waitFor(() => { + expect(Model.prototype.search).toHaveBeenCalled(); + }); + jest.spyOn(Model.prototype, 'search').mockImplementationOnce( + () => + new Promise((resolve) => { + setTimeout(() => { + resolve({ + data: [ + { + id: 'model-1-id', + name: 'model-1-name', + algorithm: 'TEXT_EMBEDDING', + model_state: 'DEPLOYED', + model_version: '1.0.0', + current_worker_node_count: 1, + planning_worker_node_count: 3, + planning_worker_nodes: ['node1', 'node2', 'node3'], + }, + ], + total_models: 1, + }); + }, 300); + }) ); + act(() => { + result.current.handleTableChange({ + pagination: { + currentPage: 2, + pageSize: 50, + }, + }); + }); + expect(result.current.params.currentPage).toEqual(2); + await waitFor(() => { + expect(result.current.params.currentPage).toEqual(1); + }); }); }); diff --git a/public/components/monitoring/use_monitoring.ts b/public/components/monitoring/use_monitoring.ts index edce963e..d11d3d91 100644 --- a/public/components/monitoring/use_monitoring.ts +++ b/public/components/monitoring/use_monitoring.ts @@ -298,6 +298,21 @@ export const useMonitoring = () => { }); }, [dataSourceEnabled, selectedDataSourceOption]); + useEffect(() => { + if (params.currentPage === 1 || !data) { + return; + } + const maxPage = Math.max(1, data.pagination.totalPages); + if (params.currentPage <= maxPage) { + return; + } + + setParams((prevParams) => ({ + ...prevParams, + currentPage: maxPage, + })); + }, [params, data]); + return { params, pageStatus,