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

25 files changed, 148 insertions, 120 deletions

diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 034e95070..be7d108b9 100644
--- 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",
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index c43a287bd..e4cd21695 100644
--- 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",
diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 6ad1aac4d..7856ea690 100644
--- 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;
+        }
+      }
+    }
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 8488b8f05..70e505065 100644
--- 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%;
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 27e60897f..3a9419775 100644
--- 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;
   }
 }
diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index 12fd5abb8..1d1a5b639 100644
--- 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;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss
index 779d38df2..940b121bf 100644
--- 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;
diff --git a/nezha-fronted/src/components/chart/chart/chartLog.vue b/nezha-fronted/src/components/chart/chart/chartLog.vue
index ff8928da7..ba39d45f3 100644
--- 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
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index a1b6fa02e..3f061271f 100644
--- 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
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index a6443d456..1269e103e 100644
--- 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__}{`
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index fce3d9ced..679671164 100644
--- 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)
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index f3febe924..efbd9aefc 100644
--- 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
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
index cb5afe849..14b71d53c 100644
--- 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
       }
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 07a03d330..d8d4a76ad 100644
--- 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 = {
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 4da1b1b0e..011ac35c8 100644
--- 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>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 1addf28c0..1da98c76b 100644
--- 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)}"
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index a24e150dc..080ffd3dd 100644
--- 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)}"
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 484a096cd..ed6176632 100644
--- 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')"
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 19b18762c..38689e3a6 100644
--- 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')"
diff --git a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
index d3659eba2..0b5e94b47 100644
--- 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') {
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index bb8d50d83..ec667455f 100644
--- 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>
diff --git a/nezha-fronted/src/components/page/config/monitor.vue b/nezha-fronted/src/components/page/config/monitor.vue
index 1c131cbd7..b59463ffc 100644
--- 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"
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 6053afd25..ecba8cb5d 100644
--- 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
       }
diff --git a/nezha-fronted/src/components/page/dashboard/explore/histoyrComponent/exploreHistory.vue b/nezha-fronted/src/components/page/dashboard/explore/histoyrComponent/exploreHistory.vue
index 7fbbd51b8..835c342a5 100644
--- 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') {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 454dd624d..a63e253cc 100644
--- 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)