Fix no model show up when search a model (#238)

* fix: reset to page 1 after name or state search Signed-off-by: Lin Wang <wonglam@amazon.com> * refactor: remove unnecessary act call Signed-off-by: Lin Wang <wonglam@amazon.com> --------- Signed-off-by: Lin Wang <wonglam@amazon.com> (cherry picked from commit 24aa9df)
opensearch-project · Aug 2, 2023 · 6c2c775 · 6c2c775
1 parent ec30768
commit 6c2c775
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 27 deletions.
diff --git a/public/components/monitoring/tests/use_monitoring.test.ts b/public/components/monitoring/tests/use_monitoring.test.ts
@@ -18,7 +18,7 @@ const mockEmptyRecords = () =>
 
 describe('useMonitoring', () => {
   beforeEach(() => {
-    jest.spyOn(Model.prototype, 'search').mockResolvedValueOnce({
+    jest.spyOn(Model.prototype, 'search').mockResolvedValue({
       data: [
         {
           id: 'model-1-id',
@@ -44,9 +44,7 @@ describe('useMonitoring', () => {
 
     await waitFor(() => result.current.pageStatus === 'normal');
 
-    act(() => {
-      result.current.searchByNameOrId('foo');
-    });
+    result.current.searchByNameOrId('foo');
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -56,9 +54,7 @@ describe('useMonitoring', () => {
       )
     );
 
-    act(() => {
-      result.current.searchByStatus(['responding']);
-    });
+    result.current.searchByStatus(['responding']);
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -68,13 +64,10 @@ describe('useMonitoring', () => {
       )
     );
 
-    act(() => {
-      result.current.resetSearch();
-    });
+    result.current.resetSearch();
     await waitFor(() => result.current.pageStatus === 'normal');
-    act(() => {
-      result.current.searchByStatus(['partial-responding']);
-    });
+
+    result.current.searchByStatus(['partial-responding']);
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -97,11 +90,9 @@ describe('useMonitoring', () => {
       )
     );
 
-    act(() => {
-      result.current.handleTableChange({
-        sort: { field: 'name', direction: 'desc' },
-        pagination: { currentPage: 2, pageSize: 10 },
-      });
+    result.current.handleTableChange({
+      sort: { field: 'name', direction: 'desc' },
+      pagination: { currentPage: 2, pageSize: 10 },
     });
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
@@ -119,9 +110,7 @@ describe('useMonitoring', () => {
 
     await waitFor(() => expect(Model.prototype.search).toHaveBeenCalledTimes(1));
 
-    act(() => {
-      result.current.reload();
-    });
+    result.current.reload();
     await waitFor(() => expect(Model.prototype.search).toHaveBeenCalledTimes(2));
   });
 
@@ -172,6 +161,58 @@ describe('useMonitoring', () => {
 
     searchMock.mockRestore();
   });
+
+  it('should call searchByNameOrId with from 0 after page changed', async () => {
+    const { result, waitFor } = renderHook(() => useMonitoring());
+
+    result.current.handleTableChange({
+      pagination: {
+        currentPage: 2,
+        pageSize: 15,
+      },
+    });
+
+    await waitFor(() => {
+      expect(result.current.pagination?.currentPage).toBe(2);
+    });
+
+    result.current.searchByNameOrId('foo');
+
+    await waitFor(() => {
+      expect(Model.prototype.search).toHaveBeenCalledTimes(3);
+      expect(Model.prototype.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          from: 0,
+        })
+      );
+    });
+  });
+
+  it('should call searchByStatus with from 0 after page changed', async () => {
+    const { result, waitFor } = renderHook(() => useMonitoring());
+
+    result.current.handleTableChange({
+      pagination: {
+        currentPage: 2,
+        pageSize: 15,
+      },
+    });
+
+    await waitFor(() => {
+      expect(result.current.pagination?.currentPage).toBe(2);
+    });
+
+    result.current.searchByStatus(['responding']);
+
+    await waitFor(() => {
+      expect(Model.prototype.search).toHaveBeenCalledTimes(3);
+      expect(Model.prototype.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          from: 0,
+        })
+      );
+    });
+  });
 });
 
 describe('useMonitoring.pageStatus', () => {
@@ -217,9 +258,7 @@ describe('useMonitoring.pageStatus', () => {
 
     // Mock search function to return empty result
     mockEmptyRecords();
-    act(() => {
-      result.current.searchByNameOrId('foo');
-    });
+    result.current.searchByNameOrId('foo');
     await waitFor(() => expect(result.current.pageStatus).toBe('reset-filter'));
   });
 
@@ -231,9 +270,7 @@ describe('useMonitoring.pageStatus', () => {
 
     // assume result is empty
     mockEmptyRecords();
-    act(() => {
-      result.current.searchByStatus(['responding']);
-    });
+    result.current.searchByStatus(['responding']);
     await waitFor(() => expect(result.current.pageStatus).toBe('reset-filter'));
   });
 

diff --git a/public/components/monitoring/use_monitoring.ts b/public/components/monitoring/use_monitoring.ts
@@ -122,13 +122,15 @@ export const useMonitoring = () => {
     setParams((previousValue) => ({
       ...previousValue,
       nameOrId,
+      currentPage: 1,
     }));
   }, []);
 
   const searchByStatus = useCallback((status: ModelDeployStatus[]) => {
     setParams((previousValue) => ({
       ...previousValue,
       status,
+      currentPage: 1,
     }));
   }, []);