diff --git a/src/dashboard-front/src/components/ag-icon.vue b/src/dashboard-front/src/components/ag-icon.vue
new file mode 100644
index 000000000..2aa680e09
--- /dev/null
+++ b/src/dashboard-front/src/components/ag-icon.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index 0af70afef..f368f1ffd 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -1515,6 +1515,7 @@ const lang: ILANG = {
'关键字搜索': ['Keyword search'],
'引用条件': ['Reference condition'],
'如何使用': ['How to use'],
+ '检索出的日志条数为 0，不需要下载': ['The number of retrieved logs is 0, do not need to download'],
'新建后端服务': ['Create backend service'],
'于': ['at'],
'超时时间不能为空': ['Timeout cannot be empty'],
diff --git a/src/dashboard-front/src/views/operate-data/access-log/index.vue b/src/dashboard-front/src/views/operate-data/access-log/index.vue
index 96b0f102f..fd901d766 100644
--- a/src/dashboard-front/src/views/operate-data/access-log/index.vue
+++ b/src/dashboard-front/src/views/operate-data/access-log/index.vue
@@ -58,7 +58,7 @@
{{ t('检索项：') }}
- {{ item }}
+
+
{{ t('清除') }}
@@ -113,12 +114,14 @@
{{ t('日志详情') }}
{{ t('共') }}
- {{ table?.list?.length }}
+ {{ pageCount }}
{{ t('条') }}
-
-
-
+
+
{{ t('下载日志') }}
-
+
{{ t('状态码为 200 时不记录响应正文') }}
{{ formatValue(row[field], field) }}
-
+
-
-
+
+
+
+
@@ -249,6 +254,7 @@ import {
} from 'bkui-vue/lib/icon';
import { Message } from 'bkui-vue';
import { useStorage } from '@vueuse/core';
+import AgIcon from '@/components/ag-icon.vue';
const { t } = i18n.global;
const { getChartIntervalOption } = userChartIntervalOption();
@@ -310,6 +316,10 @@ const searchConditions = computed(() => {
return res;
});
+const pageCount = computed(() => {
+ return pagination.value.count;
+});
+
// const searchUsage = ref({
// showed: false,
// });
@@ -434,6 +444,10 @@ const renderChart = (data: Record) => {
feature: {
dataZoom: {
show: true,
+ yAxisIndex: 'none',
+ iconStyle: {
+ opacity: 0,
+ },
},
},
},
@@ -441,6 +455,11 @@ const renderChart = (data: Record) => {
const timeDuration = timeline[timeline.length - 1] - timeline[0];
const intervalOption = getChartIntervalOption(timeDuration, 'time', 'xAxis');
chartInstance.value.setOption(merge(options, intervalOption));
+ chartInstance.value?.dispatchAction({
+ type: 'takeGlobalCursor',
+ key: 'dataZoomSelect',
+ dataZoomSelectActive: true,
+ });
chartResize();
};
@@ -644,6 +663,16 @@ const handleTagClose = (item: string) => {
getSearchData();
};
+const handleEqual = (item: string) => {
+ if (!item) {
+ return;
+ }
+ if (item.indexOf('!=') !== -1) {
+ return item.replace('!=', '!=');
+ }
+ return item.replace('=', '=');
+};
+
const handleClearSearch = () => {
includeObj.value = [];
excludeObj.value = [];
@@ -651,6 +680,9 @@ const handleClearSearch = () => {
};
const handleDownload = async (e: Event) => {
+ if (pagination.value.count === 0) {
+ return;
+ }
e.stopPropagation();
try {
const { params, path } = getPayload();
@@ -794,6 +826,31 @@ const initData = async () => {
const initChart = async () => {
chartInstance.value = markRaw(echarts.init(chartContainer.value));
window.addEventListener('resize', chartResize);
+
+ chartInstance.value.on('datazoom', (event: {batch: {startValue: number, endValue: number}[]}) => {
+ const { startValue, endValue } = event.batch[0];
+
+ // 获取x轴缩放后的数据范围
+ const zoomedXAxisData = chartInstance.value.getOption().xAxis[0].data.slice(startValue, endValue + 1);
+ const startTime = zoomedXAxisData[0];
+ const endTime = zoomedXAxisData[zoomedXAxisData.length - 1];
+
+ if (startTime === endTime) {
+ dateTimeRange.value = [];
+ shortcutSelectedIndex.value = 1;
+ [datePickerRef.value.shortcut] = [AccessLogStore.datepickerShortcuts[1]];
+
+ chartInstance.value.dispatchAction({
+ type: 'restore',
+ });
+ } else {
+ shortcutSelectedIndex.value = -1;
+ dateTimeRange.value = [new Date(startTime), new Date(endTime)];
+ }
+
+ dateKey.value = String(+new Date());
+ handlePickerChange();
+ });
};
onMounted(() => {
@@ -842,6 +899,10 @@ onBeforeUnmount(() => {
font-size: 16px;
margin-right: -4px;
}
+ &.disabled-logs {
+ color: #c4c6cc;
+ cursor: not-allowed;
+ }
}
.panel-title-icon {
transition: .2s;
@@ -1003,12 +1064,15 @@ onBeforeUnmount(() => {
}
.opt-btns {
- color: #1768EF;
- font-size: 18px;
+ color: #979BA5;
+ font-size: 16px;
padding-top: 3px;
margin-left: 10px;
+ &:hover {
+ color: #1768EF;
+ }
.opt-copy {
- font-size: 16px;
+ font-size: 14px;
}
span {
cursor: pointer;
@@ -1138,4 +1202,16 @@ onBeforeUnmount(() => {
.access-log-popover {
top: 10px !important;
}
+.include-equal,
+.exclude-equal {
+ font-weight: bold;
+ font-size: 16px;
+ vertical-align: bottom;
+}
+.exclude-equal {
+ color: #EA3636;
+}
+.include-equal {
+ color: #2DCB56;
+}