feat(compass-indexes): add index build progress COMPASS-9495

nbbeeken · nbbeeken · commit 3dc8abd3457e · 2025-08-15T14:30:58.000-04:00
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx b/packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx
@@ -1,18 +1,39 @@
 import semver from 'semver';
 import React, { useCallback, useMemo } from 'react';
 import type { GroupedItemAction } from '@mongodb-js/compass-components';
-import { css, ItemActionGroup } from '@mongodb-js/compass-components';
+import {
+  css,
+  ItemActionGroup,
+  SpinLoader,
+  spacing,
+  Body,
+} from '@mongodb-js/compass-components';
 
 const styles = css({
   // Align actions with the end of the table
   justifyContent: 'flex-end',
 });
 
+const combinedContainerStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing[200],
+  minWidth: spacing[800],
+  justifyContent: 'flex-end',
+});
+
+const progressTextStyles = css({
+  fontSize: '12px',
+  fontWeight: 'normal',
+});
+
 type Index = {
   name: string;
   extra?: {
     hidden?: boolean;
   };
+  status?: 'inprogress' | 'ready' | 'failed';
+  progressPercentage?: number;
 };
 
 type IndexActionsProps = {
@@ -44,30 +65,42 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
 }) => {
   const indexActions: GroupedItemAction<IndexAction>[] = useMemo(() => {
     const actions: GroupedItemAction<IndexAction>[] = [];
+    const progressPercentage = index.progressPercentage ?? 0;
 
-    if (serverSupportsHideIndex(serverVersion)) {
-      actions.push(
-        index.extra?.hidden
-          ? {
-              action: 'unhide',
-              label: `Unhide Index ${index.name}`,
-              tooltip: `Unhide Index`,
-              icon: 'Visibility',
-            }
-          : {
-              action: 'hide',
-              label: `Hide Index ${index.name}`,
-              tooltip: `Hide Index`,
-              icon: 'VisibilityOff',
-            }
-      );
-    }
+    if (progressPercentage < 100 && progressPercentage > 0) {
+      // partially built
+      actions.push({
+        action: 'delete',
+        label: `Cancel Index ${index.name}`,
+        icon: 'XWithCircle',
+        variant: 'destructive',
+      });
+    } else {
+      // completed
+      if (serverSupportsHideIndex(serverVersion)) {
+        actions.push(
+          index.extra?.hidden
+            ? {
+                action: 'unhide',
+                label: `Unhide Index ${index.name}`,
+                tooltip: `Unhide Index`,
+                icon: 'Visibility',
+              }
+            : {
+                action: 'hide',
+                label: `Hide Index ${index.name}`,
+                tooltip: `Hide Index`,
+                icon: 'VisibilityOff',
+              }
+        );
+      }
 
-    actions.push({
-      action: 'delete',
-      label: `Drop Index ${index.name}`,
-      icon: 'Trash',
-    });
+      actions.push({
+        action: 'delete',
+        label: `Drop Index ${index.name}`,
+        icon: 'Trash',
+      });
+    }
 
     return actions;
   }, [index, serverVersion]);
@@ -85,6 +118,30 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
     [onDeleteIndexClick, onHideIndexClick, onUnhideIndexClick, index]
   );
 
