feat: search tablets via backend on the database page

src/containers/Tablets/Tablets.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {skipToken} from '@reduxjs/toolkit/query';
 import {isNil} from 'lodash';
+import {StringParam, useQueryParams} from 'use-query-params';
 
 import {useClusterWithProxy} from '../../store/reducers/cluster/cluster';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
@@ -12,6 +13,9 @@ import {useAutoRefreshInterval, useTypedSelector} from '../../utils/hooks';
 
 import {TabletsTable} from './TabletsTable';
 
+const TABLET_ID_SEARCH_DEBOUNCE = 1000;
+const TABLET_ID_PATTERN = /^\d+$/;
+
 const activeStatuses: ETabletState[] = [
     ETabletState.Created,
     ETabletState.ResolveStateStorage,
@@ -51,8 +55,44 @@ export function Tablets({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const useMetaProxy = useClusterWithProxy();
 
-    let params: TabletsApiRequestParams = {};
-    const filter = onlyActive ? `(State=[${activeStatuses.join(',')}])` : undefined;
+    // When tablets are opened on a database page, allow searching for any
+    // tablet of the database via the backend. On other schema objects the
+    // search remains client-side over the already loaded tablets list.
+    const isDatabasePage = !isNil(path) && !isNil(databaseFullPath) && path === databaseFullPath;
+
+    const [{tabletsSearch}] = useQueryParams({tabletsSearch: StringParam});
+    const currentSearch = tabletsSearch ?? '';
+
+    // Debounce the search value before sending it to the backend, since the
+    // request can be heavy.
+    const [debouncedSearch, setDebouncedSearch] = React.useState(currentSearch);
+    React.useEffect(() => {
+        const timer = window.setTimeout(() => {
+            setDebouncedSearch(currentSearch);
+        }, TABLET_ID_SEARCH_DEBOUNCE);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [currentSearch]);
+
+    const backendSearchActive = isDatabasePage && TABLET_ID_PATTERN.test(debouncedSearch);
+    // If the user is typing a numeric tablet id and the debounce hasn't fired
+    // yet, the backend request is still pending. Treat the table as loading so
+    // we don't flash the existing (about-to-be-replaced) results or an empty
+    // state in between.
+    const isBackendSearchPending =
+        isDatabasePage &&
+        currentSearch !== debouncedSearch &&
+        (TABLET_ID_PATTERN.test(currentSearch) || TABLET_ID_PATTERN.test(debouncedSearch));
+
+    const filterParts: string[] = [];
+    if (backendSearchActive) {
+        filterParts.push(`TabletId=${debouncedSearch}`);
+    }
+    if (onlyActive) {
+        filterParts.push(`State=[${activeStatuses.join(',')}]`);
+    }
+    const filter = filterParts.length ? `(${filterParts.join(';')})` : undefined;
 
     const schemaPathParam = React.useMemo(() => {
         if (!isNil(path) && !isNil(databaseFullPath)) {
@@ -61,8 +101,13 @@ export function Tablets({
         return undefined;
     }, [path, databaseFullPath, useMetaProxy]);
 
+    let params: TabletsApiRequestParams = {};
     if (valueIsDefined(nodeId)) {
         params = {nodeId, database, filter};
+    } else if (backendSearchActive) {
+        // Search across the entire database: omit the schema path so the
+        // backend returns any tablet with the given TabletId.
+        params = {database, filter};
     } else if (schemaPathParam) {
         params = {path: schemaPathParam, database, filter};
     }
@@ -79,9 +124,10 @@ export function Tablets({
         <TabletsTable
             scrollContainerRef={scrollContainerRef}
             tablets={tablets}
-            loading={isLoading}
+            loading={isLoading || isBackendSearchPending}
             error={error}
             nodeId={nodeId}
+            backendSearchActive={backendSearchActive || isBackendSearchPending}
         />
     );
 }

src/containers/Tablets/TabletsTable.tsx

@@ -213,6 +213,11 @@ interface TabletsTableProps {
     error?: unknown;
     scrollContainerRef: React.RefObject<HTMLElement>;
     nodeId?: string | number;
+    /**
+     * When true, the search value is applied on the backend and the table
+     * should not filter the already-fetched tablets by `tabletsSearch`.
+     */
+    backendSearchActive?: boolean;
 }
 
 export function TabletsTable({
@@ -221,6 +226,7 @@ export function TabletsTable({
     error,
     scrollContainerRef,
     nodeId,
+    backendSearchActive,
 }: TabletsTableProps) {
     const [{tabletsSearch}, setQueryParams] = useQueryParams({
         tabletsSearch: StringParam,
@@ -231,14 +237,24 @@ export function TabletsTable({
 
     const {filteredTablets, showEndOfRange} = React.useMemo(() => {
         let showEnd = false;
+        if (backendSearchActive) {
+            // Backend already filtered the list; just scan once for showEndOfRange.
+            for (const tablet of tablets) {
+                if (tablet.EndOfRangeKeyPrefix) {
+                    showEnd = true;
+                    break;
+                }
+            }
+            return {filteredTablets: tablets, showEndOfRange: showEnd};
+        }
         return {
             filteredTablets: tablets.filter((tablet) => {
                 showEnd = showEnd || Boolean(tablet.EndOfRangeKeyPrefix);
                 return String(tablet.TabletId).includes(tabletsSearch ?? '');
             }),
             showEndOfRange: showEnd,
         };
-    }, [tablets, tabletsSearch]);
+    }, [tablets, tabletsSearch, backendSearchActive]);
 
     const columns = React.useMemo(
         () => getColumns({nodeId, showEndOfRange}),