VTAdmin: Support for multiple DataTable accessing same URL (#17036)

Signed-off-by: Noble Mittal <noblemittal@outlook.com>
vitessio · Nov 8, 2024 · 0eb27b2 · 0eb27b2
1 parent 78f7db2
commit 0eb27b2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/web/vtadmin/src/components/dataTable/DataTable.tsx b/web/vtadmin/src/components/dataTable/DataTable.tsx
@@ -31,6 +31,10 @@ interface Props<T> {
     pageSize?: number;
     renderRows: (rows: T[]) => JSX.Element[];
     title?: string;
+    // Pass a unique `pageKey` for each DataTable, in case multiple
+    // DataTables access the same URL. This will be used to
+    // access page number from the URL.
+    pageKey?: string;
 }
 
 // Generally, page sizes of ~100 rows are fine in terms of performance,
@@ -43,12 +47,15 @@ export const DataTable = <T extends object>({
     pageSize = DEFAULT_PAGE_SIZE,
     renderRows,
     title,
+    pageKey = '',
 }: Props<T>) => {
     const { pathname } = useLocation();
     const urlQuery = useURLQuery();
 
+    const pageQueryKey = `${pageKey}page`;
+
     const totalPages = Math.ceil(data.length / pageSize);
-    const { page } = useURLPagination({ totalPages });
+    const { page } = useURLPagination({ totalPages, pageQueryKey });
 
     const startIndex = (page - 1) * pageSize;
     const endIndex = startIndex + pageSize;
@@ -59,7 +66,7 @@ export const DataTable = <T extends object>({
 
     const formatPageLink = (p: number) => ({
         pathname,
-        search: stringify({ ...urlQuery.query, page: p === 1 ? undefined : p }),
+        search: stringify({ ...urlQuery.query, [pageQueryKey]: p === 1 ? undefined : p }),
     });
 
     return (

diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx
@@ -276,6 +276,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name, refetchInterval }:
                 renderRows={renderSummaryRows}
                 pageSize={1}
                 title="Summary"
+                pageKey="summary"
             />
             <span id="workflowStreams"></span>
             <DataTable
@@ -284,6 +285,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name, refetchInterval }:
                 renderRows={renderStreamRows}
                 pageSize={10}
                 title="Streams"
+                pageKey="streams"
             />
             {tableCopyStates && (
                 <DataTable
@@ -292,6 +294,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name, refetchInterval }:
                     renderRows={renderTableCopyStateRows}
                     pageSize={1000}
                     title="Table Copy State"
+                    pageKey="tableCopyState"
                 />
             )}
             <h3 className="mt-8 mb-4">Recent Logs</h3>
@@ -304,6 +307,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name, refetchInterval }:
                             renderRows={renderLogRows}
                             pageSize={10}
                             title={stream.key!}
+                            pageKey={`${formatAlias(stream.tablet)}${stream.id}`}
                         />
                     </div>
                 ))

diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowVDiff.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowVDiff.tsx
@@ -83,7 +83,7 @@ export const WorkflowVDiff = ({ clusterID, keyspace, name }: Props) => {
 
     const isStatusEmpty =
         !lastVDiffStatus ||
-        (Object.keys(lastVDiffStatus.shard_report).length === 1 &&
+        (Object.keys(lastVDiffStatus.shard_report).length > 0 &&
             !lastVDiffStatus.shard_report[Object.keys(lastVDiffStatus.shard_report)[0]].state);
 
     const renderRows = (rows: typeof shardReports) => {

diff --git a/web/vtadmin/src/hooks/useURLPagination.ts b/web/vtadmin/src/hooks/useURLPagination.ts
@@ -20,6 +20,7 @@ import { useURLQuery } from './useURLQuery';
 
 export interface PaginationOpts {
     totalPages: number;
+    pageQueryKey?: string;
 }
 
 export interface PaginationParams {
@@ -35,15 +36,15 @@ const FIRST_PAGE = 1;
  * 	- use pagination in some way
  * 	- encode pagination state in the URL (e.g., /some/route?page=123)
  */
-export const useURLPagination = ({ totalPages }: PaginationOpts): PaginationParams => {
+export const useURLPagination = ({ totalPages, pageQueryKey = 'page' }: PaginationOpts): PaginationParams => {
     const history = useHistory();
     const location = useLocation();
     const { query, replaceQuery } = useURLQuery({ parseNumbers: true });
 
     // A slight nuance here -- if `page` is not in the URL at all, then we can assume
     // it's the first page. This makes for slightly nicer URLs for the first/default page:
     // "/foo" instead of "/foo?page=1". No redirect required.
-    const page = !('page' in query) || query.page === null ? FIRST_PAGE : query.page;
+    const page = !(pageQueryKey in query) || query[pageQueryKey] === null ? FIRST_PAGE : query[pageQueryKey];
 
     useEffect(() => {
         // If the value in the URL *is* defined but is negative, non-numeric,
@@ -53,9 +54,9 @@ export const useURLPagination = ({ totalPages }: PaginationOpts): PaginationPara
 
         if (isPageTooBig || isPageTooSmall || typeof page !== 'number') {
             // Replace history so the invalid value is not persisted in browser history
-            replaceQuery({ page: FIRST_PAGE });
+            replaceQuery({ [pageQueryKey]: FIRST_PAGE });
         }
-    }, [page, totalPages, history, location.pathname, query, replaceQuery]);
+    }, [page, pageQueryKey, totalPages, history, location.pathname, query, replaceQuery]);
 
     return {
         page,