code change

kyuubi-server/web-ui/src/api/editor/index.ts

@@ -68,3 +68,10 @@ export function getLog(identifier: string): any {
     method: 'get'
   })
 }
+
+export function closeOperation(identifier: string) {
+  return request({
+    url: `api/v1/admin/operations/${identifier}`,
+    method: 'delete'
+  })
+}

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

@@ -38,7 +38,10 @@ export default {
   failure_reason: 'Failure Reason',
   session_properties: 'Session Properties',
   no_data: 'No data',
+  no_log: 'No log',
   run_sql_tips: 'Run a SQL to get result',
+  result: 'Result',
+  log: 'Log',
   operation: {
     text: 'Operation',
     delete_confirm: 'Delete Confirm',

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

@@ -38,7 +38,10 @@ export default {
   failure_reason: '失败原因',
   session_properties: 'Session 参数',
   no_data: '无数据',
+  no_log: '无日志',
   run_sql_tips: '请运行SQL获取结果',
+  result: '结果',
+  log: '日志',
   operation: {
     text: '操作',
     delete_confirm: '确认删除',

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

@@ -62,21 +62,26 @@
         @change="handleContentChange"
         @editor-save="editorSave" />
     </section>
-    <pre v-show="sqlLog" v-loading="logLoading">{{ sqlLog }}</pre>
     <el-tabs v-model="activeTab" type="card" class="result-el-tabs">
       <el-tab-pane
         v-loading="resultLoading"
-        :label="`Result${sqlResult?.length ? ` (${sqlResult?.length})` : ''}`"
+        :label="`${$t('result')}${
+          sqlResult?.length ? ` (${sqlResult?.length})` : ''
+        }`"
         name="result">
         <Result :data="sqlResult" :error-messages="errorMessages" />
       </el-tab-pane>
+      <el-tab-pane v-loading="logLoading" :label="$t('log')" name="log">
+        <Log :data="sqlLog" />
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script lang="ts" setup>
   import MonacoEditor from '@/components/monaco-editor/index.vue'
   import Result from './Result.vue'
+  import Log from './Log.vue'
   import { ref, reactive, onUnmounted, toRaw } from 'vue'
   import type { Ref } from 'vue'
   import * as monaco from 'monaco-editor'
@@ -90,14 +95,16 @@
     runSql,
     getSqlRowset,
     getSqlMetadata,
-    getLog
+    getLog,
+    closeOperation
   } from '@/api/editor'
   import type {
     IResponse,
     ISqlResult,
     IFields,
     ILog,
-    IErrorMessage
+    IErrorMessage,
+    IError
   } from './types'
 
   const { t } = useI18n()
@@ -141,11 +148,14 @@
     resultLoading.value = true
     logLoading.value = true
     errorMessages.value = []
-    const openSessionResponse: IResponse = await openSession({
-      'kyuubi.engine.type': param.engineType
-    }).catch(catchSessionError)
-    if (!openSessionResponse) return
-    sessionIdentifier.value = openSessionResponse.identifier
+
+    if (!sessionIdentifier.value) {
+      const openSessionResponse: IResponse = await openSession({
+        'kyuubi.engine.type': param.engineType
+      }).catch(catchSessionError)
+      if (!openSessionResponse) return
+      sessionIdentifier.value = openSessionResponse.identifier
+    }
 
     const runSqlResponse: IResponse = await runSql(
       {
@@ -156,21 +166,21 @@
     ).catch(catchSessionError)
     if (!runSqlResponse) return
 
-    Promise.all([
+    const getSqlResultPromise = Promise.all([
       getSqlRowset({
         operationHandleStr: runSqlResponse.identifier,
         fetchorientation: 'FETCH_NEXT',
         maxrows: limit.value
-      }).catch((err: any) => {
+      }).catch((err: IError) => {
         catchOperationError(err, t('message.get_sql_result_failed'))
       }),
       getSqlMetadata({
         operationHandleStr: runSqlResponse.identifier
-      }).catch((err: any) =>
+      }).catch((err: IError) =>
         catchOperationError(err, t('message.get_sql_metadata_failed'))
       )
     ])
-      .then((result: any[]) => {
+      .then((result) => {
         sqlResult.value = result[0]?.rows?.map((row: IFields) => {
           const map: { [key: string]: any } = {}
           row.fields?.forEach(({ value }: ISqlResult, index: number) => {
@@ -183,20 +193,24 @@
         resultLoading.value = false
       })
 
-    sqlLog.value = await getLog(runSqlResponse.identifier)
+    const getSqlLogPromise = getLog(runSqlResponse.identifier)
       .then((res: ILog) => {
-        return res?.logRowSet?.join('\r\n')
+        sqlLog.value = res?.logRowSet?.join('\r\n')
       })
-      .catch((err: any) => {
+      .catch((err: IError) => {
         postError(err, t('message.get_sql_log_failed'))
-        return ''
+        sqlLog.value = ''
       })
       .finally(() => {
         logLoading.value = false
       })
+
+    Promise.all([getSqlResultPromise, getSqlLogPromise]).then(() =>
+      closeOperation(runSqlResponse.identifier)
+    )
   }
 
-  const postError = (err: any, title = t('message.run_sql_failed')) => {
+  const postError = (err: IError, title = t('message.run_sql_failed')) => {
     errorMessages.value.push({
       title,
       description: err?.response?.data?.message || err?.message || ''
@@ -207,18 +221,17 @@
     })
   }
 
-  const catchSessionError = (err: any) => {
+  const catchSessionError = (err: IError) => {
     sqlResult.value = []
     sqlLog.value = ''
     postError(err)
     resultLoading.value = false
     logLoading.value = false
   }
 
-  const catchOperationError = (err: any, title: string) => {
+  const catchOperationError = (err: IError, title: string) => {
     postError(err, title)
     sqlResult.value = []
-    return Promise.reject()
   }
 
   const handleChangeLimit = (command: number) => {
@@ -252,7 +265,6 @@
   .editor {
     > .el-space,
     > section,
-    > pre,
     > .el-tabs {
       margin-bottom: 12px;
     }
@@ -274,17 +286,5 @@
       height: 180px;
       border: 1px solid #e0e0e0;
     }
-
-    > pre {
-      max-height: 120px;
-      overflow: auto;
-      border-left: 6px solid #e2e2e2;
-      padding: 9.5px;
-      margin: 24px 0;
-      font-size: 12px;
-      line-height: 20px;
-      background-color: #f8f8f8;
-      color: #444;
-    }
   }
 </style>

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

@@ -0,0 +1,56 @@
+<!--
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+-->
+
+<template>
+  <div class="log">
+    <pre v-if="data">{{ data }}</pre>
+    <div v-else class="no-data">
+      <img src="@/assets/images/document.svg" />
+      <div>{{ $t('no_log') }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps({
+    data: {
+      type: String,
+      default: null,
+      required: true
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '../styles/shared-styles.scss';
+  .log {
+    min-height: 200px;
+    position: relative;
+    pre {
+      overflow: auto;
+      padding: 0 24px;
+      font-size: 12px;
+      line-height: 20px;
+      color: #444;
+      white-space: pre-wrap;
+    }
+    .no-data {
+      @include sharedNoData;
+    }
+  }
+</style>