[7.x] Add modal with details to shard error toast (#41649)

src/core/public/overlays/overlay_service.ts

@@ -77,6 +77,7 @@ export interface OverlayStart {
   openModal: (
     modalChildren: React.ReactNode,
     modalProps?: {
+      className?: string;
       closeButtonAriaLabel?: string;
       'data-test-subj'?: string;
     }

src/core/public/public.api.md

@@ -545,6 +545,7 @@ export interface OverlayStart {
     }) => OverlayRef;
     // (undocumented)
     openModal: (modalChildren: React.ReactNode, modalProps?: {
+        className?: string;
         closeButtonAriaLabel?: string;
         'data-test-subj'?: string;
     }) => OverlayRef;

src/legacy/ui/public/_index.scss

@@ -10,6 +10,7 @@
 
 @import './accessibility/index';
 @import './chrome/index';
+@import './courier/index';
 @import './collapsible_sidebar/index';
 @import './directives/index';
 @import './error_allow_explicit_index/index';

src/legacy/ui/public/courier/_index.scss

@@ -0,0 +1 @@
+@import './fetch/components/shard_failure_modal';

src/legacy/ui/public/courier/fetch/call_response_handlers.js

@@ -16,12 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiSpacer } from '@elastic/eui';
 import { toastNotifications } from '../../notify';
 import { RequestFailure } from '../../errors';
 import { RequestStatus } from './req_status';
 import { SearchError } from '../search_strategy/search_error';
-import { i18n } from '@kbn/i18n';
+import { ShardFailureOpenModalButton } from './components/shard_failure_open_modal_button';
 
 export function CallResponseHandlersProvider(Promise) {
   const ABORTED = RequestStatus.ABORTED;
@@ -39,16 +41,37 @@ export function CallResponseHandlersProvider(Promise) {
         toastNotifications.addWarning({
           title: i18n.translate('common.ui.courier.fetch.requestTimedOutNotificationMessage', {
             defaultMessage: 'Data might be incomplete because your request timed out',
-          })
+          }),
         });
       }
 
       if (response._shards && response._shards.failed) {
+        const title = i18n.translate('common.ui.courier.fetch.shardsFailedNotificationMessage', {
+          defaultMessage: '{shardsFailed} of {shardsTotal} shards failed',
+          values: {
+            shardsFailed: response._shards.failed,
+            shardsTotal: response._shards.total,
+          },
+        });
+        const description = i18n.translate('common.ui.courier.fetch.shardsFailedNotificationDescription', {
+          defaultMessage: 'The data you are seeing might be incomplete or wrong.',
+        });
+
+        const text = (
+          <>
+            {description}
+            <EuiSpacer size="s"/>
+            <ShardFailureOpenModalButton
+              request={searchRequest.fetchParams.body}
+              response={response}
+              title={title}
+            />
+          </>
+        );
+
         toastNotifications.addWarning({
-          title: i18n.translate('common.ui.courier.fetch.shardsFailedNotificationMessage', {
-            defaultMessage: '{shardsFailed} of {shardsTotal} shards failed',
-            values: { shardsFailed: response._shards.failed, shardsTotal: response._shards.total }
-          })
+          title,
+          text,
         });
       }
 
@@ -65,7 +88,11 @@ export function CallResponseHandlersProvider(Promise) {
         if (searchRequest.filterError(response)) {
           return progress();
         } else {
-          return searchRequest.handleFailure(response.error instanceof SearchError ? response.error : new RequestFailure(null, response));
+          return searchRequest.handleFailure(
+            response.error instanceof SearchError
+              ? response.error
+              : new RequestFailure(null, response)
+          );
         }
       }
 

src/legacy/ui/public/courier/fetch/components/__mocks__/shard_failure_request.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Request } from '../shard_failure_types';
+export const shardFailureRequest = {
+  version: true,
+  size: 500,
+  sort: [],
+  _source: {
+    excludes: [],
+  },
+  stored_fields: ['*'],
+  script_fields: {},
+  docvalue_fields: [],
+  query: {},
+  highlight: {},
+} as Request;

src/legacy/ui/public/courier/fetch/components/__mocks__/shard_failure_response.ts

@@ -0,0 +1,46 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ResponseWithShardFailure } from '../shard_failure_types';
+
+export const shardFailureResponse = {
+  _shards: {
+    total: 2,
+    successful: 1,
+    skipped: 0,
+    failed: 1,
+    failures: [
+      {
+        shard: 0,
+        index: 'repro2',
+        node: 'itsmeyournode',
+        reason: {
+          type: 'script_exception',
+          reason: 'runtime error',
+          script_stack: ["return doc['targetfield'].value;", '           ^---- HERE'],
+          script: "return doc['targetfield'].value;",
+          lang: 'painless',
+          caused_by: {
+            type: 'illegal_argument_exception',
+            reason: 'Gimme reason',
+          },
+        },
+      },
+    ],
+  },
+} as ResponseWithShardFailure;