Merge branch 'dev-3.7' of git.mesalab.cn:nezha/nezha-fronted into dev-3.8

2023-08-03 10:28:42 +08:00
parent 11015f1b2e 4c8660f773
commit d8bdd19206
11 changed files with 164 additions and 21 deletions
--- a/nezha-fronted/src/assets/css/components/common/table/settings/endpointTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/endpointTable.scss
@@ -13,7 +13,6 @@
        color: #3c92f1;
        position: relative;
        display: inline-block;
-        cursor: pointer;
    }
    .configs-endpoint.metrics {
        color: #3c92f1;
--- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
@@ -29,6 +29,7 @@
            class="top-tool-export margin-r-10"
            export-file-name="asset-charts"
            export-url="/visual/dashboard/export"
+            :only-json="true"
            @afterImport="getTableData"
            :link="obj"
            :showLock="from === fromRoute.asset"
@@ -60,6 +61,7 @@
            class="top-tool-export margin-r-10"
            export-file-name="endpoint-charts"
            export-url="/visual/dashboard/export"
+            :only-json="true"
            @afterImport="getTableData"
            @export="exportType"
            @panelLockChange="panelLockChange"
--- a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
@@ -74,7 +74,8 @@ export default {
        total: 0
      },
      timer: null,
-      sameLabels: ['endpointLabels', 'labelsType', 'lastScrape', 'lastScrapeDuration', 'health', 'lastError']
+      sameLabels: ['endpointLabels', 'labelsType', 'lastScrape', 'lastScrapeDuration', 'health', 'lastError'],
+      orderBy: {}
    }
  },
  watch: {
@@ -247,12 +248,62 @@ export default {
    },
    // 计算当前分页需要返回数据的条数
    handleCurrentChange () {
-      this.pageObj.total = this.tableData.length
-      this.currentTableData = this.tableData.slice(
+      const data = this.sortShowData()
+      this.pageObj.total = data.length
+      this.currentTableData = data.slice(
        (this.pageObj.pageNo - 1) * this.pageObj.pageSize,
        this.pageObj.pageNo * this.pageObj.pageSize
      )
+    },
+    tableDataSort (orderBy) {
+      this.orderBy = orderBy
+      this.handleCurrentChange()
+    },
+    sortShowData () {
+      const orderBy = this.orderBy
+      const originalData = this.$lodash.cloneDeep(this.tableData)
+      let data = null
+      if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
+        data = Object.assign([], originalData)
+      } else { // 排序之后的顺序
+        if (orderBy.order === 'ascending') {
+          data = originalData.sort(this.asce(orderBy.prop))
        }
+        if (orderBy.order === 'descending') {
+          data = originalData.sort(this.desc(orderBy.prop))
+        }
+      }
+      return data
+    },
+    // 本地正序
+    asce (prop) {
+      return function (obj1, obj2) {
+        const val1 = obj1[prop]
+        const val2 = obj2[prop]
+        if (val1 < val2) {
+          return -1
+        } else if (val1 > val2) {
+          return 1
+        } else {
+          return 0
+        }
+      }
+    },
+    // 本地倒序
+    desc (prop) {
+      return function (obj1, obj2) {
+        const val1 = obj1[prop]
+        const val2 = obj2[prop]
+        if (val1 < val2) {
+          return 1
+        } else if (val1 > val2) {
+          return -1
+        } else {
+          return 0
+        }
+      }
+    }
+
  },
  mounted () {
  },
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -45,13 +45,13 @@
      <!-- 新版导入 -->
      <div v-if="importBox.type == 1">
        <div class="upload-body">
-          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" :accept="!isDashboard?'.xlsx,.xls,.csv,.json':'.json'" action="" class="import-upload" drag>
+          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" :accept="!onlyJson?'.xlsx,.xls,.csv,.json':'.json'" action="" class="import-upload" drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            <div class="el-upload__tip" >{{!isDashboard?$t('overall.importSupport'):$t('overall.supportJson')}}</div>
+            <div class="el-upload__tip" >{{!onlyJson?$t('overall.importSupport'):$t('overall.supportJson')}}</div>
          </el-upload>
        </div>
-        <div class="import-select">
+        <div class="import-select" v-if="!isTopo">
          <div class="exists">
            <span>{{$t('overall.existed')}}</span>
            <el-select v-model="importBox.existed" :popper-append-to-body="false" style="flex:1" size="medium" popper-class="select-auto">
