From e7b00290152b2de4b29848a1ab93014891b8038d Mon Sep 17 00:00:00 2001
From: weitong <weitong@cisco.com>
Date: Mon, 13 Nov 2023 13:11:30 +0800
Subject: [PATCH] code change

---
 kyuubi-server/web-ui/src/api/editor/index.ts  |   7 ++
 .../web-ui/src/locales/en_US/index.ts         |   3 +
 .../web-ui/src/locales/zh_CN/index.ts         |   3 +
 .../src/views/editor/components/Editor.vue    |  68 +++++-----
 .../src/views/editor/components/Log.vue       |  56 +++++++++
 .../src/views/editor/components/Result.vue    | 116 +++++++++---------
 .../src/views/editor/components/types.ts      |  10 +-
 .../web-ui/src/views/editor/index.vue         |  23 +++-
 .../views/editor/styles/shared-styles.scss    |  27 ++++
 9 files changed, 215 insertions(+), 98 deletions(-)
 create mode 100644 kyuubi-server/web-ui/src/views/editor/components/Log.vue
 create mode 100644 kyuubi-server/web-ui/src/views/editor/styles/shared-styles.scss

diff --git a/kyuubi-server/web-ui/src/api/editor/index.ts b/kyuubi-server/web-ui/src/api/editor/index.ts
index 67163af8782..daaf0471c12 100644
--- a/kyuubi-server/web-ui/src/api/editor/index.ts
+++ b/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'
+  })
+}
diff --git a/kyuubi-server/web-ui/src/locales/en_US/index.ts b/kyuubi-server/web-ui/src/locales/en_US/index.ts
index 62f6bd62504..9bb0144ff40 100644
--- a/kyuubi-server/web-ui/src/locales/en_US/index.ts
+++ b/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',
diff --git a/kyuubi-server/web-ui/src/locales/zh_CN/index.ts b/kyuubi-server/web-ui/src/locales/zh_CN/index.ts
index 7b0f41d27f0..198f379eccb 100644
--- a/kyuubi-server/web-ui/src/locales/zh_CN/index.ts
+++ b/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: '确认删除',
diff --git a/kyuubi-server/web-ui/src/views/editor/components/Editor.vue b/kyuubi-server/web-ui/src/views/editor/components/Editor.vue
index 6ed89048384..21faee5a33a 100644
--- a/kyuubi-server/web-ui/src/views/editor/components/Editor.vue
+++ b/kyuubi-server/web-ui/src/views/editor/components/Editor.vue
@@ -62,14 +62,18 @@
         @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>
@@ -77,6 +81,7 @@
 <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,7 +221,7 @@
     })
   }
 
