[Upgrade Assistant] Reindexing cancellation (#114636)

* [Upgrade Assistant] Updated the reindexing cancellation to look less like an error * [Upgrade Assistant] Fixed an i18n issue and updated a jest snapshot * [Upgrade Assistant] Updated cancelled reindexing state with a unified label and cross icon * [Upgrade Assistant] Fixed snapshot test * [Upgrade Assistant] Updated spacing to the reindex cancel button Co-authored-by: Kibana Machine <[email protected]>
elastic · Oct 18, 2021 · 8f28bf0 · 8f28bf0
1 parent 289ab75
commit 8f28bf0
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 112 deletions.
diff --git a/...plication/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss b/...plication/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss
@@ -18,7 +18,7 @@ $stepStatusToCallOutColor: (
   failed: 'danger',
   complete: 'success',
   paused: 'warning',
-  cancelled: 'danger',
+  cancelled: 'warning',
 );
 
 .upgStepProgress__status--circle {

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
@@ -47,6 +47,13 @@ const buttonLabel = (status?: ReindexStatus) => {
           defaultMessage="Resume"
         />
       );
+    case ReindexStatus.cancelled:
+      return (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.restartLabel"
+          defaultMessage="Restart reindex"
+        />
+      );
     default:
       return (
         <FormattedMessage

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
@@ -67,17 +67,17 @@ describe('ReindexProgress', () => {
               },
               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>,
+                "title": <ReindexingDocumentsStepTitle
+                  cancelReindex={[MockFunction]}
+                  reindexState={
+                    Object {
+                      "errorMessage": null,
+                      "lastCompletedStep": 0,
+                      "reindexTaskPercComplete": null,
+                      "status": 0,
+                    }
+                  }
+                />,
               },
               Object {
                 "status": "incomplete",

diff --git a/...blic/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.tsx b/...blic/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.tsx
@@ -7,18 +7,11 @@
 
 import React from 'react';
 
-import {
-  EuiButtonEmpty,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ReindexStatus, ReindexStep } from '../../../../../../../common/types';
-import { LoadingState } from '../../../../types';
+import { CancelLoadingState } from '../../../../types';
 import type { ReindexState } from '../use_reindex_state';
 import { StepProgress, StepProgressStep } from './step_progress';
 import { getReindexProgressLabel } from '../../../../../lib/utils';
@@ -40,29 +33,43 @@ const PausedCallout = () => (
   />
 );
 
-const CancelReindexingDocumentsButton: React.FunctionComponent<{
+const ReindexingDocumentsStepTitle: React.FunctionComponent<{
   reindexState: ReindexState;
   cancelReindex: () => void;
 }> = ({ reindexState: { lastCompletedStep, status, cancelLoadingState }, cancelReindex }) => {
+  if (status === ReindexStatus.cancelled) {
+    return (
+      <>
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelledTitle"
+          defaultMessage="Reindexing cancelled"
+        />
+      </>
+    );
+  }
+  const showCancelLink =
+    status === ReindexStatus.inProgress && lastCompletedStep === ReindexStep.reindexStarted;
+
   let cancelText: React.ReactNode;
   switch (cancelLoadingState) {
-    case LoadingState.Loading:
+    case CancelLoadingState.Requested:
+    case CancelLoadingState.Loading:
       cancelText = (
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.cancellingLabel"
           defaultMessage="Cancelling…"
         />
       );
       break;
-    case LoadingState.Success:
+    case CancelLoadingState.Success:
       cancelText = (
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.cancelledLabel"
           defaultMessage="Cancelled"
         />
       );
       break;
-    case LoadingState.Error:
+    case CancelLoadingState.Error:
       cancelText = (
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.errorLabel"
@@ -80,18 +87,25 @@ const CancelReindexingDocumentsButton: React.FunctionComponent<{
   }
 
   return (
-    <EuiButtonEmpty
-      data-test-subj="cancelReindexingDocumentsButton"
-      onClick={cancelReindex}
-      disabled={
-        cancelLoadingState === LoadingState.Loading ||
-        status !== ReindexStatus.inProgress ||
-        lastCompletedStep !== ReindexStep.reindexStarted
-      }
-      isLoading={cancelLoadingState === LoadingState.Loading}
-    >
-      {cancelText}
-    </EuiButtonEmpty>
+    <EuiFlexGroup component="span">
+      <EuiFlexItem grow={false}>
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
+          defaultMessage="Reindexing documents"
+        />
+      </EuiFlexItem>
+      {showCancelLink && (
+        <EuiFlexItem>
+          <EuiLink
+            data-test-subj="cancelReindexingDocumentsButton"
+            onClick={cancelReindex}
+            disabled={cancelLoadingState !== undefined}
+          >
+            {cancelText}
+          </EuiLink>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
   );
 };
 
@@ -145,22 +159,7 @@ export const ReindexProgress: React.FunctionComponent<{
 
   // The reindexing step is special because it generally lasts longer and can be cancelled mid-flight
   const reindexingDocsStep = {
-    title: (
-      <EuiFlexGroup alignItems={'center'}>
-        <EuiFlexItem>
-          <FormattedMessage
-            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
-            defaultMessage="Reindexing documents"
-          />
-        </EuiFlexItem>
-        {(lastCompletedStep === ReindexStep.newIndexCreated ||
-          lastCompletedStep === ReindexStep.reindexStarted) && (
-          <EuiFlexItem grow={false}>
-            <CancelReindexingDocumentsButton {...props} />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    ),
+    title: <ReindexingDocumentsStepTitle {...props} />,
   } as StepProgressStep;
 
   if (

diff --git a/...application/components/es_deprecations/deprecation_types/reindex/flyout/step_progress.tsx b/...application/components/es_deprecations/deprecation_types/reindex/flyout/step_progress.tsx
@@ -56,11 +56,7 @@ const Step: React.FunctionComponent<StepProgressStep & { idx: number }> = ({
 }) => {
   const titleClassName = classNames('upgStepProgress__title', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    'upgStepProgress__title--currentStep':
-      status === 'inProgress' ||
-      status === 'paused' ||
-      status === 'failed' ||
-      status === 'cancelled',
+    'upgStepProgress__title--currentStep': status === 'inProgress',
   });
 
   return (

diff --git a/...pplication/components/es_deprecations/deprecation_types/reindex/resolution_table_cell.tsx b/...pplication/components/es_deprecations/deprecation_types/reindex/resolution_table_cell.tsx
@@ -55,7 +55,7 @@ const i18nTexts = {
   reindexCanceledText: i18n.translate(
     'xpack.upgradeAssistant.esDeprecations.reindex.reindexCanceledText',
     {
-      defaultMessage: 'Reindex canceled',
+      defaultMessage: 'Reindex cancelled',
     }
   ),
   reindexPausedText: i18n.translate(
@@ -154,17 +154,6 @@ export const ReindexResolutionCell: React.FunctionComponent = () => {
           </EuiFlexItem>
         </EuiFlexGroup>
       );
-    case ReindexStatus.cancelled:
-      return (
-        <EuiFlexGroup gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiIcon type="alert" color="danger" />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiText size="s">{i18nTexts.reindexCanceledText}</EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      );
   }
 
   return (

diff --git a/...ic/application/components/es_deprecations/deprecation_types/reindex/use_reindex_state.tsx b/...ic/application/components/es_deprecations/deprecation_types/reindex/use_reindex_state.tsx
@@ -13,14 +13,14 @@ import {
   ReindexStep,
   ReindexWarning,
 } from '../../../../../../common/types';
-import { LoadingState } from '../../../types';
+import { CancelLoadingState, LoadingState } from '../../../types';
 import { ApiService } from '../../../../lib/api';
 
 const POLL_INTERVAL = 1000;
 
 export interface ReindexState {
   loadingState: LoadingState;
-  cancelLoadingState?: LoadingState;
+  cancelLoadingState?: CancelLoadingState;
   lastCompletedStep?: ReindexStep;
   status?: ReindexStatus;
   reindexTaskPercComplete: number | null;
@@ -59,8 +59,21 @@ const getReindexState = (
     newReindexState.reindexTaskPercComplete = reindexOp.reindexTaskPercComplete;
     newReindexState.errorMessage = reindexOp.errorMessage;
 
-    if (reindexOp.status === ReindexStatus.cancelled) {
-      newReindexState.cancelLoadingState = LoadingState.Success;
+    // if reindex cancellation was "requested" or "loading" and the reindex task is now cancelled,
+    // then reindex cancellation has completed, set it to "success"
+    if (
+      (reindexState.cancelLoadingState === CancelLoadingState.Requested ||
+        reindexState.cancelLoadingState === CancelLoadingState.Loading) &&
+      reindexOp.status === ReindexStatus.cancelled
+    ) {
+      newReindexState.cancelLoadingState = CancelLoadingState.Success;
+    } else if (
+      // if reindex cancellation has been requested and the reindex task is still in progress,
+      // then reindex cancellation has not completed yet, set it to "loading"
+      reindexState.cancelLoadingState === CancelLoadingState.Requested &&
+      reindexOp.status === ReindexStatus.inProgress
+    ) {
+      newReindexState.cancelLoadingState = CancelLoadingState.Loading;
     }
   }
 
@@ -90,77 +103,85 @@ export const useReindexStatus = ({ indexName, api }: { indexName: string; api: A
     const { data, error } = await api.getReindexStatus(indexName);
 
     if (error) {
-      setReindexState({
-        ...reindexState,
-        loadingState: LoadingState.Error,
-        errorMessage: error.message.toString(),
-        status: ReindexStatus.fetchFailed,
+      setReindexState((prevValue: ReindexState) => {
+        return {
+          ...prevValue,
+          loadingState: LoadingState.Error,
+          errorMessage: error.message.toString(),
+          status: ReindexStatus.fetchFailed,
+        };
       });
       return;
     }
 
-    setReindexState(getReindexState(reindexState, data));
+    setReindexState((prevValue: ReindexState) => {
+      return getReindexState(prevValue, data);
+    });
 
     // Only keep polling if it exists and is in progress.
     if (data.reindexOp && data.reindexOp.status === ReindexStatus.inProgress) {
       pollIntervalIdRef.current = setTimeout(updateStatus, POLL_INTERVAL);
     }
-  }, [clearPollInterval, api, indexName, reindexState]);
+  }, [clearPollInterval, api, indexName]);
 
   const startReindex = useCallback(async () => {
-    const currentReindexState = {
-      ...reindexState,
-    };
-
-    setReindexState({
-      ...currentReindexState,
-      // Only reset last completed step if we aren't currently paused
-      lastCompletedStep:
-        currentReindexState.status === ReindexStatus.paused
-          ? currentReindexState.lastCompletedStep
-          : undefined,
-      status: ReindexStatus.inProgress,
-      reindexTaskPercComplete: null,
-      errorMessage: null,
-      cancelLoadingState: undefined,
+    setReindexState((prevValue: ReindexState) => {
+      return {
+        ...prevValue,
+        // Only reset last completed step if we aren't currently paused
+        lastCompletedStep:
+          prevValue.status === ReindexStatus.paused ? prevValue.lastCompletedStep : undefined,
+        status: ReindexStatus.inProgress,
+        reindexTaskPercComplete: null,
+        errorMessage: null,
+        cancelLoadingState: undefined,
+      };
     });
 
     api.sendReindexTelemetryData({ start: true });
 
     const { data: reindexOp, error } = await api.startReindexTask(indexName);
 
     if (error) {
-      setReindexState({
-        ...reindexState,
-        loadingState: LoadingState.Error,
-        errorMessage: error.message.toString(),
-        status: ReindexStatus.failed,
+      setReindexState((prevValue: ReindexState) => {
+        return {
+          ...prevValue,
+          loadingState: LoadingState.Error,
+          errorMessage: error.message.toString(),
+          status: ReindexStatus.failed,
+        };
       });
       return;
     }
 
-    setReindexState(getReindexState(reindexState, { reindexOp }));
+    setReindexState((prevValue: ReindexState) => {
+      return getReindexState(prevValue, { reindexOp });
+    });
     updateStatus();
-  }, [api, indexName, reindexState, updateStatus]);
+  }, [api, indexName, updateStatus]);
 
   const cancelReindex = useCallback(async () => {
     api.sendReindexTelemetryData({ stop: true });
 
-    const { error } = await api.cancelReindexTask(indexName);
-
-    setReindexState({
-      ...reindexState,
-      cancelLoadingState: LoadingState.Loading,
+    setReindexState((prevValue: ReindexState) => {
+      return {
+        ...prevValue,
+        cancelLoadingState: CancelLoadingState.Requested,
+      };
     });
 
+    const { error } = await api.cancelReindexTask(indexName);
+
     if (error) {
-      setReindexState({
-        ...reindexState,
-        cancelLoadingState: LoadingState.Error,
+      setReindexState((prevValue: ReindexState) => {
+        return {
+          ...prevValue,
+          cancelLoadingState: CancelLoadingState.Error,
+        };
       });
       return;
     }
-  }, [api, indexName, reindexState]);
+  }, [api, indexName]);
 
   useEffect(() => {
     isMounted.current = true;