@@ -75,10 +75,10 @@
            </li>
          </ul>
        </div>
-        <div class="footer">
+        <div class="footer" :style="isTopo? 'marginTop:15px' : ''">
          <div class="el-message-box__btns" style="text-align: right;">
            <el-popover
-              v-if="!isDashboard"
+              v-if="!onlyJson"
              placement="bottom-start"
              trigger="click">
              <div class="template-pop">
@@ -108,7 +108,7 @@
          <div class="export-box">
            <span class="export-title">{{$t('export.records')}}</span>
            <el-radio-group v-model="importBox.record"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="(item.value==='records'&&!deleteObjs.length) || (item.value==='all'&&assetOrEndpoint)">
+              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="(item.value==='records'&&!deleteObjs.length) || (item.value==='all'&&(assetOrEndpoint || isTopo))">
                {{item.name}}
                <span v-if="item.value==='records'&&deleteObjs.length">({{deleteObjs.length}})</span>
              </el-radio-button>
@@ -117,7 +117,7 @@
          <div class="export-box">
            <span class="export-title">{{$t('export.fileFormat')}}</span>
            <el-radio-group v-model="importBox.format"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" :disabled="isDashboard&&item.name!='JSON'">{{item.name}}</el-radio-button>
+              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" :disabled="onlyJson&&item.name!='JSON'">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
@@ -272,8 +272,14 @@ export default {
      type: String,
      default: ''
    },
+    isTopo: {
+      type: Boolean, default: false
+    },
    deleteObjs: Array,
