stye：修改 Process state tooltip位置

2022-09-14 11:14:45 +08:00
parent 688503a1f7
commit c507ed4155
5 changed files with 247 additions and 91 deletions
--- 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')
      })
    }
--- 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>
--- 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"
+            <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="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
+                          :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')}}
-            </button>
-            <button v-else
+                  </span>
+                    <span v-else
                          id="explore-save-chart-logs"
                          v-has="'main_add'"
-              :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
+                          :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')}}
-            </button>
+                  </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: {
--- 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,26 +439,15 @@ 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))
-          }
-        })
-        if (requestArr.length > 0) {
-          this.showIntroduce = false
-          this.saveDisabled = false
-        }
-        axios.all(requestArr).then(res => {
+      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)
          }
@@ -429,6 +456,7 @@ export default {
          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) {
@@ -463,12 +491,81 @@ export default {
            hasGraph && this.loadLogGraph()
          })
        }
-        }).catch(e => {
-          this.chartLoading = false
-          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
+      }
+    },
+    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 })
+            })
+          }
+        })
+        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>
--- 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"