[Upgrade Assistant] Added reindexing progress in % to the reindex fly…

…out and es deprecations table
elastic · Oct 7, 2021 · c77c8ab · c77c8ab
1 parent bbaec75
commit c77c8ab
Show file tree

Hide file tree

Showing 9 changed files with 323 additions and 123 deletions.
diff --git a/..._assistant/__jest__/client_integration/es_deprecations/reindex_deprecation_flyout.test.ts b/..._assistant/__jest__/client_integration/es_deprecations/reindex_deprecation_flyout.test.ts
@@ -10,6 +10,7 @@ import { act } from 'react-dom/test-utils';
 import { setupEnvironment } from '../helpers';
 import { ElasticsearchTestBed, setupElasticsearchPage } from './es_deprecations.helpers';
 import { esDeprecationsMockResponse, MOCK_SNAPSHOT_ID, MOCK_JOB_ID } from './mocked_responses';
+import { ReindexStatus, ReindexStep } from '../../../common/types';
 
 // Note: The reindexing flyout UX is subject to change; more tests should be added here once functionality is built out
 describe('Reindex deprecation flyout', () => {
@@ -93,4 +94,110 @@ describe('Reindex deprecation flyout', () => {
 
     expect(exists('reindexDetails.fetchFailedCallout')).toBe(true);
   });
+
+  describe('reindexing progress', () => {
+    it('has not started yet', async () => {
+      const { actions, find, exists } = testBed;
+
+      await actions.table.clickDeprecationRowAt('reindex', 0);
+      expect(find('reindexChecklistTitle').text()).toEqual('Reindexing process');
+      expect(exists('cancelReindexingDocumentsButton')).toBe(false);
+    });
+
+    it('has started but not yet reindexing documents', async () => {
+      httpRequestsMockHelpers.setReindexStatusResponse({
+        reindexOp: {
+          status: ReindexStatus.inProgress,
+          lastCompletedStep: ReindexStep.readonly,
+          reindexTaskPercComplete: null,
+        },
+        warnings: [],
+        hasRequiredPrivileges: true,
+      });
+
+      await act(async () => {
+        testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
+      });
+
+      testBed.component.update();
+      const { actions, find, exists } = testBed;
+
+      await actions.table.clickDeprecationRowAt('reindex', 0);
+
+      expect(find('reindexChecklistTitle').text()).toEqual('Reindexing in progress… 5%');
+      expect(exists('cancelReindexingDocumentsButton')).toBe(false);
+    });
+
+    it('has started reindexing documents', async () => {
+      httpRequestsMockHelpers.setReindexStatusResponse({
+        reindexOp: {
+          status: ReindexStatus.inProgress,
+          lastCompletedStep: ReindexStep.reindexStarted,
+          reindexTaskPercComplete: 0.25,
+        },
+        warnings: [],
+        hasRequiredPrivileges: true,
+      });
+
+      await act(async () => {
+        testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
+      });
+
+      testBed.component.update();
+      const { actions, find, exists } = testBed;
+
+      await actions.table.clickDeprecationRowAt('reindex', 0);
+
+      expect(find('reindexChecklistTitle').text()).toEqual('Reindexing in progress… 31%');
+      expect(exists('cancelReindexingDocumentsButton')).toBe(true);
+    });
+
+    it('has completed reindexing documents', async () => {
+      httpRequestsMockHelpers.setReindexStatusResponse({
+        reindexOp: {
+          status: ReindexStatus.inProgress,
+          lastCompletedStep: ReindexStep.reindexCompleted,
+          reindexTaskPercComplete: 1,
+        },
+        warnings: [],
+        hasRequiredPrivileges: true,
+      });
+
+      await act(async () => {
+        testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
+      });
+
+      testBed.component.update();
+      const { actions, find, exists } = testBed;
+
+      await actions.table.clickDeprecationRowAt('reindex', 0);
+
+      expect(find('reindexChecklistTitle').text()).toEqual('Reindexing in progress… 95%');
+      expect(exists('cancelReindexingDocumentsButton')).toBe(false);
+    });
+
+    it('has completed', async () => {
+      httpRequestsMockHelpers.setReindexStatusResponse({
+        reindexOp: {
+          status: ReindexStatus.completed,
+          lastCompletedStep: ReindexStep.aliasCreated,
+          reindexTaskPercComplete: 1,
+        },
+        warnings: [],
+        hasRequiredPrivileges: true,
+      });
+
+      await act(async () => {
+        testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
+      });
+
+      testBed.component.update();
+      const { actions, find, exists } = testBed;
+
+      await actions.table.clickDeprecationRowAt('reindex', 0);
+
+      expect(find('reindexChecklistTitle').text()).toEqual('Reindexing process');
+      expect(exists('cancelReindexingDocumentsButton')).toBe(false);
+    });
+  });
 });
