[Discover] Add caused_by.type and caused_by.reason to error toast modal

src/core/public/notifications/toasts/error_toast.tsx

@@ -31,8 +31,7 @@ import {
 } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-
-import { OverlayStart } from '../../overlays';
+import { OverlayStart } from 'kibana/public';
 import { I18nStart } from '../../i18n';
 
 interface ErrorToastProps {
@@ -43,6 +42,13 @@ interface ErrorToastProps {
   i18nContext: () => I18nStart['Context'];
 }
 
+interface RequestError extends Error {
+  body?: { attributes?: { error: { caused_by: { type: string; reason: string } } } };
+}
+
+const isRequestError = (e: Error): e is RequestError =>
+  e.body?.attributes?.error?.caused_by !== undefined;
+
 /**
  * This should instead be replaced by the overlay service once it's available.
  * This does not use React portals so that if the parent toast times out, this modal
@@ -56,6 +62,17 @@ function showErrorDialog({
   i18nContext,
 }: Pick<ErrorToastProps, 'error' | 'title' | 'openModal' | 'i18nContext'>) {
   const I18nContext = i18nContext();
+  let text = '';
+
+  if (isRequestError(error)) {
+    text += `${error.body.attributes.error.caused_by.type}\n`;
+    text += `${error.body.attributes.error.caused_by.reason}\n\n`;
+  }
+
+  if (error.stack) {
+    text += error.stack;
+  }
+
   const modal = openModal(
     mount(
       <React.Fragment>
@@ -65,11 +82,11 @@ function showErrorDialog({
           </EuiModalHeader>
           <EuiModalBody>
             <EuiCallOut size="s" color="danger" iconType="alert" title={error.message} />
-            {error.stack && (
+            {text && (
               <React.Fragment>
                 <EuiSpacer size="s" />
                 <EuiCodeBlock isCopyable={true} paddingSize="s">
-                  {error.stack}
+                  {text}
                 </EuiCodeBlock>
               </React.Fragment>
             )}