update to failure portion

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
opensearch-project · Oct 18, 2023 · cb7ba40 · cb7ba40
1 parent 3234412
commit cb7ba40
Showing 1 changed file with 38 additions and 6 deletions.
diff --git a/public/components/QueryResults/async_query_body.tsx b/public/components/QueryResults/async_query_body.tsx
@@ -3,9 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiText, EuiLoadingSpinner, EuiButton, EuiIcon } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiText,
+  EuiLoadingSpinner,
+  EuiButton,
+  EuiIcon,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+} from '@elastic/eui';
 import { AsyncQueryLoadingStatus } from '../../../common/types';
-import React from 'react';
+import React, { useState } from 'react';
 
 interface AsyncQueryBodyProps {
   asyncLoadingStatus: AsyncQueryLoadingStatus;
@@ -15,9 +26,28 @@ interface AsyncQueryBodyProps {
 
 export function AsyncQueryBody(props: AsyncQueryBodyProps) {
   const { asyncLoadingStatus, cancelAsyncQuery, asyncQueryError } = props;
+  const [isModalVisible, setIsModalVisible] = useState(false);
 
-  // TODO: implement query failure display
-  // TODO: implement query cancellation
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  let modal;
+  if (isModalVisible) {
+    modal = (
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Error</EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>{asyncQueryError}</EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={closeModal} fill>
+            Close
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+  }
 
   return (
     <EuiFlexGroup direction="column" alignItems="center">
@@ -27,15 +57,17 @@ export function AsyncQueryBody(props: AsyncQueryBodyProps) {
           <EuiText>
             <h3>Query failed</h3>
           </EuiText>
-          <EuiText>error: {asyncQueryError}</EuiText>
+          <EuiText>The query failed to execute and the operation could not be complete.</EuiText>
+          <EuiButton onClick={() => showModal()}>View error details</EuiButton>
+          {modal}
         </>
       ) : (
         <>
           <EuiLoadingSpinner size="l" />
           <EuiText>
             <h3>Query running</h3>
           </EuiText>
-          <EuiText>status: {asyncLoadingStatus}</EuiText>
+          <EuiText>Status: {asyncLoadingStatus}</EuiText>
           <EuiButton onClick={cancelAsyncQuery}>Cancel</EuiButton>
         </>
       )}