diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue index 14b71d53c..b5d970700 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: { @@ -161,7 +173,36 @@ export default { this.setSearchTime('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 9adc41eb6..ae0f1ba92 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue @@ -390,7 +390,9 @@ :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData" - v-my-loading="chartLoading"> + v-my-loading="chartLoading" + :supplementaryData="supplementaryData" + > @@ -3773,7 +3775,8 @@ export default { uplotChartInfo: lineData, uplotChartInfoLog: logData, uplotChartData: [], - showAllData: false + showAllData: false, + supplementaryData: [] } }, async created () { @@ -3917,9 +3920,13 @@ export default { reader.readAsText(error.response.data) }) }, +<<<<<<< HEAD queryLogChart () { const promqlInputIndexs = [] this.$refs.logDetail.$refs.logChart.startLoading() +======= + supplementaryLog () { +>>>>>>> 5a34b6d505ed3b0339b7f98aedafde68dfaf3da2 const requestArr = [] const start = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) const end = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) @@ -3938,6 +3945,7 @@ export default { } } }) +<<<<<<< HEAD axios.all(requestArr).then((res, index) => { res = res.filter((r, i) => r.code === 200) if (res.length > 0) { @@ -3983,35 +3991,25 @@ export default { const mergedArray = Array.from(mergedMap.entries()).sort((a, b) => a[0] - b[0]) return mergedArray } +======= + this.supplementaryData = [] + axios.all(requestArr).then(res => { + res = res.filter((r, i) => r.code === 200) + if (res.length > 0) { +>>>>>>> 5a34b6d505ed3b0339b7f98aedafde68dfaf3da2 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 @@ -4479,7 +4477,6 @@ export default { console.log(res) }) 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 aae8fb30d..eb2a0b812 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue @@ -156,7 +156,18 @@ - + + @@ -216,7 +227,8 @@ export default { tableMode: 'table', expandResults: false, allMatrix: false, // metric是否全部为matrix类型 - rowData: [] + rowData: [], + 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 8df71c4d6..4fd3b6a40 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 @@