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

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": {

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",

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;

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -78,12 +78,10 @@ export default {
       }
       this.timer = setTimeout(() => {
         this.initGaugeData(this.chartInfo, this.chartData).then(() => {
-          this.getLayout().then(layout => {
+          this.renderGauge().then(() => {
-            this.renderGauge(layout).then(() => {
             this.gaugeChartInit()
           })
         })
-        })
       }, 200)
     },
     initGaugeData (chartInfo, originalDatas) {
@@ -130,52 +128,53 @@ export default {
         resolve()
       })
     },
-    getLayout () {
+    calculateGridDimensions (parentWidth, parentHeight, numberOfChildren) {
-      this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 2 * this.boxPadding
+      const vertical = this.calculateSizeOfChild(parentWidth, parentHeight, numberOfChildren)
-      this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 2 * this.boxPadding
+      const horizontal = this.calculateSizeOfChild(parentHeight, parentWidth, numberOfChildren)
-      return new Promise(resolve => {
+      const square = Math.max(vertical, horizontal)
-        let rateMax = 0
+      let xCount = Math.floor(parentWidth / square)
-        let col = 0
+      const yCount = Math.ceil(numberOfChildren / xCount)
-        let row = 0
+
-        for (let i = 1; i <= this.gaugeData.length; i++) {
+      // after yCount update xCount to make split between rows more even
-          const cols = Math.ceil(this.gaugeData.length / i)
+      xCount = Math.ceil(numberOfChildren / yCount)
-          const w = this.boxWidth / i
+
-          const h = this.boxHeight / cols
+      const itemsOnLastRow = xCount - (xCount * yCount - numberOfChildren)
-          const rate = w > h ? h / w : w / h
+      const widthOnLastRow = parentWidth / itemsOnLastRow
-          if (rate > rateMax) {
+
-            rateMax = rate
+      return {
-            col = cols
+        width: parentWidth / xCount,
-            row = i
+        height: parentHeight / yCount,
+        widthOnLastRow,
+        xCount,
+        yCount
       }
-        }
-        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 })
-      })
     },
-    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
+        try {
-        const height = this.boxHeight / layout.row
+          this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 3 * this.boxPadding
-        const integer = Math.floor(this.gaugeData.length / layout.col)
+          this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 3 * this.boxPadding
-        const remainder = this.gaugeData.length % layout.col
+        } catch (error) {}
-        const specialIndex = integer * layout.col
+
-        const specialWidth = this.boxWidth / remainder
+        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
+          const isLastRow = yGrid === grid.yCount - 1
-          if (remainder && index >= specialIndex) {
+          item.width = isLastRow ? grid.widthOnLastRow : grid.width
-            item.width = specialWidth
+          item.height = grid.height
-          } else {
+          xGrid++
-            item.width = width
+          if (xGrid === grid.xCount) {
+            xGrid = 0
+            yGrid++
           }
         })
         resolve()
@@ -255,12 +254,10 @@ export default {
     },
     resize () {
       setTimeout(() => {
-        this.getLayout().then(layout => {
+        this.renderGauge().then(() => {
-          this.renderGauge(layout).then(() => {
           this.gaugeChartResize()
         })
       })
-      })
     },
     formatterFunc: function (params, ticket, callback) {
       const self = this

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"
         >

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 twoHours = 2 * 60 * 60 * 1000 * 1000 * 1000// 纳秒
-      const nowDate = this.rowData.secondTime
+      const bigNum = new BigNumber(this.rowData.timestamp)
-      const afterDate = this.rowData.secondTime + 2 * 60 * 60 // 向后查两个小时
+
+      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=' + 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=' + 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=' + 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

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

nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue

@@ -301,7 +301,9 @@ export default {
         }
         str += ','
       })
+      if (str.length !== 1) {
         str = str.slice(0, -1)
+      }
       str += '}'
       this.logFinalStr = str
     },