From c507ed41556ea6e65e7a05fa216921060366b9e7 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 14 Sep 2022 11:14:45 +0800
Subject: [PATCH] =?UTF-8?q?stye=EF=BC=9A=20=E4=BF=AE=E6=94=B9=20Process=20?=
 =?UTF-8?q?state=20tooltip=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/mixin/exportHtml.js |   6 +-
 .../common/table/asset/assetProcessTable.vue  |   2 +-
 .../page/dashboard/explore/exploreItem.vue    |  99 ++++++--
 .../dashboard/explore/exploreItemHtml.vue     | 223 +++++++++++++-----
 nezha-fronted/src/entrance/exportHtml/App.vue |   8 +-
 5 files changed, 247 insertions(+), 91 deletions(-)

diff --git a/nezha-fronted/src/components/common/mixin/exportHtml.js b/nezha-fronted/src/components/common/mixin/exportHtml.js
index 40e56100b..150798a03 100644
--- a/nezha-fronted/src/components/common/mixin/exportHtml.js
+++ b/nezha-fronted/src/components/common/mixin/exportHtml.js
@@ -9,8 +9,8 @@ export default {
     exportToHtml (name) {
       const vars = this.$store.getters.getVariablesArr.map(item => {
         return {
-          "name": item.name,
-          "value": item.checked.join('|')
+          name: item.name,
+          value: item.checked.join('|')
         }
       })
       const params = {
@@ -52,7 +52,7 @@ export default {
           window.URL.revokeObjectURL(href) // 释放blob对象
         }
         this.$refs.topTool.closeDialog()
-      }, error => {
+      }, () => {
         this.$message.error('123')
       })
     }
diff --git a/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue b/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue
index b363fca20..173dd025d 100644
--- a/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue
@@ -39,7 +39,7 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'commandLine'">
           <div style="height:24px;display: flex;align-items: center;">
-             <el-popover trigger="hover" placement="top" v-if="typeof scope.row.state != 'undefined' && scope.row.state != null">
+             <el-popover trigger="hover" placement="right" v-if="typeof scope.row.state != 'undefined' && scope.row.state != null">
                 <div>
                   <span class="metirc-tip-list">{{$t('overall.state')}}&nbsp;:&nbsp;&nbsp;</span><span>{{ scope.row.state }}</span>
                 </div>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index bcddc30b7..303938fa9 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -32,26 +32,41 @@
              <!-- <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template> -->
               <template slot="added-text">{{$t('overall.query')}}</template>
             </pick-time>
-            <button v-if="showMetrics"
-              id="explore-save-chart"
-              v-has="'main_add'"
-              :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
-              :disabled="saveDisabled"
-              class="top-tool-btn top-tool-btn--text"
-              type="button"
-              @click="saveChart">
-              {{$t('dashboard.metric.saveChart')}}
-            </button>
-            <button v-else
-              id="explore-save-chart-logs"
-              v-has="'main_add'"
-              :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
-              :disabled="saveDisabled"
-              class="top-tool-btn top-tool-btn--text"
-              type="button"
-              @click="saveChartLogs">
-              {{$t('dashboard.metric.saveChart')}}
-            </button>
+            <el-dropdown trigger="click" :size="'medium'">
+              <button id="more" class="top-tool-btn" :title="$t('overall.more')">
+                <i class="nz-icon nz-icon-more2"></i>
+              </button>
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+                <el-dropdown-item :disabled="saveDisabled">
+                  <div>
+                    <i class="nz-icon nz-icon-add" />
+                    <span v-if="showMetrics"
+                          id="explore-save-chart"
+                          v-has="'main_add'"
+                          :class="{'btn-disabled-cursor-not-allowed' : saveDisabled}"
+                          :disabled="saveDisabled"
+                          class="top-tool-btn top-tool-btn--text"
+                          type="button"
+                          @click="saveChart">
+                    {{$t('dashboard.metric.saveChart')}}
+                  </span>
+                    <span v-else
+                          id="explore-save-chart-logs"
+                          v-has="'main_add'"
+                          :class="{'btn-disabled-cursor-not-allowed' : saveDisabled}"
+                          :disabled="saveDisabled"
+                          class="top-tool-btn top-tool-btn--text"
+                          type="button"
+                          @click="saveChartLogs">
+                    {{$t('dashboard.metric.saveChart')}}
+                  </span>
+                  </div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div id="chart-export-html" @click="exportToHtml"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
         </div>
         <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
