From ecf7e19883135f520b91279829034cd27dcbe5e3 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Thu, 16 May 2024 17:02:00 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3473=20fix:=20explore=20=E5=BF=AB=E7=85=A7?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=86=85=E5=AE=B9=E5=92=8C=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E4=B8=8D=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../snapshotProgress/snapshotProgress.vue     |   6 +-
 .../page/dashboard/explore/exploreItem.vue    | 130 ++------
 .../dashboard/explore/exploreItemHtml.vue     | 301 +++++++-----------
 nezha-fronted/src/http.js                     |   8 +-
 4 files changed, 143 insertions(+), 302 deletions(-)

diff --git a/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue b/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue
index eb19cd3ba..a8b6aded8 100644
--- a/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue
+++ b/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue
@@ -22,12 +22,12 @@
     </div>
     <div slot="footer">
       <div class="el-message-box__btns">
-        <button :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button--small nz-btn-style-normal" @click="startTimer">
-          <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
-        </button>
         <button class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
           <span>{{$t('overall.close')}}</span>
         </button>
+        <button :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button--small nz-btn-style-normal" @click="startTimer">
+          <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
+        </button>
       </div>
     </div>
     </el-dialog>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 0d59aab83..3b6dc91e2 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -224,7 +224,7 @@
           <el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
             <!--metric-->
             <template v-if="showMetrics">
-              <el-collapse-item v-if="!allMatrix && showChart" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
+              <el-collapse-item v-if="showChart" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
                 <!-- 堆叠 -->
                 <div slot="title" class="explore-table-title" style="display:flex; justify-content: flex-end;align-item:center;padding-right:30px;">
                   <span :title="$t('dashboard.dashboard.chartForm.stack')" @click.stop="changeStack" v-show="collapseValue.some(item=>item==1)" tabindex="0">
@@ -246,7 +246,7 @@
                   />
                 </div>
               </el-collapse-item>
-              <el-collapse-item class="el-collapse-item__height" name="2" title="Table" v-if="showTable">
+              <el-collapse-item v-if="showTable" class="el-collapse-item__height" name="2" title="Table">
                 <div slot="title" class="explore-table-title">
                   <span>{{tableMode==='table'?$t('dashboard.dashboard.chartForm.typeVal.table.label'):$t('explore.row')}}</span>
                   <!-- 判断是否折叠 -->
@@ -339,7 +339,7 @@
                         </div>
                         <div class="table-row-right">
                           <h2 class="expand-value" v-if="expandResults">{{$t('overall.value')}}</h2>
-                          <ul v-if="row.valueList" class="valueList">
+                          <ul class="valueList">
                             <li v-for="item in row.valueList" :key="item.timestamp">
                               <span>{{item.value}}</span>
                               <span>{{item.timestamp}}</span>
@@ -347,14 +347,6 @@
                               <span>{{item.interval}}</span>
                             </li>
                           </ul>
-                          <ul v-else class="valueList">
-                            <li>
-                              <span>{{row.value}}</span>
-                              <span>{{row.timestamp}}</span>
-                              <span>{{row.time}}</span>
-                              <span style="opacity:0">+30</span>
-                            </li>
-                          </ul>
                         </div>
                       </li>
                       <div v-if="!tools.loading&&!storedTableData.length" class="table-no-data">
@@ -378,7 +370,6 @@
                   </span>
                 </div>
                 <div class="chart-room">
-<!--                  <chart ref="logChart" :unit="chartUnit" v-my-loading="chartLoading" :timeRange="filterTime"></chart>-->
                   <uplotChart
                     :ref="'exploreChart'"
                     :chart-data="uplotChartData"
@@ -3748,8 +3739,6 @@ export default {
       },
       tableTitle: [],
       showIntroduce: true,
