fix：解决冲突

2023-11-30 16:33:07 +08:00
parent 5331ef048c 5a34b6d505
commit a9a92da25e
4 changed files with 153 additions and 32 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
@@ -35,7 +35,18 @@
      </pick-time>
    </template>
    <template v-slot>
-      <log-tab ref="logDetail" v-my-loading="loading" :loading-bottom="endpointLoading" :time-range="filterTime" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+      <log-tab
+        ref="logDetail"
+        v-my-loading="loading"
+        :loading-bottom="endpointLoading"
+        :time-range="filterTime"
+        :log-data="logData"
+        :tab-index="9"
+        @exportLog="exportLog"
+        @limitChange="queryLogData"
+        :supplementaryData="supplementaryData"
+        >
+      </log-tab>
 <!--      <div v-my-loading="loading" v-if="!logData" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>-->
    </template>
  </nz-bottom-data-list>
@@ -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
--- 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"
+                  >
                </log-tab>
              </el-collapse-item>
            </template>
@@ -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()
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
@@ -156,7 +156,18 @@
            </div>
          </el-collapse-item>
          <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
-            <log-tab :unit="chartUnitType" ref="logDetail" :timeRange="filterTime" :log-data="logData" :explore-log-table="logTabNoData" :explore-item="true" :tab-index="0" v-my-loading="chartLoading"></log-tab>
+            <log-tab
+              :unit="chartUnitType"
+              ref="logDetail"
+              :timeRange="filterTime"
+              :log-data="logData"
+              :explore-log-table="logTabNoData"
+              :explore-item="true"
+              :tab-index="0"
+              v-my-loading="chartLoading"
+              :supplementaryData="supplementaryData"
+              >
+            </log-tab>
          </el-collapse-item>
        </template>
      </el-collapse>
@@ -216,7 +227,8 @@ export default {
      tableMode: 'table',
      expandResults: false,
      allMatrix: false, // metric是否全部为matrix类型
-      rowData: []
+      rowData: [],
+      supplementaryData: []
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="log-detail">
    <!-- <div :id="`logChart${tabIndex}`" class="log-chart" v-if="showSwitch"></div> -->
-    <chart ref="logChart" :unit="unit" :timeRange="timeRange"></chart>
+    <chart ref="logChart" class="log-chart" :unit="unit" :timeRange="timeRange"></chart>
    <div class="log-chart chart-no-data" v-if="showSwitch&&noData" style="top: 150px">No data</div>
    <div class="log-operations" v-if="showSwitch">
      <div class="log-operation">
@@ -141,8 +141,8 @@ export default {
    exploreLogTable: Boolean,
    exploreItem: Boolean,
    timeRange: {},
-    logChartData: Array,
-    unit: { type: Number, default: 5 }
+    unit: { type: Number, default: 5 },
+    supplementaryData: Array
  },
  computed: {
    tableTimeFormat () {
@@ -616,6 +616,77 @@ export default {
    }
  },
  watch: {
+    supplementaryData: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.$nextTick(() => {
+          this.$refs.logChart.startLoading()
+          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
+          }
+          n.forEach((data) => {
+            console.log(data)
+            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.$refs.logChart.setLegend(legend)
+          this.$refs.logChart.setLogColor(series.length)
+          if (!series.length) {
+            series = ''
+          }
+          this.$refs.logChart.setSeries(series)
+          this.$refs.logChart.endLoading()
+        })
+      }
+    },
    logData: {
      deep: true,
      immediate: false,