[kylin] 05/11: KYLIN-5611 Compatible with lower version browsers for sql-formatter

[xxyu]

This is an automated email from the ASF dual-hosted git repository.

xxyu pushed a commit to branch kylin5
in repository https://gitbox.apache.org/repos/asf/kylin.git

commit 47190c4a4c180cb1d050e72285653adf3561f9b3
Author: Qian Xia <lauraxiaq...@gmail.com>
AuthorDate: Wed Jul 5 15:58:55 2023 +0800

    KYLIN-5611 Compatible with lower version browsers for sql-formatter
---
 kystudio/src/components/common/editor.vue             | 13 +++++++++++--
 kystudio/src/components/query/query_history_table.vue | 11 ++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/kystudio/src/components/common/editor.vue 
b/kystudio/src/components/common/editor.vue
index 2675054d0f..024d4bbbea 100644
--- a/kystudio/src/components/common/editor.vue
+++ b/kystudio/src/components/common/editor.vue
@@ -146,8 +146,8 @@ import { Component } from 'vue-property-decorator'
         const data = this.editorData.length > sqlStrLenLimit ? 
`${this.editorData.slice(0, sqlStrLenLimit)}...` : this.editorData
         // 是否显示 tips 取决于填入的 sql 字符数是否超过全局配置的
         this.showLimitTip = this.editorData.length > sqlStrLenLimit
-        this.formatData = this._formatSql(data, formatSQLConfig)
-        this.fullFormatData = this._formatSql(this.editorData, formatSQLConfig)
+        this.formatData = this.handleFormatSql(data, formatSQLConfig)
+        this.fullFormatData = this.handleFormatSql(this.editorData, 
formatSQLConfig)
       } else {
         const data = this.editorData.split('\n')
         // 是否显示 tips 取决于填入的 sql 行数是否超过全局配置的
@@ -156,6 +156,15 @@ import { Component } from 'vue-property-decorator'
         this.fullFormatData = this.editorData
       }
     },
+    handleFormatSql (sql) {
+      try {
+        const fsql = this._formatSql(sql, formatSQLConfig)
+        return fsql ?? sql
+      } catch (e) {
+        console.warn('The browser version is too low, please update the 
version.')
+        return sql
+      }
+    },
     getAbridgeType () {
       this.isAbridge && this.abridgeData()
     },
diff --git a/kystudio/src/components/query/query_history_table.vue 
b/kystudio/src/components/query/query_history_table.vue
index 2e9e438282..5c0fdae5a2 100644
--- a/kystudio/src/components/query/query_history_table.vue
+++ b/kystudio/src/components/query/query_history_table.vue
@@ -434,7 +434,7 @@ export default class QueryHistoryTable extends Vue {
       const sql = element.sql_text
       const sql_limit = this.sqlOverLimit(sql) ? `${sql.slice(0, 
this.sqlLimitRows)}...` : sql
       const sqlTextArr = sql.split('\n') // 换行符超过一个，说明用户查询行自定义过format格式，则保留
-      element['sql_limit'] = (sqlTextArr.length > 1 || isIE()) ? sql_limit : 
this._formatSql(sql_limit, formatSQLConfig)
+      element['sql_limit'] = (sqlTextArr.length > 1 || isIE()) ? sql_limit : 
this.handleFormatSql(sql_limit, formatSQLConfig)
       element['server'] = [element['server']]
       element['flexHeight'] = 0
       element['editorH'] = 0
@@ -469,6 +469,15 @@ export default class QueryHistoryTable extends Vue {
     return row.filter(item => !((item.layoutId === 0 || item.layoutId === -1 
|| item.layoutId === null) && item.indexType !== null))
   }
 
+  handleFormatSql (sql_limit) {
+    try {
+      const sql = this._formatSql(sql_limit, formatSQLConfig)
+      return sql ?? sql_limit
+    } catch (e) {
+      return sql_limit
+    }
+  }
+
   dateRangeChange () {
     if (this.datetimerange) {
       this.filterData.startTimeFrom = new Date(this.datetimerange[0]).getTime()