[Upgrade Assistant] Add missing error handler for system indices migration

x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/migrate_system_indices/migrate_system_indices.test.tsx

@@ -132,5 +132,36 @@ describe('Overview - Migrate system indices', () => {
       expect(exists('startSystemIndicesMigrationButton')).toBe(true);
       expect(find('startSystemIndicesMigrationButton').props().disabled).toBe(false);
     });
+
+    test('Handles errors from migration', async () => {
+      httpRequestsMockHelpers.setLoadSystemIndicesMigrationStatus({
+        migration_status: 'ERROR',
+        features: [
+          {
+            feature_name: 'kibana',
+            indices: [
+              {
+                index: '.kibana',
+                migration_status: 'ERROR',
+                failure_cause: {
+                  error: {
+                    type: 'mapper_parsing_exception',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      });
+
+      testBed = await setupOverviewPage();
+
+      const { exists } = testBed;
+
+      // Error is displayed
+      expect(exists('migrationFailedCallout')).toBe(true);
+      // CTA is enabled
+      expect(exists('startSystemIndicesMigrationButton')).toBe(true);
+    });
   });
 });

x-pack/plugins/upgrade_assistant/common/types.ts

@@ -242,6 +242,12 @@ export interface SystemIndicesMigrationFeature {
   indices: Array<{
     index: string;
     version: string;
+    failure_cause?: {
+      error: {
+        type: string;
+        reason: string;
+      };
+    };
   }>;
 }
 export interface SystemIndicesMigrationStatus {

x-pack/plugins/upgrade_assistant/public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx

@@ -8,6 +8,7 @@
 import React, { FunctionComponent, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiText,
   EuiButton,
@@ -17,16 +18,32 @@ import {
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiCode,
 } from '@elastic/eui';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 
+import type { SystemIndicesMigrationFeature } from '../../../../../common/types';
 import type { OverviewStepProps } from '../../types';
 import { useMigrateSystemIndices } from './use_migrate_system_indices';
 
 interface Props {
   setIsComplete: OverviewStepProps['setIsComplete'];
 }
 
+const getFailureCause = (features: SystemIndicesMigrationFeature[]) => {
+  const featureWithError = features.find((feature) => feature.migration_status === 'ERROR');
+
+  if (featureWithError) {
+    const indexWithError = featureWithError.indices.find((index) => index.failure_cause);
+    return {
+      feature: featureWithError?.feature_name,
+      failureCause: indexWithError?.failure_cause?.error.type,
+    };
+  }
+
+  return {};
+};
+
 const i18nTexts = {
   title: i18n.translate('xpack.upgradeAssistant.overview.systemIndices.title', {
     defaultMessage: 'Migrate system indices',
@@ -67,6 +84,26 @@ const i18nTexts = {
   loadingError: i18n.translate('xpack.upgradeAssistant.overview.systemIndices.loadingError', {
     defaultMessage: 'Could not retrieve the system indices status',
   }),
+  migrationFailedTitle: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.migrationFailedTitle',
+    {
+      defaultMessage: 'System indices migration failed',
+    }
+  ),
+  migrationFailedBody: (features: SystemIndicesMigrationFeature[]) => {
+    const { feature, failureCause } = getFailureCause(features);
+
+    return (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.overview.systemIndices.migrationFailedBody"
+        defaultMessage="An error ocurred while migrating system indices for {feature}: {failureCause}"
+        values={{
+          feature,
+          failureCause: <EuiCode>{failureCause}</EuiCode>,
+        }}
+      />
+    );
+  },
 };
 
 const MigrateSystemIndicesStep: FunctionComponent<Props> = ({ setIsComplete }) => {
@@ -137,6 +174,21 @@ const MigrateSystemIndicesStep: FunctionComponent<Props> = ({ setIsComplete }) =
         </>
       )}
 
+      {migrationStatus.data?.migration_status === 'ERROR' && (
+        <>
+          <EuiCallOut
+            size="s"
+            color="danger"
+            iconType="alert"
+            title={i18nTexts.migrationFailedTitle}
+            data-test-subj="migrationFailedCallout"
+          >
+            <p>{i18nTexts.migrationFailedBody(migrationStatus.data?.features)}</p>
+          </EuiCallOut>
+          <EuiSpacer size="m" />
+        </>
+      )}
+
       <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiButton