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

2023-11-13 15:04:43 +08:00
parent a91d866fce dc3379bc51
commit 6a4713e615
8 changed files with 74 additions and 68 deletions
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -7531,6 +7531,11 @@
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
    },
+    "bignumber.js": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug=="
+    },
    "binary-extensions": {
      "version": "1.13.1",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
@@ -17727,7 +17732,7 @@
    },
    "node-sass": {
      "version": "4.14.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "resolved": "https://registry.npmmirror.com/node-sass/-/node-sass-4.14.1.tgz",
      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
      "dev": true,
      "requires": {
@@ -24359,7 +24364,7 @@
    },
    "webpack-bundle-analyzer": {
      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
      "integrity": "sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==",
      "dev": true,
      "requires": {
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -56,6 +56,7 @@
    "axios": "^0.19.0",
    "babel-loader": "^8.3.0",
    "babel-preset-mobx": "^2.0.0",
+    "bignumber.js": "^9.1.2",
    "browserslist": "^4.21.4",
    "caniuse-lite": "^1.0.30001412",
    "css-minimizer-webpack-plugin": "^1.0.0",
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss
@@ -49,7 +49,7 @@
      .log-content-left-label, .log-content-right-value{
        height: 32px;
        line-height: 32px;
-        text-transform: capitalize;
+        // text-transform: capitalize;
        box-sizing: border-box;
        padding: 0 8px 0 20px;
        display: flex;
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -78,10 +78,8 @@ export default {
      }
      this.timer = setTimeout(() => {
        this.initGaugeData(this.chartInfo, this.chartData).then(() => {
-          this.getLayout().then(layout => {
-            this.renderGauge(layout).then(() => {
-              this.gaugeChartInit()
-            })
+          this.renderGauge().then(() => {
+            this.gaugeChartInit()
          })
        })
      }, 200)
@@ -130,52 +128,53 @@ export default {
        resolve()
      })
    },
-    getLayout () {
-      this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 2 * this.boxPadding
-      this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 2 * this.boxPadding
-      return new Promise(resolve => {
-        let rateMax = 0
-        let col = 0
-        let row = 0
-        for (let i = 1; i <= this.gaugeData.length; i++) {
-          const cols = Math.ceil(this.gaugeData.length / i)
-          const w = this.boxWidth / i
-          const h = this.boxHeight / cols
-          const rate = w > h ? h / w : w / h
-          if (rate > rateMax) {
-            rateMax = rate
-            col = cols
-            row = i
-          }
-        }
-        if (this.gaugeData.length) {
-          while (col * row >= this.gaugeData.length) { // 避免出现空白
-            row--
-          }
-        }
-        row++
-        if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置 显示才会好看
-          const temp = col
-          col = row
-          row = temp
-        }
-        resolve({ col, row })
-      })
+    calculateGridDimensions (parentWidth, parentHeight, numberOfChildren) {
+      const vertical = this.calculateSizeOfChild(parentWidth, parentHeight, numberOfChildren)
+      const horizontal = this.calculateSizeOfChild(parentHeight, parentWidth, numberOfChildren)
+      const square = Math.max(vertical, horizontal)
+      let xCount = Math.floor(parentWidth / square)
+      const yCount = Math.ceil(numberOfChildren / xCount)
+
+      // after yCount update xCount to make split between rows more even
+      xCount = Math.ceil(numberOfChildren / yCount)
+
+      const itemsOnLastRow = xCount - (xCount * yCount - numberOfChildren)
+      const widthOnLastRow = parentWidth / itemsOnLastRow
+
+      return {
+        width: parentWidth / xCount,
+        height: parentHeight / yCount,
+        widthOnLastRow,
+        xCount,
+        yCount
+      }
    },
-    renderGauge (layout) {
+    calculateSizeOfChild (parentWidth, parentHeight, numberOfChildren) {
+      const parts = Math.ceil(Math.sqrt((numberOfChildren * parentWidth) / parentHeight))
+      if (Math.floor((parts * parentHeight) / parentWidth) * parts < numberOfChildren) {
+        return parentHeight / Math.ceil((parts * parentHeight) / parentWidth)
+      }
+      return parentWidth / parts
+    },
+    renderGauge () {
      return new Promise(resolve => {
-        const width = this.boxWidth / layout.col
-        const height = this.boxHeight / layout.row
-        const integer = Math.floor(this.gaugeData.length / layout.col)
-        const remainder = this.gaugeData.length % layout.col
-        const specialIndex = integer * layout.col
-        const specialWidth = this.boxWidth / remainder
+        try {
+          this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 3 * this.boxPadding
+          this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 3 * this.boxPadding
+        } catch (error) {}
+
+        const grid = this.calculateGridDimensions(this.boxWidth, this.boxHeight, this.gaugeData.length)
+        let xGrid = 0
+        let yGrid = 0
+
        this.gaugeData.forEach((item, index) => {
-          item.height = height
-          if (remainder && index >= specialIndex) {
-            item.width = specialWidth
-          } else {
-            item.width = width
+          const isLastRow = yGrid === grid.yCount - 1
+          item.width = isLastRow ? grid.widthOnLastRow : grid.width
+          item.height = grid.height
+          xGrid++
+          if (xGrid === grid.xCount) {
+            xGrid = 0
+            yGrid++
          }
        })
        resolve()
@@ -255,10 +254,8 @@ export default {
    },
    resize () {
      setTimeout(() => {
-        this.getLayout().then(layout => {
-          this.renderGauge(layout).then(() => {
-            this.gaugeChartResize()
-          })
+        this.renderGauge().then(() => {
+          this.gaugeChartResize()
        })
      })
    },
--- a/nezha-fronted/src/components/chart/chart/chartLog.vue
+++ b/nezha-fronted/src/components/chart/chart/chartLog.vue
@@ -57,13 +57,6 @@
        >
          <template slot-scope="{ row }">{{utcTimeToTimezoneStr(row.date)}}</template>
        </el-table-column>
-        <el-table-column
-          prop="legend"
-        >
-          <template slot-scope="{ row }">
-            <div :title="aliasLegend(row)">{{aliasLegend(row)}}</div>
-          </template>
-        </el-table-column>
        <el-table-column
          prop="message"
        >
--- a/nezha-fronted/src/components/chart/logContext.vue
+++ b/nezha-fronted/src/components/chart/logContext.vue
@@ -92,6 +92,8 @@
 <script>
 import copy from '@/components/common/copy'
 import axios from 'axios'
+// 引入 BigNumber 库
+import BigNumber from 'bignumber.js'
 export default {
  name: 'logContext',
  components: { copy },
@@ -123,13 +125,19 @@ export default {
  methods: {
    queryContext () {
      this.loading = true
-      const beforDate = this.rowData.secondTime - 2 * 60 * 60 // 向前查两个小时
-      const nowDate = this.rowData.secondTime
-      const afterDate = this.rowData.secondTime + 2 * 60 * 60 // 向后查两个小时
+      const twoHours = 2 * 60 * 60 * 1000 * 1000 * 1000// 纳秒
+      const bigNum = new BigNumber(this.rowData.timestamp)
+
+      const beforStart = bigNum.minus(twoHours) // 向前查两个小时
+      const beforEnd = this.rowData.timestamp
+
+      const afterStart = bigNum.plus(1) // start加一纳秒 防止出现重复数据
+      const afterEnd = bigNum.plus(twoHours) // 向后查两个小时
+
      const requestArr = []
      const expr = this.getExpression()
-      requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(expr) + '&start=' + nowDate + '&end=' + afterDate + '&limit=' + this.lines + '&direction=forward')) // after
-      requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(expr) + '&start=' + beforDate + '&end=' + nowDate + '&limit=' + this.lines + '&direction=backward')) // befor
+      requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(expr) + '&start=' + afterStart + '&end=' + afterEnd + '&limit=' + this.lines + '&direction=forward')) // after
+      requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(expr) + '&start=' + beforStart + '&end=' + beforEnd + '&limit=' + this.lines + '&direction=backward')) // befor
      Promise.all(requestArr).then(res => {
        const logData = res.map(r => r.data)
        this.beforeLength = logData[1].result.length
--- a/nezha-fronted/src/components/page/dashboard/explore/histoyrComponent/exploreHistory.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/histoyrComponent/exploreHistory.vue
@@ -133,7 +133,7 @@ export default {
      })
    },
    deleteHistoryItem (item) {
-      this.$delete('/sys/user/queryHistory?ids=' + item.id).then(res => {
+      this.$delete('/sys/user/queryHistory?ids=' + item.id + '&queryHash=' + item.queryHash).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tip.deleteSuccess'))
          this.firstLoading = true
--- a/nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue
@@ -301,7 +301,9 @@ export default {
        }
        str += ','
      })
-      str = str.slice(0, -1)
+      if (str.length !== 1) {
+        str = str.slice(0, -1)
+      }
      str += '}'
      this.logFinalStr = str
    },