From 9fb823bebcfb687965f509b804a8a461474d410b Mon Sep 17 00:00:00 2001 From: zyh Date: Thu, 30 Nov 2023 16:20:30 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Alogtab=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/bottomBox/tabs/logBottomTab.vue | 49 +++++++++++- .../page/dashboard/explore/exploreItem.vue | 76 +++--------------- .../dashboard/explore/exploreItemHtml.vue | 16 +++- .../page/dashboard/explore/logTab.vue | 77 ++++++++++++++++++- 4 files changed, 144 insertions(+), 74 deletions(-) diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue index 68cb0e8ba..6210d2f27 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue @@ -35,7 +35,18 @@ @@ -49,10 +60,10 @@ import axios from 'axios' import bus from '@/libs/bus' import { fromRoute } from '@/components/common/js/constants' import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin' - +import promqlInputMixin from '@/components/common/mixin/promqlInput' export default { name: 'logBottomTab', - mixins: [subDataListMixin, detailViewRightMixin], + mixins: [subDataListMixin, detailViewRightMixin, promqlInputMixin], components: { nzBottomDataList, logTab @@ -74,7 +85,8 @@ export default { loading: true, endpointLoading: false, limit: 100, - nowTimeType: {} + nowTimeType: {}, + supplementaryData: [] } }, computed: { @@ -169,7 +181,36 @@ export default { } this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime }, + supplementaryLog () { + const requestArr = [] + const start = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + const end = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + // 当不是 指标查询表达式时，除直接查询 用户输入表达式外，另查询 sum by (level) (count_over_time($_expression[$_step])) + this.expressions.forEach((item, index) => { + const isMetric = this.validateMetric(item) + if (!isMetric) { + const step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1])) + const supplementaryExpr = `sum by (level) (count_over_time(${item}[${step}]))` + requestArr.push(this.$get('/logs/loki/api/v1/query_range?query=' + encodeURIComponent(supplementaryExpr) + '&start=' + start + '&end=' + end)) + } + }) + this.supplementaryData = [] + axios.all(requestArr).then(res => { + res = res.filter((r, i) => r.code === 200) + if (res.length > 0) { + const logData = res.map(r => r.data) + logData.forEach((response) => { + const data = response.result + if (!data || data.length < 1) { + return + } + this.supplementaryData.push(data) + }) + } + }) + }, queryLogData (limit) { // log的chart和table是一个请求 + this.supplementaryLog() this.loading = true if (limit) { this.limit = limit diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue index 74e7b5c49..3f017b683 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue @@ -269,7 +269,9 @@ :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData" - v-my-loading="chartLoading"> + v-my-loading="chartLoading" + :supplementaryData="supplementaryData" + > @@ -3634,7 +3636,8 @@ export default { ], tableHover: false, showTopBtn: false, // top按钮 - scrollbarWrap: null + scrollbarWrap: null, + supplementaryData: [] } }, async created () { @@ -3768,8 +3771,7 @@ export default { reader.readAsText(error.response.data) }) }, - queryLogChart () { - this.$refs.logDetail.$refs.logChart.startLoading() + supplementaryLog () { const requestArr = [] const start = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) const end = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) @@ -3784,78 +3786,23 @@ export default { } } }) + this.supplementaryData = [] axios.all(requestArr).then(res => { res = res.filter((r, i) => r.code === 200) if (res.length > 0) { - let series = [] - let legend = [] - const seriesItem = { - type: 'line', - name: '', - symbol: 'emptyCircle', // 去掉点 - symbolSize: 8, - showSymbol: false, - smooth: 0.2, // 曲线变平滑 - data: [], - lineStyle: { - width: 2, - opacity: 0.9 - }, - emphasis: { - focus: 'none' - }, - blur: { - lineStyle: { - opacity: 0.3 - }, - itemStyle: { - opacity: 1 - } - } - } - function mergeAndSort (arr) { - const mergedMap = new Map() - // 合并数组，根据时间戳累加值 - arr.forEach(([timestamp, value]) => { - if (mergedMap.has(timestamp)) { - mergedMap.set(timestamp, mergedMap.get(timestamp) + Number(value)) - } else { - mergedMap.set(timestamp, Number(value)) - } - }) - // 将Map转换为二维数组，并根据时间戳排序 - const mergedArray = Array.from(mergedMap.entries()).sort((a, b) => a[0] - b[0]) - return mergedArray - } const logData = res.map(r => r.data) logData.forEach((response) => { const data = response.result - data.forEach((result, i) => { - seriesItem.name = 'logs' - const values = result.values.map((item) => { - return [item[0] * 1000, item[1]] - }) - seriesItem.data.push(...values) - }) - }) - seriesItem.data = mergeAndSort(seriesItem.data) - if (seriesItem.data.length) { - series = [seriesItem] - legend = [{ name: seriesItem.name, alias: seriesItem.name, isGray: false }] - } - this.$nextTick(() => { - this.$refs.logDetail.$refs.logChart.setLegend(legend) - this.$refs.logDetail.$refs.logChart.setLogColor(series.length) - if (!series.length) { - series = '' + if (!data || data.length < 1) { + return } - this.$refs.logDetail.$refs.logChart.setSeries(series) - this.$refs.logDetail.$refs.logChart.endLoading() + this.supplementaryData.push(data) }) } }) }, queryLogData (limit) { + this.supplementaryLog() this.chartLoading = true if (!limit) { limit = this.$refs.logDetail ? this.$refs.logDetail.getLimit() : 100 @@ -4263,7 +4210,6 @@ export default { this.storeHistory() } else { this.queryLogData() - this.queryLogChart() } } this.updatePath() diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue index 37c61a8d4..2369476bc 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue @@ -163,7 +163,18 @@ - + + @@ -221,7 +232,8 @@ export default { logTabNoData: [], storedTableData: [], tableMode: 'table', - expandResults: false + expandResults: false, + supplementaryData: [] } }, mounted () { diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue index 924423e1a..95fdcae0b 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue @@ -1,7 +1,7 @@