+  const progressPercentage = index.progressPercentage ?? 0;
+  if (
+    index.status !== 'failed' &&
+    progressPercentage < 100 &&
+    progressPercentage > 0
+  ) {
+    const progressText = `${Math.round(progressPercentage)}%`;
+
+    return (
+      <div
+        className={combinedContainerStyles}
+        data-testid="index-building-spinner"
+      >
+        <Body className={progressTextStyles}>Building... {progressText}</Body>
+        <SpinLoader size={16} title="Index build in progress" />
+        <ItemActionGroup<IndexAction>
+          data-testid="index-actions"
+          actions={indexActions}
+          onAction={onAction}
+        />
+      </div>
+    );
+  }
+
   return (
     <ItemActionGroup<IndexAction>
       data-testid="index-actions"
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/regular-indexes-table.tsx b/packages/compass-indexes/src/components/regular-indexes-table/regular-indexes-table.tsx
@@ -10,6 +10,7 @@ import type {
 } from '@mongodb-js/compass-components';
 
 import type { RootState } from '../../modules';
+import { useIndexProgress } from '../../hooks/use-index-progress';
 
 import TypeField from './type-field';
 import SizeField from './size-field';
@@ -248,12 +249,16 @@ function mergeIndexes(
   const rollingIndexNames = new Set(
     rollingIndexes.map((index) => index.indexName)
   );
+  const inProgressIndexNames = new Set(
+    inProgressIndexes.map(({ name }) => name)
+  );
 
   const mappedIndexes: MappedRegularIndex[] = indexes
     // exclude partially-built indexes so that we don't include indexes that
     // only exist on the primary node and then duplicate those as rolling
     // builds in the same table
     .filter((index) => !rollingIndexNames.has(index.name))
+    .filter((index) => !inProgressIndexNames.has(index.name))
     .map((index) => {
       return { ...index, compassIndexType: 'regular-index' };
     });
@@ -286,10 +291,44 @@ function getInProgressIndexInfo(
   index: MappedInProgressIndex,
   {
     onDeleteFailedIndexClick,
+    onDeleteIndexClick,
+    serverVersion,
   }: {
     onDeleteFailedIndexClick: (indexName: string) => void;
+    onDeleteIndexClick: (indexName: string) => void;
+    serverVersion: string;
   }
 ): CommonIndexInfo {
+  // Use progress directly from Redux state
+  const progressToUse = index.progressPercentage ?? 0;
+
+  // Show spinner and progress only if:
+  // 1. Index is not failed (status !== 'failed')
+  // 2. Index has meaningful progress (> 0% and < 100%)
+  let actionsComponent;
+  if (index.status !== 'failed' && progressToUse > 0 && progressToUse < 100) {
+    actionsComponent = (
+      <RegularIndexActions
+        index={{
+          name: index.name,
+          progressPercentage: progressToUse,
+        }}
+        serverVersion={serverVersion}
+        onDeleteIndexClick={onDeleteIndexClick}
+        onHideIndexClick={() => {}} // No-op for building indexes
+        onUnhideIndexClick={() => {}} // No-op for building indexes
+      />
+    );
+  } else {
+    // For failed or pending indexes, use the InProgressIndexActions
+    actionsComponent = (
+      <InProgressIndexActions
+        index={index}
+        onDeleteFailedIndexClick={onDeleteFailedIndexClick}
+      />
+    );
+  }
+
   return {
     id: index.id,
     name: index.name,
@@ -300,12 +339,7 @@ function getInProgressIndexInfo(
     // TODO(COMPASS-8335): add properties for in-progress indexes
     properties: null,
     status: <StatusField status={index.status} error={index.error} />,
-    actions: (
-      <InProgressIndexActions
-        index={index}
-        onDeleteFailedIndexClick={onDeleteFailedIndexClick}
-      ></InProgressIndexActions>
-    ),
+    actions: actionsComponent,
   };
 }
 
@@ -387,6 +421,9 @@ export const RegularIndexesTable: React.FunctionComponent<
 }) => {
   const tabId = useWorkspaceTabId();
 
+  // Use our custom hook to handle index progress tracking
+  useIndexProgress(inProgressIndexes);
+
   useEffect(() => {
     onRegularIndexesOpened(tabId);
     return () => {
@@ -407,6 +444,8 @@ export const RegularIndexesTable: React.FunctionComponent<
         if (index.compassIndexType === 'in-progress-index') {
           indexData = getInProgressIndexInfo(index, {
             onDeleteFailedIndexClick,
+            onDeleteIndexClick,
+            serverVersion,
           });
         } else if (index.compassIndexType === 'rolling-index') {
           indexData = getRollingIndexInfo(index);
diff --git a/packages/compass-indexes/src/hooks/use-index-progress.ts b/packages/compass-indexes/src/hooks/use-index-progress.ts
@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import type { InProgressIndex } from '../modules/regular-indexes';
+import { getIndexesProgress } from '../modules/regular-indexes';
+import type { IndexesThunkDispatch } from '../modules';
+
+/** 1 seconds polling interval */
+const INDEX_INIT_PROGRESS_POLLING_INTERVAL_MS = 1 * 1000;
+/** 10 seconds polling interval */
+const INDEX_PROGRESS_POLLING_INTERVAL_MS = 10 * 1000;
+
+/**
+ * Custom hook to manage index build progress tracking
+ * This hook automatically starts/stops progress polling for indexes that are:
+ * 1. Being created (status: 'inprogress') - monitors for when build starts
+ * 2. Currently building (progressPercentage > 0% and < 100%) - tracks build progress
+ */
+export function useIndexProgress(inProgressIndexes: InProgressIndex[]) {
+  const dispatch = useDispatch<IndexesThunkDispatch>();
+  const timeoutRef = useRef<number | undefined>(undefined);
+  const checksRef = useRef<number>(0);
+
+  useEffect(() => {
+    const indexesToTrack = inProgressIndexes.filter((index) => {
+      const notFailed = index.status !== 'failed';
+      const inProgress = index.status === 'inprogress';
+      const progressPercentage = index.progressPercentage ?? 0;
+      const stillPartiallyBuilt =
+        progressPercentage > 0 && progressPercentage < 100;
+
+      const shouldTrack = notFailed && (inProgress || stillPartiallyBuilt);
+
+      return shouldTrack;
+    });
+
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = undefined;
+
+    if (indexesToTrack.length) {
+      checksRef.current = 0;
+
+      const updateIndexProgress = () => {
+        checksRef.current += 1;
+        void dispatch(getIndexesProgress(indexesToTrack)).finally(() => {
+          if (timeoutRef.current) {
+            // After the first 3 checks, slow down the poller
+            setTimeout(
+              updateIndexProgress,
+              checksRef.current < 3
+                ? INDEX_INIT_PROGRESS_POLLING_INTERVAL_MS
+                : INDEX_PROGRESS_POLLING_INTERVAL_MS
+            );
+          }
+        });
+      };
+
+      if (!timeoutRef.current) updateIndexProgress();
+    }
+
+    return () => {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = undefined;
+    };
+  }, [inProgressIndexes, dispatch]);
+}
diff --git a/packages/compass-indexes/src/modules/regular-indexes.spec.ts b/packages/compass-indexes/src/modules/regular-indexes.spec.ts
@@ -9,6 +9,8 @@ import {
   unhideIndex,
   startPollingRegularIndexes,
   stopPollingRegularIndexes,
+  trackIndexProgress,
+  indexCreationStarted,
 } from './regular-indexes';
 import {
   indexesList,
@@ -547,4 +549,84 @@ describe('regular-indexes module', function () {
       expect(collection.fetch.callCount).to.equal(0);
     });
   });
+
+  describe('#trackIndexProgress action', function () {
+    it('updates progress when currentOp returns matching index operation', async function () {
+      const currentOpResponse = {
+        inprog: [
+          {
+            command: {
+              createIndexes: 'trips',
+              indexes: [{ name: 'test_index_1' }],
+            },
+            progress: { done: 50, total: 100 },
+            ns: 'citibike.trips', // Use the same namespace as the test setup
+          },
+        ],
+      };
+
+      const store = setupStore(
+        {},
+        {
+          currentOp: () => Promise.resolve(currentOpResponse),
+        }
+      );
+
+      // Add an in-progress index to track
+      const mockIndex = {
+        id: 'test-index-id',
+        name: 'test_index_1',
+        fields: [{ field: 'field1', value: 1 }],
+        status: 'inprogress' as const,
+        progressPercentage: 0,
+      };
+
+      store.dispatch(indexCreationStarted(mockIndex));
+
+      // Track progress
+      await store.dispatch(trackIndexProgress('test-index-id', 'test_index_1'));
+
+      const state = store.getState();
+      const inProgressIndex = state.regularIndexes.inProgressIndexes.find(
+        (index) => index.id === 'test-index-id'
+      );
+
+      expect(inProgressIndex?.progressPercentage).to.equal(50);
+    });
+
+    it('does not update progress when no matching index operation is found', async function () {
+      const currentOpResponse = {
+        inprog: [], // No operations in progress
+      };
+
+      const store = setupStore(
+        {},
+        {
+          currentOp: () => Promise.resolve(currentOpResponse),
+        }
+      );
+
+      // Add an in-progress index to track
+      const mockIndex = {
+        id: 'test-index-id',
+        name: 'test_index_1',
+        fields: [{ field: 'field1', value: 1 }],
+        status: 'inprogress' as const,
+        progressPercentage: 0,
+      };
+
+      store.dispatch(indexCreationStarted(mockIndex));
+
+      // Track progress
+      await store.dispatch(trackIndexProgress('test-index-id', 'test_index_1'));
+
+      const state = store.getState();
+      const inProgressIndex = state.regularIndexes.inProgressIndexes.find(
+        (index) => index.id === 'test-index-id'
+      );
+
+      // Progress should remain unchanged
+      expect(inProgressIndex?.progressPercentage).to.equal(0);
+    });
+  });
 });
diff --git a/packages/compass-indexes/src/modules/regular-indexes.ts b/packages/compass-indexes/src/modules/regular-indexes.ts
diff --git a/packages/compass-indexes/src/stores/store.ts b/packages/compass-indexes/src/stores/store.ts
