From c59dfaaf695572130f5bd8c29da2ee2887d17255 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 26 Apr 2021 11:43:33 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Apanel=20chart=20=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=A8=A1=E6=9D=BF=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/language/cn.js      |  6 +-
 .../src/components/common/language/en.js      |  6 +-
 .../components/common/project/topologyL5.vue  | 24 ++++--
 .../common/rightBox/chartTempBox.vue          | 81 ++++++++++++++++---
 .../common/table/settings/endpointTable.vue   |  1 -
 .../page/monitor/endpoint/endpointList.vue    | 37 +++++++--
 nezha-fronted/src/http.js                     |  8 +-
 7 files changed, 130 insertions(+), 33 deletions(-)

diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index f2c5842a0..4502e5afb 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -278,7 +278,11 @@ const cn = {
         content: '内容',
         tooltip: 'Tooltip',
         displayChart: '图表',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart 模板',
+        selectAsset: '请选择Asset',
+        selectEndpoint: '请选择Endpoint'
       },
       chartTableColumn: {
         metric: '指标',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 886d62558..55d1fc1b4 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -288,7 +288,11 @@ const en = {
         content: 'Content',
         tooltip: 'Tooltip',
         displayChart: 'Display chart',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart template',
+        selectAsset: 'Please select the Asset',
+        selectEndpoint: 'Please select the Endpoint'
       },
       chartTableColumn: {
         metric: 'Metric', // '指标'
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index acc05ad19..8f51f0862 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -313,7 +313,7 @@
            </button>
 
               <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                      v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                      v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
              {{$t('project.topology.save')}}
@@ -477,6 +477,8 @@ export default {
       penToolTipScale: 1,
       oldScale: 1,
       uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
       uploadPic: {
         name: '',
         unit: ''
@@ -1484,22 +1486,24 @@ export default {
     beforeAvatarUpload (file, fileList) {
       const this_ = this
       const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
+      const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG) {
         this.$message.error(this_.$t('project.topology.imgFormat'))
         return false
       }
-      // if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
-      //   return false;
-      // }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        return false
+      }
       const isSize = new Promise(function (resolve, reject) {
-        const width = 100
-        const height = 100
+        const width = 0
+        const height = 0
         const _URL = window.URL || window.webkitURL
         const img = new Image()
         img.onload = function () {
           const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
           valid ? resolve() : reject()
         }
         img.src = _URL.createObjectURL(file.raw)
@@ -1545,12 +1549,15 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
+      console.log(this.file)
       if (this.uploadPic.name) {
         form.append('name', this.uploadPic.name)
       } else {
         form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
       }
       form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
       this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -1685,6 +1692,7 @@ export default {
               responseType: 'arraybuffer'
             })
             .then(res => {
+              console.log(res.data)
               return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
             })
             .then(data => {
diff --git a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
index eb30ce7ed..cc939d7e7 100644
--- a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
@@ -8,18 +8,18 @@
     </div>
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="userForm" :model="editChartTemp" :rules="editChartTemp.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+        <el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
           <!--type-->
-          <el-form-item :label="$t('dashboard.panel.chartForm.varType')">
-            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group">
+          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                 <span class="panel-dropdown-label-txt" >{{item.name}}</span>
               </el-option>
             </el-select>
           </el-form-item>
           <!--chartTemp list-->
-          <el-form-item :label="$t('dashboard.panel.chartForm.varType')">
-            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group">
+          <el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
                 <span class="panel-dropdown-label-txt" >{{item.name}}</span>
               </el-option>
@@ -27,12 +27,13 @@
           </el-form-item>
 
           <!-- 选择资产，穿梭框 -->
-          <div class="form__sub-title">{{$t('overall.select')}}</div>
+          <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
           <nz-transfer ref="transfer"
                        :page-obj="transfer.pageObj"
                        :search-msg="transfer.searchMsg"
                        :table-data="transfer.tableData"
                        style="margin-bottom: 20px;"
+                       :tableTitle="transferTableTitle"
                        @leftToRight="addAsset"
                        @search="search"
                        @rightToLeft="removeAsset">
@@ -77,7 +78,10 @@ export default {
       url: 'visual/panel/chart/fromTmpl',
       rightBox: { model: { show: false } },
       rules: { // 表单校验规则
-        name: [
+        varType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        pid: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       },
@@ -139,7 +143,19 @@ export default {
           pages: 1,
           total: 0
         }
-      }
+      },
+      transferTableTitle: [
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('asset.host'),
+          prop: 'manageIp',
+          show: true
+        }
+      ]
     }
   },
   watch: {
@@ -153,7 +169,7 @@ export default {
   },
   mounted () {
     this.getChartTempData()
-    this.getAssetData()
+    this.getTableData()
   },
   methods: {
     clickOutside () {
@@ -170,9 +186,9 @@ export default {
       if (!this.transfer.selectedData.length) {
         this.prevent_opt.save = false
         if (this.editChartTemp.varType === 1) {
-          this.$message.error('请选择Asset')
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
         } else {
-          this.$message.error('请选择Endpoint')
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
         }
         return
       }
@@ -184,6 +200,7 @@ export default {
               this.prevent_opt.save = false
               if (res.code === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$emit('on-create-success')
                 this.esc(true)
               } else {
                 this.$message.error(res.msg)
@@ -209,7 +226,7 @@ export default {
     search (searchLabel, page) {
       this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
       this.transfer.pageObj = JSON.parse(JSON.stringify(page))
-      this.getAssetData()
+      this.getTableData()
     },
     addAsset (toAdd) {
       this.transfer.selectedData = toAdd
@@ -231,6 +248,13 @@ export default {
         }
       })
     },
+    getTableData () {
+      if (this.editChartTemp.varType === 1) {
+        this.getAssetData()
+      } else {
+        this.getEndpointData()
+      }
+    },
     getAssetData () {
       this.$refs.transfer.startLoading()
       this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
@@ -252,7 +276,38 @@ export default {
       })
     },
     varTypeChange () {
-
+      this.getChartTempData()
+      this.editChartTemp.pid = ''
+      this.transfer.selectedData = []
+      this.$refs.transfer.selectedData = []
+      if (this.editChartTemp.varType === 1) {
+        this.transferTableTitle = [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true
+          },
+          {
+            label: this.$t('asset.host'),
+            prop: 'manageIp',
+            show: true
+          }
+        ]
+      } else {
+        this.transferTableTitle = [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true
+          },
+          {
+            label: this.$t('project.endpoint.name'),
+            prop: 'name',
+            show: true
+          }
+        ]
+      }
+      this.getTableData()
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 4d34d18d8..82fc1f27e 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -194,7 +194,6 @@ export default {
           str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
         }
       })
-      console.log(arr, str)
       return str
     }
   },
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 64c00eb0f..0a4d8384d 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -9,6 +9,7 @@
       :from="fromRoute.endpoint"
       :layout="['searchInput', 'elementSet']"
       :hasSearch="true"
+      @search="search"
       :search-msg="searchMsg">
       <template v-slot:top-tool-right>
         <export-excel
@@ -126,6 +127,26 @@ export default {
           type: 'input',
           label: 'id',
           disabled: false
+        }, {
+          id: 14,
+          name: this.$t('asset.asset'),
+          type: 'query',
+          label: 'query',
+          disabled: false
+        },{
+          id: 34,
+          name: this.$t('project.project.project'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'projectName',
+          disabled: false
+        }, {
+          id: 35,
+          name: this.$t('project.module.module'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'moduleName',
+          disabled: false
         }]
       },
       roles: [],
@@ -222,17 +243,23 @@ export default {
     getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      const params = {
+        ...this.searchLabel,
+        ...this.searchCheckBox
+      }
       if (this.searchLabel.projectIds) {
         localStorage.setItem('endpointProjectId', this.searchLabel.projectIds)
+        if (params.projectIds) {
+          params.projectIds += ',' + this.searchLabel.projectIds
+        } else {
+          params.projectIds = this.searchLabel.projectIds
+        }
       } else {
         localStorage.removeItem('endpointProjectId')
       }
-      const params = {
-        ...this.searchLabel,
-        ...this.titleSearch
-      }
+      console.log()
       this.tools.loading = true
-      this.$get(this.url, { ...params, ...this.searchCheckBox }).then(response => {
+      this.$get(this.url, params).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index 1f867b1bc..d7db8162a 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -28,7 +28,7 @@ export function get (url, params) {
     axios.get(url, {
       params: params
     }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -42,7 +42,7 @@ export function get (url, params) {
 export function post (url, params, headers) {
   return new Promise(resolve => {
     axios.post(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -56,7 +56,7 @@ export function post (url, params, headers) {
 export function put (url, params, headers) {
   return new Promise((resolve) => {
     axios.put(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -70,7 +70,7 @@ export function put (url, params, headers) {
 export function del (url, params) {
   return new Promise((resolve) => {
     axios.delete(url, params).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)