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 d55edb81ed63172791b7255646bf14a921a6da48
Author: Qian Xia <lauraxiaq...@gmail.com>
AuthorDate: Thu Jul 13 16:08:46 2023 +0800
KYLIN-5626 refine query history format issue
---
.../src/components/common/DataSourceBar/index.vue | 2 +-
.../common/ProjectEditModal/ProjectEditModal.vue | 6 +--
kystudio/src/components/common/editor.vue | 43 ++++++++++++++++------
.../src/components/query/query_history_table.vue | 4 +-
kystudio/src/components/query/query_tab.vue | 11 +++++-
kystudio/src/locale/en.js | 5 ++-
6 files changed, 52 insertions(+), 19 deletions(-)
diff --git a/kystudio/src/components/common/DataSourceBar/index.vue
b/kystudio/src/components/common/DataSourceBar/index.vue
index afafea0360..c7e7dc284c 100644
--- a/kystudio/src/components/common/DataSourceBar/index.vue
+++ b/kystudio/src/components/common/DataSourceBar/index.vue
@@ -31,7 +31,7 @@
</section>
<section class="body">
<div v-if="isShowLoadTable" class="btn-group">
- <el-button plain size="medium" v-if="!isLoadingTreeData &&
showAddDatasourceBtn && !isLogicalView" type="primary" v-guide.addDatasource
icon="el-ksd-icon-add_data_source_old" @click="importDataSource('selectSource',
currentProjectData)">
+ <el-button plain size="medium" v-if="!isLoadingTreeData &&
showAddDatasourceBtn && !isLogicalView" type="primary"
icon="el-ksd-icon-add_data_source_old" @click="importDataSource('selectSource',
currentProjectData)">
{{$t('addDatasource')}}
</el-button>
</div>
diff --git
a/kystudio/src/components/common/ProjectEditModal/ProjectEditModal.vue
b/kystudio/src/components/common/ProjectEditModal/ProjectEditModal.vue
index b5ed0dbebf..cae11f1d99 100644
--- a/kystudio/src/components/common/ProjectEditModal/ProjectEditModal.vue
+++ b/kystudio/src/components/common/ProjectEditModal/ProjectEditModal.vue
@@ -35,7 +35,7 @@
<!-- 去除了智能模式的，直接显示下面这个div 即可 end -->
<!-- 表单：项目名 -->
<el-form-item :label="$t('projectName')" prop="name"
v-if="isFieldShow('name')" class="js_projectname">
- <el-input v-guide.addProjectInput
+ <el-input
:disabled="editType !== 'new'"
auto-complete="off"
:value="form.name"
@@ -45,7 +45,7 @@
</el-form-item>
<!-- 表单：项目描述 -->
<el-form-item :label="$t('description')" prop="description"
v-if="isFieldShow('description')" class="js_project_desc">
- <el-input v-guide.addProjectDesc
+ <el-input
type="textarea"
auto-complete="off"
:value="form.description"
@@ -110,7 +110,7 @@
<div slot="footer" class="dialog-footer ky-no-br-space" v-if="isFormShow">
<el-button size="medium"
@click="closeHandler(false)">{{$t('cancel')}}</el-button>
- <el-button type="primary" size="medium" :loading="saveLoading"
@click="submit" v-guide.saveProjectBtn
class="js_addproject_submit">{{$t('kylinLang.common.ok')}}</el-button>
+ <el-button type="primary" size="medium" :loading="saveLoading"
@click="submit"
class="js_addproject_submit">{{$t('kylinLang.common.ok')}}</el-button>
</div>
</el-dialog>
</template>
diff --git a/kystudio/src/components/common/editor.vue
b/kystudio/src/components/common/editor.vue
index 024d4bbbea..75df637180 100644
--- a/kystudio/src/components/common/editor.vue
+++ b/kystudio/src/components/common/editor.vue
@@ -15,14 +15,20 @@
v-model="showCopyStatus">
<i class="el-icon-circle-check"></i>
<span>{{$t('kylinLang.common.copySuccess')}}</span>
</el-popover>
- <i class="el-ksd-icon-dup_16 edit-copy-btn ksd-fs-16"
- @click.stop
- v-if="readOnly"
- :class="{'is-show': editorData, 'alwaysShow': alwaysShowCopyBtn}"
- v-clipboard:copy="fullFormatData || editorData"
- v-clipboard:success="onCopy"
- v-clipboard:error="onError">
- </i>
+ <el-tooltip placement="top" :disabled="isFormat==='origin'"
:content="$t('kylinLang.common.formatTips')">
+ <i class="el-ksd-icon-dup_16 edit-copy-btn ksd-fs-16"
+ @click.stop
+ v-if="readOnly"
+ :class="{'is-show': editorData, 'alwaysShow': alwaysShowCopyBtn}"
+ v-clipboard:copy="fullFormatData || editorData"
+ v-clipboard:success="onCopy"
+ v-clipboard:error="onError">
+ </i>
+ </el-tooltip>
+ <el-tabs v-model="isFormat" v-if="isFormatSwitch" class="format-switch"
type="button" :class="{'en-model': $lang==='en'}" @tab-click="changeFormatType">
+ <el-tab-pane :label="$t('kylinLang.common.origin')"
name="origin"></el-tab-pane>
+ <el-tab-pane :label="$t('kylinLang.common.format')"
name="format"></el-tab-pane>
+ </el-tabs>
</div>
</template>
<script>
@@ -55,6 +61,9 @@ import { Component } from 'vue-property-decorator'
isFormatter: {
default: false
},
+ isFormatSwitch: {
+ default: false
+ },
readOnly: {
default: false
},
@@ -139,10 +148,10 @@ import { Component } from 'vue-property-decorator'
this.$message(this.$t('kylinLang.common.copyfail'))
},
// 截取前100行sql
- abridgeData () {
+ abridgeData (format) {
const splitData = this.editorData.split('\n')
// 需要截断的默认都是已经格式化后的，如果传入需要格式化，就再手动格式化，且格式化方式是通过字符串长度判断
- if (!isIE() && this.needFormater && (splitData.length === 1 ||
(splitData.length === 2 && /^LIMIT (\d+)/.test(splitData[1])))) {
+ if (!isIE() && (this.needFormater || format) && (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
@@ -156,6 +165,9 @@ import { Component } from 'vue-property-decorator'
this.fullFormatData = this.editorData
}
},
+ changeFormatType (type) {
+ this.isAbridge && this.abridgeData(type.name === 'format')
+ },
handleFormatSql (sql) {
try {
const fsql = this._formatSql(sql, formatSQLConfig)
@@ -221,7 +233,8 @@ export default class KapEditor extends Vue {
height: +this.height || 0,
width: this.width
},
- showLimitTip: false
+ showLimitTip: false,
+ isFormat: 'origin'
}
}
mounted () {
@@ -288,6 +301,14 @@ export default class KapEditor extends Vue {
box-sizing: border-box;
// background-color: @aceditor-bg-color;
border-radius: 6px;
+ .format-switch {
+ position: absolute;
+ bottom: 0px;
+ right: 10px;
+ .el-tabs__header {
+ margin: 0;
+ }
+ }
.ace_print-margin {
visibility: hidden !important;
}
diff --git a/kystudio/src/components/query/query_history_table.vue
b/kystudio/src/components/query/query_history_table.vue
index 7e5408bf46..a7bcb4205b 100644
--- a/kystudio/src/components/query/query_history_table.vue
+++ b/kystudio/src/components/query/query_history_table.vue
@@ -59,7 +59,7 @@
:ref="'historySqlEditor' + props.row.query_id"
:key="props.row.query_id"
:readOnly="true"
- :needFormater="true"
+ :isFormatSwitch="true"
:dragable="false"
:isAbridge="true"
:value="props.row.sql_text">
@@ -176,7 +176,7 @@
{{transToGmtTime(props.row.query_time)}}
</template>
</el-table-column>
- <el-table-column :renderHeader="renderColumn2" prop="duration"
align="right" width="100">
+ <el-table-column :renderHeader="renderColumn2" prop="duration"
align="right" width="120">
<template slot-scope="props">
<span v-if="props.row.duration < 1000">< 1s</span>
<span v-if="props.row.duration >= 1000">{{props.row.duration / 1000
| fixed(2)}}s</span>
diff --git a/kystudio/src/components/query/query_tab.vue
b/kystudio/src/components/query/query_tab.vue
index 09e9168d31..51130e548c 100644
--- a/kystudio/src/components/query/query_tab.vue
+++ b/kystudio/src/components/query/query_tab.vue
@@ -9,7 +9,10 @@
<div class="clearfix operatorBox">
<p class="tips_box">
<el-button type="primary" text size="small"
@click.native="openSaveQueryDialog"
:disabled="!sourceSchema">{{$t('kylinLang.common.save')}}</el-button><el-button
- size="small" type="primary" text @click.native="resetQuery"
:disabled="!sourceSchema" v-if="isWorkspace"
style="display:inline-block">{{$t('clear')}}</el-button>
+ size="small" type="primary" text @click.native="resetQuery"
:disabled="!sourceSchema" v-if="isWorkspace"
style="display:inline-block">{{$t('clear')}}</el-button><el-tooltip
+ placement="top" :disabled="!sourceSchema"
:content="$t('formatTips')">
+ <el-button size="small" type="primary" text @click.native="format"
:disabled="!sourceSchema" v-if="isWorkspace"
style="display:inline-block">{{$t('format')}}</el-button>
+ </el-tooltip>
</p>
<p class="operator" v-if="isWorkspace">
<el-form :model="queryForm" :inline="true" ref="queryForm"
@submit.native.prevent class="demo-form-inline">
@@ -93,6 +96,8 @@ import { kylinConfirm, handleSuccess, handleError } from
'../../util/business'
resetTips: 'Are you sure you want to clear the SQL Editor?',
queryTips: 'You can enter a SQL query in the SQL editor, and the results
will be displayed here after the query runs',
clear: 'Clear',
+ format: 'Reformat',
+ formatTips: 'Reformatting for easy reading',
runQuery: 'Run Query',
stopQuery: 'Stop Query',
overIntegerLength: 'Please enter a value no larger than 2,147,483,647.',
@@ -203,6 +208,10 @@ export default class QueryTab extends Vue {
editor.$emit('setValue', '')
})
}
+ format () {
+ const editor = this.$refs.insightBox
+ this.sourceSchema = editor.handleFormatSql(this.sourceSchema)
+ }
async submitQuery (querySql) {
try {
const valid = await this.$refs.queryForm.validate()
diff --git a/kystudio/src/locale/en.js b/kystudio/src/locale/en.js
index 687c4f382b..6dfce7ea6c 100644
--- a/kystudio/src/locale/en.js
+++ b/kystudio/src/locale/en.js
@@ -226,7 +226,10 @@ exports.default = {
jobNode: 'Job node',
BATCH: 'Batch',
STREAMING: 'Streaming',
- HYBRID: 'Fusion'
+ HYBRID: 'Fusion',
+ format: 'Reformat',
+ origin: 'Default Format',
+ formatTips: 'It is recommended to copying the SQL using the default
format. The current format may cause query errors.'
},
model: {
draft: 'Draft',