-    type: String
+    type: String,
+    onlyJson: {
+      type: Boolean, default: false
+    }
  },
  computed: {
    language () { return this.$store.getters.getLanguage },
@@ -404,6 +410,10 @@ export default {
      })
    },
    importExcel () {
+      if (this.isTopo) {
+        this.importTopo()
+        return
+      }
      if (this.importFile && this.importFile.raw) {
        this.prevent_opt.import = true
        const form = new FormData()
@@ -442,6 +452,42 @@ export default {
        this.$message.error(this.$t('tip.noImportFile'))
      }
    },
+    importTopo () {
+      if (this.importFile && this.importFile.raw) {
+        let reader = new FileReader()// 新建一个FileReader
+        reader.readAsText(this.importFile.raw, 'UTF-8')// 读取文件
+        reader.onload = (evt) => { // 读取完文件之后会回来这里
+          let fileString = evt.target.result // 读取文件内容
+          fileString = JSON.parse(fileString)
+          console.log(fileString)
+          if (!fileString.topo) {
+            this.$message.error(this.$t('IMPORT_FORMAT_ERROR', { 0: '' }))
+            return
+          }
+          try {
+            fileString.topo.pens.forEach(item => {
+              item.imageId = ''
+            })
+            console.log(fileString)
+            this.$post(this.importUrl, fileString).then(response => {
+              if (response.code == 200 && response.msg == 'success') {
+                this.$message.success(this.$t('overall.result.success'))
+                this.importBox.show = false
+                this.$emit('afterImport')
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.import = false
+              reader = null
+            })
+          } catch (e) {
+            this.$message.error(this.$t('IMPORT_FORMAT_ERROR', { 0: '' }))
+          }
+        }
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
    exportMenuHandler (show) {
      if (show) {
        clearTimeout(timeout)
@@ -703,13 +749,16 @@ export default {
      this.importBox.show = true
      this.importBox.type = type

-      if (this.assetOrEndpoint) {
+      if (this.assetOrEndpoint || this.isTopo) {
        this.importBox.record = 'current'
      }
      // isDashboard 只支持JSON
      if (this.isDashboard) {
        this.importBox.format = 3
      }
+      if (this.onlyJson) {
+        this.importBox.format = 3
+      }
      if (type == 2 && (!this.showCur)) {
        this.exportCur()
        return
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
@@ -149,6 +149,9 @@ export default {
        })
      })
    },
+    reloadProject () {
+      this.$emit('reload')
+    },
    nodeInit (pen, name) { // 初始化节点参数
      if (pen.data && pen.data.params) {
        return
@@ -586,6 +589,9 @@ export default {
          this.$get('stat/module/abnormal', { moduleId: item.moduleId }).then(res => {
            if (res.code == 200) {
              const module = res.data.list[0]
+              if (!module) {
+                return
+              }
              item.moduleData.state.error = item.moduleData.error = !module.state
              item.moduleData.state.asset = !!module.asset
              item.moduleData.state.alert = !!module.alert
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -19,9 +19,32 @@
        :use-chart-unit="false"
        class="pickTime margin-r-10">
      </pick-time>
-      <button v-has="'project_edit'" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d()" :title="$t('overall.edit')">
-        <i class="nz-icon nz-icon-edit"></i>
-      </button>
+      <top-tool-more-options
+        :delete-objs="[]"
+        ref="export"
+        id="project-tools"
+        :params="{}"
+        :permissions="{
+            import: 'project_add',
+            export: 'project_edit'
+          }"
+        :isTopo="true"
+        :onlyJson="true"
+        class="top-tool-export margin-l-10 margin-r-10"
+        export-file-name="project-topo"
+        @afterImport="afterImport"
+        :export-url="`/monitor/project/topo/${project.id}/export`"
+        :import-url="`/monitor/project/topo/${project.id}/import`"
+        v-has="['project_add','project_edit','project_delete']"
+      >
+        <template v-slot:before>
+          <div>
+            <el-dropdown-item>
+              <div id="asset-batch-asset" v-has="'project_edit'" @click="editMeta2d"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
+            </el-dropdown-item>
+          </div>
+        </template>
+      </top-tool-more-options>
      <button class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
        <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
      </button>
@@ -57,13 +80,15 @@ import { deepClone } from '@meta2d/core'
 import bus from '@/libs/bus'
 import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
 import meta2dMainOther from '@/components/common/project/meta2d/meta2dMain'
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'

 export default {
  name: 'meta2dHeader',
  mixins: [topoUtil],
  components: {
    topologyTopTool,
-    meta2dMainOther
+    meta2dMainOther,
+    topToolMoreOptions
  },
  props: {
    meta2dId: {},
@@ -227,8 +252,11 @@ export default {
      }
      this.$emit('exitEdit', true)
    },
+    afterImport () {
+      this.$emit('reloadProject')
+    },
    reload () {
-
+      this.$emit('reloadProject')
    }
  }
 }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -10,6 +10,7 @@
      @edit="beforeEdit"
      @exitEdit="exitEdit"
      @reload="reload"
+      @reloadProject="reloadProject"
      @saveChart="saveChart"
      @getNodesArr="getNodesArr"
    />
--- a/nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
@@ -6,6 +6,7 @@
  :height="height"
  border
  @header-dragend="dragend"
+  @sort-change="tableDataSort"
  @selection-change="selectionChange"
  >
  <el-table-column
@@ -122,17 +123,17 @@ export default {
          label: this.$t('config.scrapeEndpoint.lastScrape'),
          prop: 'lastScrape',
          show: true,
-          sortable: true
+          sortable: 'custom'
        }, {
          label: this.$t('config.scrapeEndpoint.scrapeDuration'),
          prop: 'lastScrapeDuration',
          show: true,
-          sortable: true
+          sortable: 'custom'
        }, {
          label: this.$t('overall.state'),
          prop: 'health',
          show: true,
-          sortable: true
+          sortable: 'custom'
        }, {
          label: this.$t('ERROR'),
          prop: 'lastError',
@@ -229,6 +230,9 @@ export default {
    lastScrapeDurationTimer (time) {
      const date = (time * 1000).toFixed(3)
      return date + 'ms'
+    },
+    tableDataSort (orderBy) {
+      this.$emit('orderBy', orderBy)
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -20,6 +20,7 @@
          id="expression-template-list"
          export-url="/visual/dashboard/export"
          import-url="/visual/dashboard/import"
+          :only-json="true"
          export-file-name="chart-temp"
          :params="searchLabel"
          :params2="{
--- a/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
@@ -20,6 +20,7 @@
          id="dashboard-template-list"
          export-url="/visual/dashboard/export"
          import-url="/visual/dashboard/import"
+          :only-json="true"
          export-file-name="dashboard-temp"
          :params="searchLabel"
          :paramsType="'template'"
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -78,6 +78,7 @@
                  export-file-name="chart"
                  export-url="/visual/dashboard/export"
                  import-url="/visual/dashboard/import"
+                  :only-json="true"
                  @export="exportType"
                  @afterImport="afterImport"
                >