Add Error Message for Explain and Run

workbench/public/components/Main/main.tsx

@@ -103,7 +103,7 @@ export function getQueryResultsForTable(
       if (!queryResultResponseDetail.fulfilled) {
         return {
           fulfilled: queryResultResponseDetail.fulfilled,
-          errorMessage: queryResultResponseDetail.errorMessage,
+          errorMessage: queryResultResponseDetail.errorMessage + ', this query is not runnable.',
         };
       } else {
         let databaseRecords: { [key: string]: any }[] = [];
@@ -332,7 +332,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}