Skip to content

Commit c24c74c

Browse files
nbbeekennbbeeken
committed
fix: move index progress to data-service
1 parent 09d3ede commit c24c74c

File tree

9 files changed

+123
-336
lines changed

9 files changed

+123
-336
lines changed

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

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
import React, { useCallback, useMemo } from 'react';
22
import type { GroupedItemAction } from '@mongodb-js/compass-components';
3-
import { ItemActionGroup } from '@mongodb-js/compass-components';
3+
import {
4+
ItemActionGroup,
5+
SpinLoader,
6+
Body,
7+
css,
8+
spacing,
9+
} from '@mongodb-js/compass-components';
410
import type { InProgressIndex } from '../../modules/regular-indexes';
511

12+
const buildingTextStyles = css({
13+
display: 'flex',
14+
alignItems: 'center',
15+
gap: spacing[1],
16+
marginRight: spacing[2],
17+
});
18+
619
type Index = {
720
name: string;
821
status: InProgressIndex['status'];
22+
buildProgress?: number;
923
};
1024

1125
type IndexActionsProps = {
@@ -43,12 +57,26 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
4357
[onDeleteFailedIndexClick, index]
4458
);
4559

60+
const progress = (index.buildProgress ?? 0) * 100;
61+
const isBuilding = progress > 0 && progress < 100;
62+
4663
return (
47-
<ItemActionGroup<IndexAction>
48-
data-testid="index-actions"
49-
actions={indexActions}
50-
onAction={onAction}
51-
></ItemActionGroup>
64+
<div style={{ display: 'flex', alignItems: 'center' }}>
65+
{isBuilding && (
66+
<div
67+
className={buildingTextStyles}
68+
data-testid="index-building-spinner"
69+
>
70+
<SpinLoader size={16} title="Index build in progress" />
71+
<Body>Building... {progress | 0}%</Body>
72+
</div>
73+
)}
74+
<ItemActionGroup<IndexAction>
75+
data-testid="index-actions"
76+
actions={indexActions}
77+
onAction={onAction}
78+
/>
79+
</div>
5280
);
5381
};
5482

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

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
spacing,
99
Body,
1010
} from '@mongodb-js/compass-components';
11+
import type { RegularIndex } from '../../modules/regular-indexes';
1112

