Add Error Message for Explain and Run

workbench/public/components/Main/main.tsx

@@ -34,6 +34,7 @@ import { CoreStart } from 'kibana/public';
 interface ResponseData {
   ok: boolean;
   resp: any;
+  body: any;
 }
 
 export interface ResponseDetail<T> {
@@ -94,6 +95,12 @@ interface MainState {
 
 const SUCCESS_MESSAGE = 'Success';
 
+const errorQueryResponse = (queryResultResponseDetail: any) => {
+  let errorMessage = queryResultResponseDetail.errorMessage + ', this query is not runnable. \n \n' +
+    queryResultResponseDetail.data;
+  return errorMessage;
+}
+
 // It gets column names and row values to display in a Table from the json API response
 export function getQueryResultsForTable(
   queryResults: ResponseDetail<string>[]
@@ -103,7 +110,7 @@ export function getQueryResultsForTable(
       if (!queryResultResponseDetail.fulfilled) {
         return {
           fulfilled: queryResultResponseDetail.fulfilled,
-          errorMessage: queryResultResponseDetail.errorMessage,
+          errorMessage: errorQueryResponse(queryResultResponseDetail),
         };
       } else {
         let databaseRecords: { [key: string]: any }[] = [];
@@ -242,6 +249,15 @@ export class Main extends React.Component<MainProps, MainState> {
     };
   }
 
+  formatQueryErrorBody(data: any) {
+    let prettyErrorMessage = "";
+    prettyErrorMessage += 'reason: ' + data.errorReason + '\n';
+    prettyErrorMessage += 'details: ' + data.errorDetails + '\n';
+    prettyErrorMessage += 'type: ' + data.errorType + '\n';
+    prettyErrorMessage += 'status: ' + data.status;
+    return prettyErrorMessage;
+  }
+
   processQueryResponse(response: IHttpResponse<ResponseData>): ResponseDetail<string> {
     if (!response) {
       return {
@@ -254,7 +270,7 @@ export class Main extends React.Component<MainProps, MainState> {
       return {
         fulfilled: false,
         errorMessage: response.data.resp,
-        data: '',
+        data: this.formatQueryErrorBody(response.data),
       };
     }
 
@@ -332,7 +348,6 @@ export class Main extends React.Component<MainProps, MainState> {
           this.processQueryResponse(response as IHttpResponse<ResponseData>)
         );
         const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable(results);
-
         this.setState(
           {
             queries: queries,

workbench/public/components/PPLPage/PPLPage.tsx

@@ -69,6 +69,23 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
     const closeModal = () => this.setIsModalVisible(false);
     const showModal = () => this.setIsModalVisible(true);
 
+    const pplTranslationsNotEmpty = () => {
+      if (this.props.pplTranslations.length > 0) {
+        return this.props.pplTranslations[0].fulfilled;
+      }
+      return false;
+    }
+
+    const showExplainErrorMessage = () => {
+      return this.props.pplTranslations.map((queryTranslation: any) => JSON.stringify(
+        queryTranslation.errorMessage + ": This query is not explainable.", null, 2
+      ));
+    }
+
+    const explainContent = pplTranslationsNotEmpty()
+    ? this.props.pplTranslations.map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2)).join("\n")
+    : showExplainErrorMessage();
+
     let modal;
 
     if (this.state.isModalVisible) {
@@ -85,7 +102,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
                 fontSize="m"
                 isCopyable
               >
-                {this.props.pplTranslations.map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2)).join("\n")}
+                {explainContent}
               </EuiCodeBlock>
             </EuiModalBody>
 

workbench/public/components/SQLPage/SQLPage.tsx

@@ -72,6 +72,23 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     const closeModal = () => this.setIsModalVisible(false);
     const showModal = () => this.setIsModalVisible(true);
 
+    const sqlTranslationsNotEmpty = () => {
+      if (this.props.sqlTranslations.length > 0) {
+        return this.props.sqlTranslations[0].fulfilled;
+      }
+      return false;
+    }
+
+    const showExplainErrorMessage = () => {
+      return this.props.sqlTranslations.map((queryTranslation: any) => JSON.stringify(
+        queryTranslation.errorMessage + ": This query is not explainable.", null, 2
+      ));
+    }
+
+    const explainContent = sqlTranslationsNotEmpty()
+    ? this.props.sqlTranslations.map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2)).join("\n")
+    : showExplainErrorMessage();
+
     let modal;
 
     if (this.state.isModalVisible) {
@@ -88,7 +105,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                 fontSize="m"
                 isCopyable
               >
-                {this.props.sqlTranslations.map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2)).join("\n")}
+                {explainContent}
               </EuiCodeBlock>
             </EuiModalBody>
 
@@ -148,7 +165,10 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
               this.props.onTranslate(this.props.sqlQuery)
             }
           >
-            <EuiButton className="sql-editor-button" onClick={showModal}>
+            <EuiButton
+              className="sql-editor-button"
+              onClick={showModal}
+            >
               Explain
             </EuiButton>
             {modal}

workbench/server/services/QueryService.ts

@@ -41,10 +41,15 @@ export default class QueryService {
       };
     } catch (err) {
       console.log(err);
+      const errorObj = JSON.parse(err.body);
       return {
         data: {
           ok: false,
           resp: err.message,
+          errorReason: errorObj.error.reason,
+          errorDetails: errorObj.error.details,
+          errorType: errorObj.error.type,
+          status: errorObj.status
         },
       };
     }