add error message for sql page

kyuubi-server/web-ui/src/locales/en_US/index.ts

@@ -58,6 +58,7 @@ export default {
     cancel_failed: 'Cancel {name} Failed',
     run_failed: 'Run Sql Failed',
     get_sql_log_failed: 'Get Sql Log Failed',
-    get_sql_result_failed: 'Get Sql Result Failed'
+    get_sql_result_failed: 'Get Sql Result Failed',
+    get_sql_metadata_failed: 'Get Sql Metadata Failed'
   }
 }

kyuubi-server/web-ui/src/locales/zh_CN/index.ts

@@ -58,6 +58,7 @@ export default {
     cancel_failed: '取消 {name} 失败',
     run_failed: '运行失败',
     get_sql_log_failed: '获取sql日志失败',
-    get_sql_result_failed: '获取sql结果失败'
+    get_sql_result_failed: '获取sql结果失败',
+    get_sql_metadata_failed: '获取sql元数据失败'
   }
 }

kyuubi-server/web-ui/src/views/editor/components/Editor.vue

@@ -68,7 +68,7 @@
         v-loading="resultLoading"
         :label="`Result${sqlResult?.length ? ` (${sqlResult?.length})` : ''}`"
         name="result">
-        <Result :data="sqlResult" />
+        <Result :data="sqlResult" :error-messages="errorMessages" />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -92,7 +92,13 @@
     getSqlMetadata,
     getLog
   } from '@/api/editor'
-  import type { IResponse, ISqlResult, IFields, ILog } from './types'
+  import type {
+    IResponse,
+    ISqlResult,
+    IFields,
+    ILog,
+    IErrorMessage
+  } from './types'
 
   const { t } = useI18n()
   const param = reactive({
@@ -106,6 +112,7 @@
   const logLoading = ref(false)
   const sessionIdentifier = ref('')
   const theme = ref('customTheme')
+  const errorMessages: Ref<IErrorMessage[]> = ref([])
   const editorVariables = reactive({
     editor: {} as any,
     language: 'sql',
@@ -133,9 +140,10 @@
   const handleQuerySql = async () => {
     resultLoading.value = true
     logLoading.value = true
+    errorMessages.value = []
     const openSessionResponse: IResponse = await openSession({
       'kyuubi.engine.type': param.engineType
-    }).catch(errorCatch)
+    }).catch(catchSessionError)
     if (!openSessionResponse) return
     sessionIdentifier.value = openSessionResponse.identifier
 
@@ -145,18 +153,22 @@
         runAsync: false
       },
       sessionIdentifier.value
-    ).catch(errorCatch)
+    ).catch(catchSessionError)
     if (!runSqlResponse) return
 
     Promise.all([
       getSqlRowset({
         operationHandleStr: runSqlResponse.identifier,
         fetchorientation: 'FETCH_NEXT',
         maxrows: limit.value
+      }).catch((err: any) => {
+        catchOperationError(err, t('message.get_sql_result_failed'))
       }),
       getSqlMetadata({
         operationHandleStr: runSqlResponse.identifier
-      })
+      }).catch((err: any) =>
+        catchOperationError(err, t('message.get_sql_metadata_failed'))
+      )
     ])
       .then((result: any[]) => {
         sqlResult.value = result[0]?.rows?.map((row: IFields) => {
@@ -167,13 +179,6 @@
           return map
         })
       })
-      .catch(() => {
-        ElMessage({
-          message: t('message.get_sql_result_failed'),
-          type: 'error'
-        })
-        sqlResult.value = []
-      })
       .finally(() => {
         resultLoading.value = false
       })
@@ -182,29 +187,40 @@
       .then((res: ILog) => {
         return res?.logRowSet?.join('\r\n')
       })
-      .catch(() => {
-        ElMessage({
-          message: t('message.get_sql_log_failed'),
-          type: 'error'
-        })
+      .catch((err: any) => {
+        postError(err, t('message.get_sql_log_failed'))
         return ''
       })
       .finally(() => {
         logLoading.value = false
       })
   }
 
-  const errorCatch = (err: any) => {
-    sqlResult.value = []
-    sqlLog.value = err?.response?.data?.message || err?.message || ''
+  const postError = (err: any, title = t('message.run_failed')) => {
+    errorMessages.value.push({
+      title,
+      description: err?.response?.data?.message || err?.message || ''
+    })
     ElMessage({
-      message: t('message.run_failed'),
+      message: title,
       type: 'error'
     })
+  }
+
+  const catchSessionError = (err: any) => {
+    sqlResult.value = []
+    sqlLog.value = ''
+    postError(err)
     resultLoading.value = false
     logLoading.value = false
   }
 
+  const catchOperationError = (err: any, title: string) => {
+    postError(err, title)
+    sqlResult.value = []
+    return Promise.reject()
+  }
+
   const handleChangeLimit = (command: number) => {
     limit.value = command
   }

kyuubi-server/web-ui/src/views/editor/components/Result.vue

@@ -33,20 +33,40 @@
         show-overflow-tooltip
         sortable />
     </el-table>
-    <div v-else class="no-data">
-      <img src="@/assets/images/document.svg" />
-      <div>{{ data === null ? $t('run_sql_tips') : $t('no_data') }}</div>
-    </div>
+    <template v-else>
+      <template v-if="errorMessages.length">
+        <el-alert
+          v-for="(m, idx) in errorMessages"
+          :key="idx"
+          :title="m.title"
+          type="error"
+          show-icon>
+          <template #default>
+            <pre> {{ m.description }} </pre>
+          </template>
+        </el-alert>
+      </template>
+      <div v-else class="no-data">
+        <img src="@/assets/images/document.svg" />
+        <div>{{ data === null ? $t('run_sql_tips') : $t('no_data') }}</div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { PropType } from 'vue'
+  import type { IErrorMessage } from './types'
   defineProps({
     data: {
       type: [Array, null] as PropType<Array<any> | null>,
       default: null,
       required: true
+    },
+    errorMessages: {
+      type: Array as PropType<Array<IErrorMessage>>,
+      default: [],
+      required: true
     }
   })
 
@@ -103,6 +123,21 @@
   .result {
     min-height: 200px;
     position: relative;
+    .el-alert {
+      width: auto;
+      margin: 10px;
+      border: 1px solid #db2828;
+
+      :deep(.el-alert__description) {
+        max-height: 300px;
+        overflow: auto;
+
+        pre {
+          margin-top: 0;
+          white-space: pre-wrap;
+        }
+      }
+    }
     .no-data {
       position: absolute;
       left: 50%;

kyuubi-server/web-ui/src/views/editor/components/types.ts

@@ -34,4 +34,9 @@ interface ILog {
   rowCount: number
 }
 
-export { IResponse, ISqlResult, IFields, ILog }
+interface IErrorMessage {
+  title: string
+  description: string
+}
+
+export { IResponse, ISqlResult, IFields, ILog, IErrorMessage }