1213
const styles = css({
1314
// Align actions with the end of the table
@@ -27,17 +28,13 @@ const progressTextStyles = css({
2728
fontWeight: 'normal',
2829
});
2930

30-
type Index = {
31-
name: string;
32-
extra?: {
33-
hidden?: boolean;
34-
};
35-
status?: 'inprogress' | 'ready' | 'failed';
36-
progressPercentage?: number;
31+
// Extended type to include buildProgress which might not be in the base RegularIndex type
32+
type IndexWithProgress = RegularIndex & {
33+
buildProgress?: number;
3734
};
3835

3936
type IndexActionsProps = {
40-
index: Index;
37+
index: IndexWithProgress;
4138
serverVersion: string;
4239
onDeleteIndexClick: (name: string) => void;
4340
onHideIndexClick: (name: string) => void;
@@ -63,9 +60,10 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
6360
onHideIndexClick,
6461
onUnhideIndexClick,
6562
}) => {
63+
const progressPercentage = (index.buildProgress ?? 0) * 100;
64+
6665
const indexActions: GroupedItemAction<IndexAction>[] = useMemo(() => {
6766
const actions: GroupedItemAction<IndexAction>[] = [];
68-
const progressPercentage = index.progressPercentage ?? 0;
6967

7068
if (progressPercentage < 100 && progressPercentage > 0) {
7169
// partially built
@@ -103,7 +101,7 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
103101
}
104102

105103
return actions;
106-
}, [index, serverVersion]);
104+
}, [index.name, index.extra?.hidden, serverVersion, progressPercentage]);
107105

108106
const onAction = useCallback(
109107
(action: IndexAction) => {
@@ -118,12 +116,7 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
118116
[onDeleteIndexClick, onHideIndexClick, onUnhideIndexClick, index]
119117
);
120118

121-
const progressPercentage = index.progressPercentage ?? 0;
122-
if (
123-
index.status !== 'failed' &&
124-
progressPercentage < 100 &&
125-
progressPercentage > 0
126-
) {
119+
if (progressPercentage > 0 && progressPercentage < 100) {
127120
return (
128121
<div
129122
className={combinedContainerStyles}

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
userEvent,
88
} from '@mongodb-js/testing-library-compass';
99
import { expect } from 'chai';
10-
import sinon from 'sinon';
1110

1211
import { RegularIndexesTable } from './regular-indexes-table';
1312
import type {
@@ -16,7 +15,6 @@ import type {
1615
RollingIndex,
1716
} from '../../modules/regular-indexes';
1817
import { mockRegularIndex } from '../../../test/helpers';
19-
import * as useIndexProgressModule from '../../hooks/use-index-progress';
2018

2119
const indexes: RegularIndex[] = [
2220
{
@@ -185,15 +183,6 @@ describe('RegularIndexesTable Component', function () {
185183
before(cleanup);
186184
afterEach(cleanup);
187185

188-
before(function () {
189-
// Mock the useIndexProgress hook since it requires Redux store
190-
sinon.stub(useIndexProgressModule, 'useIndexProgress').returns(undefined);
191-
});
192-
193-
after(function () {
194-
sinon.restore();
195-
});
196-
197186
it('renders regular indexes', function () {
198187
renderIndexList({ isWritable: true, readOnly: false, indexes: indexes });
199188

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

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import type {
1010
} from '@mongodb-js/compass-components';
1111

1212
import type { RootState } from '../../modules';
13-
import { useIndexProgress } from '../../hooks/use-index-progress';
1413

1514
import TypeField from './type-field';
1615
import SizeField from './size-field';
@@ -253,6 +252,12 @@ function mergeIndexes(
253252
inProgressIndexes.map(({ name }) => name)
254253
);
255254

255+
// Create a map of regular indexes by name to look up buildProgress
256+
const regularIndexesByName = new Map<string, RegularIndex>();
257+
indexes.forEach((index) => {
258+
regularIndexesByName.set(index.name, index);
259+
});
260+
256261
const mappedIndexes: MappedRegularIndex[] = indexes
257262
// exclude partially-built indexes so that we don't include indexes that
258263
// only exist on the primary node and then duplicate those as rolling
@@ -263,9 +268,17 @@ function mergeIndexes(
263268
return { ...index, compassIndexType: 'regular-index' };
264269
});
265270

271+
// For in-progress indexes, merge in buildProgress from regular indexes if available
266272
const mappedInProgressIndexes: MappedInProgressIndex[] =
267273
inProgressIndexes.map((index) => {
268-
return { ...index, compassIndexType: 'in-progress-index' };
274+
const regularIndex = regularIndexesByName.get(index.name);
275+
const buildProgress = regularIndex?.buildProgress;
276+
277+
return {
278+
...index,
279+
buildProgress,
280+
compassIndexType: 'in-progress-index',
281+
};
269282
});
270283

271284
const mappedRollingIndexes: MappedRollingIndex[] = rollingIndexes.map(
@@ -291,44 +304,10 @@ function getInProgressIndexInfo(
291304
index: MappedInProgressIndex,
292305
{
293306
onDeleteFailedIndexClick,
294-
onDeleteIndexClick,
295-
serverVersion,
296307
}: {
297308
onDeleteFailedIndexClick: (indexName: string) => void;
298-
onDeleteIndexClick: (indexName: string) => void;
299-
serverVersion: string;
300309
}
301310
): CommonIndexInfo {
302-
// Use progress directly from Redux state
303-
const progressToUse = index.progressPercentage ?? 0;
304-
305-
// Show spinner and progress only if:
306-
// 1. Index is not failed (status !== 'failed')
307-
// 2. Index has meaningful progress (> 0% and < 100%)
308-
let actionsComponent;
309-
if (index.status !== 'failed' && progressToUse > 0 && progressToUse < 100) {
310-
actionsComponent = (
311-
<RegularIndexActions
312-
index={{
313-
name: index.name,
314-
progressPercentage: progressToUse,
315-
}}
316-
serverVersion={serverVersion}
317-
onDeleteIndexClick={onDeleteIndexClick}
318-
onHideIndexClick={() => {}} // No-op for building indexes
319-
onUnhideIndexClick={() => {}} // No-op for building indexes
320-
/>
321-
);
322-
} else {
323-
// For failed or pending indexes, use the InProgressIndexActions
324-
actionsComponent = (
325-
<InProgressIndexActions
326-
index={index}
327-
onDeleteFailedIndexClick={onDeleteFailedIndexClick}
328-
/>
329-
);
330-
}
331-
332311
return {
333312
id: index.id,
334313
name: index.name,
@@ -339,7 +318,12 @@ function getInProgressIndexInfo(
339318
// TODO(COMPASS-8335): add properties for in-progress indexes
340319
properties: null,
341320
status: <StatusField status={index.status} error={index.error} />,
342-
actions: actionsComponent,
321+
actions: (
322+
<InProgressIndexActions
323+
index={index}
324+
onDeleteFailedIndexClick={onDeleteFailedIndexClick}
325+
/>
326+
),
343327
};
344328
}
345329

@@ -421,9 +405,6 @@ export const RegularIndexesTable: React.FunctionComponent<
421405
}) => {
422406
const tabId = useWorkspaceTabId();
423407

424-
// Use our custom hook to handle index progress tracking
425-
useIndexProgress(inProgressIndexes);
426-
427408
useEffect(() => {
428409
onRegularIndexesOpened(tabId);
429410
return () => {
@@ -444,8 +425,6 @@ export const RegularIndexesTable: React.FunctionComponent<
444425
if (index.compassIndexType === 'in-progress-index') {
445426
indexData = getInProgressIndexInfo(index, {
446427
onDeleteFailedIndexClick,
447-
onDeleteIndexClick,
448-
serverVersion,
449428
});
450429
} else if (index.compassIndexType === 'rolling-index') {
451430
indexData = getRollingIndexInfo(index);

‎packages/compass-indexes/src/hooks/use-index-progress.ts‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

0 commit comments

Comments
 (0)