+
{{ props.row.participleState === 'custom' ? props.row.tokenize_on_chars : '自然语言分词' }}
@@ -431,8 +515,25 @@
class="table-link"
@click="isDisableOperate(props.row)"
>
- {{ props.row.is_delete ? $t('复原') : $t('隐藏') }}
+
+
+
+
+
import { mapGetters } from 'vuex';
-
+ import { deepClone } from '../../common/util';
export default {
name: 'FieldTable',
props: {
@@ -530,6 +631,10 @@
type: Boolean,
default: false,
},
+ builtFieldShow: {
+ type: Boolean,
+ default: false,
+ },
selectEtlConfig: {
type: String,
default: 'bk_log_json',
@@ -552,6 +657,7 @@
checkLoading: false,
retainOriginalText: true, // 保留原始日志
retainExtraText: false,
+ builtFieldVisible: false,
currentIsAnalyzed: false,
currentParticipleState: '',
currentTokenizeOnChars: '',
@@ -584,10 +690,10 @@
// trigger: 'blur'
// }
],
- alias_name: [
+ query_alias: [
// 目前组件不能拿到其他字段的值,不能通过validator进行验证
// {
- // validator: this.checkAliasName,
+ // validator: this.checkQueryAlias,
// trigger: 'blur'
// }
{
@@ -661,9 +767,13 @@
retainExtraJson(newVal) {
this.retainExtraText = newVal;
},
+ builtFieldShow(newVal){
+ this.builtFieldVisible = newVal;
+ }
},
async mounted() {
this.retainExtraText = this.retainExtraJson;
+ this.builtFieldVisible = this.builtFieldShow
this.reset();
this.$emit('handle-table-data', this.changeTableList);
},
@@ -684,9 +794,8 @@
return list;
}, arr);
arr.forEach(item => (item.previous_type = item.field_type));
-
if (!this.isPreviewMode) {
- arr = arr.filter(item => !item.is_built_in);
+ // arr = arr.filter(item => !item.is_built_in);
}
if (this.isEditJson === false && !this.isTempField) {
@@ -793,6 +902,9 @@
this.$set(row, 'tokenize_on_chars', this.currentTokenizeOnChars);
this.$set(row, 'participleState', this.currentParticipleState);
},
+ handlePopoverRename(row) {
+ this.$set(row, 'alias_name_show', true);
+ },
handelChangeAnalyzed() {
if (!this.currentIsAnalyzed) {
this.currentIsCaseSensitive = false;
@@ -820,7 +932,25 @@
},
getData() {
// const data = JSON.parse(JSON.stringify(this.formData.tableList.filter(row => !row.is_delete)))
- const data = JSON.parse(JSON.stringify(this.formData.tableList));
+ const data= deepClone(this.formData.tableList)
+ data.forEach(item => {
+ if (item.hasOwnProperty('fieldErr')) {
+ delete item.fieldErr;
+ }
+
+ if (item.hasOwnProperty('aliasErr')) {
+ delete item.aliasErr;
+ }
+
+ if (item.hasOwnProperty('typeErr')) {
+ delete item.typeErr;
+ }
+ });
+ return data;
+ },
+ getAlltData() {
+ const data= deepClone(this.formData.tableList)
+
data.forEach(item => {
if (item.hasOwnProperty('fieldErr')) {
delete item.fieldErr;
@@ -869,14 +999,25 @@
});
},
checkFieldNameItem(row) {
+ if(row.alias_name){
+ return
+ }
const { field_name, is_delete, field_index } = row;
let result = '';
-
+ let aliasResult = ''
+ let width = 220
+ let btnShow = false
if (!is_delete) {
if (!field_name) {
result = this.$t('必填项');
- } else if (this.extractMethod !== 'bk_log_json' && !/^(?!_)(?!.*?_$)^[A-Za-z0-9_]+$/gi.test(field_name)) {
- result = this.$t('只能包含a-z、A-Z、0-9和_,且不能以_开头和结尾');
+ } else if (!/^(?!_)(?!.*?_$)^[A-Za-z0-9_]+$/gi.test(field_name)) {
+ if(this.selectEtlConfig === 'bk_log_json'){
+ btnShow = true
+ aliasResult = this.$t('检测到字段名称包含异常值,只能包含a-z、A-Z、0-9和_,且不能以_开头和结尾。请重命名,命名后原字段将被覆盖;')
+ width = 300
+ }else{
+ result = this.$t('只能包含a-z、A-Z、0-9和_,且不能以_开头和结尾');
+ }
} else if (
this.extractMethod !== 'bk_log_json' &&
this.globalsData.field_built_in.find(item => item.id === field_name.toLocaleLowerCase())
@@ -885,6 +1026,13 @@
this.extractMethod === 'bk_log_regexp'
? this.$t('字段名与系统字段重复,必须修改正则表达式')
: this.$t('字段名与系统内置字段重复');
+ } else if (
+ this.extractMethod == 'bk_log_json' &&
+ this.globalsData.field_built_in.find(item => item.id === field_name.toLocaleLowerCase())
+ ) {
+ btnShow = true
+ aliasResult = this.$t('检测到字段名与系统内置名称冲突。请重命名,命名后原字段将被覆盖')
+ width = 220
} else if (this.extractMethod === 'bk_log_delimiter' || this.selectEtlConfig === 'bk_log_json') {
result = this.filedNameIsConflict(field_index, field_name) ? this.$t('字段名称冲突, 请调整') : '';
} else {
@@ -893,25 +1041,62 @@
} else {
result = '';
}
+ if(!row.alias_name){
+ this.$set(row, 'btnShow', btnShow);
+ }
row.fieldErr = result;
+ this.$set(row, 'fieldAliasErr', aliasResult);
+ this.$set(row, 'width', width);
this.$emit('handle-table-data', this.changeTableList);
-
- return result;
+ return result || aliasResult;
+ },
+ checkAliasNameItem(row) {
+
+ let { alias_name, is_delete, field_index } = row;
+ if(alias_name){
+ row.alias_name_show = false
+ return
+ }
+ // alias_name = this.currentAliasName
+ let queryResult = ''
+ if (!is_delete) {
+ if (!/^(?!_)(?!.*?_$)^[A-Za-z0-9_]+$/gi.test(alias_name)) {
+ queryResult = this.$t('重命名只能包含a-z、A-Z、0-9和_,且不能以_开头和结尾')
+ } else if (
+ this.globalsData.field_built_in.find(item => item.id === alias_name.toLocaleLowerCase())
+ ) {
+ queryResult = this.$t('重命名与系统内置字段重复')
+ } else if (this.selectEtlConfig === 'bk_log_json') {
+ // 此处对比还是字段名,要改成重名间对比
+
+ queryResult = this.filedNameIsConflict(field_index, alias_name) ? this.$t('重命名字段名称冲突, 请调整') : '';
+ } else {
+ queryResult = '';
+ }
+ } else {
+ queryResult = '';
+ }
+ this.$set(row, 'fieldAliasErr', queryResult);
+ this.$emit('handle-table-data', this.changeTableList);
+ return queryResult;
},
checkFieldName() {
return new Promise((resolve, reject) => {
try {
let result = true;
this.formData.tableList.forEach(row => {
- if (this.checkFieldNameItem(row)) {
+ // 如果有别名,不判断字段名,判断别名
+ if (!row.query_alias && row.is_built_in === false && !!this.checkFieldNameItem(row)) {
// 返回 true 的时候未通过
result = false;
+ }else if(this.checkQueryAliasItem(row)){
+ result = true;
}
});
if (result) {
resolve();
} else {
- console.warn('FieldName校验错误');
+ console.warn('FieldName或QueryName校验错误');
reject(result);
}
} catch (err) {
@@ -920,26 +1105,29 @@
}
});
},
- checkAliasNameItem(row) {
- const { field_name: fieldName, alias_name: aliasName, is_delete: isDelete } = row;
+
+ checkQueryAliasItem(row) {
+ const { field_name: fieldName, query_alias: queryAlias, is_delete: isDelete } = row;
if (isDelete) {
return true;
}
-
- if (aliasName) {
+ if (queryAlias) {
// 设置了别名
- if (!/^(?!^\d)[\w]+$/gi.test(aliasName)) {
+ if (!/^(?!^\d)[\w]+$/gi.test(queryAlias)) {
// 别名只支持【英文、数字、下划线】,并且不能以数字开头
row.aliasErr = this.$t('别名只支持【英文、数字、下划线】,并且不能以数字开头');
return false;
}
- if (this.globalsData.field_built_in.find(item => item.id === aliasName.toLocaleLowerCase())) {
+ if (this.globalsData.field_built_in.find(item => item.id === queryAlias.toLocaleLowerCase())) {
// 别名不能与内置字段名相同
row.aliasErr = this.$t('别名不能与内置字段名相同');
return false;
}
} else if (this.globalsData.field_built_in.find(item => item.id === fieldName.toLocaleLowerCase())) {
- // 字段名与内置字段冲突,必须设置别名
+ // 字段名与内置字段冲突,如果没有设置重命名且不是内置字段,必须设置别名
+ if(row.query_alias || row.is_built_in){
+ return true
+ }
row.aliasErr = this.$t('字段名与内置字段冲突,必须设置别名');
return false;
}
@@ -947,23 +1135,23 @@
row.aliasErr = '';
return true;
},
- checkAliasName() {
+ checkQueryAlias() {
return new Promise((resolve, reject) => {
try {
let result = true;
this.formData.tableList.forEach(row => {
- if (!this.checkAliasNameItem(row)) {
+ if (!this.checkQueryAliasItem(row)) {
result = false;
}
});
if (result) {
resolve();
} else {
- console.warn('AliasName校验错误');
+ console.warn('QueryAlias校验错误');
reject(result);
}
} catch (err) {
- console.warn('AliasName校验错误');
+ console.warn('QueryAlias校验错误');
reject(err);
}
});
@@ -971,7 +1159,7 @@
validateFieldTable() {
const promises = [];
promises.push(this.checkFieldName());
- promises.push(this.checkAliasName());
+ promises.push(this.checkQueryAlias());
promises.push(this.checkType());
return promises;
},
@@ -986,24 +1174,19 @@
handleKeepField(value) {
this.$emit('handle-keep-field', value);
},
- renderHeaderAliasName(h) {
+ // 表格展示内置字段
+ handleBuiltField(value){
+ this.$emit('handle-built-field', value);
+ this.builtFieldVisible = !this.builtFieldVisible
+ },
+ renderHeaderQueryAlias(h) {
return h(
'div',
{
class: 'render-header',
},
[
- h('span', { directives: [{ name: 'bk-overflow-tips' }], class: 'title-overflow' }, [this.$t('重命名')]),
- h('span', this.$t('(选填)')),
- h('span', {
- class: 'icon bklog-icon bklog-info-fill',
- directives: [
- {
- name: 'bk-tooltips',
- value: this.$t('非必填字段,填写后将会替代字段名;字段名与内置字段重复时,必须重新命名。'),
- },
- ],
- }),
+ h('span', { directives: [{ name: 'bk-overflow-tips' }], class: 'title-overflow' }, [this.$t('别名')]),
],
);
},
@@ -1049,11 +1232,14 @@
},
filedNameIsConflict(fieldIndex, fieldName) {
const otherFieldNameList = this.formData.tableList.filter(item => item.field_index !== fieldIndex);
+ console.log(otherFieldNameList);
+
return otherFieldNameList.some(item => item.field_name === fieldName);
},
/** 当前字段是否禁用 */
getFieldEditDisabled(row) {
if (row?.is_delete) return true;
+ if(row?.is_built_in) return true
if (this.selectEtlConfig === 'bk_log_json') return false;
return this.extractMethod !== 'bk_log_delimiter' || this.isSetDisabled;
},
@@ -1069,6 +1255,23 @@
if (type === 'analyzed') atLastAnalyzed = true;
return this.isPreviewMode || isDelete || fieldType !== 'string' || !atLastAnalyzed || this.isSetDisabled;
},
+ expandObject(row, show) {
+ row.expand = show;
+ const index = this.formData.tableList.findIndex(item => item.field_name === row.field_name);
+ if (show) {
+ if (index !== -1) {
+ this.formData.tableList.splice(index + 1, 0, ...row.children);
+ }
+ } else {
+ if (index !== -1) {
+ const childrenCount = row.children.length;
+ this.formData.tableList.splice(index + 1, childrenCount);
+ }
+ }
+ },
+ deleteField(row) {
+ this.$emit('delete-field', row);
+ }
// isShowFieldDateIcon(row) {
// return ['string', 'int', 'long'].includes(row.field_type);
// },
@@ -1099,9 +1302,92 @@
/* stylelint-disable-next-line declaration-no-important */
padding: 0 !important;
-
+ .overflow-tips-field-name{
+ display: flex;
+ height: 100%;
+ align-items: center;
+ padding:0 15px;
+ background-color: rgb(250, 251, 253);
+ span{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .ext-btn{
+ font-size: 16px;
+ }
+ }
+ .participle-form-item{
+ .ext-btn{
+ cursor: pointer;
+ font-size: 18px;
+ position: absolute;
+ z-index: 99;
+ bottom: 14px;
+ }
+ .rotate{
+ transform: rotate(-90deg);
+ }
+ .bk-form-input[disabled] {
+ border-color: transparent !important;
+ }
+ .bk-form-content{
+ display: flex;
+ align-items: center;
+ }
+ }
+ .disable-background{
+ background-color: #fafbfd
+ }
+ .participle-field-name-input{
+ width: 50%;
+ border-right: 1px solid rgb(223, 224, 229);
+ }
+ .participle-icon{
+ font-size: 18px;
+ left: 42%;
+ width: 10%;
+ background-color: white;
+ position: absolute;
+ z-index: 99
+ }
+ .participle-icon-color{
+ background-color: rgb(250, 251, 253) !important;
+ }
+ .participle-alias-name-input{
+ width: 50%;
+ .bk-form-input{
+ padding-left: 15px;
+ }
+ }
+ .participle-field-name-input-pl5{
+ input{
+ padding-left: 15px;
+ }
+ }
.tooltips-icon {
- top: 16px;
+ top: 24px;
+ }
+ .red-icon{
+ color: #EA3636;
+ }
+ .tooltips-icon2{
+ cursor: pointer;
+ font-size: 16px;
+ &:hover{
+ color: #EA3636;
+ }
+ }
+ .tooltips-btn{
+ position: absolute;
+ right: 5px;
+ background: #EA3636;
+ border-radius: 2px;
+ }
+ .participle-popconfirm-btn{
+ position: absolute;
+ top: 10px;
+ right: 8px;
}
}
}
@@ -1197,7 +1483,7 @@
.participle-popconfirm {
width: 100%;
- .bk-tooltip-ref {
+ :deep(.bk-tooltip-ref) {
width: 100%;
}
@@ -1205,10 +1491,23 @@
display: flex;
align-items: center;
margin-left: 10px;
+ .participle_content{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
}
- }
+ :deep(thead tr th:first-child .cell) {
+ padding-left: 15px;
+ }
+ :deep(tbody tr td:first-child .bk-form-input) {
+ padding-left: 15px;
+ }
+
+ }
+
.preview-panel-left {
flex: 1;
}
@@ -1241,9 +1540,23 @@
}
}
- .bk-table .table-link {
+ .bk-table{
+ .table-link {
cursor: pointer;
- }
+ }
+ .bklog-eye {
+ font-size: 16px;
+ color: #3A84FF;
+ }
+ .bklog-eye-slash {
+ font-size: 16px;
+ color: #3A84FF;
+ }
+ .bklog-log-delete {
+ font-size: 17px;
+ color: #EA3636;
+ }
+ }
.field-date {
display: inline-block;
@@ -1277,8 +1590,39 @@
color: #3a84ff;
}
}
- }
+ .source-box{
+ height: 100%;
+ padding-top: 10px;
+ background-color: rgb(250, 251, 253);
+ .source-built{
+ background: #F0F1F5;
+ border-radius: 2px;
+ font-size: 12px;
+ color: #4D4F56;
+ padding: 4px 6px;
+ }
+ .source-add{
+ background: #DAF6E5;
+ border-radius: 2px;
+ font-size: 12px;
+ color: #299E56;
+ padding: 4px 6px;
+ }
+ .source-debug{
+ background: #E1ECFF;
+ border-radius: 2px;
+ font-size: 12px;
+ color: #3A84FF;
+ padding: 4px 6px;
+ }
+ }
+ }
+ .popconfirm-content{
+ .participle-popconfirm-btn-input{
+ margin:5px 0;
+ }
+ }
.field-date-dialog {
.prompt {
padding: 6px 7px;
@@ -1341,4 +1685,4 @@
font-size: 12px;
}
}
-
+
\ No newline at end of file
diff --git a/bklog/web/src/components/collection-access/step-field.vue b/bklog/web/src/components/collection-access/step-field.vue
index e7635ad91d..3631390322 100644
--- a/bklog/web/src/components/collection-access/step-field.vue
+++ b/bklog/web/src/components/collection-access/step-field.vue
@@ -188,7 +188,10 @@
data-test-id="fieldExtractionBox_span_applyTemp"
@click="openTemplateDialog(false)"
>
-
+
{{ $t('应用模版') }}
- {{ $t('说明文档') }}
+
+ {{ $t('说明文档') }}
@@ -209,6 +216,7 @@
:data-test-id="`fieldExtractionBox_button_filterMethod${option.id}`"
:disabled="(isCleanField && !cleanCollector) || isSetDisabled"
:key="option.id"
+ class="bklog-button"
@click="handleSelectConfig(option.id)"
>
{{ option.name }}
@@ -322,13 +330,13 @@
ext-cls="en-bk-form"
:label="$t('字段列表')"
>
-
{{ $t('查看内置字段') }}
-
+
-->
@@ -1026,6 +1037,7 @@
is_delete: false,
is_dimension: false,
is_time: false,
+ query_alias:'',
value: '',
option: {
time_format: '',
@@ -1085,9 +1097,11 @@
field_name: '',
field_type: '',
description: '',
+ query_alias:'',
is_case_sensitive: false,
is_analyzed: false,
is_built_in: false,
+ is_add_in: true,
is_dimension: false,
previous_type: '',
tokenize_on_chars: '',
@@ -1112,6 +1126,9 @@
timeCheckContent: '',
metaDataList: [],
isDebugLoading: false,
+ builtFieldShow:false,
+ fieldsObjectData: [],
+ alias_settings:[]
};
},
computed: {
@@ -1299,6 +1316,7 @@
}
await this.getCleanStash(collectorID);
this.getDataLog('init');
+
},
methods: {
handlerSearchTemplate() {
@@ -1312,6 +1330,22 @@
handleTableData(data) {
this.fieldNameList = data;
},
+ // 切换显示内置字段
+ handleBuiltField(value){
+ this.builtFieldShow = value
+ if(value){
+ const allFields = this.$refs.fieldTable.getData();
+ this.formData.fields = [...allFields, ...this.copyBuiltField]
+ this.savaFormData();
+ }else{
+ const allFields = this.$refs.fieldTable.getData();
+ const builtFields = allFields.filter( item => item.is_built_in)
+ this.formData.fields = allFields.filter( item => !item.is_built_in)
+ if(builtFields.length){
+ this.copyBuiltField = builtFields;
+ }
+ }
+ },
// 初始化清洗项
initCleanItem() {
this.basicLoading = true;
@@ -1511,11 +1545,30 @@
// 判断是否有设置字段清洗,如果没有则把etl_params设置成 bk_log_text
data.clean_type = !fieldTableData.length ? 'bk_log_text' : etlConfig;
data.etl_fields = fieldTableData;
+ if( this.params.etl_config === 'bk_log_json'){
+ if(!this.builtFieldShow){
+ this.copyBuiltField.forEach(field => {
+ if (field.hasOwnProperty('expand')) {
+ if (field.expand === false) {
+ this.copyBuiltField.push(...field.children)
+ }
+ }
+ })
+ data.etl_fields.push(...this.copyBuiltField)
+ }
+ data.alias_settings = fieldTableData.filter(item => item.query_alias).map(item => {
+ return {
+ field_name: item.alias_name || item.field_name,
+ query_alias: item.query_alias,
+ path_type: item.field_type
+ }
+ })
+ data.etl_fields = data.etl_fields.filter( item => !item.is_built_in )
+ }
} else {
delete data.etl_params['separator_regexp'];
delete data.etl_params['separator'];
}
-
let requestUrl;
const urlParams = {};
if (this.isSetEdit) {
@@ -1601,8 +1654,8 @@
},
/** 入库请求 */
async fieldCollectionRequest(atLastFormData, callback) {
- const { clean_type: etlConfig, etl_params: etlParams, etl_fields: etlFields } = atLastFormData;
- // 检索设置 直接入库
+ const { clean_type: etlConfig, etl_params: etlParams, etl_fields: etlFields, alias_settings } = atLastFormData;
+ // 检索设置 直接入库
const {
table_id,
storage_cluster_id,
@@ -1625,14 +1678,15 @@
etl_config: etlConfig,
fields: etlFields,
etl_params: etlParams,
+ alias_settings,
};
+
const updateData = {
params: {
collector_config_id: this.curCollect.collector_config_id,
},
data,
};
-
this.$http
.request('collect/fieldCollection', updateData)
.then(res => {
@@ -1840,6 +1894,7 @@
etl_config,
etl_params: etlParams,
fields,
+ index_set_id
} = this.curCollect;
const option = { time_zone: '', time_format: '' };
const copyFields = fields ? JSON.parse(JSON.stringify(fields)) : [];
@@ -1858,7 +1913,6 @@
row.option = Object.assign({}, option);
}
});
-
this.params.etl_config = etl_config;
Object.assign(this.params.etl_params, {
separator_regexp: etlParams?.separator_regexp || '',
@@ -1899,6 +1953,7 @@
if (this.curCollect.etl_config && this.curCollect.etl_config !== 'bk_log_text') {
this.formatResult = true;
}
+ this.requestFields(index_set_id)
},
clickFile() {
this.defaultSettings.isShow = true;
@@ -2245,6 +2300,7 @@
.then(res => {
if (res.data) {
const { clean_type, etl_params: etlParams, etl_fields: etlFields } = res.data;
+ this.concatenationQueryAlias(etlFields)
this.formData.fields.splice(0, this.formData.fields.length);
this.params.etl_config = clean_type;
@@ -2314,16 +2370,36 @@
})
.then(async res => {
if (res.data) {
+ const keys = Object.keys(res.data.alias_settings || {});
+ const arr = keys.map( key => {
+ return {
+ query_alias : key,
+ field_name : res.data.alias_settings[key].path
+ }
+ })
+ this.alias_settings = arr
+ this.concatenationQueryAlias( res.data.fields)
this.$store.commit('collect/setCurCollect', res.data);
this.getDetail();
await this.getCleanStash(id);
this.getDataLog('init');
+ this.requestFields(res.data.index_set_id)
}
})
.finally(() => {
this.basicLoading = false;
});
},
+ // 拼接query_alias
+ concatenationQueryAlias(fields) {
+ fields.forEach(item => {
+ this.alias_settings.forEach(item2 => {
+ if( item.field_name === item2.field_name || item.alias_name === item2.field_name ){
+ item.query_alias = item2.query_alias
+ }
+ })
+ })
+ },
// 新增、编辑清洗选择采集项
async handleCollectorChange(id) {
this.basicLoading = true;
@@ -2348,6 +2424,7 @@
});
if (curCollect.create_clean_able || this.isEditCleanItem) {
this.setAdvanceCleanTab(false);
+
// 获取采集项详情
await this.setDetail(id);
} else {
@@ -2383,6 +2460,9 @@
},
/** 切换匹配模式 */
handleSelectConfig(id) {
+ if(this.params.etl_config === id){
+ return
+ }
if (!this.isFinishCatchFrom) {
this.catchFields = this.$refs.fieldTable.getData();
this.isFinishCatchFrom = true;
@@ -2393,6 +2473,7 @@
this.isFinishCatchFrom = false;
return;
}
+ this.handleBuiltField(false)
this.formData.fields = []; // 切换匹配模式时需要清空字段
},
/** json格式新增字段 */
@@ -2459,6 +2540,7 @@
},
getNotParticipleFieldTableData() {
const fieldsData = this.$refs.fieldTable.getData() || [];
+
const { field_name, time_zone, time_format } = this.formData;
const isReportingTime = this.formData.log_reporting_time;
const result = fieldsData.map(item => {
@@ -2512,6 +2594,40 @@
}, {}),
);
},
+ /** 获取fields */
+ async requestFields(indexSetId) {
+ const typeConversion= {
+ keyword : 'string'
+ }
+ try {
+ const res = await this.$http.request('retrieve/getLogTableHead', {
+ params: {
+ index_set_id: indexSetId
+ },
+ });
+ this.fieldsObjectData = res.data.fields.filter(item => item.field_name.includes('.'))
+ this.fieldsObjectData.forEach(item => {
+ let name = item.field_name.split('.')[0]
+ item.field_type = typeConversion[item.field_type]
+ item.is_objectKey = true
+ this.copyBuiltField.forEach( builtField => {
+ if(builtField.field_type === "object" && name.includes(builtField.field_name)){
+ if (!Array.isArray(builtField.children)) {
+ builtField.children = [];
+ this.$set(builtField, 'expand', false);
+ }
+ builtField.children.push(item);
+ }
+ } )
+ })
+
+ } catch (err) {
+ console.warn(err);
+ }
+ },
+ deleteField(field) {
+ this.formData.fields = this.formData.fields.filter(item => item.field_index !== field.field_index)
+ }
},
};
@@ -2772,6 +2888,13 @@
display: flex;
align-items: center;
margin: 10px 0 0;
+ .bklog-button{
+ font-size: 12px;
+ }
+ }
+
+ .bklog-icon{
+ font-size: 16px;
}
.documentation {
@@ -2801,7 +2924,7 @@
}
.field-method-result {
- margin-top: -20px;
+ margin-top: 10px;
}
.add-field-container {
@@ -3092,4 +3215,4 @@
}
}
}
-
+
\ No newline at end of file
diff --git a/bklog/web/src/global/field-setting.vue b/bklog/web/src/global/field-setting.vue
index 595a4f52ff..94b4d82768 100644
--- a/bklog/web/src/global/field-setting.vue
+++ b/bklog/web/src/global/field-setting.vue
@@ -10,7 +10,7 @@
:is-show.sync="showSlider"
:quick-close="true"
:title="$t('索引集配置')"
- :width="640"
+ :width="800"
@animation-end="closeSlider"
>
@@ -308,6 +308,7 @@
participleState: 'default',
is_edit: true,
});
+ const alias_settings = ref([])
const batchAddField = () => {
console.log(collectorConfigId.value, 'collectorConfigId');
if (!collectorConfigId.value) return;
@@ -403,7 +404,7 @@
const indexfieldTable = ref(null);
const addNewField = () => {
- const fields = deepClone(tableField.value);
+ const fields = deepClone(indexfieldTable.value.getData());
const newBaseFieldObj = {
...baseFieldObj.value,
field_index: tableField.value.length + 1,
@@ -442,6 +443,15 @@
},
})
.then(res => {
+ const keys = Object.keys(res.data.alias_settings || {});
+ const arr = keys.map( key => {
+ return {
+ query_alias : key,
+ field_name : res.data.alias_settings[key].path
+ }
+ })
+ alias_settings.value = arr
+ concatenationQueryAlias( res.data.fields)
const collectData = res?.data || {};
formData.value = collectData;
cleanType.value = collectData?.etl_config;
@@ -456,12 +466,28 @@
},
})
.then(res => {
+ res.data.etl_fields.forEach(item => {
+ alias_settings.value.forEach(item2 => {
+ if( item.field_name === item2.field_name || item.alias_name === item2.field_name ){
+ item.query_alias = item2.query_alias
+ }
+ })
+ })
tableField.value = res?.data?.etl_fields.filter(item => !item.is_built_in && !item.is_delete);
formData.value.etl_params.retain_original_text = res?.data?.etl_params.retain_original_text;
});
sliderLoading.value = false;
};
-
+ // 拼接query_alias
+ const concatenationQueryAlias = (fields) => {
+ fields.forEach(item => {
+ alias_settings.value.forEach(item2 => {
+ if( item.field_name === item2.field_name || item.alias_name === item2.field_name ){
+ item.query_alias = item2.query_alias
+ }
+ })
+ })
+ }
const storageList = ref([]);
const getStorage = async () => {
try {
@@ -510,6 +536,7 @@
confirmLoading.value = true;
const originfieldTableData = originfieldTable.value.getData();
+ const indexfieldTableData = indexfieldTable.value.getAllData().filter(item=> item.query_alias)
const data = {
collector_config_name: formData.value.collector_config_name,
storage_cluster_id: formData.value.storage_cluster_id,
@@ -525,6 +552,14 @@
},
etl_config: formData.value.etl_config,
fields: indexfieldTable.value.getData(),
+ alias_settings: [
+ ...indexfieldTableData.map(item =>{
+ return {
+ field_name: item.alias_name || item.field_name,
+ query_alias: item.query_alias,
+ path_type: item.field_type}
+ }),
+ ],
};
await http
.request('collect/fastUpdateCollection', {
@@ -674,4 +709,4 @@
padding: 16px 36px 36px;
}
}
-
+
\ No newline at end of file
diff --git a/bklog/web/src/global/setting-table.vue b/bklog/web/src/global/setting-table.vue
index f1ef043272..8822f54dff 100644
--- a/bklog/web/src/global/setting-table.vue
+++ b/bklog/web/src/global/setting-table.vue
@@ -47,32 +47,56 @@
row-key="field_index"
size="small"
col-border
+ :expand-row-keys="expandRowKeys"
+ ref="fieldsTable"
>
-
-
{{ props.row.field_name }}
+
+
+
+
+
+
+
+
+ {{ props.row.field_name }}
+
+
{{ props.row.alias_name }}
+
+
{{ props.row.field_name }}
+
+
+
+
{{ props.row.alias_name}}
+
+
-
+
- {{ props.row.alias_name }}
+ {{ props.row.query_alias }}
@@ -134,7 +158,7 @@
:render-header="renderHeaderDataType"
:resizable="false"
align="center"
- min-width="100"
+ width="100"
>
@@ -198,6 +222,13 @@
{{ $t('大小写敏感') }}: {{ props.row.is_case_sensitive ? '是' : '否' }}
+
+ {{ $t('不分词') }}
+
item.field_name.toLowerCase().includes(query) || item.alias_name.toLowerCase().includes(query),
+ item => item.field_name.toLowerCase().includes(query) || item.query_alias.toLowerCase().includes(query),
);
} else {
return currentTableList;
@@ -499,6 +531,7 @@
async mounted() {
this.reset();
this.$emit('handle-table-data', this.changeTableList);
+ this.addObject()
},
methods: {
reset() {
@@ -659,6 +692,7 @@
getData() {
// const data = JSON.parse(JSON.stringify(this.formData.tableList.filter(row => !row.is_delete)))
const data = cloneDeep(this.formData.tableList);
+
data.forEach(item => {
if (item.hasOwnProperty('fieldErr')) {
delete item.fieldErr;
@@ -675,6 +709,13 @@
},
getAllData() {
const data = cloneDeep(this.tableAllList);
+ data.forEach(field => {
+ if (field.hasOwnProperty('expand')) {
+ if (field.expand === false) {
+ data.push(...field.children)
+ }
+ }
+ })
data.forEach(item => {
if (item.hasOwnProperty('fieldErr')) {
delete item.fieldErr;
@@ -723,6 +764,8 @@
});
},
checkFieldNameItem(row) {
+ console.log(row);
+
const { field_name, is_delete, field_index } = row;
let result = '';
@@ -775,7 +818,7 @@
});
},
checkAliasNameItem(row) {
- const { field_name: fieldName, alias_name: aliasName, is_delete: isDelete } = row;
+ const { field_name: fieldName, query_alias: aliasName, is_delete: isDelete } = row;
if (isDelete) {
return true;
}
@@ -821,6 +864,33 @@
}
});
},
+ checkQueryAliasItem(row) {
+ const { field_name: fieldName, query_alias: queryAlias, is_delete: isDelete } = row;
+ if (isDelete) {
+ return true;
+ }
+ this.$set(row, 'aliasErr', '');
+ if (queryAlias) {
+ // 设置了别名
+ if (!/^(?!^\d)[\w]+$/gi.test(queryAlias)) {
+ row.aliasErr = this.$t('别名只支持【英文、数字、下划线】,并且不能以数字开头');
+ return false;
+ }
+ if (this.globalsData.field_built_in.find(item => item.id === queryAlias.toLocaleLowerCase())) {
+ row.aliasErr = this.$t('别名不能与内置字段名相同');
+ return false;
+ }
+ } else if (this.globalsData.field_built_in.find(item => item.id === fieldName.toLocaleLowerCase())) {
+ if(row.query_alias || row.is_built_in){
+ row.aliasErr = '';
+ return true
+ }
+ row.aliasErr = this.$t('字段名与内置字段冲突,必须设置别名');
+ return false;
+ }
+ row.aliasErr = '';
+ return true;
+ },
validateFieldTable() {
const promises = [];
promises.push(this.checkFieldName());
@@ -853,7 +923,7 @@
directives: [
{
name: 'bk-tooltips',
- value: this.$t('非必填字段,填写后将会替代字段名;字段名与内置字段重复时,必须重新命名。'),
+ value: this.$t('填写后原字段名和别名均可查询'),
},
],
class: 'render-header decoration-header-cell',
@@ -941,10 +1011,40 @@
// isShowFieldDateIcon(row) {
// return ['string', 'int', 'long'].includes(row.field_type);
// },
+ expandObject(row, show){
+ row.expand = show;
+ const index = this.changeTableList.findIndex(item => item.field_name === row.field_name);
+ if (show) {
+ if (index !== -1) {
+ this.changeTableList.splice(index + 1, 0, ...row.children);
+ }
+ } else {
+ if (index !== -1) {
+ const childrenCount = row.children.length;
+ this.changeTableList.splice(index + 1, childrenCount);
+ }
+ }
+ },
+ addObject(){
+ const fieldsObjectData = this.$store.state.indexFieldInfo.fields.filter(item => item.field_name.includes('.'))
+ fieldsObjectData.forEach(item => {
+ let name = item.field_name.split('.')[0]
+ item.is_objectKey = true
+ this.builtFields.forEach( builtField => {
+ if(builtField.field_type === "object" && name.includes(builtField.field_name)){
+ if (!Array.isArray(builtField.children)) {
+ builtField.children = [];
+ this.$set(builtField, 'expand', false);
+ }
+ builtField.children.push(item);
+ }
+ } )
+ })
+ }
},
};
-
+
\ No newline at end of file
diff --git a/bklog/web/src/hooks/use-field-name.ts b/bklog/web/src/hooks/use-field-name.ts
new file mode 100644
index 0000000000..c7c547a9dc
--- /dev/null
+++ b/bklog/web/src/hooks/use-field-name.ts
@@ -0,0 +1,67 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+export default ({ store }) => {
+ // 用于筛选并展示别名的情况
+ const getFieldName = (name: string) => {
+ if (store.state.showFieldAlias) {
+ const field = store.state.indexFieldInfo.fields.filter(item => item.field_name === name)
+ return field[0]?.query_alias || name
+ }
+ return name
+ }
+ // 用于只返回字段名数组的情况
+ const getFieldNames = (fields: any) => {
+ if (store.state.showFieldAlias) {
+ return fields.map(fieldInfo => fieldInfo.query_alias || fieldInfo.field_name);
+ } else {
+ return fields.map(fieldInfo => fieldInfo.field_name);
+ }
+ }
+ // 用于返回拼接字段名的情况
+ const getConcatenatedFieldName = (fields: any) => {
+ const { field_name: id, field_alias: alias, query_alias: query } = fields;
+ if (store.state.showFieldAlias && query) {
+ return { id, name: `${query}(${alias || id})` };
+ }
+ return { id, name: alias ? `${id}(${alias})` : id };
+ }
+ // 用于直接返回字段名的情况
+ const getQueryAlias = (field: any) => {
+ return store.state.showFieldAlias ? field.query_alias || field.field_name : field.field_name;
+ }
+ // 用于返回query_alias对应的field_name的情况
+ const changeFieldName = (name: string) => {
+ const field = store.state.indexFieldInfo.fields.filter(item => item.query_alias === name)
+ return field[0]?.field_name || name
+ }
+ return {
+ getFieldName,
+ getFieldNames,
+ getConcatenatedFieldName,
+ getQueryAlias,
+ changeFieldName
+ }
+}
\ No newline at end of file
diff --git a/bklog/web/src/language/lang/en/button.ts b/bklog/web/src/language/lang/en/button.ts
index c37d67b3a7..7e228103ca 100644
--- a/bklog/web/src/language/lang/en/button.ts
+++ b/bklog/web/src/language/lang/en/button.ts
@@ -211,4 +211,5 @@ export default {
展示字段名: 'Show Field Name',
展示别名: 'Show Alias Name',
定位到当前行: 'Locate the current row',
-};
+ 内置: 'built-in',
+};
\ No newline at end of file
diff --git a/bklog/web/src/language/lang/en/content.ts b/bklog/web/src/language/lang/en/content.ts
index 08cacf7c29..b3bf9a3f0b 100644
--- a/bklog/web/src/language/lang/en/content.ts
+++ b/bklog/web/src/language/lang/en/content.ts
@@ -498,8 +498,8 @@ export default {
'You currently do not have the business--${0} permission, please contact the operation and maintenance classmate {1} to add the role',
'聚类字段的最大长度,如果超过这个长度将直接丢弃,设置越大将消耗更多的资源':
'The maximum length of the clustering field. if it exceeds this length, it will be directly discarded. the larger the setting, the more resources it will consume.',
- '非必填字段,填写后将会替代字段名;字段名与内置字段重复时,必须重新命名。':
- 'Non-required fields, after filling in, will replace the field name; when the field name conflicts with the built-in field, it must be renamed.',
+ '填写后原字段名和别名均可查询':
+ 'The original field name and the alias can both be used for querying after being populated.',
'只能基于一个字段进行聚类,并且字段是为text的分词类型,默认为log字段':
"Clustering can only be based on one field, and the field must be of text tokenization type, defaulting to 'log' field",
' - 日志内容:[2006-01-02 15:04:05] content': ' - Log content: [2006-01-02 15:04:05] content',
@@ -1009,4 +1009,6 @@ export default {
复制当前查询: 'Copy the current query',
清理当前查询: 'Clean up the current query',
收藏当前查询: 'Add current query to favorites',
-};
+ "检测到字段名称包含异常值,只能包含a-z、A-Z、0-9和_,且不能以_开头和结尾。请重命名,命名后原字段将被覆盖;": 'The field name contains invalid characters. It can only include a-z, A-Z, 0-9, and _, and it cannot start or end with _. Please rename it; the original field will be overwritten after renaming',
+ "检测到字段名与系统内置名称冲突。请重命名,命名后原字段将被覆盖": 'The field name conflicts with a system built-in name. Please rename it; the original field will be overwritten after renaming',
+};
\ No newline at end of file
diff --git a/bklog/web/src/language/lang/en/label.ts b/bklog/web/src/language/lang/en/label.ts
index 311277babd..0313ea4bbf 100644
--- a/bklog/web/src/language/lang/en/label.ts
+++ b/bklog/web/src/language/lang/en/label.ts
@@ -723,8 +723,10 @@ export default {
前往清洗: 'Go to wash',
索引字段配置: 'Index field configuration',
字段类型不支持快速修改: 'Field type does not support quick modification',
+ 内置字段不支持快速修改: ' Built in field does not support quick modification',
时间维度: 'Time dimension',
关联Trace检索: 'Associated Trace Search',
检索结果为空: 'Search Results Are Empty',
查询设置: 'Query settings',
-};
+ 字段映射: 'field mapping',
+};
\ No newline at end of file
diff --git a/bklog/web/src/static/demo.html b/bklog/web/src/static/demo.html
index c72bd01375..60cd66c646 100644
--- a/bklog/web/src/static/demo.html
+++ b/bklog/web/src/static/demo.html
@@ -177,6 +177,10 @@
filled-right-arrow
+
+
+ audit
+
icon-help-document-fill
@@ -533,6 +537,18 @@
log-remark
+
+
+ help
+
+
+
+ refresh2
+
+
+
+ subnode
+
log-plus-circle-shape
@@ -565,6 +581,22 @@
jincheng
+
+
+ qiehuanbanben
+
+
+
+ shaixuan
+
+
+
+ yingshe
+
+
+
+ arrow-down-filled
+
为什么使用
@@ -672,6 +704,12 @@ 如何使用
filled-right-arrow
+
+
+
+
+ audit
+
@@ -1206,6 +1244,24 @@ 如何使用
log-remark
+
+
+
+
+ help
+
+
+
+
+
+ refresh2
+
+
+
+
+
+ subnode
+
@@ -1254,6 +1310,30 @@ 如何使用
jincheng
+
+
+
+
+ qiehuanbanben
+
+
+
+
+
+ shaixuan
+
+
+
+
+
+ yingshe
+
+
+
+
+
+ arrow-down-filled
+
为什么使用
diff --git a/bklog/web/src/static/fonts/iconcool.eot b/bklog/web/src/static/fonts/iconcool.eot
index cf0cfa4c3b..b92494b62e 100644
Binary files a/bklog/web/src/static/fonts/iconcool.eot and b/bklog/web/src/static/fonts/iconcool.eot differ
diff --git a/bklog/web/src/static/fonts/iconcool.svg b/bklog/web/src/static/fonts/iconcool.svg
index fe118460d7..336bcb6c95 100644
--- a/bklog/web/src/static/fonts/iconcool.svg
+++ b/bklog/web/src/static/fonts/iconcool.svg
@@ -74,6 +74,9 @@
+
+
+
@@ -341,6 +344,15 @@
+
+
+
+
+
+
+
+
+
@@ -368,6 +380,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/bklog/web/src/static/fonts/iconcool.ttf b/bklog/web/src/static/fonts/iconcool.ttf
index 780c9b2061..52638c9209 100644
Binary files a/bklog/web/src/static/fonts/iconcool.ttf and b/bklog/web/src/static/fonts/iconcool.ttf differ
diff --git a/bklog/web/src/static/fonts/iconcool.woff b/bklog/web/src/static/fonts/iconcool.woff
index 4d21c6d1df..4805eadb9c 100644
Binary files a/bklog/web/src/static/fonts/iconcool.woff and b/bklog/web/src/static/fonts/iconcool.woff differ
diff --git a/bklog/web/src/static/iconcool.js b/bklog/web/src/static/iconcool.js
new file mode 100644
index 0000000000..9dd87661ce
--- /dev/null
+++ b/bklog/web/src/static/iconcool.js
@@ -0,0 +1,10 @@
+!(function () {
+ var svgCode = ' '
+ if (document.body) {
+ document.body.insertAdjacentHTML('afterbegin', svgCode)
+ } else {
+ document.addEventListener('DOMContentLoaded', function() {
+ document.body.insertAdjacentHTML('afterbegin', svgCode)
+ })
+ }
+})()
\ No newline at end of file
diff --git a/bklog/web/src/static/iconcool.json b/bklog/web/src/static/iconcool.json
new file mode 100644
index 0000000000..2b9a41caa1
--- /dev/null
+++ b/bklog/web/src/static/iconcool.json
@@ -0,0 +1 @@
+{"iconName":"bklog","icons":[{"name":"app-store","svgCode":"\n\n\n\n\n\t \n\t \n\t \n\t \n \n \n","codepoint":"\\e162"},{"name":"jump","svgCode":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n","codepoint":"\\e15f"},{"name":"assembly-line-fill","svgCode":" ","codepoint":"\\e154"},{"name":"calculation-fill","svgCode":" ","codepoint":"\\e14d"},{"name":"up","svgCode":"\n\n\n\n\n\t \n\t \n \n \n","codepoint":"\\e103"},{"name":"down","svgCode":"\n\n\n\n\n\t \n\t \n \n \n","codepoint":"\\e102"},{"name":"topping-fill","svgCode":"\n\n\n\n \n \n","codepoint":"\\e168"},{"name":"info-fill","svgCode":"\n\n\n\n \n \n","codepoint":"\\e101"},{"name":"eye","svgCode":" ","codepoint":"\\e197"},{"name":"eye-slash","svgCode":" ","codepoint":"\\e198"},{"name":"email-shape","svgCode":" ","codepoint":"\\e164"},{"name":"lc-star-shape","svgCode":" ","codepoint":"\\e165"},{"name":"double-arrow","svgCode":" ","codepoint":"\\e104"},{"name":"drag-dots","svgCode":" ","codepoint":"\\e105"},{"name":"filled-right-arrow","svgCode":" ","codepoint":"\\e106"},{"name":"audit","svgCode":" ","codepoint":"\\e1a5"},{"name":"icon-help-document-fill","svgCode":" ","codepoint":"\\e107"},{"name":"chinese","svgCode":" ","codepoint":"\\e108"},{"name":"copy","svgCode":" ","codepoint":"\\e109"},{"name":"english","svgCode":" ","codepoint":"\\e10a"},{"name":"full-screen-log","svgCode":" ","codepoint":"\\e10b"},{"name":"index-set","svgCode":" ","codepoint":"\\e10c"},{"name":"play-log","svgCode":" ","codepoint":"\\e10d"},{"name":"search-log-logo","svgCode":" ","codepoint":"\\e10e"},{"name":"stop-log","svgCode":" ","codepoint":"\\e10f"},{"name":"log-download","svgCode":" ","codepoint":"\\e110"},{"name":"log-refresh","svgCode":" ","codepoint":"\\e111"},{"name":"log-setting","svgCode":" ","codepoint":"\\e112"},{"name":"download-icon","svgCode":" ","codepoint":"\\e113"},{"name":"refresh-icon","svgCode":" ","codepoint":"\\e114"},{"name":"set-icon","svgCode":" ","codepoint":"\\e115"},{"name":"plus","svgCode":" ","codepoint":"\\e19a"},{"name":"xiazai","svgCode":" ","codepoint":"\\e14a"},{"name":"camera-fill","svgCode":" ","codepoint":"\\e116"},{"name":"cc-cabinet","svgCode":" ","codepoint":"\\e158"},{"name":"cc-create-business","svgCode":" ","codepoint":"\\e157"},{"name":"cc-influxdb","svgCode":" ","codepoint":"\\e155"},{"name":"cc-log","svgCode":" ","codepoint":"\\e156"},{"name":"locale","svgCode":" ","codepoint":"\\e117"},{"name":"bar","svgCode":" ","codepoint":"\\e192"},{"name":"collapse-small","svgCode":" ","codepoint":"\\e18a"},{"name":"expand-small","svgCode":" ","codepoint":"\\e189"},{"name":"new-_empty-fill","svgCode":" ","codepoint":"\\e150"},{"name":"audit-fill","svgCode":" ","codepoint":"\\e151"},{"name":"field-fill","svgCode":" ","codepoint":"\\e16f"},{"name":"folder-fill","svgCode":" ","codepoint":"\\e166"},{"name":"data-copy","svgCode":" ","codepoint":"\\e195"},{"name":"history-fill","svgCode":" ","codepoint":"\\e167"},{"name":"namespace-fill","svgCode":" ","codepoint":"\\e14e"},{"name":"withdraw-fill","svgCode":" ","codepoint":"\\e152"},{"name":"date-picker","svgCode":" ","codepoint":"\\e118"},{"name":"help","svgCode":" ","codepoint":"\\e119"},{"name":"lianjie","svgCode":" ","codepoint":"\\e11a"},{"name":"auto-refresh","svgCode":" ","codepoint":"\\e11b"},{"name":"no-refresh","svgCode":" ","codepoint":"\\e11c"},{"name":"copy-2","svgCode":" ","codepoint":"\\e188"},{"name":"table","svgCode":" ","codepoint":"\\e193"},{"name":"number","svgCode":" ","codepoint":"\\e138"},{"name":"string","svgCode":" ","codepoint":"\\e139"},{"name":"text","svgCode":" ","codepoint":"\\e13a"},{"name":"unkown","svgCode":" ","codepoint":"\\e13b"},{"name":"info-fill--2","svgCode":" ","codepoint":"\\e14f"},{"name":"equal","svgCode":" ","codepoint":"\\e13c"},{"name":"and","svgCode":" ","codepoint":"\\e13d"},{"name":"value","svgCode":" ","codepoint":"\\e13f"},{"name":"field","svgCode":" ","codepoint":"\\e13e"},{"name":"time","svgCode":" ","codepoint":"\\e144"},{"name":"inform","svgCode":" ","codepoint":"\\e145"},{"name":"teminal","svgCode":" ","codepoint":"\\e146"},{"name":"document","svgCode":" ","codepoint":"\\e147"},{"name":"zidongchaxun","svgCode":" ","codepoint":"\\e148"},{"name":"shoudongchaxun","svgCode":" ","codepoint":"\\e149"},{"name":"xiangji","svgCode":" ","codepoint":"\\e14b"},{"name":"elasticsearch","svgCode":" ","codepoint":"\\e159"},{"name":"tongbu","svgCode":" ","codepoint":"\\e15a"},{"name":"moban","svgCode":" ","codepoint":"\\e15b"},{"name":"daoru","svgCode":" ","codepoint":"\\e15c"},{"name":"shijian","svgCode":" ","codepoint":"\\e15e"},{"name":"chart","svgCode":" ","codepoint":"\\e160"},{"name":"zhuanhuan","svgCode":" ","codepoint":"\\e161"},{"name":"liebiao","svgCode":" ","codepoint":"\\e169"},{"name":"boolean","svgCode":" ","codepoint":"\\e16d"},{"name":"block-shape","svgCode":" ","codepoint":"\\e16e"},{"name":"menu-custom","svgCode":" ","codepoint":"\\e170"},{"name":"qiyeweixin","svgCode":" ","codepoint":"\\e171"},{"name":"tiaozhuan","svgCode":" ","codepoint":"\\e172"},{"name":"ext","svgCode":" ","codepoint":"\\e175"},{"name":"star-line","svgCode":" ","codepoint":"\\e194"},{"name":"lishijilu","svgCode":" ","codepoint":"\\e176"},{"name":"bofang","svgCode":" ","codepoint":"\\e178"},{"name":"jiansuo","svgCode":" ","codepoint":"\\e177"},{"name":"shixiao","svgCode":" ","codepoint":"\\e179"},{"name":"zanting","svgCode":" ","codepoint":"\\e17a"},{"name":"zhedie","svgCode":" ","codepoint":"\\e17b"},{"name":"zhankai","svgCode":" ","codepoint":"\\e17c"},{"name":"brush","svgCode":" ","codepoint":"\\e17d"},{"name":"wholesale-editor","svgCode":" ","codepoint":"\\e17e"},{"name":"ellipsis-more","svgCode":" ","codepoint":"\\e17f"},{"name":"position","svgCode":" ","codepoint":"\\e180"},{"name":"log-delete","svgCode":" ","codepoint":"\\e181"},{"name":"masking","svgCode":" ","codepoint":"\\e183"},{"name":"fix-line","svgCode":" ","codepoint":"\\e184"},{"name":"fix-shape","svgCode":" ","codepoint":"\\e185"},{"name":"log-loading","svgCode":" ","codepoint":"\\e186"},{"name":"log-remark","svgCode":" ","codepoint":"\\e187"},{"name":"help","svgCode":" ","codepoint":"\\e1a4"},{"name":"refresh2","svgCode":" ","codepoint":"\\e1a6"},{"name":"subnode","svgCode":" ","codepoint":"\\e1a9"},{"name":"log-plus-circle-shape","svgCode":" ","codepoint":"\\e18b"},{"name":"log-trend","svgCode":" ","codepoint":"\\e18c"},{"name":"new-alarm","svgCode":" ","codepoint":"\\e18d"},{"name":"sudden-increase","svgCode":" ","codepoint":"\\e18e"},{"name":"overview","svgCode":" ","codepoint":"\\e18f"},{"name":"setting","svgCode":" ","codepoint":"\\e196"},{"name":"saoba","svgCode":" ","codepoint":"\\e19f"},{"name":"jincheng","svgCode":" ","codepoint":"\\e1a0"},{"name":"qiehuanbanben","svgCode":" ","codepoint":"\\e1a1"},{"name":"shaixuan","svgCode":" ","codepoint":"\\e1a3"},{"name":"yingshe","svgCode":" ","codepoint":"\\e1a7"},{"name":"arrow-down-filled","svgCode":" ","codepoint":"\\e1a8"}]}
\ No newline at end of file
diff --git a/bklog/web/src/static/style.css b/bklog/web/src/static/style.css
index a16f9b25a1..3000fd882b 100644
--- a/bklog/web/src/static/style.css
+++ b/bklog/web/src/static/style.css
@@ -10,7 +10,6 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
.bklog-icon {
/* use !important to prevent issues with browser extensions that change fonts */
- /* stylelint-disable-next-line declaration-no-important */
font-family: 'bklog' !important;
speak: none;
font-style: normal;
@@ -69,6 +68,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
.bklog-filled-right-arrow:before {
content: "\e106";
}
+.bklog-audit:before {
+ content: "\e1a5";
+}
.bklog-icon-help-document-fill:before {
content: "\e107";
}
@@ -336,6 +338,15 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
.bklog-log-remark:before {
content: "\e187";
}
+.bklog-help:before {
+ content: "\e1a4";
+}
+.bklog-refresh2:before {
+ content: "\e1a6";
+}
+.bklog-subnode:before {
+ content: "\e1a9";
+}
.bklog-log-plus-circle-shape:before {
content: "\e18b";
}
@@ -363,3 +374,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
.bklog-qiehuanbanben:before {
content: "\e1a1";
}
+.bklog-shaixuan:before {
+ content: "\e1a3";
+}
+.bklog-yingshe:before {
+ content: "\e1a7";
+}
+.bklog-arrow-down-filled:before {
+ content: "\e1a8";
+}
diff --git a/bklog/web/src/store/index.js b/bklog/web/src/store/index.js
index 293dd63ccc..595438e2be 100644
--- a/bklog/web/src/store/index.js
+++ b/bklog/web/src/store/index.js
@@ -628,6 +628,9 @@ const store = new Vuex.Store({
updateIndexFieldInfo(state, payload) {
Object.assign(state.indexFieldInfo, payload ?? {});
},
+ updateIndexFieldInfoField(state, payload) {
+ state.indexFieldInfo.fields.push(...payload)
+ },
updateIndexFieldEggsItems(state, payload) {
const { start_time, end_time } = state.indexItem;
const lastQueryTimerange = `${start_time}_${end_time}`;
@@ -1018,7 +1021,6 @@ const store = new Vuex.Store({
if (!ids.length) {
return;
}
-
commit('resetIndexFieldInfo', { is_loading: true });
const urlStr = isUnionIndex ? 'unionSearch/unionMapping' : 'retrieve/getLogTableHead';
!isUnionIndex && commit('deleteApiError', urlStr);
diff --git a/bklog/web/src/views/manage/manage-access/log-collection/collection-item/manage-collection/field-info.tsx b/bklog/web/src/views/manage/manage-access/log-collection/collection-item/manage-collection/field-info.tsx
index 19f512b62e..033b55d992 100644
--- a/bklog/web/src/views/manage/manage-access/log-collection/collection-item/manage-collection/field-info.tsx
+++ b/bklog/web/src/views/manage/manage-access/log-collection/collection-item/manage-collection/field-info.tsx
@@ -348,7 +348,7 @@ export default class FieldInfo extends tsc {
render() {
const nickNameSlot = {
- default: ({ row }) => {row.field_alias || '--'} ,
+ default: ({ row }) => {row.query_alias || row.field_alias || '--'}
};
const fieldNameSlot = {
diff --git a/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.scss b/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.scss
index ed58dd70fd..47591c05fe 100644
--- a/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.scss
+++ b/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.scss
@@ -61,7 +61,9 @@
transition: transform 0.3s;
}
}
-
+ .filed-item-object {
+ width: 7px;
+ }
.field-type-icon {
display: inline-flex;
align-items: center;
@@ -75,10 +77,12 @@
}
.field-name {
+ font-size: 12px;
width: calc(100% - 42px);
padding-right: 12px;
word-break: break-all;
overflow-wrap: break-word; /* 或者 word-wrap: break-word; */
+ white-space: wrap;
}
.conflict-icon {
@@ -173,6 +177,10 @@
}
}
}
+ .sideslider{
+ left: auto ;
+ }
+
}
.conflict-popover {
diff --git a/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.tsx b/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.tsx
index c4ae788a27..a6ec875fe4 100644
--- a/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.tsx
+++ b/bklog/web/src/views/retrieve-v2/field-filter-comp/field-item.tsx
@@ -37,13 +37,14 @@ export default class FieldItem extends tsc {
@Prop({ type: String, default: 'visible', validator: v => ['visible', 'hidden'].includes(v as string) }) type: string;
@Prop({ type: Object, default: () => ({}) }) fieldItem: any;
@Prop({ type: Object, default: () => ({}) }) fieldAliasMap: object;
- @Prop({ type: String, default: false }) showFieldAlias: String;
+ @Prop({ type: Boolean, default: false }) showFieldAlias: Boolean;
@Prop({ type: Array, default: () => [] }) datePickerValue: Array;
@Prop({ type: Number, default: 0 }) retrieveSearchNumber: number;
@Prop({ type: Object, required: true }) retrieveParams: object;
@Prop({ type: Array, default: () => [] }) visibleFields: Array;
@Prop({ type: Object, default: () => ({}) }) statisticalFieldData: object;
@Prop({ type: Boolean, required: true }) isFrontStatistics: boolean;
+ @Prop({ type: Boolean, default: false }) isFieldObject: boolean;
isExpand = false;
analysisActive = false;
@@ -109,12 +110,7 @@ export default class FieldItem extends tsc {
getFieldIcon(fieldType: string) {
return this.fieldTypeMap[fieldType] ? this.fieldTypeMap[fieldType].icon : 'bklog-icon bklog-unkown';
}
- // 点击字段行,展开显示聚合信息
- handleClickItem() {
- if (this.showFieldsChart) {
- this.isExpand = !this.isExpand;
- }
- }
+
// 显示或隐藏字段
handleShowOrHiddenItem() {
this.instanceDestroy();
@@ -225,17 +221,23 @@ export default class FieldItem extends tsc {
getdistinctCount(val){
this.distinctCount = val
}
+ retuanFieldName(){
+ let name = this.showFieldAlias ? this.fieldItem.field_name || this.fieldItem.field_alias : this.fieldItem.query_alias || this.fieldItem.alias_name || this.fieldItem.field_name
+ if(this.isFieldObject){
+ const objectName = name.split('.')
+ name = objectName[objectName.length - 1] || objectName[0]
+ }
+ return name
+ }
render() {
return (
this.handleClickItem()}
>
{/* 三角符号 */}
-
-
+
{/* 字段类型对应的图标 */}
@@ -255,10 +257,9 @@ export default class FieldItem extends tsc
{
{/* 字段名 */}
-
-
- {/* {this.showFieldAlias ? this.fieldAliasMap[this.fieldItem.field_name] : this.fieldItem.field_name} */}
- {this.fieldAliasMap[this.fieldItem.field_name]}
+
+
+ {this.retuanFieldName()}
{
)}
{/* 设置字段显示或隐藏 */}
-
{
- e.stopPropagation();
- this.handleShowOrHiddenItem();
- }}
- >
-
-
+ {
+ this.fieldItem.field_type !== 'object' && (
+
{
+ e.stopPropagation();
+ this.handleShowOrHiddenItem();
+ }}
+ >
+
+
+ )
+ }
+
{/* 拖动字段位置按钮 */}
- {/* 显示聚合字段图表信息 */}
- {!!this.showFieldsChart && this.isExpand && (
+ {/* 显示聚合字段图表信息
+ {/* {!!this.showFieldsChart && this.isExpand && (
{
retrieve-params={this.retrieveParams}
statistical-field-data={this.statisticalFieldData}
/>
- )}
+ )} */}
{
@Prop({ type: Array, default: () => [] }) visibleFields: Array;
@Prop({ type: Array, default: () => [] }) sortList: Array;
@Prop({ type: Object, default: () => ({}) }) fieldAliasMap: object;
- @Prop({ type: String, default: false }) showFieldAlias: object;
+ @Prop({ type: Boolean, default: false }) showFieldAlias: object;
@Prop({ type: Object, default: () => ({}) }) retrieveParams: object;
@Prop({ type: Array, default: () => [] }) datePickerValue: Array;
@Prop({ type: Object, default: () => ({}) }) indexSetItem: any;
@@ -59,6 +58,7 @@ export default class FieldFilterComp extends tsc {
'ghost-class': 'sortable-ghost-class',
};
dragVisibleFields = [];
+
builtInHeaderList = ['log', 'ip', 'utctime', 'path'];
builtInInitHiddenList = [
'gseIndex',
@@ -69,13 +69,11 @@ export default class FieldFilterComp extends tsc {
'__dist_07',
'__dist_09',
'__ipv6__',
- '__ext',
];
isShowAllBuiltIn = false;
isShowAllIndexSet = false;
isShowErrInfo = false;
-
get errInfo() {
const key = 'retrieve/getLogTableHead';
return this.$store.state.apiErrorInfo[key] || '';
@@ -143,11 +141,52 @@ export default class FieldFilterComp extends tsc {
filterHeaderBuiltFields: [],
},
);
- return [...headerList, ...this.sortHiddenList([filterHeaderBuiltFields])];
+ let arr = [...headerList, ...this.sortHiddenList([filterHeaderBuiltFields])]
+ let result = this.objectHierarchy(arr)
+ return result
+ // return [...headerList, ...this.sortHiddenList([filterHeaderBuiltFields])];
+ }
+ /** object格式字段的层级展示 */
+ objectHierarchy(arrData) {
+ const [objArr, otherArr] = arrData.reduce(([objArr, otherArr], item) => {
+ item.field_name.includes('.') ? objArr.push(item) : otherArr.push(item);
+ return [objArr, otherArr];
+ }, [[], []]);
+ if(!objArr.length){
+ return arrData
+ }
+ let objectField = []
+ objArr.forEach(item => {
+ this.addToNestedStructure(objectField, item);
+ })
+ return [...objectField, ...otherArr.filter(item => {
+ return !objectField.map(field => field.field_name).includes(item.field_name)
+ })]
+ }
+ /** 递归将数组变成tree */
+ addToNestedStructure(targetArray, originalObject) {
+ const parts = originalObject.field_name.split('.');
+ let currentLevel = targetArray;
+ parts.forEach((part, index) => {
+ let existingPart = currentLevel.find(item => item.field_name === part);
+ if (!existingPart) {
+ existingPart = { field_name: part, filterVisible: true, field_type: 'object' };
+ if (index < parts.length - 1) {
+ existingPart.children = [];
+ }
+ currentLevel.push(existingPart);
+ }
+ if (index === parts.length - 1) {
+ Object.assign(existingPart, originalObject);
+ }
+ currentLevel = existingPart.children;
+ });
}
+
/** 内置字段展示对象 */
builtInFieldsShowObj() {
- const { initHiddenList, otherList } = this.builtInFields().reduce(
+ const builtInFieldsValue = this.builtInFields()
+ const { initHiddenList, otherList } = builtInFieldsValue.reduce(
(acc, cur) => {
if (this.builtInInitHiddenList.includes(cur.field_name)) {
acc.initHiddenList.push(cur);
@@ -161,9 +200,10 @@ export default class FieldFilterComp extends tsc {
otherList: [],
},
);
- const visibleBuiltLength = this.builtInFields().filter(item => item.filterVisible).length;
+
+ const visibleBuiltLength = builtInFieldsValue.filter(item => item.filterVisible).length;
const hiddenFieldVisible =
- !!initHiddenList.filter(item => item.filterVisible).length && visibleBuiltLength === this.builtInFields().length;
+ !!initHiddenList.filter(item => item.filterVisible).length && visibleBuiltLength === builtInFieldsValue.length;
return {
// 若没找到初始隐藏的内置字段且内置字段不足10条则不展示展开按钮
isShowBuiltExpandBtn: visibleBuiltLength > 10 || hiddenFieldVisible,
@@ -178,7 +218,9 @@ export default class FieldFilterComp extends tsc {
/** 展示的内置字段 */
get showIndexSetFields() {
if (this.searchKeyword) return this.indexSetFields();
- return this.isShowAllIndexSet ? this.indexSetFields() : this.indexSetFields().slice(0, 9);
+ const result = this.objectHierarchy(this.isShowAllIndexSet ? this.indexSetFields() : this.indexSetFields().slice(0, 9))
+ return result
+ // return this.isShowAllIndexSet ? this.indexSetFields() : this.indexSetFields().slice(0, 9);
}
get filterTypeCount() {
// 过滤的条件数量
@@ -279,7 +321,7 @@ export default class FieldFilterComp extends tsc {
this.$emit('fields-updated', displayFieldNames);
}
/**
- * @desc: 字段命排序
+ * @desc: 字段名排序
* @param {Array} list
* @returns {Array}
*/
@@ -304,7 +346,38 @@ export default class FieldFilterComp extends tsc {
this.isShowErrInfo = false;
this.$store.dispatch('requestIndexSetFieldInfo');
}
-
+ bigTreeRender(field){
+ const scopedSlots = {
+ default: ({ data }) => (
+ this.handleToggleItem(type, fieldItem)}
+ />
+ ),
+ };
+ return(
+
+
+ )
+ }
render() {
return (
@@ -367,6 +440,7 @@ export default class FieldFilterComp extends tsc
{
>
{this.visibleFields.map(item => (
+ // item.children?.length ? this.bigTreeRender(item) :
{
{this.$t('可选字段')}
{this.showIndexSetFields.map(item => (
+ item.children?.length ? this.bigTreeRender(item) :(
{
statistical-field-data={this.statisticalFieldsData[item.field_name]}
type='hidden'
onToggleItem={({ type, fieldItem }) => this.handleToggleItem(type, fieldItem)}
- />
+ />)
))}
{this.getIsShowIndexSetExpand() && (
{
{(this.$t('label-内置字段') as string).replace('label-', '')}
- {this.builtInFieldsShowObj().builtInShowFields.map(item => (
+ {this.builtInFieldsShowObj().builtInShowFields.map(item => (
+ item.children?.length ? this.bigTreeRender(item) : (
{
type='hidden'
onToggleItem={({ type, fieldItem }) => this.handleToggleItem(type, fieldItem)}
/>
- ))}
+ )
+ ))}
{this.builtInFieldsShowObj().isShowBuiltExpandBtn && (
fieldInfo.field_name);
+ const { getFieldNames, getFieldName } = useFieldNameHook({ store: this.$store });
+ this.displayFieldNames = res.data.display_fields.map(item => getFieldName(item))
+ this.totalFieldNames = getFieldNames(res.data.fields);
this.displayFields = res.data.display_fields.map(fieldName => {
return res.data.fields.find(fieldInfo => fieldInfo.field_name === fieldName);
});
@@ -373,8 +374,9 @@
list.forEach(listItem => {
const displayObj = {};
const { newObject } = getFlatObjValues(listItem);
+ const { changeFieldName } = useFieldNameHook({ store: this.$store });
displayFieldNames.forEach(field => {
- Object.assign(displayObj, { [field]: newObject[field] });
+ Object.assign(displayObj, { [field]: newObject[changeFieldName(field)] });
});
filterDisplayList.push(displayObj);
});
@@ -383,7 +385,9 @@
// 确定设置显示字段
async confirmConfig(list) {
this.isConfigLoading = true;
- const data = { display_fields: list };
+ const { changeFieldName } = useFieldNameHook({ store: this.$store });
+ const copyList = list.map(item => changeFieldName(item))
+ const data = { display_fields: copyList };
try {
const configRes = await this.$http.request('retrieve/getFieldsConfigByContextLog', {
params: {
diff --git a/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue b/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue
index 71342035a4..26cca619c1 100644
--- a/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue
+++ b/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue
@@ -138,7 +138,7 @@
v-for="option in totalFields"
:id="option.field_name"
:key="option.field_name"
- :name="option.field_name"
+ :name="getFieldName(option)"
>
@@ -187,7 +187,7 @@
diff --git a/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue b/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue
index 28a3713086..95113bf0e9 100644
--- a/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue
+++ b/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue
@@ -244,21 +244,21 @@
{{ $t('取消') }}
-
+
diff --git a/bklog/web/src/views/retrieve-v2/search-bar/sql-query-options.vue b/bklog/web/src/views/retrieve-v2/search-bar/sql-query-options.vue
index 92736e4732..28c1c27862 100644
--- a/bklog/web/src/views/retrieve-v2/search-bar/sql-query-options.vue
+++ b/bklog/web/src/views/retrieve-v2/search-bar/sql-query-options.vue
@@ -1,6 +1,6 @@
@@ -86,6 +92,24 @@
@click="handleCloseFilterTitle(true)"
>
{{ $t('字段统计') }}
+
+
+
+
+ {{ $t('展示字段名') }}
+
+
+ {{ $t('展示别名') }}
+
+
+
+
+
{
return true;
return false;
}
-
+ get showFieldAlias() {
+ return this.$store.state.showFieldAlias;
+ }
+ // 优先展示选中字段名
get filterSelectList() {
+ const { getConcatenatedFieldName } = useFieldNameHook({ store: this.$store });
return this.totalFields
.filter(item => !/^__dist/.test(item.field_name) && item.field_type !== '__virtual__')
.map(el => {
- const { field_name: id, field_alias: alias } = el;
- return { id, name: alias ? `${id}(${alias})` : id };
+ return getConcatenatedFieldName(el)
});
}
diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/log-clustering/index.vue b/bklog/web/src/views/retrieve-v2/search-result-panel/log-clustering/index.vue
index 9f7a8e3944..641e0a4964 100644
--- a/bklog/web/src/views/retrieve-v2/search-result-panel/log-clustering/index.vue
+++ b/bklog/web/src/views/retrieve-v2/search-result-panel/log-clustering/index.vue
@@ -183,6 +183,7 @@
import Strategy from './components/strategy';
import { deepClone } from '../../../../common/util';
import { RetrieveUrlResolver } from '@/store/url-resolver';
+ import useFieldNameHook from '@/hooks/use-field-name';
export default {
components: {
DataFingerprint,
@@ -281,6 +282,9 @@
bkBizId() {
return this.$store.state.bkBizId;
},
+ showFieldAlias() {
+ return this.$store.state.showFieldAlias
+ },
isHaveAnalyzed() {
return this.totalFields.some(item => item.is_analyzed);
},
@@ -370,6 +374,9 @@
isShowClusterStep(v) {
this.$store.commit('updateStoreIsShowClusterStep', v);
},
+ showFieldAlias(){
+ this.filterGroupList()
+ }
},
methods: {
setRouteParams() {
@@ -587,11 +594,11 @@
* @desc: 初始化分组select数组
*/
filterGroupList() {
+ const { getConcatenatedFieldName } = useFieldNameHook({ store: this.$store });
const filterList = this.totalFields
.filter(el => el.es_doc_values && !/^__dist_/.test(el.field_name)) // 过滤__dist字段
.map(item => {
- const { field_name: id, field_alias: alias } = item;
- return { id, name: alias ? `${id}(${alias})` : id };
+ return getConcatenatedFieldName(item)
});
this.fingerOperateData.groupList = filterList;
},
diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/log-result/use-render-header.ts b/bklog/web/src/views/retrieve-v2/search-result-panel/log-result/use-render-header.ts
index ab1b62faa5..a34b144b10 100644
--- a/bklog/web/src/views/retrieve-v2/search-result-panel/log-result/use-render-header.ts
+++ b/bklog/web/src/views/retrieve-v2/search-result-panel/log-result/use-render-header.ts
@@ -27,7 +27,7 @@ import { h, computed } from 'vue';
import useLocale from '@/hooks/use-locale';
import useStore from '@/hooks/use-store';
-
+import useFieldNameHook from '@/hooks/use-field-name';
import TimeFormatterSwitcher from '../original-log/time-formatter-switcher';
export default () => {
@@ -55,7 +55,8 @@ export default () => {
const isAsc = currentSort === 'asc';
const isShowSwitcher = ['date', 'date_nanos'].includes(field?.field_type);
if (field) {
- const fieldName = showFieldAlias.value ? fieldAliasMap.value[field.field_name] : field.field_name;
+ const { getQueryAlias } = useFieldNameHook({ store });
+ const fieldName = getQueryAlias(field);
const fieldType = field.field_type;
const isUnionSource = field?.tag === 'union-source';
const fieldIcon = fieldTypeMap.value?.[fieldType]?.icon ?? 'bklog-icon bklog-unkown';