[kylin] 12/17: KYLIN-5511 resolve the problem of RegExp in IE

[xx...@apache.org]

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 48e571344df663e0059b07625cdfb8c29f89f880
Author: Qian Xia <la...@gmail.com>
AuthorDate: Wed Apr 12 18:37:33 2023 +0800

    KYLIN-5511 resolve the problem of RegExp in IE
---
 kystudio/package.json                                 | 2 +-
 kystudio/src/components/common/editor.vue             | 9 +++++----
 kystudio/src/components/query/query_history_table.vue | 6 +++---
 kystudio/src/main.js                                  | 6 ++++++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/kystudio/package.json b/kystudio/package.json
index e48263d1f1..98802c940d 100644
--- a/kystudio/package.json
+++ b/kystudio/package.json
@@ -109,7 +109,7 @@
     "webpack": "^2.2.1",
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1",
+    "webpack-hot-middleware": "2.16.1",
     "webpack-merge": "^2.6.1"
   },
   "engines": {
diff --git a/kystudio/src/components/common/editor.vue b/kystudio/src/components/common/editor.vue
index 83aecc434d..2675054d0f 100644
--- a/kystudio/src/components/common/editor.vue
+++ b/kystudio/src/components/common/editor.vue
@@ -26,8 +26,9 @@
   </div>
 </template>
 <script>
-import { format } from 'sql-formatter'
+// import { format } from 'sql-formatter'
 import { sqlRowsLimit, sqlStrLenLimit, formatSQLConfig } from '../../config/index'
+import { isIE } from '../../util'
 import { mapState } from 'vuex'
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
@@ -141,12 +142,12 @@ import { Component } from 'vue-property-decorator'
     abridgeData () {
       const splitData = this.editorData.split('\n')
       // 需要截断的默认都是已经格式化后的，如果传入需要格式化，就再手动格式化，且格式化方式是通过字符串长度判断
-      if (this.needFormater && (splitData.length === 1 || (splitData.length === 2 && /^LIMIT (\d+)/.test(splitData[1])))) {
+      if (!isIE() && this.needFormater && (splitData.length === 1 || (splitData.length === 2 && /^LIMIT (\d+)/.test(splitData[1])))) {
         const data = this.editorData.length > sqlStrLenLimit ? `${this.editorData.slice(0, sqlStrLenLimit)}...` : this.editorData
         // 是否显示 tips 取决于填入的 sql 字符数是否超过全局配置的
         this.showLimitTip = this.editorData.length > sqlStrLenLimit
-        this.formatData = format(data, formatSQLConfig)
-        this.fullFormatData = format(this.editorData, formatSQLConfig)
+        this.formatData = this._formatSql(data, formatSQLConfig)
+        this.fullFormatData = this._formatSql(this.editorData, formatSQLConfig)
       } else {
         const data = this.editorData.split('\n')
         // 是否显示 tips 取决于填入的 sql 行数是否超过全局配置的
diff --git a/kystudio/src/components/query/query_history_table.vue b/kystudio/src/components/query/query_history_table.vue
index b20bd9f7bd..232cfdcad9 100644
--- a/kystudio/src/components/query/query_history_table.vue
+++ b/kystudio/src/components/query/query_history_table.vue
@@ -297,13 +297,13 @@
 
 <script>
 import { transToGmtTime, getStringLength, handleError } from '../../util/business'
-import { handleSuccessAsync } from '../../util'
+import { handleSuccessAsync, isIE } from '../../util'
 import Vue from 'vue'
 import { mapActions, mapGetters } from 'vuex'
 import { Component, Watch } from 'vue-property-decorator'
 // import $ from 'jquery'
 import { sqlRowsLimit, sqlStrLenLimit, formatSQLConfig } from '../../config/index'
-import { format } from 'sql-formatter'
+// import { format } from 'sql-formatter'
 import IndexDetails from '../studio/StudioModel/ModelList/ModelAggregate/indexDetails'
 import Diagnostic from 'components/admin/Diagnostic/index'
 @Component({
@@ -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 ? sql_limit : format(sql_limit, formatSQLConfig)
+      element['sql_limit'] = (sqlTextArr.length > 1 || isIE()) ? sql_limit : this._formatSql(sql_limit, formatSQLConfig)
       element['server'] = [element['server']]
       element['flexHeight'] = 0
       element['editorH'] = 0
diff --git a/kystudio/src/main.js b/kystudio/src/main.js
index fdc85f184c..faac4b1d44 100644
--- a/kystudio/src/main.js
+++ b/kystudio/src/main.js
@@ -43,8 +43,14 @@ Vue.component('kylin-editor', kylinEditor)
 Vue.component('kylin-tab', tab)
 Vue.component('kylin-loading', kylinLoading)
 Vue.component('kylin-empty-data', emptyData)
+import { isIE } from './util'
 import { pageRefTags } from 'config'
 
+if (!isIE()) {
+  const { format } = require('sql-formatter')
+  Vue.prototype._formatSql = format
+}
+
 Vue.use(ElementUI, {
   closeOtherMessages: true,
   errorMessageDuration: 10000,