-      defaultChartVisible: true,
-      defaultTableVisible: true,
       chartVisible: true,
       tableVisible: true,
       pageObj: {
@@ -3779,7 +3768,6 @@ export default {
       tableHover: false,
       showTopBtn: false, // top按钮
       scrollbarWrap: null,
-      allMatrix: false, // metric是否全部为matrix类型
       rowData: [],
       metricsHistory: [],
       logsHistory: [],
@@ -4067,8 +4055,6 @@ export default {
       if (graphData && graphData.length > 0) {
         const promqlInputIndexs = []
         const queryExpression = []
-        const series = []
-        const legend = []
         this.expressions.forEach((item, index) => {
           if (item !== '' && this.promqlKeys[index].state) {
             promqlInputIndexs.push(index)
@@ -4091,20 +4077,9 @@ export default {
             this.$refs['promql-' + promqlIndex][0].setError('')
           }
         })
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          // this.$refs.logChart.setLegend(legend)
-          // this.$refs.logChart.setRandomColors(series.length)
-          // if (!series.length) {
-          //   series = ''
-          // }
-          // this.$refs.logChart.setSeries(series)
-          // this.$refs.logChart.endLoading()
-        })
       }
     },
     queryChartData () {
-      // this.$refs.exploreChart && this.$refs.exploreChart.startLoading()
       if (this.expressions.length > 0) {
         const requestArr = []
         const promqlInputIndexs = []
@@ -4112,20 +4087,15 @@ export default {
         // 过滤掉state为0的元素
         const step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1]))
         this.expressions.forEach((item, index) => {
-          if (item != '' && this.promqlKeys[index].state && !this.promqlKeys[index].matrix && this.promqlKeys[index].queryType == 1) {
+          if (item != '' && this.promqlKeys[index].state && this.promqlKeys[index].queryType == 1) {
             let queryStep = step
             if (this.promqlKeys[index].step) {
               queryStep = this.promqlKeys[index].step + 's'
             }
             promqlInputIndexs.push(index)
             queryExpression.push(item)
-            this.promqlKeys[index].expression = item
-            if (this.promqlKeys[index].queryType === 2) {
-              requestArr.push(this.$get('/prom/api/v1/query_instant?query=' + encodeURIComponent(item) + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))))
-            } else {
-              this.showChart = true
-              requestArr.push(this.$get('/prom/api/v1/query_range?query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&step=' + queryStep + '&nullType=null'))
-            }
+            this.showChart = true
+            requestArr.push(this.$get('/prom/api/v1/query_range?query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&step=' + queryStep + '&nullType=null'))
           }
         })
         if (requestArr.length > 0) {
@@ -4137,8 +4107,6 @@ export default {
         this.uplotChartInfo.unit = this.chartUnit
         this.uplotChartInfo.param.stack = this.isStack
         axios.all(requestArr).then(res => {
-          const series = []
-          const legend = []
           if (res.length > 0) {
             res.forEach((response, index) => {
               const promqlIndex = promqlInputIndexs[index]
@@ -4150,56 +4118,6 @@ export default {
                 }
                 this.uplotChartData.push(response.data.result)
                 this.uplotChartInfo.elements.push(this.promqlKeys[promqlInputIndexs[index]])
-                // data.forEach((result, i) => {
-                //   const seriesItem = {
-                //     type: 'line',
-                //     name: '',
-                //     symbol: 'emptyCircle', // 去掉点
-                //     symbolSize: 8,
-                //     showSymbol: false,
-                //     smooth: 0.2, // 曲线变平滑
-                //     data: [],
-                //     lineStyle: {
-                //       width: 2,
-                //       opacity: 0.9
-                //     },
-                //     emphasis: {
-                //       focus: 'none'
-                //     },
-                //     blur: {
-                //       lineStyle: {
-                //         opacity: 0.3
-                //       },
-                //       itemStyle: {
-                //         opacity: 1
-                //       }
-                //     }
-                //   }
-                //   let legendName = ''
-                //   seriesItem.data = result.values.map((item) => {
-                //     return [item[0] * 1000, item[1]]
-                //   })
-                //   if (result.metric && Object.keys(result.metric).length > 0) {
-                //     const metric = Object.assign({}, result.metric)
-                //     seriesItem.name += metric.__name__ ? metric.__name__ : ''
-                //     seriesItem.name += '{'
-                //     delete metric.__name__
-                //     for (const key in metric) {
-                //       seriesItem.name += key + '=' + '"' + metric[key] + '",'
-                //     }
-                //     legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
-                //     legendName += '}'
-                //   } else {
-                //     legendName = queryExpression[index]
-                //   }
-                //   seriesItem.name = legendName + '-' + index
-                //   const tagKeysArr = Object.keys(result.metric)
-                //   // console.log(queryExpression[index], this.expressions[index], tagKeysArr)
-                //   const legendAlias = this.handleLegendAlias(legendName, this.promqlKeys[promqlInputIndexs[index]].legend, tagKeysArr)
-                //   series.push(seriesItem)
-                //   legend.push({ name: seriesItem.name, alias: legendAlias, isGray: false })
-                // })
-
                 this.$refs['promql-' + promqlIndex][0].setError('')
               } else {
                 if (response.error) {
@@ -4211,16 +4129,7 @@ export default {
                 }
               }
             })
-            // this.series = series
-            // this.$refs.exploreChart?.setLegend(legend)
-            // this.$refs.exploreChart?.setRandomColors(series.length)
-            // if (!series.length) {
-            //   series = ''
-            // }
-            // this.$refs.exploreChart?.setSeries(series)
-            this.defaultChartVisible = true
           }
-          // this.$refs.exploreChart && this.$refs.exploreChart.endLoading()
         })
       }
     },
