NEZ-2870 fix：修复explore snapshot导出结果未支持table / row 切换

2023-06-13 18:07:24 +08:00
parent 5c884bf12b
commit 4905efdb02
6 changed files with 179 additions and 75 deletions
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -113,7 +113,7 @@
            ></promql-input>
          </template>
        </div>
-        <div ref="scrollWrap" style="position: relative;z-index: 1;height: auto; padding: 0 20px 10px;">
+        <div style="position: relative;z-index: 1;height: auto; padding: 0 20px 10px;">
          <el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
            <!--metric-->
            <template v-if="showMetrics">
@@ -3535,8 +3535,6 @@ import logTab from './logTab'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import copy from '@/components/common/copy'
-import { Loading } from 'element-ui'
-
 export default {
  name: 'exploreItem',
  components: {
@@ -3993,13 +3991,6 @@ export default {
                  }
                  data.forEach((result, i) => {
                    let metrics = Object.assign({}, result.metric)
-                    // if (!Array.isArray(result.value)) {
-                    //   const val = result
-                    //   result = {
-                    //     metric: {},
-                    //     value: ['', val]
-                    //   }
-                    // }
                    this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit || 2).compute(result.value[1], null, 2))
                    this.$set(metrics, 'time', bus.timeFormate(bus.computeTimezone(result.value[0] * 1000)))
                    for (const key in metrics) {
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
@@ -1,5 +1,5 @@
 <template>
-  <div  class="explore list-page" style="background: #fffffe;padding: 10px 15px;">
+  <div  class="explore list-page" style="background: #fffffe;padding: 10px 15px;overflow-y: auto;">
    <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
      <span>{{dataJson.type == 1 ? 'Metric expression' : 'Log expression'}}</span>
      <span>
@@ -27,18 +27,24 @@
        </el-collapse-item>
        <el-collapse-item class="el-collapse-item__height" name="2" title="Table">
          <div slot="title" class="explore-table-title">
-            {{$t('dashboard.dashboard.chartForm.typeVal.table.label')}}
+            <span>{{tableMode==='table'?$t('dashboard.dashboard.chartForm.typeVal.table.label'):$t('explore.row')}}</span>
+            <!-- 判断是否折叠 -->
+            <div class="tableMode" v-show="collapseValue.some(item=>item==2)">
+              <div class="tableMode-item" :class="{'active':tableMode==='table'}" @click.stop="tableMode='table'" tabindex="0">{{$t('dashboard.dashboard.chartForm.typeVal.table.label')}}</div>
+              <div class="tableMode-item" :class="{'active':tableMode==='row'}" @click.stop="tableMode='row'" tabindex="0">{{$t('explore.row')}}</div>
+            </div>
            <i
+              v-if="tableMode==='table'"
              class="nz-icon-gear nz-icon"
-              style="position: absolute;right: 10px;top: 8px"
+              style="position: absolute;right: 0px;top: 0px"
              @click.stop="tools.showCustomTableTitle = true"
              :title="$t('overall.selectColumns')"
-            >
-            </i>
+              tabindex="0"
+            ></i>
            <!-- 自定义table列 -->
            <transition name="el-zoom-in-top">
              <element-set
-                @click.stop
+                @click.stop="()=>{}"
                v-if="tools.showCustomTableTitle"
                :tableId="tableId"
                ref="customTableTitle"
@@ -50,14 +56,15 @@
              ></element-set>
            </transition>
          </div>
-          <!-- 自定义table列 -->
+          <!-- table模式 -->
+          <template v-if="tableMode==='table'">
            <div class="nz-table-list explore-table">
              <el-table
                ref="exploreTable"
                v-my-loading="tools.loading"
                class="metric-table"
                :data="tableData"
-              border
+                :border="false"
                :header-cell-class-name="({ column }) => column.property === 'gear' ? 'explore-table-gear' : ''"
                tooltip-effect="light">
                <el-table-column
@@ -67,7 +74,7 @@
                  :label="item.label"
                  :prop="item.prop"
                  :resizable="false"
-                min-width="110px"
+                  :min-width="110"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope" :column="item">
@@ -88,6 +95,63 @@
              </el-table>
            </div>
            <pagination ref="Pagination" :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+          </template>
+          <!-- row模式 -->
+          <template v-else>
+            <div class="expand-results">
+              <div>
+                <span>{{$t('explore.expandResults')}}</span>
+                <el-switch v-model="expandResults" @click.native.stop tabindex="0"></el-switch>
+              </div>
+              <span>{{$t('explore.resultSeries')}}：{{this.storedTableData.length}}</span>
+            </div>
+            <div class="nz-table-list explore-table">
+              <el-table
+                v-my-loading="tools.loading"
+                class="row-table"
+                :class="{'expand-results-table':expandResults}"
+                :data="storedTableData"
+                :show-header="false"
+                :cell-style="{verticalAlign: 'top'}">
+                <el-table-column
+                  prop="element"
+                  :resizable="true"
+                  :min-width="1000"
+                  column-key="element"
+                  :label="$t('dashboard.dashboard.chartForm.element')">
+                  <template slot-scope="scope">
+                    <copy :copyData='scope.row.element' :showInfo='scope.row.element'>
+                      <template slot="copy-text">
+                        <span v-if="expandResults" v-html="scope.row.expandElement"></span>
+                        <span v-else v-html="scope.row.colorElement"></span>
+                      </template>
+                    </copy>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  :resizable="false"
+                  prop="value"
+                  column-key="value"
+                  :label="$t('overall.value')"
+                  :min-width="110"
+                  align="right">
+                  <template slot-scope="scope">
+                    <h2 class="expand-value" v-if="expandResults">{{$t('overall.value')}}</h2>
+                    <span>{{scope.row.value||'-'}}</span>
+                  </template>
+                </el-table-column>
+                <template slot="empty">
+                  <div v-if="!tools.loading" class="table-no-data">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#nz-icon-no-data-list"></use>
+                    </svg>
+                    <div class="table-no-data__title">No results found</div>
+                  </div>
+                  <div v-else>&nbsp;</div>
+                </template>
+              </el-table>
+            </div>
+          </template>
        </el-collapse-item>
      </template>
      <!--log-->
@@ -111,7 +175,7 @@ import bus from '@/libs/bus'
 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'
 const dataJson = window.dataJson || {}
 export default {
  name: 'exploreItemHtml',
@@ -124,7 +188,8 @@ export default {
  components: {
    chart,
    logTab,
-    'chart-unit': chartUnit
+    'chart-unit': chartUnit,
+    copy
  },
  data () {
    return {
@@ -150,7 +215,10 @@ export default {
      showTab: ['1', '2'],
      chartLoading: false,
      logData: [],
-      logTabNoData: []
+      logTabNoData: [],
+      storedTableData: [],
+      tableMode: 'table',
+      expandResults: false
    }
  },
  mounted () {
@@ -168,6 +236,38 @@ export default {
    window.addEventListener('resize', this.logsCollapseChange)
  },
  methods: {
+    handlerRowData (data) {
+      const metric = this.$lodash.cloneDeep(data)
+      const metricName = metric.__name__ || ''
+      let temp = metricName
+      const labelColor = '#588874'// #66d9ef
+      const valueColor = '#A21615'// #74e680
+      let colorTemp = `<span>${metricName}</span>`
+      delete metric.__name__
+      temp += '{'
+      colorTemp += '<span>{</span>'
+      let expandTemp = colorTemp
+      const keys = Object.keys(metric)
+      for (const index in keys) {
+        const key = keys[index]
+        temp += key + '="' + metric[key] + '",'
+        colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">"${metric[key]}"</span>`
+        expandTemp += `<span style="display:block;text-indent:1em"><span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">"${metric[key]}"</span>`
+        if (index < keys.length - 1) {
+          colorTemp += ','
+          expandTemp += ','
+        }
+        expandTemp += '</span>'
+      }
+      if (temp.endsWith(',')) {
+        temp = temp.substr(0, temp.length - 1)
+      }
+      temp += '}'
+      colorTemp += '<span>}</span>'
+      expandTemp += '<span>}</span>'
+      const rowData = { element: temp, colorElement: colorTemp, expandElement: expandTemp }
+      return rowData
+    },
    logsCollapseChange (activeNames, a, b) {
      this.$nextTick(() => {
        if (this.$refs.exploreChart) {
@@ -224,7 +324,7 @@ export default {
            const data = response.data.result
            if (data) {
              data.forEach((result, i) => {
-                const metrics = Object.assign({}, result.metric)
+                let metrics = Object.assign({}, result.metric)
                if (!Array.isArray(result.values)) {
                  const val = result
                  result = {
@@ -232,7 +332,6 @@ export default {
                  }
                }
                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)))
                for (const key in metrics) {
                  const label = {
@@ -247,6 +346,10 @@ export default {
                    tLabels.push(label)
                  }
                }
+                // 处理row模式数据
+                const rowData = this.handlerRowData(result.metric)
+                rowData.value = metrics['value#' + index]
+                metrics = Object.assign(metrics, rowData)
                tData.push(metrics)
              })
            }
--- a/nezha-fronted/src/components/page/tool/assetDiscovery.vue
+++ b/nezha-fronted/src/components/page/tool/assetDiscovery.vue
@@ -253,9 +253,8 @@ export default {
      this.rightBox.show = false
    },
    async uploadAsset (row) {
-      console.log(row)
      this.object = this.newObject()
-      this.object.name = row.name
+      this.object.name = row.sysName
      this.object.manageIp = row.ip
      this.object.dc = row.dc
      if (row.model && row.model.id) {
@@ -376,6 +375,10 @@ export default {
            this.done = response.data.task.done
            this.total = response.data.task.total
            this.process = response.data.task.process
+            // 防止数据为underfind 表格排序错误
+            response.data.list.forEach(item => {
+              item.sysName = item.sysName ? item.sysName : ''
+            })
            this.tableData.push(...response.data.list)
            // 收到数据，loading取消
            if (this.tableData.length) {
--- a/nezha-fronted/src/entrance/exportHtml/App.vue
+++ b/nezha-fronted/src/entrance/exportHtml/App.vue
@@ -38,7 +38,7 @@
              :loading="chartListLoading"
            />
          </div>
-          <div v-if="dataJson.type" id="explore" class="explores" style='overflow:hidden;background: #fffffe; overflow-y: auto;height: calc(100% - 60px);display: flex;flex-direction: column'>
+          <div v-if="dataJson.type" id="explore" class="explores" style='overflow:hidden;background: #fffffe;height: calc(100% - 72px);display: flex;flex-direction: column'>
            <exploreItem
              ref="exploreItem"
              :key="dataJson.type"
--- a/nezha-fronted/src/entrance/exportHtml/exportHtml.js
+++ b/nezha-fronted/src/entrance/exportHtml/exportHtml.js
@@ -27,12 +27,32 @@ import pickTime from '@/components/common/pickTime'
 import nzDataList from '@/components/common/table/nzDataList'
 import mainMixin from '@/components/common/mixin/mainMixinFun'
 import Pagination from '@/components/common/pagination'
+import VueClipboard from 'vue-clipboard2'
+
+// 二次封装message 显示自动关闭进度条
+import Message from '@/components/common/message/index'

 Vue.component('element-set', elementSet) // 公用设置表头
 Vue.component('pick-time', pickTime)
 Vue.component('nzDataList', nzDataList)
 Vue.component('chartList', chartList)
 Vue.component('Pagination', Pagination) // 公用分页组件
+
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.use(Vuex)
+Vue.use(VueResource)
+Vue.use(VueClipboard)
+const hasPermission = {
+  install (Vue, options) {
+    Vue.directive('has', {
+      inserted: (el, binding, vnode) => {}
+    })
+  }
+}
+Vue.use(hasPermission)
+
+Vue.prototype.$message = Message
 Vue.prototype.$axios = axios
 Vue.prototype.$post = post
 Vue.prototype.$get = get
@@ -90,19 +110,6 @@ Vue.mixin({
  ...mainMixin
 })

-Vue.config.productionTip = false
-Vue.use(ElementUI)
-Vue.use(Vuex)
-Vue.use(VueResource)
-const hasPermission = {
-  install (Vue, options) {
-    Vue.directive('has', {
-      inserted: (el, binding, vnode) => {}
-    })
-  }
-}
-Vue.use(hasPermission)
-
 /* 指令 */
 Vue.directive('cancel', cancelWithChange)
 Vue.directive('clickoutside', clickoutside)
--- a/nezha-fronted/src/entrance/exportHtml/i18nData.js
+++ b/nezha-fronted/src/entrance/exportHtml/i18nData.js