diff --git a/..._deprecations/deprecation_types/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap b/..._deprecations/deprecation_types/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
diff --git a/...pplication/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx b/...pplication/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx
@@ -16,7 +16,6 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiSpacer,
-  EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -144,14 +143,6 @@ export const ChecklistFlyoutStep: React.FunctionComponent<{
           </p>
         </EuiCallOut>
         <EuiSpacer />
-        <EuiTitle size="xs">
-          <h3>
-            <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklistTitle"
-              defaultMessage="Reindexing process"
-            />
-          </h3>
-        </EuiTitle>
         <ReindexProgress reindexState={reindexState} cancelReindex={cancelReindex} />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>

diff --git a/...application/components/es_deprecations/deprecation_types/reindex/flyout/progress.test.tsx b/...application/components/es_deprecations/deprecation_types/reindex/flyout/progress.test.tsx
@@ -29,45 +29,69 @@ describe('ReindexProgress', () => {
     );
 
     expect(wrapper).toMatchInlineSnapshot(`
-<StepProgress
-  steps={
-    Array [
-      Object {
-        "status": "inProgress",
-        "title": <FormattedMessage
-          defaultMessage="Setting old index to read-only"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
-          values={Object {}}
-        />,
-      },
-      Object {
-        "status": "incomplete",
-        "title": <FormattedMessage
-          defaultMessage="Creating new index"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
-          values={Object {}}
-        />,
-      },
-      Object {
-        "status": "incomplete",
-        "title": <FormattedMessage
-          defaultMessage="Reindexing documents"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
-          values={Object {}}
-        />,
-      },
-      Object {
-        "status": "incomplete",
-        "title": <FormattedMessage
-          defaultMessage="Swapping original index with alias"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
-          values={Object {}}
-        />,
-      },
-    ]
-  }
-/>
-`);
+      <Fragment>
+        <EuiTitle
+          data-test-subj="reindexChecklistTitle"
+          size="xs"
+        >
+          <h3>
+            <FormattedMessage
+              defaultMessage="Reindexing in progress… {percents}"
+              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingInProgressTitle"
+              values={
+                Object {
+                  "percents": "0%",
+                }
+              }
+            />
+          </h3>
+        </EuiTitle>
+        <StepProgress
+          steps={
+            Array [
+              Object {
+                "status": "inProgress",
+                "title": <FormattedMessage
+                  defaultMessage="Setting old index to read-only"
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
+                  values={Object {}}
+                />,
+              },
+              Object {
+                "status": "incomplete",
+                "title": <FormattedMessage
+                  defaultMessage="Creating new index"
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
+                  values={Object {}}
+                />,
+              },
+              Object {
+                "status": "incomplete",
+                "title": <EuiFlexGroup
+                  alignItems="center"
+                >
+                  <EuiFlexItem>
+                    <FormattedMessage
+                      defaultMessage="Reindexing documents"
+                      id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
+                      values={Object {}}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>,
+              },
+              Object {
+                "status": "incomplete",
+                "title": <FormattedMessage
+                  defaultMessage="Swapping original index with alias"
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
+                  values={Object {}}
+                />,
+              },
+            ]
+          }
+        />
+      </Fragment>
+    `);
   });
 
   it('displays errors in the step that failed', () => {
@@ -84,30 +108,9 @@ describe('ReindexProgress', () => {
         cancelReindex={jest.fn()}
       />
     );
-
-    const aliasStep = wrapper.props().steps[3];
+    const aliasStep = (wrapper.find('StepProgress').props() as any).steps[3];
     expect(aliasStep.children.props.errorMessage).toEqual(
       `This is an error that happened on alias switch`
     );
   });
-
-  it('shows reindexing document progress bar', () => {
-    const wrapper = shallow(
-      <ReindexProgress
-        reindexState={
-          {
-            lastCompletedStep: ReindexStep.reindexStarted,
-            status: ReindexStatus.inProgress,
-            reindexTaskPercComplete: 0.25,
-            errorMessage: null,
-          } as ReindexState
-        }
-        cancelReindex={jest.fn()}
-      />
-    );
-
-    const reindexStep = wrapper.props().steps[2];
-    expect(reindexStep.children.type.name).toEqual('ReindexProgressBar');
-    expect(reindexStep.children.props.reindexState.reindexTaskPercComplete).toEqual(0.25);
-  });
 });