Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-2.0

2021-08-04 17:24:46 +08:00
parent 6dd7c9c279 f72c8e88c7
commit 8e97e90467
3 changed files with 103 additions and 41 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -876,15 +876,6 @@ li{
 .el-table .el-table__body tr:hover>td {
  background-color: #f0f0f0 !important;
 }
-/*.nz-table-gear {
-  box-sizing: border-box;
-  position: relative;
-}
-.nz-table-gear>i {
-  cursor: pointer;
-  position: absolute;
-  left: -3px;
-}*/
 .alert-message-tag, .alert-rule-tag {
  margin: 3px;
 }
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -82,15 +82,14 @@
                </div>
              </el-collapse-item>
              <el-collapse-item name="2" title="Table">
-                <div class="table-room">
-                  <!-- 自定义table列 -->
+                <!-- 自定义table列 -->
+                <div class="nz-table2 explore-table">
                  <transition name="el-zoom-in-top">
                    <element-set
                      v-if="tools.showCustomTableTitle"
                      ref="customTableTitle"
                      :custom-table-title.sync="tools.customTableTitle"
                      :original-table-title="tableTitle"
-                      class="pop-custom-explore"
                      @close="tools.showCustomTableTitle = false"
                    ></element-set>
                  </transition>
@@ -98,7 +97,7 @@
                            v-loading="tools.loading"
                            :data="tableData"
                            border
-                            class="nz-table explore-table"
+                            :header-cell-class-name="({ column }) => column.property === 'gear' ? 'explore-table-gear' : ''"
                            tooltip-effect="light">
                    <el-table-column
                      v-for="(item, index) in tools.customTableTitle"
@@ -110,28 +109,28 @@
                      min-width="110px"
                      show-overflow-tooltip
                    ></el-table-column>
-                    <el-table-column v-if="tools.customTableTitle.length>0" width="28">
+                    <el-table-column v-if="tools.customTableTitle.length>0" prop="gear" width="28">
                      <template slot="header" :resizable="false">
-                <span class="nz-table-gear" @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
-                  <i class="nz-icon nz-icon-gear"></i>
-                </span>
+                        <span class="nz-table-gear" @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
+                          <i class="nz-icon nz-icon-gear"></i>
+                        </span>
                      </template>
                    </el-table-column>
                  </el-table>
-                  <pagination ref="Pagination" :append-to-body="false" :page-obj="pageObj" @pageNo='pageNo'
-                              @pageSize='pageSize'></pagination>
                </div>
+                <pagination ref="Pagination" :append-to-body="false" :page-obj="pageObj" @pageNo='pageNo'
+                            @pageSize='pageSize'></pagination>
              </el-collapse-item>
            </template>
            <!--log-->
            <template v-else>
-              <el-collapse-item v-if="collapseValue.indexOf('1') > -1" name="1" title="Graph">
+              <el-collapse-item v-if="showTab.indexOf('1') > -1" name="1" title="Graph">
                <div class="chart-room">
                  <chart ref="logChart" :unit="chartUnit"></chart>
                </div>
              </el-collapse-item>
-              <el-collapse-item v-if="collapseValue.indexOf('2') > -1" name="2" title="Logs">
-                <log-tab ref="logDetail" :log-data="logData" :unit="chartUnit" @exportLog="exportLog"></log-tab>
+              <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
+                <log-tab ref="logDetail" :log-data="logData" :unit="chartUnit" @exportLog="exportLog" @limitChange="limitChange"></log-tab>
              </el-collapse-item>
            </template>
          </el-collapse>
@@ -372,6 +371,7 @@ export default {
      chart: {},
      metricOptions: [],
      collapseValue: ['1', '2'],
+      showTab: ['1', '2'],
      logData: []
      /*logData: [JSON.parse(`{
          "result": [{
@@ -528,13 +528,15 @@ export default {
        reader.readAsText(error.response.data)
      })
    },
-    queryLogData () { // log的chart和table是一个请求
+    limitChange (limit) {
+      this.queryLogData(limit)
+    },
+    queryLogData (limit = 1000) { // log的chart和table是一个请求
      if (this.expressions.length > 0) {
        const requestArr = []
        this.expressions.forEach((item, index) => {
          if (item != '') {
-            const step = bus.getStep(this.filterTime[0], this.filterTime[1])
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step))
+            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit))
          }
        })
        if (requestArr.length > 0) {
@@ -543,11 +545,28 @@ export default {
        }
        axios.all(requestArr).then(res => {
          this.logData = res.map(r => r.data)
-          const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
          const hasGraph = this.logData.some(d => d.resultType === 'matrix')
-          this.collapseValue = []
-          hasGraph && this.collapseValue.push('1')
-          hasLog && this.collapseValue.push('2')
+          const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
+          const graphTabIndex = this.showTab.indexOf('1')
+          if (hasGraph) {
+            if (graphTabIndex === -1) {
+              this.showTab.push('1')
+            }
+          } else {
+            if (graphTabIndex > -1) {
+              this.showTab.splice(graphTabIndex, 1)
+            }
+          }
+          const logTabIndex = this.showTab.indexOf('2')
+          if (hasLog) {
+            if (logTabIndex === -1) {
+              this.showTab.push('1')
+            }
+          } else {
+            if (logTabIndex > -1) {
+              this.showTab.splice(logTabIndex, 1)
+            }
+          }
          this.$nextTick(() => {
            hasGraph && this.loadLogGraph()
          })
@@ -702,7 +721,6 @@ export default {
              this.$refs.exploreChart.setSeries(series)
              this.defaultChartVisible = true
            }
-            this.collapseValue = ['1', '2']
            this.$refs.exploreChart.endLoading()
          })
        }
@@ -1377,6 +1395,15 @@ export default {
  /*外部引用 样式end*/
 </style>
 <style lang="scss">
+  .explore-table {
+    .el-table {
+      position: static !important;
+    }
+    .explore-table-gear .cell {
+      display: flex;
+      justify-content: center;
+    }
+  }
  .explore-table tr td .cell {
    overflow: hidden;
    text-overflow: ellipsis;
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -30,7 +30,7 @@
      </div>
      <div class="log-operation">
        <span class="operation-label">{{$t('overall.limit')}}:</span>
-        <el-select v-model="operations.limit" size="small" style="width: 100px;">
+        <el-select v-model="limit" size="small" style="width: 100px;">
          <el-option v-for="option in limitOptions" :key="option" :value="option"></el-option>
        </el-select>
      </div>
@@ -47,6 +47,7 @@
        :cell-class-name="cellClassName"
        :data="tableData"
        :show-header="false"
+        ref="logTable"
        class="nz-table2"
        size="mini"
      >
@@ -90,12 +91,12 @@ export default {
    return {
      operations: {
        levels: [0, 1, 2, 3, 4, 5, 6],
-        limit: 1000,
        descending: true
      },
      time: true, // 换行和时间不需要处理数据
      wrapLines: true,

+      limit: 1000, // limit改动需要请求接口
      limitOptions: [300, 1000, 3000, 10000],
      levelOptions: [
        {
@@ -182,7 +183,7 @@ export default {
          stack: 'total',
          barWidth: 6,
          clip: false,
-          barMinHeight: 1,
+          barMinHeight: 4,
          data: d.data.map(item => [item[0], item[1]]),
          itemStyle: { color: this.levelOptions.find(l => l.type === d.name).color }
        }))
@@ -195,10 +196,9 @@ export default {
          },
          grid: {
            top: 20,
-            left: 10,
+            left: 30,
            right: 10,
-            bottom: 60,
-            containLabel: true
+            bottom: 80
          },
          legend: {
            bottom: 20,
@@ -219,7 +219,8 @@ export default {
              rotate: 0,
              fontSize: 13 * window.devicePixelRatio,
              formatter: '{HH}:{mm}:{ss}'
-            }
+            },
+            boundaryGap: [0, '3%']
          },
          tooltip: {
            trigger: 'axis'
@@ -285,14 +286,49 @@ export default {
        })
        return hit
      })
-      // limit
-      data = data.slice(0, filter.limit)
      // 升降序
      data = data.sort((a, b) => {
        return filter.descending ? b.timestamp - a.timestamp : a.timestamp - b.timestamp
      })
-      // logs内部上方的图表数据
+      // logs内部上方的图表数据。需要整理成时间点[{date: xxx, value: {debug: 1, error: 3}}]，时间点数量超过100时，设置step
+      // 然后再将数据转为图表需要的格式
+      let points = []
+      data.forEach(d => {
+        let point = points.find(p => d.date === p.date)
+        if (!point) {
+          point = { date: d.date, value: {} }
+          point.value[d.level] = 1
+          points.push(point)
+        } else {
+          point.value[d.level] ? point.value[d.level]++ : (point.value[d.level] = 1)
+        }
+      })
+      if (points.length > 100) {
+        const step = points.length / 100
+        const temp = []
+        let index = 0
+        while (index < points.length / step) {
+          temp.push(points[index * step])
+          index++
+        }
+        points = temp
+      }
      const tableChartData = {}
+      points.forEach(p => {
+        for (const type in p.value) {
+          tableChartData[type] || (tableChartData[type] = {})
+          tableChartData[type][p.date] ? tableChartData[type][p.date] += p.value[type] : tableChartData[type][p.date] = p.value[type]
+        }
+      })
+      const temp = []
+      for (const d in tableChartData) {
+        const level = { name: d, data: [] }
+        for (const time in tableChartData[d]) {
+          level.data.push([time, tableChartData[d][time]])
+        }
+        temp.push(level)
+      }
+      /* const tableChartData = {}
      data.forEach(d => {
        tableChartData[d.level] || (tableChartData[d.level] = {})
        tableChartData[d.level][`${d.date}`] ? tableChartData[d.level][`${d.date}`]++ : tableChartData[d.level][`${d.date}`] = 1
@@ -304,7 +340,7 @@ export default {
          level.data.push([time, tableChartData[d][time]])
        }
        temp.push(level)
-      }
+      } */
      return { tableData: data, tableChartData: temp }
    },
    filterLogType (data) {
@@ -352,7 +388,15 @@ export default {
        this.tableChartData = tableChartData
        this.loadChart()
      }
+    },
+    limit (n) {
+      this.$emit('limitChange', n)
    }
+  },
+  beforeUpdate () {
+    this.$nextTick(() => {
+      this.$refs.logTable.doLayout()
+    })
  }
 }
 </script>