added failure page to async

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
opensearch-project · Oct 18, 2023 · 22cf6b4 · 22cf6b4
1 parent 95ed90f
commit 22cf6b4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/common/types/index.ts b/common/types/index.ts
@@ -77,4 +77,4 @@ export interface CreateAccelerationForm {
   formErrors: FormErrorsType;
 }
 
-export type AsyncQueryLoadingStatus = "SUCCESS" | "FAILED" | "RUNNING" | "SCHEDULED" | "CANCELED"
+export type AsyncQueryLoadingStatus = "SUCCESS" | "FAILED" | "RUNNING" | "SCHEDULED" | "CANCELLED"
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -109,6 +109,7 @@ interface MainState {
   selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
+  asyncQueryError: string;
   asyncJobId: string;
   isCallOutVisible: boolean;
 }
@@ -247,6 +248,7 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
       asyncLoadingStatus: 'SUCCESS',
+      asyncQueryError: '',
       asyncJobId: '',
       isCallOutVisible: false,
     };
@@ -405,6 +407,7 @@ export class Main extends React.Component<MainProps, MainState> {
             queryResultsTEXT: [],
             searchQuery: '',
             asyncLoading: false,
+            asyncLoadingStatus: 'SUCCESS',
             isCallOutVisible: false,
           },
           () => console.log('Successfully updated the states')
@@ -477,6 +480,7 @@ export class Main extends React.Component<MainProps, MainState> {
                 asyncLoading: true,
                 asyncLoadingStatus: 'SCHEDULED',
                 asyncJobId: queryId,
+                isCallOutVisible: false,
               });
               this.callGetStartPolling(queries);
               const interval = setInterval(() => {
@@ -539,6 +543,7 @@ export class Main extends React.Component<MainProps, MainState> {
               className: 'error-message',
             },
           ],
+          asyncQueryError: result.data['error'],
         });
       } else {
         this.setState({
@@ -765,6 +770,7 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedTabName: MESSAGE_TAB_LABEL,
       itemIdToExpandedRowMap: {},
       asyncLoading: false,
+      asyncLoadingStatus: 'SUCCESS',
       isCallOutVisible: false,
     });
   };
@@ -886,8 +892,8 @@ export class Main extends React.Component<MainProps, MainState> {
             getText={this.getText}
             isResultFullScreen={this.state.isResultFullScreen}
             setIsResultFullScreen={this.setIsResultFullScreen}
-            asyncLoading={this.state.asyncLoading}
             asyncLoadingStatus={this.state.asyncLoadingStatus}
+            asyncQueryError={this.state.asyncQueryError}
             cancelAsyncQuery={this.cancelAsyncQuery}
             selectedDatasource={this.state.selectedDatasource}
           />
@@ -1005,8 +1011,8 @@ export class Main extends React.Component<MainProps, MainState> {
                   getText={this.getText}
                   isResultFullScreen={this.state.isResultFullScreen}
                   setIsResultFullScreen={this.setIsResultFullScreen}
-                  asyncLoading={this.state.asyncLoading}
                   asyncLoadingStatus={this.state.asyncLoadingStatus}
+                  asyncQueryError={this.state.asyncQueryError}
                   cancelAsyncQuery={this.cancelAsyncQuery}
                   selectedDatasource={this.state.selectedDatasource}
                 />

diff --git a/public/components/QueryResults/AsyncQueryBody.tsx b/public/components/QueryResults/AsyncQueryBody.tsx
@@ -3,30 +3,42 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiText, EuiLoadingSpinner, EuiButton } from '@elastic/eui';
+import { EuiFlexGroup, EuiText, EuiLoadingSpinner, EuiButton, EuiIcon } from '@elastic/eui';
 import { AsyncQueryLoadingStatus } from '../../../common/types';
 import React from 'react';
 
 interface AsyncQueryBodyProps {
-  asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
   cancelAsyncQuery: () => void;
+  asyncQueryError: string;
 }
 
 export function AsyncQueryBody(props: AsyncQueryBodyProps) {
-  const { asyncLoading, asyncLoadingStatus, cancelAsyncQuery } = props;
+  const { asyncLoadingStatus, cancelAsyncQuery, asyncQueryError } = props;
 
   // TODO: implement query failure display
   // TODO: implement query cancellation
 
   return (
     <EuiFlexGroup direction="column" alignItems="center">
-      <EuiLoadingSpinner size="l" />
-      <EuiText>
-        <h3>Query running</h3>
-      </EuiText>
-      <EuiText>status: {asyncLoadingStatus}</EuiText>
-      <EuiButton onClick={cancelAsyncQuery}>Cancel</EuiButton>
+      {asyncLoadingStatus == 'FAILED' ? (
+        <>
+          <EuiIcon size="l" type="alert" color="danger" />
+          <EuiText>
+            <h3>Query failed</h3>
+          </EuiText>
+          <EuiText>error: {asyncQueryError}</EuiText>
+        </>
+      ) : (
+        <>
+          <EuiLoadingSpinner size="l" />
+          <EuiText>
+            <h3>Query running</h3>
+          </EuiText>
+          <EuiText>status: {asyncLoadingStatus}</EuiText>
+          <EuiButton onClick={cancelAsyncQuery}>Cancel</EuiButton>
+        </>
+      )}
     </EuiFlexGroup>
   );
 }
diff --git a/public/components/QueryResults/QueryResults.tsx b/public/components/QueryResults/QueryResults.tsx
@@ -71,8 +71,8 @@ interface QueryResultsProps {
   getText: (queries: string[]) => void;
   isResultFullScreen: boolean;
   setIsResultFullScreen: (isFullScreen: boolean) => void;
-  asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
+  asyncQueryError: string;
   cancelAsyncQuery: () => void;
   selectedDatasource: EuiComboBoxOptionOption[];
 }
@@ -335,7 +335,8 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
             </EuiFlexItem>
           </EuiFlexGroup>
         </div>
-        {!this.props.asyncLoading ? (
+        {this.props.asyncLoadingStatus === 'SUCCESS' ||
+        this.props.asyncLoadingStatus === 'CANCELLED' ? (
           <>
             {this.props.queryResults.length === 0 ? (
               // show no results message instead of the results table when there are no results
@@ -443,9 +444,9 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
             <EuiSpacer size="xl" />
             <EuiFlexGroup alignItems="center">
               <AsyncQueryBody
-                asyncLoading={this.props.asyncLoading}
                 asyncLoadingStatus={this.props.asyncLoadingStatus}
                 cancelAsyncQuery={this.props.cancelAsyncQuery}
+                asyncQueryError={this.props.asyncQueryError}
               />
             </EuiFlexGroup>
             <EuiSpacer size="xxl" />