fix: prevent out of bounds navigation on new list views (#9875)

determined-ai · Aug 29, 2024 · ad5fe5a · ad5fe5a
1 parent a605f00
commit ad5fe5a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/webui/react/src/components/Searches/Searches.tsx b/webui/react/src/components/Searches/Searches.tsx
@@ -339,12 +339,13 @@ const Searches: React.FC<Props> = ({ project }) => {
         kind: 'group',
       };
 
+      const offset = page * settings.pageLimit;
       const response = await searchExperiments(
         {
           ...experimentFilters,
           filter: JSON.stringify(filters),
           limit: settings.pageLimit,
-          offset: page * settings.pageLimit,
+          offset,
           sort: sortString || undefined,
         },
         { signal: canceler.signal },
@@ -355,6 +356,10 @@ const Searches: React.FC<Props> = ({ project }) => {
       setTotal(
         response.pagination.total !== undefined ? Loaded(response.pagination.total) : NotLoaded,
       );
+      // oob check
+      if ((response.pagination.total || 0) < offset) {
+        resetPagination();
+      }
     } catch (e) {
       handleError(e, { publicSubject: 'Unable to fetch experiments.' });
     } finally {
@@ -367,6 +372,7 @@ const Searches: React.FC<Props> = ({ project }) => {
     isLoadingSettings,
     loadableFormset,
     page,
+    resetPagination,
     sortString,
     settings.pageLimit,
   ]);

diff --git a/webui/react/src/pages/F_ExpList/F_ExperimentList.tsx b/webui/react/src/pages/F_ExpList/F_ExperimentList.tsx
@@ -345,12 +345,13 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
   const fetchExperiments = useCallback(async (): Promise<void> => {
     if (isLoadingSettings || Loadable.isNotLoaded(loadableFormset)) return;
     try {
+      const offset = page * settings.pageLimit;
       const response = await searchExperiments(
         {
           ...experimentFilters,
           filter: filtersString,
           limit: settings.pageLimit,
-          offset: page * settings.pageLimit,
+          offset,
           sort: sortString || undefined,
         },
         { signal: canceler.signal },
@@ -361,20 +362,25 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
       setTotal(
         response.pagination.total !== undefined ? Loaded(response.pagination.total) : NotLoaded,
       );
+      // oob check
+      if ((response.pagination.total || 0) < offset) {
+        resetPagination();
+      }
     } catch (e) {
       handleError(e, { publicSubject: 'Unable to fetch experiments.' });
     } finally {
       setIsLoading(false);
     }
   }, [
-    canceler.signal,
-    experimentFilters,
-    filtersString,
     isLoadingSettings,
     loadableFormset,
     page,
-    sortString,
     settings.pageLimit,
+    experimentFilters,
+    filtersString,
+    resetPagination,
+    sortString,
+    canceler.signal,
   ]);
 
   const { stopPolling } = usePolling(fetchExperiments, { rerunOnNewFn: true });

diff --git a/webui/react/src/pages/FlatRuns/FlatRuns.tsx b/webui/react/src/pages/FlatRuns/FlatRuns.tsx
@@ -525,6 +525,12 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     [page, updateSettings, setPage],
   );
 
+  const resetPagination = useCallback(() => {
+    setIsLoading(true);
+    setPage(0);
+    setRuns(INITIAL_LOADING_RUNS);
+  }, [setPage]);
+
   const fetchRuns = useCallback(async (): Promise<void> => {
     if (isLoadingSettings || Loadable.isNotLoaded(loadableFormset)) return;
     try {
@@ -546,11 +552,12 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
           kind: 'group',
         };
       }
+      const offset = page * settings.pageLimit;
       const response = await searchRuns(
         {
           filter: JSON.stringify(filters),
           limit: settings.pageLimit,
-          offset: page * settings.pageLimit,
+          offset,
           projectId: projectId,
           sort: sortString || undefined,
         },
@@ -562,6 +569,10 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
       setTotal(
         response.pagination.total !== undefined ? Loaded(response.pagination.total) : NotLoaded,
       );
+      // if we're out of bounds, load page one
+      if ((response.pagination.total || 0) < offset) {
+        resetPagination();
+      }
     } catch (e) {
       handleError(e, { publicSubject: 'Unable to fetch runs.' });
     } finally {
@@ -574,6 +585,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     loadableFormset,
     page,
     projectId,
+    resetPagination,
     settings.pageLimit,
     sortString,
     searchId,
@@ -585,12 +597,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     return rootFilterChildren.length;
   }, [rootFilterChildren.length]);
 
-  const resetPagination = useCallback(() => {
-    setIsLoading(true);
-    setPage(0);
-    setRuns(INITIAL_LOADING_RUNS);
-  }, [setPage]);
-
   useLayoutEffect(() => {
     let cleanup: () => void;
     // eslint-disable-next-line prefer-const