Index backfill progress UI (#39191)

Adds UI for showing index backfill progress.

https://github.com/user-attachments/assets/2890b316-3dc7-4075-8121-5e251d8ea8b6

GitOrigin-RevId: d0276f60686437855c8783e8316810377ba1b00f

Author: emmaling27

npm-packages/dashboard-common/src/features/data/components/DataContent.tsx

@@ -185,7 +185,7 @@ export function DataContent({
   const indexes =
     useQuery(api._system.frontend.indexes.default, {
       tableName,
-      tableNamespace: selectedNent?.id ? selectedNent.id : null,
+      tableNamespace: selectedNent?.id ?? null,
     }) ?? undefined;
   const sortField =
     (

npm-packages/dashboard-common/src/features/data/components/DataFilters/DataFilters.tsx

@@ -81,7 +81,7 @@ export function DataFilters({
   const indexes =
     useQuery(api._system.frontend.indexes.default, {
       tableName,
-      tableNamespace: selectedNent?.id ? selectedNent.id : null,
+      tableNamespace: selectedNent?.id ?? null,
     }) ?? undefined;
   const {
     isDirty,

npm-packages/dashboard-common/src/features/data/components/IndexList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Index } from "@common/features/data/lib/api";
-import { Spinner } from "@ui/Spinner";
 import { Tooltip } from "@ui/Tooltip";
+import { ProgressBar } from "@ui/ProgressBar";
 import { useQuery } from "convex/react";
 import { api } from "system-udfs/convex/_generated/api";
 import { useNents } from "@common/lib/useNents";
@@ -18,11 +18,19 @@ function IndexRow({ index }: { index: Index }) {
       </td>
       <td className="ml-auto w-full py-2 text-sm text-content-secondary">
         {index.backfill.state !== "done" ? (
-          <Tooltip tip="This index is currently backfilling, and is not yet ready to use.">
-            <span className="h-5 w-5">
-              <Spinner />
-            </span>
-          </Tooltip>
+          <div className="flex items-center gap-2">
+            <Tooltip tip="This index is currently backfilling, and is not yet ready to use.">
+              {index.backfill.stats?.totalDocs !== null &&
+                index.backfill.stats?.totalDocs !== undefined &&
+                index.backfill.stats?.totalDocs > 0 &&
+                index.backfill.stats?.numDocsIndexed !== undefined && (
+                  <IndexBackfillProgress
+                    numDocsIndexed={index.backfill.stats.numDocsIndexed}
+                    totalDocs={index.backfill.stats.totalDocs}
+                  />
+                )}
+            </Tooltip>
+          </div>
         ) : (
           type
         )}
@@ -31,6 +39,28 @@ function IndexRow({ index }: { index: Index }) {
   );
 }
 
+function IndexBackfillProgress({
+  numDocsIndexed,
+  totalDocs,
+}: {
+  numDocsIndexed: number;
+  totalDocs: number;
+}) {
+  const fraction = Math.min(numDocsIndexed / totalDocs, 0.99);
+  const percent = Math.round(fraction * 100);
+  return (
+    <div className="flex items-center gap-2">
+      <ProgressBar
+        fraction={fraction}
+        ariaLabel={`Index backfill progress: ${percent}%  of documents`}
+        variant="stripes"
+        className="w-24"
+      />
+      <span className="text-xs text-content-tertiary">{percent}%</span>
+    </div>
+  );
+}
+
 function getIndexDescription(index: Index) {
   if (index.fields instanceof Array) {
     return { type: "", fields: index.fields.join(", ") };
@@ -42,9 +72,11 @@ function getIndexDescription(index: Index) {
 }
 
 export function IndexesList({ indexes }: { indexes?: Index[] }) {
-  return !indexes || indexes.length === 0 ? (
-    <>This table has no indexes</>
-  ) : (
+  if (!indexes || indexes.length === 0) {
+    return <>This table has no indexes</>;
+  }
+
+  return (
     <table className="table-auto">
       <thead>
         <tr className="border-b">
@@ -59,8 +91,8 @@ export function IndexesList({ indexes }: { indexes?: Index[] }) {
       </thead>
 
       <tbody>
-        {indexes.map((index) => (
-          <IndexRow key={index.name} index={index} />
+        {indexes.map((index, i) => (
+          <IndexRow key={`${index.name}-${i}`} index={index} />
         ))}
       </tbody>
     </table>
@@ -72,7 +104,7 @@ export function IndexList({ tableName }: { tableName: string }) {
   const indexes =
     useQuery(api._system.frontend.indexes.default, {
       tableName,
-      tableNamespace: selectedNent?.id ? selectedNent.id : null,
+      tableNamespace: selectedNent?.id ?? null,
     }) ?? undefined;
 
   return <IndexesList indexes={indexes} />;

npm-packages/dashboard-common/src/features/data/components/TableSchemaAndIndexes.tsx

@@ -33,10 +33,7 @@ export function TableSchemaAndIndexes({
 
 function SchemaAndIndexBody({ tableName }: { tableName: string }) {
   const tableSchemaStatus = useSingleTableSchemaStatus(tableName);
-  if (
-    tableSchemaStatus === undefined ||
-    tableSchemaStatus.isValidationRunning
-  ) {
+  if (tableSchemaStatus === undefined) {
     return <Loading />;
   }
   return (

npm-packages/dashboard-common/src/features/data/lib/useDataToolbarActions.ts

@@ -1,4 +1,5 @@
 import { Cursor, GenericDocument } from "convex/server";
+import { useRouter } from "next/router";
 import { ConvexError } from "convex/values";
 import { useMutation } from "convex/react";
 import udfs from "@common/udfs";
@@ -11,6 +12,7 @@ import { useNents } from "@common/lib/useNents";
 import { toast } from "@common/lib/utils";
 import { useContext } from "react";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { shallowNavigate } from "@common/lib/useTableMetadata";
 
 export function useDataToolbarActions({
   handleAddDocuments,
@@ -92,9 +94,15 @@ export function useDataToolbarActions({
   ): Promise<{ continueCursor: Cursor; deleted: number; hasMore: boolean }> =>
     tableClear({ tableName, cursor, componentId: selectedNent?.id ?? null });
 
+  const router = useRouter();
   const tableDelete = useDeleteTables();
   const deleteTable = async () => {
     try {
+      void shallowNavigate(router, {
+        ...router.query,
+        table: undefined,
+        filters: undefined,
+      });
       const resp = await tableDelete([tableName], selectedNent?.id ?? null);
       if (!resp?.success) {
         toast("error", resp.error);

npm-packages/dashboard-common/src/lib/useTableMetadata.tsx

@@ -79,7 +79,7 @@ export function useTableMetadataAndUpdateURL(): TableMetadata | undefined {
   return tableMetadata;
 }
 
-function shallowNavigate(
+export function shallowNavigate(
   router: NextRouter,
   newQuery: Record<string, string | undefined>,
 ) {