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

2023-11-02 09:40:09 +08:00
parent 5f55b1bbfc ae50a0ff34
commit 425f3a62ed
25 changed files with 148 additions and 120 deletions
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -22765,9 +22765,9 @@
      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
    },
    "tinycolor2": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
    },
    "tinyqueue": {
      "version": "2.0.3",
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -92,6 +92,7 @@
    "showdown": "^2.1.0",
    "spark-md5": "^3.0.2",
    "speed-measure-webpack-plugin": "^1.5.0",
+    "tinycolor2": "^1.6.0",
    "uplot": "^1.6.26",
    "uplot-vue": "^1.1.5",
    "v-selectpage": "^2.1.4",
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -746,3 +746,23 @@ i.nz-icon-override{
 input::placeholder{
  text-transform:capitalize;
 }
+.vue-tags-input {
+  .ti-tag.ti-valid {
+    max-width: 100%;
+    .ti-content {
+      max-width: 90%;
+      flex-shrink: 0;
+      .ti-tag-center {
+        max-width: 100%;
+        flex-shrink: 0;
+        > span {
+          max-width: 100%;
+          display: inline-block;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -143,7 +143,7 @@
      overflow: hidden;
      white-space: nowrap;
      font-size: 18px;
-      color: #333;
+      color: $--color-text-primary;
      font-weight: 700;
    }
    .chart-header__tools {
@@ -556,6 +556,10 @@
    flex-grow: 1;
    position: relative;
    border: 1px solid $--background-color-empty;
+    .stat-text{
+      text-align: center;
+      line-height: 1.2;
+    }
    .sparkline{
      width: 100%;
      height: 40%;
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -233,7 +233,7 @@
  .bottom-box__top .my-loading-box {
    height: calc(100% + 20px) !important;
  }
-  .my-loading-parent--relative{
+  .my-loading-parent--relative:not(.panel-chart){
    height: calc(100% - 20px) !important;
  }
 }
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -352,3 +352,10 @@
 .el-date-range-picker__content.el-date-range-picker__content__only{
  width: 100%;
 }
+.nz-time-box.nz-dropdown {
+  width: 64px;
+  .dropdown-content {
+    height: 32px;
+    line-height: 32px;
+  }
+}
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss
@@ -1,6 +1,6 @@
 .query-prompt-box {
  //width: calc(100% - 10px);
-  height: 400px;
+  height: 440px;
  background: $--background-color-empty;
  box-shadow: 0px 0px 21px 4px $--dropdown-menu-box-shadow-color;
  border-radius: 2px;
@@ -9,7 +9,7 @@
  //left: 5px;
  transform: unset;
  z-index: 11;
-  max-height: 400px;
+  max-height: 440px;
  font-size: 14px;
  .explore-history-box-header {
    padding-left: 20px;
@@ -32,6 +32,7 @@
    }
    .query-prompt-log-content {
      height: 220px;
+      flex-shrink: 0;
      border: 1px solid $--border-color-light;
      border-radius: 2px;
      display: flex;
--- a/nezha-fronted/src/components/chart/chart/chartLog.vue
+++ b/nezha-fronted/src/components/chart/chart/chartLog.vue
@@ -240,8 +240,8 @@ export default {
      const descending = this.operations.descending
      const params = {
        logql: this.chartInfo.elements.map(item => item.expression),
-        start: this.$stringTimeParseToUnix(this.filterTime[0]),
-        end: this.$stringTimeParseToUnix(this.filterTime[1]),
+        start: this.momentStrToTimestamp(this.filterTime[0]),
+        end: this.momentStrToTimestamp(this.filterTime[1]),
        direction: descending ? 'backward' : 'forward',
        limit
      }
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -16,43 +16,52 @@
        background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]),
        height:item.height+'px',
        width:item.width + 'px',
-        fontSize: item.fontSize + 'px',
      }"
    >
      <div style="maxWidth:100%;z-index: 10;">
        <!-- all -->
        <template v-if="chartInfo.param.text==='all'">
          <div v-if="item.mapping" :style="{color:item.mapping.color.text}">
-            <p style="white-space: nowrap;">{{item.legend}}</p>
-            <template v-if="item.mapping && item.mapping.icon">
-              <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
-            </template>
-            <span style="white-space: nowrap;">{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
+            <p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.legend}}</p>
+            <p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">
+              <template v-if="item.mapping && item.mapping.icon">
+                <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
+              </template>
+              <span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
+            </p>
          </div>
          <div v-else>
-            <p style="white-space: nowrap;">{{item.legend}}</p>
-            <span style="white-space: nowrap;">{{item.showValue}}</span>
+            <p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.legend}}</p>
+            <p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">{{item.showValue}}</p>
          </div>
        </template>
        <!-- legend -->
        <template v-if="chartInfo.param.text==='legend'">
          <div v-if="item.mapping" :style="{color:item.mapping.color.text}">
-            <template v-if="item.mapping && item.mapping.icon">
-              <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
-            </template>
-            <span style="white-space: nowrap;">{{item.legend}}</span>
+            <p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">
+              <template v-if="item.mapping && item.mapping.icon">
+                <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
+              </template>
+              <span>{{item.legend}}</span>
+            </p>
+          </div>
+          <div v-else>
+            <p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">{{item.legend}}</p>
          </div>
-          <div v-else style="white-space: nowrap;">{{item.legend}}</div>
        </template>
        <!-- value -->
        <template v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
          <div v-if="item.mapping" :style="{color:item.mapping.color.text}">
-            <template v-if="item.mapping && item.mapping.icon">
-              <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
-            </template>
-            <span style="white-space: nowrap;">{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
+            <p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">
+              <template v-if="item.mapping && item.mapping.icon">
+                <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
+              </template>
+              <span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
+            </p>
+          </div>
+          <div v-else style="white-space: nowrap;">
+            <p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">{{item.showValue}}</p>
          </div>
-          <div v-else style="white-space: nowrap;">{{item.showValue}}</div>
        </template>
        <!-- none -->
        <template v-if="chartInfo.param.text==='none'"></template>
@@ -118,7 +127,7 @@
        </div>
      </div>
    </div>
-    <span class="temp-dom--12" ref="temp-dom"></span>
+    <span class="temp-dom" ref="temp-dom"></span>
  </div>
 </template>

@@ -133,6 +142,7 @@ import { initColor } from '@/components/chart/chart/tools'
 import * as echarts from 'echarts'
 import chartSparklineOption from './options/chartSparkline'
 import lodash from 'lodash'
+import tinycolor from 'tinycolor2'
 export default {
  name: 'chart-stat',
  mixins: [chartMixin, chartFormat],
@@ -291,7 +301,6 @@ export default {
      })
    },
    renderStat (layout) {
-      let isDouble = false
      const width = this.boxWidth / layout.col
      const height = this.boxHeight / layout.row
      const integer = Math.floor(this.statData.length / layout.col)
@@ -305,86 +314,62 @@ export default {
        } else {
          item.width = width
        }
-        let font = '' // 获取显示的字体
        let display = ''
        if (item.mapping) {
          display = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
        }
+        let titleFont = ''
+        let valueFont = ''
+        let titleFontSize = ''
+        let valueFontSize = ''
+        const padding = 10
        switch (this.chartInfo.param.text) {
          case 'all':
+            titleFont = item.legend
            if (item.mapping) {
-              isDouble = true
-              if (item.legend.length > item.showValue.length + 2) {
-                font = item.legend
-              } else {
-                font = display
-                if (item.mapping.icon) {
-                  font += 'AA'
-                }
+              valueFont = display
+              if (item.mapping.icon) {
+                valueFont += 'AA'
              }
            } else {
-              isDouble = true
-              if (item.legend.length > item.showValue.length) {
-                font = item.legend
-              } else {
-                font = item.showValue
-              }
+              valueFont = item.showValue
            }
+            titleFontSize = this.calculateFontSize(titleFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4, 30)
+            valueFontSize = this.calculateFontSize(valueFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4)
+            titleFontSize = Math.min(valueFontSize * 0.7, titleFontSize)
            break
          case 'legend':
+            titleFont = item.legend
            if (item.mapping) {
-              isDouble = true
-              if (item.legend.length > item.showValue.length + 2) {
-                font = item.legend
-              } else {
-                font = display
-                if (item.mapping.icon) {
-                  font += 'AA'
-                }
+              if (item.mapping.icon) {
+                titleFont += 'AA'
              }
-            } else {
-              font = item.legend
            }
+            valueFontSize = this.calculateFontSize(titleFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4)
            break
-
          case 'none':
-            font = ''
+            titleFontSize = ''
+            valueFontSize = ''
            break
          case 'value':
          default:
            if (item.mapping) {
-              font = display
+              valueFont = display
              if (item.mapping.icon) {
-                font += 'AA'
+                valueFont += 'AA'
              }
            } else {
-              font = item.showValue
+              valueFont = item.showValue
            }
+            valueFontSize = this.calculateFontSize(valueFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4)
            break
        }
-        const el = this.$refs['temp-dom']
-        el.innerText = font
-        const elWidth = el.offsetWidth
-        const elHeight = el.offsetHeight
-        const dimension = Math.min(item.width, item.height * 1.3)
-        const fontScale = parseInt('70%', 10) / 100
-        let fontSize = Math.min(dimension / 5, 100) * fontScale
-        let scale = item.width / elWidth
-        if (scale * elHeight > item.height) {
-          scale = item.height / elHeight
-        }
-        if (isDouble) {
-          if (scale * elHeight * 2.5 > item.height) {
-            scale = item.height / elHeight * 2.5
-          }
-        }
-        item.scale = scale < 1 ? 1 : parseFloat(scale)
-        fontSize = fontSize > 12 ? fontSize : this.minFontSzie
-        item.fontSize = fontSize
+        item.titleFontSize = titleFontSize
+        item.valueFontSize = valueFontSize

-        if (fontSize > 36) {
+        if (item.valueFontSize > 36) {
          item.comparisonFont = 16
-        } else if (fontSize > 24) {
+        } else if (item.valueFontSize > 24) {
          item.comparisonFont = 14
        } else {
          item.comparisonFont = 12
@@ -392,28 +377,43 @@ export default {
      })
      this.isInit = false
    },
+
+    calculateFontSize (text, width, height, maxSize, lineHeight = 1.2) {
+      const el = this.$refs['temp-dom']
+      el.innerText = text
+      const elWidth = el.offsetWidth
+      const fontSizeBasedOnWidth = (width / (elWidth + 2)) * 14
+      const fontSizeBasedOnHeight = height / lineHeight
+
+      const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth)
+      return Math.min(optimalSize, maxSize || optimalSize)
+    },
+
    // 绘制图表
    drawChart () {
      this.statData.forEach((item, index) => {
        const chart = this.sparkline[index] ? this.sparkline[index] : echarts.init(document.getElementById(`chart-canvas-${this.chartId}-${index}`))
        const chartOption = lodash.cloneDeep(chartSparklineOption)
-        // sparkline 颜色和 字体颜色 保持一致
-        const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
-        let color = theme === 'light' ? '#666666' : '#BEBEBE'
-        if (item.mapping) {
-          color = item.mapping.color.text
+
+        // sparkline 颜色根据背景色计算
+        const color = item.mapping ? item.mapping.color.bac : this.colorList[index]
+        const lineColor = tinycolor(color).brighten(40).toRgbString()
+        let areaColor = 'rgba(255,255,255,0.4)'
+        if (this.statData.length === 1 && !item.mapping) {
+          areaColor = tinycolor(color).setAlpha(0.2).toRgbString()
        }
+
        chartOption.series = [{
          ...chartOption.series[0],
          data: item.data,
          lineStyle: {
-            color
+            width: 1,
+            color: lineColor
          }
        }]
        if (this.chartInfo.param.sparklineMode === 'area') {
          chartOption.series[0].areaStyle = {
-            color: color,
-            opacity: 0.1
+            color: areaColor
          }
        }
        chartOption.yAxis.max = this.maxValue
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -303,6 +303,7 @@ export default {
          oldValue: ''
        }
        const display = this.globalVariablesReplace(column.display)
+        console.log(column, display, /\{\{.+\}\}/.test(display), params)
        if (/\{\{.+\}\}/.test(display)) {
          const labelValue = display.replace(/(\{\{.+?\}\})/g, function (i) {
            const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
@@ -312,7 +313,8 @@ export default {
              if (label.indexOf('$value') !== -1) {
                value = chartDataFormat.getUnit(column.unit ? column.unit : 2).compute(value, null, -1, 2)
              }
-              if (!((typeof value) == 'string' && value.constructor == String)) {
+              console.log(value)
+              if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) {
                let legend = ''
                if (value.__name__) {
                  legend += `${value.__name__}{`
@@ -339,7 +341,7 @@ export default {
            let value = null
            if (lodash.get(params, label)) {
              value = lodash.get(params, label)
-              if (!((typeof value) == 'string' && value.constructor == String)) {
+              if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) {
                let legend = ''
                if (value.__name__) {
                  legend += `${value.__name__}{`
@@ -361,6 +363,7 @@ export default {
            }
            return value || ''
          })
+          console.log(labelValue)
          obj[column.title + 'display'] = {
            display: labelValue,
            oldValue: oldLabelValue
@@ -394,7 +397,7 @@ export default {
            if (label.indexOf('$value') !== -1) {
              value = chartDataFormat.getUnit(col.unit ? col.unit : 2).compute(value, null, -1, 2)
            }
-            if (!((typeof value) == 'string' && value.constructor == String)) {
+            if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) {
              let legend = ''
              if (value.__name__) {
                legend += `${value.__name__}{`
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -271,11 +271,11 @@ export default {
          case 'logs': {
            if (this.from === fromRoute.chartTemp || this.from === fromRoute.dashboardTemp || this.from === fromRoute.integration) {
              setTimeout(() => {
-                this.chartData = [chartTempData.data.result]
-                this.chartData.forEach(item => {
-                  item.forEach(children => {
-                    children.elements = elements[0]
-                  })
+                this.chartData = []
+                elements.forEach(item => {
+                  const data = this.$lodash.cloneDeep(chartTempData.data.result)
+                  data[0].elements = item
+                  this.chartData.push(data)
                })
                this.loading = false
              }, 100)
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -19,7 +19,7 @@
        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" :disabled="from === fromRoute.alertSilence" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
          <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
        </el-select>
-        <pick-time ref="pickTime" v-model="searchTimeHeader" :default-pick="defaultPick" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="false" :sign="sign"></pick-time>
+        <pick-time ref="pickTime" v-model="searchTimeHeader" :default-pick="defaultPick" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="true" :sign="sign"></pick-time>
      </template>
      <template v-slot>
        <alertMessageTable
--- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
@@ -103,8 +103,8 @@ export default {
    exportLog ({ limit, descending }) {
      const params = {
        logql: this.expressions,
-        start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])),
-        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])),
+        start: this.momentStrToTimestamp(this.filterTime[0]),
+        end: this.momentStrToTimestamp(this.filterTime[1]),
        direction: descending ? 'backward' : 'forward',
        limit
      }
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -363,11 +363,15 @@ export const chart = {

 export const intervalList = [
  { value: 0, label: i18n.t('dashboard.dashboard.chartForm.lockList.off') },
+  { value: 5, label: '5s' },
+  { value: 10, label: '10s' },
  { value: 30, label: '30s' },
  { value: 60, label: '1m' },
  { value: 300, label: '5m' },
  { value: 900, label: '15m' },
-  { value: 1800, label: '30m' }
+  { value: 1800, label: '30m' },
+  // { value: 3600, label: '1h' },
+  // { value: 7200, label: '2h' }
 ]

 export const setting = {
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -12,7 +12,7 @@
        <span class="select-refresh-time-label" v-if="interval">{{interLabel}}</span>
        <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
        <transition name="el-zoom-in-top">
-          <ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown popper-z-index" v-clickoutside="dropdownHandler">
+          <ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown popper-z-index nz-time-box" v-clickoutside="dropdownHandler">
            <li v-for="i in $CONSTANTS.intervalList" :key="i.value + i.label" :style="{color:interval === i.value || interval.value === i.value ? theme.themeColor : ''}" class="el-dropdown-menu__item dropdown-content" @click="selectInterval(i,true)">
              {{$t(i.label)}}
            </li>
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -216,7 +216,6 @@
        >
          <vue-tags-input
            v-model="tag"
-            :maxlength="32"
            :placeholder="$t('tagsInput.placeholder')"
            :tags="chartConfig.param.tags"
            @tags-changed="(newTags)=>{tagsChange(newTags)}"
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -188,7 +188,6 @@
        >
          <vue-tags-input
            v-model="tag"
-            :maxlength="32"
            :placeholder="$t('tagsInput.placeholder')"
            :tags="chartConfig.param.tags"
            @tags-changed="(newTags)=>{tagsChange(newTags)}"
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -236,7 +236,6 @@
                    <el-form-item :prop="'paramObj.' + index + '.value'" class="param-box-row-value">
                      <vue-tags-input
                        v-model="item.tags"
-                        :maxlength="32"
                        :placeholder="$t('tagsInput.placeholder')"
                        :tags="item.value"
                        @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
@@ -296,7 +295,6 @@
                        ]">
                        <vue-tags-input
                          v-model="item.tags"
-                          :maxlength="32"
                          ref="relabelTag"
                          tabindex="9999"
                          :placeholder="$t('tagsInput.placeholder')"
@@ -467,7 +465,6 @@
                    >
                      <vue-tags-input
                        v-model="item.namespaces.tags"
-                        :maxlength="32"
                        :placeholder="$t('tagsInput.placeholder')"
                        :tags="item.namespaces.names"
                        @tags-changed="(newTags)=>{logsTagsChange(newTags,item)}"
@@ -499,7 +496,6 @@
                            ]">
                            <vue-tags-input
                              v-model="subItem.tags"
-                              :maxlength="32"
                              :ref="'logsRelabelTag'+index+subIndex"
                              tabindex="9999"
                              :placeholder="$t('tagsInput.placeholder')"
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -187,7 +187,6 @@
                  <el-form-item :prop="'paramObj.' + index + '.value'" class="param-box-row-value">
                    <vue-tags-input
                      v-model="item.tags"
-                      :maxlength="32"
                      :placeholder="$t('tagsInput.placeholder')"
                      :tags="item.value"
                      @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
@@ -247,7 +246,6 @@
                      ]">
                      <vue-tags-input
                        v-model="item.tags"
-                        :maxlength="32"
                        ref="relabelTag"
                        tabindex="9999"
                        :placeholder="$t('tagsInput.placeholder')"
@@ -420,7 +418,6 @@
                    >
                      <vue-tags-input
                        v-model="item.namespaces.tags"
-                        :maxlength="32"
                        :placeholder="$t('tagsInput.placeholder')"
                        :tags="item.namespaces.names"
                        @tags-changed="(newTags)=>{logsTagsChange(newTags,item)}"
@@ -472,7 +469,6 @@
                            ]">
                            <vue-tags-input
                              v-model="subItem.tags"
-                              :maxlength="32"
                              :ref="'logsRelabelTag'+index+subIndex"
                              tabindex="9999"
                              :placeholder="$t('tagsInput.placeholder')"
--- a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
@@ -12,8 +12,7 @@
    <!-- begin--表单-->
    <div class="right-box__container">
      <div class="container__form">
-        <el-form ref="recordRuleForm" :model="editRecordRule"
-                 :rules="rules" label-position="top" label-width="120px">
+        <el-form ref="recordRuleForm" :model="editRecordRule" :rules="rules" label-position="top" label-width="120px">
            <!-- name -->
          <el-form-item :label='$t("overall.name")' prop="name">
            <el-input
@@ -262,6 +261,7 @@ export default {
    },
    metricChange (val) {
      this.editRecordRule.expr = val
+      this.$refs.recordRuleForm?.clearValidate('expr')
    },
    labelsSort (obj) {
      if (typeof obj != 'object') {
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -15,7 +15,7 @@
        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 100px">
          <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
        </el-select>
-        <pick-time ref="pickTime" v-model="searchTime" sign="message" :default-pick="defaultPick" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time ref="pickTime" v-model="searchTime" sign="message" :default-pick="defaultPick" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="true"></pick-time>
        <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcel')" class="top-tool-btn margin-r-10" type="button" @click="showExportDialog">
          <i class="nz-icon-download1 nz-icon"></i>
        </button>
--- a/nezha-fronted/src/components/page/config/monitor.vue
+++ b/nezha-fronted/src/components/page/config/monitor.vue
@@ -30,7 +30,6 @@
        <el-form-item :label="$t('config.system.monitor.interface_name')" prop="interface_name">
          <vue-tags-input
                        v-model="tag"
-                        :maxlength="32"
                        :class="monitor.interface_name.length !== 0 ? 'interface-name' : ''"
                        :placeholder="$t('tagsInput.placeholder')"
                        :tags="monitor.interface_name"
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -3842,8 +3842,8 @@ export default {
    exportLog ({ limit, descending }) {
      const params = {
        logql: this.expressions,
-        start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])),
-        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])),
+        start: this.momentStrToTimestamp(this.filterTime[0]),
+        end: this.momentStrToTimestamp(this.filterTime[1]),
        direction: descending ? 'backward' : 'forward',
        limit
      }
--- a/nezha-fronted/src/components/page/dashboard/explore/histoyrComponent/exploreHistory.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/histoyrComponent/exploreHistory.vue
@@ -98,7 +98,7 @@ export default {
      const params = {
        ...this.pageObj,
        queryValue: this.searchStr,
-        orderBy: 'uts'
+        orderBy: '-uts'
      }
      if (this.type === 'metric') {
        params.queryKey = 'explore-metric'
@@ -151,7 +151,7 @@ export default {
      const params = {
        pageNo: 1,
        queryValue: this.searchStr,
-        orderBy: 'uts',
+        orderBy: '-uts',
        pageSize
      }
      if (this.type === 'metric') {
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -583,7 +583,6 @@ export default {
              })),
              span: /^[a-zA-Z0-9_:]+$/
            }
-            console.log(res.options)
            // 过滤 非logs的函数
            if (res !== null) {
              historyItems.options = historyItems.options.concat(res.options)