[Rollups] Surface index pattern validation errors in Rollup Job wizard. (#25078) (#25094)

* Show fatal error for unexpected errors.

x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js

@@ -26,6 +26,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { fatalError } from 'ui/notify';
+
 import { CRUD_APP_BASE_PATH } from '../../constants';
 import {
   getRouterLinkProps,
@@ -228,7 +230,7 @@ export class JobCreateUi extends Component {
       this.onFieldsChange({
         dateHistogramField: indexPatternDateFields.length ? indexPatternDateFields[0] : null,
       }, STEP_DATE_HISTOGRAM);
-    }).catch(() => {
+    }).catch((error) => {
       // We don't need to do anything if this component has been unmounted.
       if (!this._isMounted) {
         return;
@@ -239,10 +241,33 @@ export class JobCreateUi extends Component {
         return;
       }
 
-      // TODO: Show toast or inline error.
+      // Expect an error in the shape provided by Angular's $http service.
-      this.setState({
+      if (error && error.data) {
-        isValidatingIndexPattern: false,
+        const { error: errorString, statusCode } = error.data;
-      });
+
+        const indexPatternAsyncErrors = [(
+          <FormattedMessage
+            id="xpack.rollupJobs.create.errors.indexPatternValidationError"
+            defaultMessage="There was a problem validating this index pattern: {statusCode} {error}"
+            values={{ error: errorString, statusCode }}
+          />
+        )];
+
+        this.setState({
+          indexPatternAsyncErrors,
+          indexPatternDateFields: [],
+          indexPatternTermsFields: [],
+          indexPatternHistogramFields: [],
+          indexPatternMetricsFields: [],
+          isValidatingIndexPattern: false,
+        });
+
+        return;
+      }
+
+      // This error isn't an HTTP error, so let the fatal error screen tell the user something
+      // unexpected happened.
+      fatalError(error, 'Rollup Job Wizard index pattern validation');
     });
   }, 300);