@@ -1662,6 +1677,50 @@ export default {
       }
       letter += self.letter[num % 26]
       return letter
+    },
+    exportToHtml (name) {
+      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]
+      }
+      this.$get('/visual/explore/snapshot', params, 'blob').then(res => {
+        const self = this
+        let fileName = this.showMetrics ? 'Metrics explore' : 'Logs explore'
+        const resFileName = ''
+        if (resFileName) {
+          fileName = resFileName
+        }
+        if (res.type == 'application/json') {
+          const reader = new FileReader() // 创建一个FileReader实例
+          reader.readAsText(res, 'utf-8') // 读取文件,结果用字符串形式表示
+          reader.onload = function () { // 读取完成后,**获取reader.result**
+            const { msg } = JSON.parse(reader.result)
+            self.$message.error(msg) // 弹出错误提示
+          }
+          return
+        }
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName + '.html')
+        } else {
+          const blob = new Blob([res])
+          const link = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 下载链接
+          link.href = href
+          link.download = fileName + '.html' // 下载后文件名
+          document.body.appendChild(link)
+          link.click() // 点击下载
+          document.body.removeChild(link) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }
+        this.$refs.topTool.closeDialog()
+      }, () => {
+        this.$message.error('123')
+      })
     }
   },
   watch: {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
index fd05bbe73..20c5b0005 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
@@ -1,11 +1,21 @@
 <template>
-  <div  class="explore list-page">
-    <div>
-      <span>{{dataJson.type}}</span>
-      <span>{{dataJson.unit}}</span>
+  <div  class="explore list-page" style="background: #f9f9f9;padding: 10px 15px;">
+    <div style="display: flex;justify-content: space-between">
+      <span>{{dataJson.type == 1 ? 'Metric expression' : 'Log expression'}}</span>
+      <span>
+       <chart-unit v-model="chartUnit" class="margin-r-10"></chart-unit>
+      </span>
     </div>
-    <div v-for="(item, index) in dataJson.data" :key = 'index'>
-      {{item.expression}}
+    <div v-for="(item, index) in dataJson.data" :key = 'index' style="display: flex;margin-bottom: 10px">
+      <div style="flex: 1;margin-right: 10px;border: 1px solid #333;border-radius: 2px;">{{item.expression}}</div>
+      <button
+        class="top-tool-btn"
+        :title="item.state?$t('overall.enabled'):$t('profile.close')"
+        @click="stateChange(index)"
+      >
+        <i  v-if="item.state" class="nz-icon nz-icon-mimakejian"></i>
+        <i v-else class="nz-icon nz-icon-mimabukejian" style="fontSize:16px"></i>
+      </button>
     </div>
     <el-collapse v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
       <!--metric-->
@@ -99,14 +109,21 @@ import chartDataFormat from '@/components/chart/chartDataFormat'
 import bus from '@/libs/bus'
 import chart from '@/components/page/dashboard/overview/chart'
 import logTab from '@/components/page/dashboard/explore/logTab'
-import axios from "axios";
+import chartUnit from '@/components/common/chartUnit'
 
 const dataJson = window.dataJson || {}
 export default {
   name: 'exploreItemHtml',
+  props: {
+    triggerButtonClass: { // 触发下拉事件的按钮的class
+      type: String,
+      default: 'top-tool-btn'
+    }
+  },
   components: {
     chart,
-    logTab
+    logTab,
+    'chart-unit': chartUnit
   },
   data () {
     return {
@@ -125,6 +142,8 @@ export default {
         showCustomTableTitle: false, // 自定义列弹框是否显示
         customTableTitle: [] // 自定义列工具的数据
       },
+      tableId: 'explore',
+      tableTitle: [],
       tableData: [],
       historyParam: { useHistory: true, key: 'expore-history' },
       showTab: ['1', '2'],
@@ -134,6 +153,15 @@ export default {
     }
   },
   mounted () {
+    dataJson.data.forEach(item => {
+      item.state = true
+    })
+    if (this.dataJson.type == 1) {
+      this.showMetrics = true
+    } else {
+      this.showMetrics = false
+    }
+    this.chartUnit = this.dataJson.unit || 1
     this.expressionChange()
   },
   methods: {
@@ -158,6 +186,10 @@ export default {
       this.pageObj.pageSize = val
       this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
     },
+    stateChange (index) {
+      this.dataJson.data[index].state = !this.dataJson.data[index].state
+      this.expressionChange()
+    },
     expressionChange () {
       this.filterTime = [dataJson.start, dataJson.end]
       this.pageObj.pageNo = 1
@@ -182,6 +214,9 @@ export default {
         this.tableData = []
         this.tableTitle = []
         res.forEach((response, index) => {
+          if (!response.state) {
+            return
+          }
           if (response.data) {
             const data = response.data.result
             if (data) {
@@ -253,6 +288,9 @@ export default {
       const legend = []
       if (res.length > 0) {
         res.forEach((response, index) => {
+          if (!response.state) {
+            return
+          }
           const promqlIndex = promqlInputIndexs[index]
           console.log(response)
           if (response.data) {
@@ -401,74 +439,133 @@ export default {
     },
     queryLogData (limit) { // log的chart和table是一个请求
       this.chartLoading = true
-      if (!limit) {
-        limit = this.$refs.logDetail ? this.$refs.logDetail.getLimit() : 100
-      }
       this.$refs.logDetail && this.$refs.logDetail.resetOperation()
-      if (this.expressions.length > 0) {
-        const requestArr = []
-        // 过滤掉state为0的元素
-        this.expressions.forEach((item, index) => {
-          if (item != '' && this.promqlKeys[index].state) {
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&limit=' + limit))
+      let res = this.dataJson.data
+      if (res.length > 0) {
+        this.chartLoading = false
+        const errorRowIndex = []
+        res.forEach((r, i) => {
+          if (!r.state) {
+            return
+          }
+          if (typeof r === 'string') {
+            errorRowIndex.push(i)
           }
         })
-        if (requestArr.length > 0) {
-          this.showIntroduce = false
-          this.saveDisabled = false
+        if (errorRowIndex.length > 0) {
+          this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
+          res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
         }
-        axios.all(requestArr).then(res => {
-          this.chartLoading = false
-          const errorRowIndex = []
-          res.forEach((r, i) => {
-            if (typeof r === 'string') {
-              errorRowIndex.push(i)
-            }
-          })
-          if (errorRowIndex.length > 0) {
-            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
-            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
+        res = res.filter((r, i) => r.state)
+        if (res.length > 0) {
+          const logData = res.map(r => r.data)
+          if (logData[0].result.length > 0) {
+            this.logTabNoData = false
+          } else {
+            this.logTabNoData = true
           }
-          if (res.length > 0) {
-            const logData = res.map(r => r.data)
-            if (logData[0].result.length > 0) {
-              this.logTabNoData = false
-            } else {
-              this.logTabNoData = true
+          const hasGraph = logData.some(d => d.resultType === 'matrix')
+          const hasLog = logData.some(d => d.resultType === 'streamsFormat')
+          const graphTabIndex = this.showTab.indexOf('1')
+          if (hasGraph) {
+            if (graphTabIndex === -1) {
+              this.showTab.push('1')
             }
-            const hasGraph = logData.some(d => d.resultType === 'matrix')
-            const hasLog = logData.some(d => d.resultType === 'streamsFormat')
-            const graphTabIndex = this.showTab.indexOf('1')
-            if (hasGraph) {
-              if (graphTabIndex === -1) {
-                this.showTab.push('1')
-              }
-            } else {
-              if (graphTabIndex > -1) {
-                this.showTab.splice(graphTabIndex, 1)
-              }
+          } else {
+            if (graphTabIndex > -1) {
+              this.showTab.splice(graphTabIndex, 1)
             }
-            const logTabIndex = this.showTab.indexOf('2')
-            if (hasLog) {
-              if (logTabIndex === -1) {
-                this.showTab.push('2')
-              }
-            } else {
-              if (logTabIndex > -1) {
-                this.showTab.splice(logTabIndex, 1)
-              }
+          }
+          const logTabIndex = this.showTab.indexOf('2')
+          if (hasLog) {
+            if (logTabIndex === -1) {
+              this.showTab.push('2')
             }
-            this.$nextTick(() => {
-              this.logData = logData
-              hasGraph && this.loadLogGraph()
+          } else {
+            if (logTabIndex > -1) {
+              this.showTab.splice(logTabIndex, 1)
+            }
+          }
+          this.$nextTick(() => {
+            this.logData = logData
+            hasGraph && this.loadLogGraph()
+          })
+        }
+      }
+    },
+    loadLogGraph () {
+      const graphData = this.logData.filter(l => l.resultType === 'matrix')
+      if (graphData && graphData.length > 0) {
+        this.$refs.logChart.startLoading()
+        const queryExpression = []
+        let series = []
+        const legend = []
+        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 = {
+                name: '',
+                symbol: 'emptyCircle', // 去掉点
+                symbolSize: [2, 2],
+                showSymbol: false,
+                smooth: 0.2, // 曲线变平滑
+                data: [],
+                lineStyle: {
+                  width: 1,
+                  opacity: 0.9
+                },
+                type: 'line'
+              }
+              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 })
             })
           }
-        }).catch(e => {
-          this.chartLoading = false
-          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
+        })
+        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()
         })
       }
     },
+    updateCustomTableTitle (custom) {
+      this.tools.customTableTitle = custom
+      this.$refs.exploreTable.doLayout()
+    }
+  },
+  watch: {
+    chartUnit: {
+      handler (n, o) {
+        this.expressionChange()
+      }
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/entrance/exportHtml/App.vue b/nezha-fronted/src/entrance/exportHtml/App.vue
index 27c2579f5..b9cedf913 100644
--- a/nezha-fronted/src/entrance/exportHtml/App.vue
+++ b/nezha-fronted/src/entrance/exportHtml/App.vue
@@ -13,12 +13,12 @@
 
             <div style="display: flex;flex-direction: column">
 <!--              <i class="nz-icon nz-icon-arrow-down"/>-->
-              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right" v-if="!dataJson.unit"> {{dataJson.panel.data.name}} </div>
-              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right" v-if="dataJson.unit"> Explore </div>
+              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right" v-if="!dataJson.type"> {{dataJson.panel.data.name}} </div>
+              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right" v-if="dataJson.type"> Explore </div>
               <span>  {{dateFormat(dataJson.start * 1000)}} - {{dateFormat(dataJson.end * 1000)}} ({{dataJson.timezone}})</span>
             </div>
           </div>
-          <div v-if="!dataJson.unit" id="dashboardScrollbar" class="box-content"  ref="dashboardScrollbar" style='overflow:hidden; overflow-y: auto;height: calc(100% - 60px);display: flex;flex-direction: column'>
+          <div v-if="!dataJson.type" id="dashboardScrollbar" class="box-content"  ref="dashboardScrollbar" style='overflow:hidden; overflow-y: auto;height: calc(100% - 60px);display: flex;flex-direction: column'>
             <chartList
               ref="chartList"
               name="panel"
@@ -38,7 +38,7 @@
               :loading="chartListLoading"
             />
           </div>
-          <div v-if="dataJson.unit" id="explore" class="explores">
+          <div v-if="dataJson.type" id="explore" class="explores">
             <exploreItem
               ref="exploreItem"
               :key="dataJson.type"