@@ -4231,7 +4140,6 @@ export default {
         this.expressions.forEach((item, index) => {
           // 过滤掉state为0的元素
           if (item !== '' && this.promqlKeys[index].state && this.promqlKeys[index].queryType == 2) {
-            // requestArr.push(this.$get('/prom/api/v1/query?query=' + encodeURIComponent(item)))
             this.showTable = true
             requestArr.push(this.$get('/prom/api/v1/query_instant?query=' + encodeURIComponent(item) + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))))
           }
@@ -4251,12 +4159,8 @@ export default {
           this.tableTitle = []
           this.tools.customTableTitle = []
 
-          // this.allMatrix = res.every(d => d.data.resultType === 'matrix')
-
           res.forEach((response, index) => {
             if (response.data && response.status === 'success') {
-              // matrix类型不请求chart接口 只展示表格数据
-              this.promqlKeys[index].matrix = response.data.resultType === 'matrix'
               const data = response.data.result
               if (data) {
                 data.forEach((result, i) => {
@@ -4290,7 +4194,6 @@ export default {
                   // 处理row模式数据
                   const rowData = this.handlerRowData(result.metric)
                   rowData.value = metrics['value#' + index]
-                  // matrix 类型数据
                   rowData.valueList = result.values.map((item, index) => {
                     const obj = {}
                     obj.value = chartDataFormat.getUnit(this.chartUnit || 2).compute(item[1], null, 2)
@@ -4328,9 +4231,7 @@ export default {
             this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
             this.tableTitle = Object.assign([], tLabels)
             this.tools.customTableTitle = Object.assign([], tLabels)
-            this.defaultTableVisible = true
           } else {
-            // this.defaultTableVisible = false;
             this.pageObj.total = 0
           }
         }
@@ -4439,10 +4340,9 @@ export default {
         }
         if (error) { return }
         if (this.showMetrics) {
-          // this.$refs.exploreChart && this.$refs.exploreChart.startLoading()
           this.showChart = false
           this.showTable = false
-          await this.queryTableData()
+          this.queryTableData()
           this.queryChartData()
           this.storeHistory()
           this.postHistory()
@@ -4842,12 +4742,24 @@ export default {
         this.$message.error(this.$t('explore.queryExpression'))
         return
       }
+      const expressions = this.promqlKeys.map((item, index) => {
+        const obj = {
+          expr: encodeURIComponent(this.expressions[index]),
+          legend: item.legend,
+          step: item.step
+        }
+        if (this.showMetrics) {
+          obj.queryType = item.queryType
+        }
+        return obj
+      })
+
       const params = {
         type: this.showMetrics ? 1 : 2,
         start: this.momentStrToTimestamp(this.filterTime[0]) / 1000,
         end: this.momentStrToTimestamp(this.filterTime[1]) / 1000,
         unit: this.chartUnit,
-        expressions: this.expressions.map(item => encodeURIComponent(item))
+        expressions: expressions
       }
       if (!this.showMetrics) {
         params.limit = this.$refs.logDetail ? this.$refs.logDetail.getLimit() : 100
@@ -4856,7 +4768,7 @@ export default {
       this.$store.dispatch('dispatchHomeLoading', true)
       let total = 10
       let loaded = 0
-      this.$get('/visual/explore/snapshot', params, {
+      this.$post('/visual/explore/snapshot', params, {}, {
         onDownloadProgress: function (progressEvent) {
           // 处理原生进度事件
           total = progressEvent.total
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
index afaadbab8..78b8da9c6 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
@@ -21,12 +21,29 @@
       <el-collapse v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
         <!--metric-->
         <template v-if="showMetrics">
-          <el-collapse-item v-if="!allMatrix" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
+          <el-collapse-item v-if="showChart" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
+            <!-- 堆叠 -->
+            <div slot="title" class="explore-table-title" style="display:flex; justify-content: flex-end;align-item:center;padding-right:30px;">
+              <span :title="$t('dashboard.dashboard.chartForm.stack')" @click.stop="changeStack" v-show="collapseValue.some(item=>item==1)" tabindex="0">
+                <i class="nz-icon nz-icon-duidiezhuzhuangtu tool__icon" :class="isStack ? 'tool__icon-active' : ''"/>
+              </span>
+            </div>
             <div class="chart-room">
-              <chart ref="exploreChart" :unit="chartUnitType" :timeRange="filterTime"></chart>
+               <uplotChart
+                  :ref="'exploreChart'"
+                  :chart-data="uplotChartData"
+                  :chart-info="uplotChartInfo"
+                  :is-fullscreen="false"
+                  :panelLock="true"
+                  :showAllData="showAllData"
+                  @loadMore="loadMore"
+                  :isFullscreen="false"
+                  :globalVariables="[]"
+                  :from="'explore'"
+                />
             </div>
           </el-collapse-item>
-          <el-collapse-item class="el-collapse-item__height" name="2" title="Table">
+          <el-collapse-item  v-if="showTable" class="el-collapse-item__height" name="2" title="Table">
             <div slot="title" class="explore-table-title">
               <span>{{tableMode==='table'?$t('dashboard.dashboard.chartForm.typeVal.table.label'):$t('explore.row')}}</span>
               <!-- 判断是否折叠 -->
@@ -151,8 +168,25 @@
         <!--log-->
         <template v-else>
           <el-collapse-item v-if="showTab.indexOf('1') > -1" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
+            <!-- 堆叠 -->
+            <div slot="title" class="explore-table-title" style="display:flex; justify-content: flex-end;align-item:center;padding-right:30px;">
+              <span :title="$t('dashboard.dashboard.chartForm.stack')" @click.stop="changeStack" v-show="collapseValue.some(item=>item==2)" tabindex="0">
+                <i class="nz-icon nz-icon-duidiezhuzhuangtu tool__icon" :class="isStack ? 'tool__icon-active' : ''"/>
+              </span>
+            </div>
             <div class="chart-room">
-              <chart ref="logChart" :unit="chartUnitType" v-my-loading="chartLoading" :timeRange="filterTime"></chart>
+              <uplotChart
+                :ref="'exploreChart'"
+                :chart-data="uplotChartData"
+                :chart-info="uplotChartInfoLog"
+                :is-fullscreen="false"
+                :panelLock="true"
+                :showAllData="showAllData"
+                @loadMore="loadMore"
+                :isFullscreen="false"
+                :globalVariables="[]"
+                :from="'explore'"
+              />
             </div>
           </el-collapse-item>
           <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
@@ -182,6 +216,9 @@ import chart from '@/components/page/dashboard/overview/chart'
 import logTab from '@/components/page/dashboard/explore/logTab'
 import chartUnit from '@/components/common/chartUnit'
 import copy from '@/components/common/copy'
+import uplotChart from '@/components/chart/chart.vue'
+import lineData from '@/components/chart/defaultLineData'
+import logData from '@/components/chart/defaultLogData'
 const dataJson = window.dataJson || {}
 export default {
   name: 'exploreItemHtml',
@@ -196,7 +233,8 @@ export default {
     chart,
     logTab,
     'chart-unit': chartUnit,
-    copy
+    copy,
+    uplotChart
   },
   data () {
     return {
@@ -226,9 +264,15 @@ export default {
       storedTableData: [],
       tableMode: 'table',
       expandResults: false,
-      allMatrix: false, // metric是否全部为matrix类型
       rowData: [],
-      supplementaryData: []
+      showChart: false,
+      showTable: false,
+      uplotChartInfo: lineData,
+      uplotChartInfoLog: logData,
+      uplotChartData: [],
+      showAllData: false,
+      supplementaryData: [],
+      isStack: false
     }
   },
   mounted () {
@@ -246,6 +290,16 @@ export default {
     window.addEventListener('resize', this.logsCollapseChange)
   },
   methods: {
+    loadMore () {
+      this.showAllData = true
+      this.$nextTick(() => {
+        this.$refs.exploreChart.$children[0].initChart()
+      })
+    },
+    changeStack () {
+      this.isStack = !this.isStack
+      this.$refs.exploreChart.$children[0].changeStack()
+    },
     handlerRowData (data) {
       const metric = this.$lodash.cloneDeep(data)
       const metricName = metric.__name__ || ''
@@ -301,6 +355,7 @@ export default {
     },
     stateChange (index) {
       this.dataJson.data[index].state = !this.dataJson.data[index].state
+      this.$forceUpdate()
       this.expressionChange()
     },
     expressionChange () {
@@ -308,7 +363,8 @@ export default {
       this.pageObj.pageNo = 1
       if (this.showMetrics) {
         if (this.dataJson.data && this.dataJson.data.length >= 1) {
-          this.$refs.exploreChart && this.$refs.exploreChart.startLoading()
+          this.showChart = false
+          this.showTable = false
           this.queryTableData()
           this.queryChartData()
           this.storeHistory()
@@ -331,23 +387,18 @@ export default {
         this.tableData = []
         this.tableTitle = []
         this.tools.customTableTitle = []
-
-        this.allMatrix = res.filter((r, i) => r.state).every(d => d.data.resultType === 'matrix' && d.api === 'query')
-
         res.forEach((response, index) => {
           if (!response.state) {
             return
           }
-          if (response.data) {
+          if (response.data && response.data.resultType !== 'matrix') {
+            this.showTable = true
             const data = response.data.result
             if (data) {
               data.forEach((result, i) => {
                 const metrics = Object.assign({}, result.metric)
-                if (!Array.isArray(result.values)) {
-                  const val = result
-                  result = {
-                    values: ['', val]
-                  }
+                if (!Array.isArray(result.values) && Array.isArray(result.value)) {
+                  result.values = [result.value]
                 }
                 this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnitType || 2).compute(result.values[0][1], null, 2))
                 this.$set(metrics, 'time', bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000)))
@@ -364,37 +415,27 @@ export default {
                     tLabels.push(label)
                   }
                 }
-                if (response.api === 'query') {
-                  result.values.forEach(item => {
-                    tData.push({
-                      ...metrics,
-                      ['value#' + index]: chartDataFormat.getUnit(this.chartUnit || 2).compute(item[1], null, 2),
-                      time: bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000))
-                    })
+                result.values.forEach(item => {
+                  tData.push({
+                    ...metrics,
+                    ['value#' + index]: chartDataFormat.getUnit(this.chartUnitType || 2).compute(item[1], null, 2),
+                    time: bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000))
                   })
-                } else {
-                  tData.push(metrics)
-                }
+                })
 
                 // 处理row模式数据
                 const rowData = this.handlerRowData(result.metric)
                 rowData.value = metrics['value#' + index]
-                // matrix 类型数据
-                if (response.data.resultType === 'matrix' && response.api === 'query') {
-                  rowData.valueList = result.values.map((item, index) => {
-                    const obj = {}
-                    obj.value = chartDataFormat.getUnit(this.chartUnitType || 2).compute(item[1], null, 2)
-                    obj.timestamp = '@' + item[0]
-                    obj.time = bus.timeFormate(bus.computeTimezone(item[0] * 1000))
-                    if (index) { // 与前一个数据间隔
-                      obj.interval = '+' + parseInt(item[0] - result.values[index - 1][0]).toString()
-                    }
-                    return obj
-                  })
-                } else {
-                  rowData.time = bus.timeFormate(bus.computeTimezone(result.values[0][0] * 1000))
-                  rowData.timestamp = '@' + result.values[0][0]
-                }
+                rowData.valueList = result.values.map((item, index) => {
+                  const obj = {}
+                  obj.value = chartDataFormat.getUnit(this.chartUnitType || 2).compute(item[1], null, 2)
+                  obj.timestamp = '@' + item[0]
+                  obj.time = bus.timeFormate(bus.computeTimezone(item[0] * 1000))
+                  if (index) { // 与前一个数据间隔
+                    obj.interval = '+' + parseInt(item[0] - result.values[index - 1][0]).toString()
+                  }
+                  return obj
+                })
                 this.rowData.push(rowData)
               })
             }
@@ -421,98 +462,37 @@ export default {
           this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
           this.tableTitle = Object.assign([], tLabels)
           this.tools.customTableTitle = Object.assign([], tLabels)
-          this.defaultTableVisible = true
         } else {
-          // this.defaultTableVisible = false;
           this.pageObj.total = 0
         }
       }
       this.tools.loading = false
     },
     queryChartData () {
-      this.$refs.exploreChart && this.$refs.exploreChart.startLoading()
-      let res = this.dataJson.data
-      let series = []
-      const promqlInputIndexs = []
-      const legend = []
-      res = res.filter((r, i) => r.state && r.api === 'query_range')
+      const res = this.dataJson.data
       if (res.length > 0) {
+        this.uplotChartData = []
+        this.uplotChartInfo.elements = []
+        this.uplotChartInfo.unit = this.chartUnitType || 2
+        this.uplotChartInfo.param.stack = this.isStack
         res.forEach((response, index) => {
-          const promqlIndex = promqlInputIndexs[index]
-          if (response.data) {
+          if (!response.state) {
+            return
+          }
+          if (response.data && response.data.resultType === 'matrix') {
+            this.showChart = true
             const data = response.data.result
-            if ((!data || data.length < 1) && response.message) {
-              this.$refs['promql-' + promqlIndex][0].setError(response.message)
+            if (!data || data.length < 1) {
               return
             }
-            data.forEach((result, i) => {
-              const seriesItem = {
-                type: 'line',
-                name: '',
-                symbol: 'emptyCircle', // 去掉点
-                symbolSize: 8,
-                showSymbol: false,
-                smooth: 0.2, // 曲线变平滑
-                data: [],
-                lineStyle: {
-                  width: 2,
-                  opacity: 0.9
-                },
-                emphasis: {
-                  focus: 'none'
-                },
-                blur: {
-                  lineStyle: {
-                    opacity: 0.3
-                  },
-                  itemStyle: {
-                    opacity: 1
-                  }
-                }
-              }
-              let legendName = ''
-              seriesItem.data = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              if (result.metric && Object.keys(result.metric).length > 0) {
-                const metric = Object.assign({}, result.metric)
-                seriesItem.name += metric.__name__ ? metric.__name__ : ''
-                seriesItem.name += '{'
-                delete metric.__name__
-                for (const key in metric) {
-                  seriesItem.name += key + '=' + '"' + metric[key] + '",'
-                }
-                legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
-                legendName += '}'
-              } else {
-                legendName = this.dataJson.data[index].expression
-              }
-              seriesItem.name = legendName + '-' + index
-              series.push(seriesItem)
-              legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
+            this.uplotChartData.push(response.data.result)
+            this.uplotChartInfo.elements.push({
+              expression: response.expression,
+              legend: response.legend
             })
-
-            // this.$refs['promql-' + promqlIndex][0].setError('')
-          } else {
-            if (response.error) {
-              // this.$refs['promql-' + promqlIndex][0].setError(response.error)
-            } else {
-              // this.$refs['promql-' + promqlIndex][0].setError(response)
-            }
           }
         })
-
-        this.$nextTick(() => {
-          this.$refs.exploreChart.setLegend(legend)
-          this.$refs.exploreChart.setRandomColors(series.length)
-          if (!series.length) {
-            series = ''
-          }
-          this.$refs.exploreChart.setSeries(series)
-          this.defaultChartVisible = true
-        })
       }
-      this.$refs.exploreChart && this.$refs.exploreChart.endLoading()
     },
     storeHistory () {
       const expire = 24
@@ -644,89 +624,34 @@ export default {
           }
           this.$nextTick(() => {
             this.logData = logData
-            hasGraph && this.loadLogGraph()
+            const elements = res.map(item => {
+              return {
+                expression: item.expression,
+                legend: item.legend
+              }
+            })
+            hasGraph && this.loadLogGraph(elements)
           })
         }
       }
     },
-    loadLogGraph () {
+    loadLogGraph (elements) {
       const graphData = this.logData.filter(l => l.resultType === 'matrix')
       if (graphData && graphData.length > 0) {
-        this.$refs.logChart.startLoading()
-        const promqlInputIndexs = []
-        const queryExpression = []
-        let series = []
-        const legend = []
-        this.dataJson.data.forEach((item, index) => {
-          if (item.expression !== '' && item.state) {
-            promqlInputIndexs.push(index)
-            queryExpression.push(item.expression)
-          }
-        })
+        this.uplotChartData = []
+        this.uplotChartInfoLog.elements = []
+        this.uplotChartInfoLog.unit = this.chartUnitType || 2
+        this.uplotChartInfoLog.param.stack = this.isStack
         this.logData.forEach((response, index) => {
           if (response.resultType === 'matrix') {
             const data = response.result
             if (!data || data.length < 1) {
               return
             }
-            data.forEach((result, i) => {
-              const seriesItem = {
-                type: 'line',
-                name: '',
-                symbol: 'emptyCircle', // 去掉点
-                symbolSize: 8,
-                showSymbol: false,
-                smooth: 0.2, // 曲线变平滑
-                data: [],
-                lineStyle: {
-                  width: 2,
-                  opacity: 0.9
-                },
-                emphasis: {
-                  focus: 'none'
-                },
-                blur: {
-                  lineStyle: {
-                    opacity: 0.3
-                  },
-                  itemStyle: {
-                    opacity: 1
-                  }
-                }
-              }
-              let legendName = ''
-              seriesItem.data = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              if (result.metric && Object.keys(result.metric).length > 0) {
-                const metric = Object.assign({}, result.metric)
-                seriesItem.name += metric.__name__ ? metric.__name__ : ''
-                seriesItem.name += '{'
-                delete metric.__name__
-                for (const key in metric) {
-                  seriesItem.name += key + '=' + '"' + metric[key] + '",'
-                }
-                legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
-                legendName += '}'
-              } else {
-                legendName = queryExpression[index]
-              }
-              seriesItem.name = legendName + '-' + index
-              series.push(seriesItem)
-              legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
-            })
+            this.uplotChartData.push(data)
           }
         })
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          this.$refs.logChart.setLegend(legend)
-          this.$refs.logChart.setRandomColors(series.length)
-          if (!series.length) {
-            series = ''
-          }
-          this.$refs.logChart.setSeries(series)
-          this.$refs.logChart.endLoading()
-        })
+        this.uplotChartInfoLog.elements = elements
       }
     },
     updateCustomTableTitle (custom) {
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index dbccd1970..9a9a1bb45 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -161,9 +161,13 @@ export function get (url, params, configs) {
   })
 }
 
-export function post (url, params, headers) {
+export function post (url, params, headers, configs) {
+  const config = {
+    headers,
+    ...configs
+  }
   return new Promise(resolve => {
-    axios.post(url, params, { headers: headers }).then(response => {
+    axios.post(url, params, config).then(response => {
       if (url.indexOf('/sys/license/gen') !== -1) {
         resolve({
           data: response.data,