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

Author: nbbeeken

packages/compass-indexes/src/components/regular-indexes-table/in-progress-index-actions.spec.tsx

@@ -13,26 +13,90 @@ import InProgressIndexActions from './in-progress-index-actions';
 
 describe('IndexActions Component', function () {
   let onDeleteSpy: SinonSpy;
+  let onDeleteIndexSpy: SinonSpy;
 
   before(cleanup);
   afterEach(cleanup);
   beforeEach(function () {
     onDeleteSpy = spy();
+    onDeleteIndexSpy = spy();
   });
 
-  it('does not render the delete button for an in progress index that is still in progress', function () {
+  it('renders a spinner and cancel action for an in progress index that is still in progress', function () {
     render(
       <InProgressIndexActions
         index={{
           name: 'artist_id_index',
           status: 'inprogress',
         }}
+        onDeleteIndexClick={onDeleteIndexSpy}
         onDeleteFailedIndexClick={onDeleteSpy}
       />
     );
 
-    const button = screen.queryByTestId('index-actions-delete-action');
-    expect(button).to.not.exist;
+    const spinner = screen.getByTestId('index-building-spinner');
+    expect(spinner).to.exist;
+
+    // Should now have a cancel action for in-progress indexes
+    const cancelButton = screen.getByTestId('index-actions-delete-action');
+    expect(cancelButton).to.exist;
+    expect(cancelButton.getAttribute('aria-label')).to.equal(
+      'Cancel Index artist_id_index'
+    );
+  });
+
+  it('renders a spinner with initial progress percentage for an in progress index', function () {
+    render(
+      <InProgressIndexActions
+        index={{
+          name: 'artist_id_index',
+          status: 'inprogress',
+          progressPercentage: 75,
+        }}
+        onDeleteIndexClick={onDeleteIndexSpy}
+        onDeleteFailedIndexClick={onDeleteSpy}
+      />
+    );
+
+    const spinner = screen.getByTestId('index-building-spinner');
+    expect(spinner).to.exist;
+    // The component starts with the provided progress percentage
+    expect(spinner).to.contain.text('75%');
+  });
+
+  it('renders a spinner with default text when no progress percentage is available', function () {
+    render(
+      <InProgressIndexActions
+        index={{
+          name: 'artist_id_index',
+          status: 'inprogress',
+        }}
+        onDeleteIndexClick={onDeleteIndexSpy}
+        onDeleteFailedIndexClick={onDeleteSpy}
+      />
+    );
+
+    const spinner = screen.getByTestId('index-building-spinner');
+    expect(spinner).to.exist;
+  });
+
+  it('calls onDeleteIndexClick when cancel button is clicked for in-progress index', function () {
+    render(
+      <InProgressIndexActions
+        index={{
+          name: 'artist_id_index',
+          status: 'inprogress',
+        }}
+        onDeleteIndexClick={onDeleteIndexSpy}
+        onDeleteFailedIndexClick={onDeleteSpy}
+      />
+    );
+
+    const cancelButton = screen.getByTestId('index-actions-delete-action');
+    expect(onDeleteIndexSpy.callCount).to.equal(0);
+    userEvent.click(cancelButton);
+    expect(onDeleteIndexSpy.callCount).to.equal(1);
+    expect(onDeleteIndexSpy.getCall(0).args[0]).to.equal('artist_id_index');
   });
 
   it('renders delete button for an in progress index that has failed', function () {
@@ -42,6 +106,7 @@ describe('IndexActions Component', function () {
           name: 'artist_id_index',
           status: 'failed',
         }}
+        onDeleteIndexClick={onDeleteIndexSpy}
         onDeleteFailedIndexClick={onDeleteSpy}
       />
     );

packages/compass-indexes/src/components/regular-indexes-table/in-progress-index-actions.tsx

@@ -1,34 +1,62 @@
 import React, { useCallback, useMemo } from 'react';
 import type { GroupedItemAction } from '@mongodb-js/compass-components';
-import { ItemActionGroup } from '@mongodb-js/compass-components';
+import {
+  ItemActionGroup,
+  SpinLoader,
+  css,
+  spacing,
+  Body,
+} from '@mongodb-js/compass-components';
 import type { InProgressIndex } from '../../modules/regular-indexes';
 
 type Index = {
   name: string;
   status: InProgressIndex['status'];
+  progressPercentage?: number;
 };
 
 type IndexActionsProps = {
   index: Index;
+  onDeleteIndexClick: (name: string) => void;
   onDeleteFailedIndexClick: (name: string) => void;
 };
 
 type IndexAction = 'delete';
 
+const combinedContainerStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing[200],
+  minWidth: spacing[800],
+  justifyContent: 'flex-end',
+});
+
+const progressTextStyles = css({
+  fontSize: '12px',
+  fontWeight: 'normal',
+});
+
 const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
   index,
+  onDeleteIndexClick,
   onDeleteFailedIndexClick,
 }) => {
   const indexActions: GroupedItemAction<IndexAction>[] = useMemo(() => {
     const actions: GroupedItemAction<IndexAction>[] = [];
 
-    // you can only drop regular indexes or failed inprogress indexes
+    // you can drop failed inprogress indexes or cancel inprogress indexes
     if (index.status === 'failed') {
       actions.push({
         action: 'delete',
         label: `Drop Index ${index.name}`,
         icon: 'Trash',
       });
+    } else if (index.status === 'inprogress') {
+      actions.push({
+        action: 'delete',
+        label: `Cancel Index ${index.name}`,
+        icon: 'XWithCircle',
+      });
     }
 
     return actions;
@@ -37,12 +65,40 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
   const onAction = useCallback(
     (action: IndexAction) => {
       if (action === 'delete') {
-        onDeleteFailedIndexClick(index.name);
+        if (index.status === 'inprogress') {
+          onDeleteIndexClick(index.name);
+        } else {
+          onDeleteFailedIndexClick(index.name);
+        }
       }
     },
-    [onDeleteFailedIndexClick, index]
+    [onDeleteFailedIndexClick, onDeleteIndexClick, index]
   );
 
+  // Show spinner with progress percentage for in-progress indexes
+  if (index.status === 'inprogress') {
+    // Use provided progress percentage or show default text
+    const currentProgress = index.progressPercentage ?? 0;
+    const progressText =
+      currentProgress > 0 ? `${Math.round(currentProgress)}%` : '';
+
+    return (
+      <div
+        className={combinedContainerStyles}
+        data-testid="index-building-spinner"
+      >
+        <Body className={progressTextStyles}>{progressText}</Body>
+        <SpinLoader size={16} title="Index build in progress" />
+        <ItemActionGroup<IndexAction>
+          data-testid="index-actions"
+          actions={indexActions}
+          onAction={onAction}
+        />
+      </div>
+    );
+  }
+
+  // Show actions for failed indexes (delete action)
   return (
     <ItemActionGroup<IndexAction>
       data-testid="index-actions"

packages/compass-indexes/src/components/regular-indexes-table/regular-indexes-table.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect, useCallback, useRef } from 'react';
 import { connect } from 'react-redux';
 import { withPreferences } from 'compass-preferences-model/provider';
 import { useWorkspaceTabId } from '@mongodb-js/compass-workspaces/provider';
@@ -27,6 +27,7 @@ import {
   unhideIndex,
   startPollingRegularIndexes,
   stopPollingRegularIndexes,
+  trackIndexProgress,
 } from '../../modules/regular-indexes';
 
 import type {
@@ -45,6 +46,7 @@ type RegularIndexesTableProps = {
   onUnhideIndexClick: (name: string) => void;
   onDeleteIndexClick: (name: string) => void;
   onDeleteFailedIndexClick: (name: string) => void;
+  onTrackIndexProgress: (indexId: string, indexName: string) => Promise<void>;
   readOnly?: boolean;
   error?: string | null;
   onRegularIndexesOpened: (tabId: string) => void;
@@ -286,10 +288,15 @@ function getInProgressIndexInfo(
   index: MappedInProgressIndex,
   {
     onDeleteFailedIndexClick,
+    onDeleteIndexClick,
   }: {
     onDeleteFailedIndexClick: (indexName: string) => void;
+    onDeleteIndexClick: (indexName: string) => void;
   }
 ): CommonIndexInfo {
+  // Use progress directly from Redux state
+  const progressToUse = index.progressPercentage;
+
   return {
     id: index.id,
     name: index.name,
@@ -302,8 +309,9 @@ function getInProgressIndexInfo(
     status: <StatusField status={index.status} error={index.error} />,
     actions: (
       <InProgressIndexActions
-        index={index}
+        index={{ ...index, progressPercentage: progressToUse }}
         onDeleteFailedIndexClick={onDeleteFailedIndexClick}
+        onDeleteIndexClick={onDeleteIndexClick}
       ></InProgressIndexActions>
     ),
   };
@@ -381,12 +389,74 @@ export const RegularIndexesTable: React.FunctionComponent<
   onUnhideIndexClick,
   onDeleteIndexClick,
   onDeleteFailedIndexClick,
+  onTrackIndexProgress,
   onRegularIndexesOpened,
   onRegularIndexesClosed,
   error,
 }) => {
   const tabId = useWorkspaceTabId();
 
+  // Use Redux state for progress tracking instead of local state
+  const intervalsRef = useRef<Record<string, NodeJS.Timeout>>({});
+
+  // Function to start progress tracking for an index
+  const startProgressTracking = useCallback(
+    (indexId: string, indexName: string) => {
+      // Clear any existing interval for this index
+      if (intervalsRef.current[indexId]) {
+        clearInterval(intervalsRef.current[indexId]);
+      }
+
+      // Start interval to check real progress every 2 seconds
+      intervalsRef.current[indexId] = setInterval(() => {
+        // Track real progress using the Redux action
+        onTrackIndexProgress(indexId, indexName).catch(() => {
+          // If real tracking fails, the error is already handled in the action
+          // No fallback needed here since we want to rely on real progress only
+        });
+      }, 2000); // 2 second intervals for real progress checking
+    },
+    [onTrackIndexProgress]
+  );
+
+  // Function to stop progress tracking for an index
+  const stopProgressTracking = useCallback((indexId: string) => {
+    if (intervalsRef.current[indexId]) {
+      clearInterval(intervalsRef.current[indexId]);
+      delete intervalsRef.current[indexId];
+    }
+  }, []);
+
+  // Manage progress tracking based on inProgressIndexes changes
+  useEffect(() => {
+    const currentInProgressIds = new Set(
+      inProgressIndexes.map((index) => index.id)
+    );
+    const trackedIds = new Set(Object.keys(intervalsRef.current));
+
+    // Start tracking for new in-progress indexes
+    inProgressIndexes.forEach((index) => {
+      if (index.status === 'inprogress' && !trackedIds.has(index.id)) {
+        startProgressTracking(index.id, index.name);
+      }
+    });
+
+    // Stop tracking for indexes that are no longer in progress
+    trackedIds.forEach((indexId) => {
+      if (!currentInProgressIds.has(indexId)) {
+        stopProgressTracking(indexId);
+      }
+    });
+  }, [inProgressIndexes, startProgressTracking, stopProgressTracking]);
+
+  // Cleanup intervals on unmount
+  useEffect(() => {
+    const currentIntervals = intervalsRef.current;
+    return () => {
+      Object.values(currentIntervals).forEach(clearInterval);
+    };
+  }, []);
+
   useEffect(() => {
     onRegularIndexesOpened(tabId);
     return () => {
@@ -407,6 +477,8 @@ export const RegularIndexesTable: React.FunctionComponent<
         if (index.compassIndexType === 'in-progress-index') {
           indexData = getInProgressIndexInfo(index, {
             onDeleteFailedIndexClick,
+            onDeleteIndexClick,
+            // Remove currentProgress since we're using Redux state directly
           });
         } else if (index.compassIndexType === 'rolling-index') {
           indexData = getRollingIndexInfo(index);
@@ -479,6 +551,7 @@ const mapDispatch = {
   onUnhideIndexClick: unhideIndex,
   onRegularIndexesOpened: startPollingRegularIndexes,
   onRegularIndexesClosed: stopPollingRegularIndexes,
+  onTrackIndexProgress: trackIndexProgress,
 };
 
 export default connect(