Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: 修复日志清洗功能体验问题 #3525

Merged
merged 1 commit into from
Oct 24, 2024
Merged

fix: 修复日志清洗功能体验问题 #3525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions bklog/web/src/components/collection-access/field-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@
</bk-table-column>
<!-- 操作 -->
<bk-table-column
v-if="getOperatorDisabled"
v-if="getOperatorDisabled && !isPreviewMode"
width="60"
:label="$t('操作')"
:render-header="$renderHeader"
Expand Down Expand Up @@ -448,11 +448,14 @@
</div>

<div class="preview-panel-right">
<div class="preview-title preview-item">{{ $t('预览（值）') }}</div>
<div class="preview-title preview-item">
{{ $t('预览（值）') }}
</div>
<template v-if="deletedVisible">
<div
v-for="(row, index) in hideDeletedTable"
class="preview-item"
:style="!isPreviewMode ? { height: '51px', 'line-height': '51px' } : ''"
:key="index"
:title="row.value"
>
Expand All @@ -463,6 +466,7 @@
<div
v-for="(row, index) in tableList"
class="preview-item"
:style="!isPreviewMode ? { height: '51px', 'line-height': '51px' } : ''"
:key="index"
:title="row.value"
>
Expand Down Expand Up @@ -789,7 +793,6 @@
this.$set(row, 'is_case_sensitive', this.currentIsCaseSensitive);
this.$set(row, 'tokenize_on_chars', this.currentTokenizeOnChars);
this.$set(row, 'participleState', this.currentParticipleState);
this.$set(row, 'isEdited', true);
},
handelChangeAnalyzed() {
if (!this.currentIsAnalyzed) {
Expand Down Expand Up @@ -1220,7 +1223,7 @@
border-radius: 0 2px 2px 0;

.preview-item {
height: 51px;
height: 43px;
padding: 0 10px;
overflow: hidden;
line-height: 43px;
Expand Down
109 changes: 88 additions & 21 deletions bklog/web/src/components/collection-access/step-field.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@
:property="'log_original'"
:rules="rules.log_original"
:label="$t('日志样例')"
v-bkloading="{ isLoading: logOriginalLoding }"
>
<div
class="view-log-btn"
Expand Down Expand Up @@ -367,7 +368,6 @@
</div>
</bk-form-item>
</div>

<div data-test-id="acquisitionConfig_div_advanceMessageBox">
<div class="step-field-title">{{ $t('高级设置') }}</div>
<bk-form-item
Expand Down Expand Up @@ -483,6 +483,7 @@
{{ timeCheckContent }}
</p>
<bk-form-item
v-if="formData.etl_params.retain_original_text"
ext-cls="en-bk-form"
:icon-offset="120"
:label="$t('保留失败日志')"
Expand Down Expand Up @@ -522,20 +523,26 @@
v-if="enableMetaData"
ext-cls="en-bk-form"
:label="$t('路径样例')"
v-bkloading="{ isLoading: pathExampleLoading }"
>
<div class="origin-log-config">
<bk-input
style="width: 520px"
v-model="pathExample"
>
</bk-input>
<i
class="path-refresh-icon bk-icon bk-icon icon-refresh"
@click="pathRefreshClick"
></i>
</div>
</bk-form-item>
<bk-form-item
v-if="enableMetaData"
ext-cls="en-bk-form"
:label="$t('采集路径分割正则')"
property="etl_params.path_regexp"
required
:rules="rules.path_regexp"
>
<div class="origin-log-config">
Expand All @@ -558,11 +565,11 @@
<div
class="origin-log-config"
style="margin-top: 10px"
v-if="regexpResult.length"
v-if="formData.etl_params.metadata_fields && formData.etl_params.metadata_fields.length"
>
<div
style="margin-bottom: 10px"
v-for="item in regexpResult"
v-for="item in formData.etl_params.metadata_fields"
:key="item.field_index"
>
<bk-input
Expand Down Expand Up @@ -858,13 +865,15 @@
style="margin-top: 8px"
:right-icon="'bk-icon icon-search'"
v-model="templateKeyWord"
@right-icon-click="handlerSearchTemplate"
clearable
></bk-input>
<div class="template-list-wrap">
<div
v-for="option in filteredTemplateList"
v-for="option in currentTemplateList"
:key="option.clean_template_id"
:class="{ 'template-item': true, active: option.clean_template_id === selectTemplate }"
@click="handleSelectTemplate(option.clean_template_id)"
@click="handleSelectTemplate(option.clean_template_id, option.name)"
:title="option.name"
>
{{ option.name }}
Expand Down Expand Up @@ -912,10 +921,11 @@
return {
// isItsm: window.FEATURE_TOGGLE.collect_itsm === 'on',
refresh: false,

defaultRegex: '(?P<request_ip>[\d\.]+)[^[]+\[(?P<request_time>[^]]+)\]',
isLoading: false,
basicLoading: false,
logOriginalLoding: false,
pathExampleLoading: false,
isUnmodifiable: false,
fieldType: '',
deletedVisible: true,
Expand Down Expand Up @@ -946,6 +956,7 @@
retain_extra_json: false,
enable_retain_content: true, // 保留失败日志
path_regexp: '', // 采集路径分割的正则
metadata_fields: [],
},
fields: [],
visible_type: 'current_biz', // 可见范围单选项
Expand All @@ -956,7 +967,6 @@
time_format: '',
time_zone: '',
},
regexpResult: [],
copyBuiltField: [],
formatResult: true, // 验证结果是否通过
rules: {
Expand Down Expand Up @@ -996,6 +1006,12 @@
trigger: 'blur',
},
],
path_regexp: [
{
required: true,
trigger: 'blur',
},
],
},
isExtracting: false,
dialogVisible: false,
Expand Down Expand Up @@ -1026,6 +1042,7 @@
selectTemplate: '', // 应用模板
saveTempName: '',
templateList: [], // 模板列表
currentTemplateList: [],
templateDialogVisible: false,
isSaveTempDialog: false,
cleanCollector: '', // 日志清洗选择的采集项
Expand Down Expand Up @@ -1176,10 +1193,6 @@
renderFieldNameList() {
return this.fieldNameList.filter(item => item.field_name);
},
filteredTemplateList() {
const query = this.templateKeyWord.toLowerCase();
return this.templateList.filter(item => item.name.toLowerCase().includes(query));
},
},
watch: {
'formData.fields'() {
Expand All @@ -1194,6 +1207,22 @@
this.visibleBkBiz = val !== 'multi_biz' ? [] : JSON.parse(JSON.stringify(this.cacheVisibleList));
},
},
'formData.etl_params.retain_original_text': {
// 当不保留原始日志时，保留失败日志置为false
handler(val) {
if (!val) {
this.formData.etl_params.enable_retain_content = false;
}
},
},
templateKeyWord: {
handler(val) {
// 当搜索关键字为空时，显示所有模板
if (!val) {
this.currentTemplateList = this.templateList;
}
},
},
},
created() {
if (this.unAuthBkdata) {
Expand Down Expand Up @@ -1264,8 +1293,13 @@
this.getDataLog('init');
},
methods: {
handleSelectTemplate(templateId) {
handlerSearchTemplate() {
const query = this.templateKeyWord.toLowerCase();
this.currentTemplateList = this.templateList.filter(item => item.name.toLowerCase().includes(query));
},
handleSelectTemplate(templateId, name) {
this.selectTemplate = templateId;
this.templateKeyWord = name;
},
handleTableData(data) {
this.fieldNameList = data;
Expand Down Expand Up @@ -1375,6 +1409,7 @@
separator: '',
retain_extra_json: false,
enable_retain_content: true,
metadata_fields: [],
},
etlParams ? JSON.parse(JSON.stringify(etlParams)) : {},
),
Expand Down Expand Up @@ -1430,11 +1465,12 @@
const urlParams = {};
urlParams.collector_config_id = this.curCollect.collector_config_id;
const updateData = { params: urlParams, data };

// 先置空防止接口失败显示旧数据
this.regexpResult.splice(0, this.regexpResult.length);
this.formData.etl_params.metadata_fields &&
this.formData.etl_params.metadata_fields.splice(0, this.formData.etl_params.metadata_fields.length);
this.$http.request('collect/getEtlPreview', updateData).then(res => {
this.regexpResult = res.data ? res.data.fields : [];
this.formData.etl_params.metadata_fields = res.data ? res.data.fields : [];
this.$set(this.formData.etl_params.metadata_fields, res.data ? res.data.fields : []);
});
},
debugHandler() {
Expand Down Expand Up @@ -1832,6 +1868,7 @@
original_text_tokenize_on_chars: '',
enable_retain_content: true,
path_regexp: '',
metadata_fields: [],
},
etlParams ? JSON.parse(JSON.stringify(etlParams)) : {},
),
Expand All @@ -1850,7 +1887,13 @@
// 原始日志刷新
refreshClick() {
if (this.refresh) {
this.getDataLog('init');
this.getDataLog('logOriginRefresh');
}
},
// 路径样例刷新
pathRefreshClick() {
if (this.refresh) {
this.getDataLog('pathRefresh');
}
},
viewStandard() {
Expand Down Expand Up @@ -2052,9 +2095,15 @@
Object.assign(this.formData.etl_params, this.params.etl_params);
},
// 获取采样状态
getDataLog(isInit) {
getDataLog(type) {
this.refresh = false;
this.basicLoading = true;
if (type === 'init') {
this.basicLoading = true;
} else if (type === 'logOriginRefresh') {
this.logOriginalLoding = true;
} else if (type === 'pathRefresh') {
this.pathExampleLoading = true;
}
this.$http
.request('source/dataList', {
params: {
Expand Down Expand Up @@ -2085,7 +2134,13 @@
})
.catch(() => {})
.finally(() => {
this.basicLoading = false;
if (type === 'init') {
this.basicLoading = false;
} else if (type === 'logOriginRefresh') {
this.logOriginalLoding = false;
} else if (type === 'pathRefresh') {
this.pathExampleLoading = false;
}
this.refresh = true;
});
},
Expand Down Expand Up @@ -2139,7 +2194,6 @@

// 新增清洗未选择采集项
if ((this.isCleanField && !this.cleanCollector) || this.isSetDisabled) return;

// 选择应用模板
this.isSaveTempDialog = isSave;
this.templateDialogVisible = true;
Expand All @@ -2152,6 +2206,7 @@
.then(res => {
if (res.data) {
this.templateList = res.data;
this.currentTemplateList = res.data;
}
});
},
Expand Down Expand Up @@ -2340,6 +2395,11 @@
return otherValue;
});
}
etlParams.metadata_fields =
etlParams?.metadata_fields?.map(item => {
item.metadata_type = 'path';
return item;
}) ?? [];
const payload = {
retain_original_text: etlParams.retain_original_text,
original_text_is_case_sensitive: etlParams.original_text_is_case_sensitive ?? false,
Expand All @@ -2348,11 +2408,12 @@
path_regexp: this.enableMetaData ? etlParams.path_regexp : null,
enable_retain_content: etlParams.enable_retain_content,
record_parse_failure: etlParams.enable_retain_content,
metadata_fields: etlParams.metadata_fields,
};
const data = {
clean_type: etlConfig,
etl_params: {
separator_regexp: etlParams.separator_regexp,
separator_regexp: etlParams.separator === 'bk_log_regexp' ? etlParams.separator_regexp : '',
separator: etlParams.separator,
...payload,
},
Expand Down Expand Up @@ -2516,6 +2577,12 @@
}
}

.path-refresh-icon {
margin-left: 12px;
font-size: 17px;
cursor: pointer;
}

.step-field-title {
width: 100%;
padding-top: 36px;
Expand Down
Loading
Loading