-  const catchSessionError = (err: any) => {
+  const catchSessionError = (err: IError) => {
     sqlResult.value = []
     sqlLog.value = ''
     postError(err)
@@ -215,10 +229,9 @@
     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>
diff --git a/kyuubi-server/web-ui/src/views/editor/components/Log.vue b/kyuubi-server/web-ui/src/views/editor/components/Log.vue
new file mode 100644
index 00000000000..d2a403d9e54
--- /dev/null
+++ b/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>
diff --git a/kyuubi-server/web-ui/src/views/editor/components/Result.vue b/kyuubi-server/web-ui/src/views/editor/components/Result.vue
index 1eefe1e6b39..3937905c0db 100644
--- a/kyuubi-server/web-ui/src/views/editor/components/Result.vue
+++ b/kyuubi-server/web-ui/src/views/editor/components/Result.vue
@@ -18,18 +18,14 @@
 
 <template>
   <div class="result">
-    <el-table
-      v-if="data?.length"
-      v-fit-columns
-      stripe
-      :data="data"
-      class="editor-el-table">
-      <el-table-column type="index" width="50" />
+    <el-table v-if="data?.length" stripe :data="data" class="editor-el-table">
+      <el-table-column type="index" class-name="index" :width="indexWidth" />
       <el-table-column
-        v-for="(_value, key) in data[0]"
+        v-for="(width, key) in columns"
         :key="key"
         :prop="key"
         :label="key"
+        :width="width"
         show-overflow-tooltip
         sortable />
     </el-table>
@@ -55,11 +51,13 @@
 </template>
 
 <script lang="ts" setup>
-  import { PropType } from 'vue'
+  import { PropType, computed } from 'vue'
   import type { IErrorMessage } from './types'
-  defineProps({
+
+  const font = '14px Myriad Pro,Helvetica Neue,Arial,Helvetica,sans-serif'
+  const props = defineProps({
     data: {
-      type: [Array, null] as PropType<Array<any> | null>,
+      type: [Array, null] as PropType<Array<Object> | null>,
       default: null,
       required: true
     },
@@ -70,54 +68,59 @@
     }
   })
 
-  function adjustColumnWidth(table: any, padding = 12) {
-    const colgroup = table.querySelector('colgroup')
-    const colDefs = [...colgroup.querySelectorAll('col')]
-    colDefs.forEach((col) => {
-      const clsName = col.getAttribute('name')
-      // ...table.querySelectorAll(`td.${clsName}`),
-      const cells = [...table.querySelectorAll(`th.${clsName}`)]
-      if (cells[0]?.classList?.contains?.('leave-alone')) {
-        return
-      }
-      const widthList = cells.map((el) => {
-        return el.querySelector('.cell')?.scrollWidth || 0
-      })
-      const max = Math.max(...widthList)
-      table.querySelectorAll(`col[name=${clsName}]`).forEach((el: any) => {
-        el.setAttribute('width', max + padding)
-      })
-      table.querySelectorAll(`td.${clsName} .cell`).forEach((el: any) => {
-        el.style.width = max + padding + 'px'
-      })
-    })
+  const measureTextWidth = (text: string, font: string, deviation = 48) => {
+    const canvas = document.createElement('canvas')
+    const context: CanvasRenderingContext2D = canvas.getContext(
+      '2d'
+    ) as CanvasRenderingContext2D
+    context.font = font
+    const width = context.measureText(text).width
+    return width + deviation
   }
 
-  const vFitColumns = {
-    mounted(el: any, binding: any) {
-      setTimeout(() => {
-        adjustColumnWidth(el, binding.value)
-      }, 200)
-    },
-    updated(el: any, binding: any) {
-      el.classList.add('r-table')
-      setTimeout(() => {
-        adjustColumnWidth(el, binding.value)
-      }, 200)
+  const indexWidth = computed(() => {
+    if (props.data?.length) {
+      return measureTextWidth(String(props.data?.length), font, 16)
+    } else {
+      return 0
     }
-  }
+  })
+
+  const columns = computed(() => {
+    if (props.data?.length) {
+      const maxColumnLength = 600
+      const obj: { [key: string]: number } = {}
+      props.data?.forEach((item: { [key: string]: any }) => {
+        for (const key in item) {
+          if (!obj[key]) {
+            obj[key] = measureTextWidth(key, font, 80)
+          }
+          obj[key] = Math.min(
+            maxColumnLength,
+            Math.max(obj[key], measureTextWidth(String(item[key]), font))
+          )
+        }
+      })
+      return obj
+    } else {
+      return {}
+    }
+  })
 </script>
 
 <style lang="scss" scoped>
-  :deep(.editor-el-table.r-table) {
-    th .cell {
-      display: inline-block;
-      white-space: nowrap;
-      width: auto;
-      overflow: auto;
+  @import '../styles/shared-styles.scss';
+
+  :deep(.editor-el-table) {
+    .el-table__header,
+    .el-table__body,
+    .el-table__body-wrapper .el-scrollbar__view,
+    tbody td .cell {
+      min-width: 100%;
     }
-    .el-table__body-wrapper {
-      overflow-x: auto;
+
+    tbody td.index .cell {
+      text-align: center;
     }
   }
   .result {
@@ -139,14 +142,7 @@
       }
     }
     .no-data {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 14px;
-      color: #999;
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-      text-align: center;
+      @include sharedNoData;
     }
   }
 </style>
diff --git a/kyuubi-server/web-ui/src/views/editor/components/types.ts b/kyuubi-server/web-ui/src/views/editor/components/types.ts
index 3fb84a53d62..42475bf4ae8 100644
--- a/kyuubi-server/web-ui/src/views/editor/components/types.ts
+++ b/kyuubi-server/web-ui/src/views/editor/components/types.ts
@@ -39,4 +39,12 @@ interface IErrorMessage {
   description: string
 }
 
-export { IResponse, ISqlResult, IFields, ILog, IErrorMessage }
+interface IError extends Error {
+  response?: {
+    data?: {
+      message?: string
+    }
+  }
+}
+
+export { IResponse, ISqlResult, IFields, ILog, IErrorMessage, IError }
diff --git a/kyuubi-server/web-ui/src/views/editor/index.vue b/kyuubi-server/web-ui/src/views/editor/index.vue
index 37df66fe940..424d3e929c8 100644
--- a/kyuubi-server/web-ui/src/views/editor/index.vue
+++ b/kyuubi-server/web-ui/src/views/editor/index.vue
@@ -105,19 +105,36 @@
   }
 
   :deep(.result-el-tabs) {
+    $border: 1px solid #e4e7ed;
     .el-tabs__header {
       margin-bottom: 0;
       background: transparent;
       .el-tabs__nav-wrap {
-        border-bottom: 1px solid #e4e7ed;
+        border-bottom: $border;
       }
       .el-tabs__nav {
-        background: #f5f5f5;
+        border: 0;
+
+        .el-tabs__item {
+          border: $border;
+          border-bottom: 0;
+          margin-right: 4px;
+          background: #f5f5f5;
+          border-radius: 2px 2px 0 0;
+
+          &.is-active {
+            background: #fff;
+          }
+
+          &:not(.is-active) {
+            color: #909399;
+          }
+        }
       }
     }
     .el-tabs__content {
       padding: 10px 0 0 0;
-      border: 1px solid #e4e7ed;
+      border: $border;
       border-top: none;
     }
   }
diff --git a/kyuubi-server/web-ui/src/views/editor/styles/shared-styles.scss b/kyuubi-server/web-ui/src/views/editor/styles/shared-styles.scss
new file mode 100644
index 00000000000..9027ef69a3a
--- /dev/null
+++ b/kyuubi-server/web-ui/src/views/editor/styles/shared-styles.scss
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+ 
+@mixin sharedNoData {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 14px;
+    color: #999;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    text-align: center;
+}
\ No newline at end of file