feat：添加endpoint 批量修改功能

nezha-fronted/src/components/common/clickSearch.vue

@@ -126,6 +126,7 @@ export default {
   overflow-x: hidden;
   overflow-y: auto;
   padding-top: 20px;
+  padding-bottom: 0;
 }
   .search-title{
     ont-family: Roboto-Medium;

nezha-fronted/src/components/common/js/tools.js

@@ -3,7 +3,7 @@ import MessageBox from 'element-ui/packages/message-box/src/main'
 import i18n from '../i18n'
 import bus from '@/libs/bus'
 /* 弹窗点击外部后关闭 */
-const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel','endpointConfigsTips'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind (el, binding, vnode) {

nezha-fronted/src/components/common/language/cn.js

@@ -1177,7 +1177,11 @@ const cn = {
       contextName: '内容名称',
       alerts: 'Alerts',
       privPassword: '隐私密码',
-      asset: 'Asset'
+      asset: 'Asset',
+      editEndpoint: '编辑 endpoint',
+      createEndpoint: '新增Endpoint',
+      batchEndpoint: '批量 Endpoint',
+      endpointName: 'Endpoint name'
     },
     endpoint: {
       createEndpoint: '新增Endpoint',
@@ -1217,7 +1221,8 @@ const cn = {
       authTypeToken: 'bearer token',
       name: '名称',
       configs: 'Configs',
-      state: '状态'
+      state: '状态',
+      allselect: '当前页已全部选择'
     },
     metrics: {
       metrics: '指标',

nezha-fronted/src/components/common/language/en.js

@@ -1194,6 +1194,10 @@ const en = {
       privPassword: 'Priv password',
       alerts: 'Alerts',
       asset: 'Asset',
+      editEndpoint: 'edit endpoint',
+      createEndpoint: 'Created endpoint',
+      batchEndpoint: 'Batch Endpoint',
+      endpointName: 'Endpoint name',
       tip: {
         defaultEndpointSet: 'Default endpoint settings', // "默认的Endpoint设置"
         relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'// "组件关联的Endpoint将默认配置以下端口/路径/参数"
@@ -1237,7 +1241,8 @@ const en = {
       authTypeToken: 'bearer token',
       name: 'Name',
       configs: 'Configs',
-      state: 'State'
+      state: 'State',
+      allselect: 'The current page has all been selected'
     },
     metrics: {
       metrics: 'Metrics', // "指标"

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -112,7 +112,7 @@
               </span>
             </div>
             <div v-if="selectAssetAll" class="asset-allselect">
-              '当前页已全部选择'
+              {{$t('project.endpoint.allselect')}}
             </div>
           </div>
           <!--endpoint-->
@@ -143,7 +143,7 @@
                 v-for="(title, index) in endpointTableTitle"
                 v-if="title.show"
                 :width="title.width"
-                :key="`col-${index}`"
+                :key="index"
                 :label="title.label"
               >
                 <template slot-scope="scope" :column="title">
@@ -225,7 +225,7 @@
     </div>
 <!--    edit endpoint-->
     <transition name="right-box">
-      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'"></edit-endpoint-box-new>
+      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'" :optionType="optionType"></edit-endpoint-box-new>
     </transition>
   </div>
 </template>
@@ -274,10 +274,10 @@ export default {
       tempEndpoint2: {},
       assetLoading: true,
       rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
+      optionType: 'batch',
       blankEndpoint: {
         id: '',
         projectId: '',
-        name: '',
         endpointNameTmpl: '{{module.name}}-{{asset.name}}',
         type: 'http',
         port: 9100,
@@ -285,7 +285,7 @@ export default {
           walk: [],
           snmpCredentialsId: '',
           metrics_path: '',
-          port: '',
+          port: 9100,
           host: '{{asset.manageIp}}',
           scrape_interval: '',
           scrape_timeout: '',
@@ -698,12 +698,14 @@ export default {
       return ''
     },
     editEndpointRow (u) {
+      this.optionType = 'add'
       this.object = JSON.parse(JSON.stringify(u))
       this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
       this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
       this.rightBox.show = true
     },
     showRightBox () {
+      this.optionType = 'batch'
       this.object = { ...JSON.parse(JSON.stringify(this.blankEndpoint)), projectId: this.currentModuleCopy.projectId, moduleId: this.currentModuleCopy.id, assetName: '', type: this.currentModuleCopy.type }
       this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
       this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
@@ -711,7 +713,9 @@ export default {
     },
     editAllEndpoint () {
       this.endpointTableData.forEach((item, index) => {
-        this.endpointTableData[index] = { ...this.endpointTableData[index], ...this.blankEndpoint }
+        if (this.endpointSelection.find(item1 => item1.assetId === item.assetId)) {
+          this.endpointTableData[index] = { ...this.endpointTableData[index], ...this.blankEndpoint }
+        }
       })
       this.endpointTableData = [...this.endpointTableData]
     },

nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-clickoutside="{obj:endpoint,func:clickOutside}">
+  <div class="right-box right-box-add-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns"></div>
     <!-- end--顶部按钮-->
@@ -15,13 +15,16 @@
         <div class="asset-and-endpoint">
           <!--endpoint-->
           <div class="right-box-endpoint-table">
-            <div class="search-box" style="display: flex;justify-content: flex-end">
+            <div class="search-box" style="display: flex;justify-content: space-between">
-              <el-button @click="showRightBox" class="top-tool-btn" type="button">
+              <span>Config</span>
+              <span>
+                <el-button @click="showRightBox" class="top-tool-btn" type="button">
                 <i class="nz-icon-gear nz-icon"></i>
               </el-button>
               <el-button @click="editAllEndpoint" class="top-tool-btn" type="button">
                 <i class="nz-icon-batch-edit nz-icon"></i>
               </el-button>
+              </span>
             </div>
             <el-table
               :data="endpointTableData"
@@ -37,61 +40,47 @@
                 style="padding: 0 1px;">
               </el-table-column>
               <el-table-column
-                label-class-name="endpoints-box-endpoints-title"
+                v-for="(item, index) in endpointTableTitle"
-                v-for="(title, index) in endpointTableTitle"
+                v-if="item.show"
-                v-if="title.show"
-                :width="title.width"
                 :key="`col-${index}`"
-                :label="title.label"
+                :fixed="item.fixed"
+                :label="item.label"
+                :min-width="`${item.minWidth}`"
+                :prop="item.prop"
+                :resizable="true"
+                :sort-orders="['ascending', 'descending']"
+                :width="`${item.width}`"
+                class="data-column"
               >
-                <template slot-scope="scope" :column="title">
+                <template slot="header">
-                  <span v-if="title.prop == 'asset'">{{scope.row.assetName}}</span>
+                  <span>{{item.label}}</span>
-                  <span v-else-if="title.prop == 'params'">
+                  <div class="col-resize-area"></div>
-                      <el-popover
+                </template>
-                        placement="bottom"
+                <template slot-scope="scope" :column="item">
-                        width="200"
+                  <template v-if="item.prop === 'name'">
-                        trigger="hover"
+                    {{scope.row[item.prop]}}
-                      >
+                  </template>
-                        <div class="endpoint-param-pop">
+                  <template v-else-if="item.prop === 'asset'">
-                          <div v-for="p in scope.row.paramObj" :key="p">{{p.key}}={{p.value}}</div>
+                    <span >
-                        </div>
+                      <i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
-                        <span slot="reference">
+                      {{scope.row.assetName}}
-                          <span @mousedown.stop>{{scope.row.configs.params.length > 8 ? scope.row.configs.params.substring(0, 8) + '...' : scope.row.configs.params}}</span>
-                        </span>
-                      </el-popover>
                     </span>
-                  <span v-else-if="title.prop == 'labels'">
+                  </template>
-                      <el-popover
+                  <template v-else-if="item.prop === 'host'">
-                        placement="bottom"
+                    {{scope.row.configs?scope.row.configs.host : '' }}
-                        width="200"
+                  </template>
-                        trigger="hover"
+                  <template v-else-if="item.prop === 'port'">
-                      >
+                    {{scope.row.configs?scope.row.configs.port : '' }}
-                        <div class="endpoint-param-pop">
+                  </template>
-                          <div v-for="p in scope.row.labelModule" :key="p">{{p.key}}={{p.value}}</div>
+                  <template v-else-if="item.prop == 'configs'">
-                        </div>
+                    <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
-                        <span slot="reference">
+                      <span class="configs-endpoint">{ ... }</span>
-                          <span @mousedown.stop>{{scope.row.configs.labels.length > 8 ? scope.row.configs.labels.substring(0, 8) + '...' : scope.row.configs.labels}}</span>
+                      <div class="endpointConfigsTips" slot="content">
-                        </span>
+                        <pre >{{JSON.stringify(scope.row[item.prop],null,2)}}</pre>
-                      </el-popover>
+                      </div>
-                    </span>
+                    </el-tooltip>
-                  <span v-else-if="title.prop == 'path'">
+                  </template>
-                      <el-popover
+                  <template v-else>1</template>
-                        placement="bottom"
-                        width="100"
-                        trigger="hover"
-                        :content="scope.row.configs[title.prop]"
-                      >
-                        <span slot="reference" >
-                          <span>{{scope.row.configs.metrics_path.length > 5 ? scope.row.configs.metrics_path.substring(0, 5) + '...' : scope.row.configs.metrics_path}}</span>
-                        </span>
-                      </el-popover>
-                    </span>
-                  <span v-else-if="title.prop == 'port'">
-                      <span >{{scope.row.configs.port}}</span>
-                  </span>
-                  <span v-else-if="title.prop == 'host'">
-                      <span>{{scope.row.configs.host}}</span>
-                  </span>
                 </template>
               </el-table-column>
               <el-table-column label="" width="56"  fixed="right">
@@ -118,7 +107,7 @@
     </div>
     <!--    edit endpoint-->
     <transition name="right-box">
-      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'"></edit-endpoint-box-new>
+      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'" :optionType="optionType"></edit-endpoint-box-new>
     </transition>
   </div>
 </template>
@@ -171,7 +160,6 @@ export default {
       blankEndpoint: {
         id: '',
         projectId: '',
-        name: '',
         endpointNameTmpl: '{{module.name}}-{{asset.name}}',
         type: 'http',
         port: 9100,
@@ -179,7 +167,7 @@ export default {
           walk: [],
           snmpCredentialsId: '',
           metrics_path: '',
-          port: '',
+          port: 9100,
           host: '{{asset.manageIp}}',
           scrape_interval: '',
           scrape_timeout: '',
@@ -212,37 +200,31 @@ export default {
       moduleList: [],
       assetList: [],
       endpointList: [],
-      endpointTableTitle: [
+      endpointTableTitle: [ // 原始table列
+        {
+          label: this.$t('project.endpoint.name'),
+          prop: 'name',
+          show: true
+        },
         {
           label: this.$t('project.endpoint.asset'),
           prop: 'asset',
-          width: 150,
           show: true
-        }, {
+        },
+        {
           label: this.$t('project.endpoint.host'),
           prop: 'host',
-          width: 80,
           show: true
-        }, {
+        },
+        {
           label: this.$t('project.endpoint.port'),
           prop: 'port',
-          width: 54,
-          show: true
-        }, {
-          label: this.$t('project.endpoint.labels'),
-          prop: 'labels',
-          width: 90,
-          show: true
-        }, {
-          label: this.$t('project.endpoint.param'),
-          prop: 'params',
-          width: 100,
-          show: true
-        }, {
-          label: this.$t('project.endpoint.path'),
-          prop: 'path',
-          width: 66,
           show: true
+        },
+        {
+          label: this.$t('project.endpoint.configs'),
+          prop: 'configs',
+          show: true,
         }
       ],
       typeList: [],
@@ -252,6 +234,7 @@ export default {
       assetSelection: [],
       endpointSelection: [],
       endpointTableData: [],
+      optionType: 'batch'
     }
   },
   methods: {
@@ -467,20 +450,41 @@ export default {
       return ''
     },
     editEndpointRow (u) {
+      this.optionType = 'edit'
       this.object = JSON.parse(JSON.stringify(u))
+      // this.object.configs = JSON.parse(this.object.configs)
       this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
       this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
+      this.object.paramObj = []
+      this.object.labelModule = []
+      if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {
+        Object.keys(this.object.configs.labels).forEach(key => {
+          this.object.labelModule.push({ key, value: this.object.configs.labels[key] })
+        })
+      } else {
+        this.object.labelModule.push({ key: '', value: '' })
+      }
+      if (JSON.stringify(this.object.configs.params) !== '{}' && this.object.configs.params) {
+        Object.keys(this.object.configs.params).forEach(key => {
+          this.object.paramObj.push({ key, value: this.object.configs.params[key] })
+        })
+      } else {
+        this.object.paramObj.push({ key: '', value: [] })
+      }
       this.rightBox.show = true
     },
     showRightBox () {
-      this.object = { ...JSON.parse(JSON.stringify(this.blankEndpoint)), projectId: this.currentModuleCopy.projectId, moduleId: this.currentModuleCopy.id, assetName: '', type: this.currentModuleCopy.type }
+      this.optionType = 'batch'
+      this.object = { ...JSON.parse(JSON.stringify(this.blankEndpoint)), projectId: '', moduleId: '', assetName: '', type: '' }
       this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
       this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
       this.rightBox.show = true
     },
     editAllEndpoint () {
       this.endpointTableData.forEach((item, index) => {
-        this.endpointTableData[index] = { ...this.endpointTableData[index], ...this.blankEndpoint }
+        if (this.endpointSelection.find(item1 => item1.assetId === item.assetId)) {
+          this.endpointTableData[index] = { ...this.endpointTableData[index], configs: this.blankEndpoint.configs }
+        }
       })
       this.endpointTableData = [...this.endpointTableData]
     },
@@ -493,7 +497,7 @@ export default {
         })
       } else {
         this.endpointTableData.forEach((item, index) => {
-          if (item.assetId === endpoint.assetId) {
+          if (item.id === endpoint.id) {
             this.endpointTableData[index] = { ...endpoint }
           }
         })
@@ -533,24 +537,20 @@ export default {
         }
       }
     },
-    currentModuleCopy: {
-      immediate: true,
-      handler (n, o) {
-        if (n.type && n.type.toLowerCase() == 'snmp') {
-          this.endpointTableTitle[4].show = false
-          this.endpointTableTitle[5].show = false
-        } else {
-          this.endpointTableTitle[4].show = true
-          this.endpointTableTitle[5].show = true
-        }
-      }
-    },
     selectEndpointList: {
       immediate: true,
       handler (n) {
-        console.log(n)
+        console.log(n);
-        n.configs = JSON.parse(n.configs)
+        this.endpointTableData = JSON.parse(JSON.stringify(n))
-        this.endpointTableData = [...n]
+        this.endpointTableData.forEach(item => {
+          item.configs = JSON.parse(item.configs)
+          item.projectId = item.project.id
+          item.moduleId = item.module.id
+          item.assetId = item.asset.id
+          item.assetName = item.asset.name
+          item.type = item.module.type
+        })
+        console.log(this.endpointTableData);
       }
     }
   }
@@ -1032,4 +1032,14 @@ export default {
       }
     }
   }
+  .endpointConfigsTips{
+     height: 200px;
+     overflow-y: auto;
+     overflow-x: hidden;
+   }
+  .copy-value-content{
+    position: absolute;
+    right: 1px;
+    top: 4px;
+  }
 </style>

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -2,22 +2,32 @@
   <div class="right-box right-box-module" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button v-if="editEndpoint.id" id="module-del" v-has="'module_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
+<!--      <button v-if="editEndpoint.id" id="module-del" v-has="'module_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">-->
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+<!--        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+<!--        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
-      </button>
+<!--      </button>-->
     </div>
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-    <div class="right-box-title">{{editEndpoint.id ? $t("project.module.editEndpoint") + "  ID：" + editEndpoint.id : $t("project.module.createModule")}}</div>
+    <div class="right-box-title">
+      <span v-if="optionType === 'edit'">
+       {{ $t("project.module.editEndpoint")}}
+      </span>
+      <span v-if="optionType === 'batch'">
+       {{ $t("project.module.batchEndpoint")}}
+      </span>
+      <span v-if="optionType === 'add'">
+       {{ $t("project.module.creatEndpoint")}}
+      </span>
+    </div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
     <div class="right-box-form-box" ref="scrollbar">
       <el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm">
         <!--name-->
-        <el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="125px">
+        <el-form-item :label='$t("project.module.endpointName")' prop="name" label-width="125px" v-if="optionType!=='batch'">
           <el-input placeholder="" maxlength="64" show-word-limit v-model="editEndpoint.name" size="small" id="module-box-input-name"></el-input>
         </el-form-item>
         <!--project-->
@@ -252,6 +262,10 @@ export default {
     type: {
       type: String,
       default: 'add'
+    },
+    optionType: {
+      type: String,
+      default: 'batch'
     }
   },
   components: {
@@ -271,16 +285,16 @@ export default {
       showAllBasicOption: false,
       rules: {
         name: [
-          { validator: noSpecialChar, trigger: 'change' }
+          { validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' }
         ],
         projectId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+          { required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' }
         ],
         moduleId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+          { required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' }
         ],
         walk: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'blur' }
         ],
         port: [
           { validator: port, trigger: 'blur' }
@@ -668,6 +682,7 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
+        console.log(n);
         if (n && n.configs) {
           const params = Object.assign({}, n.configs)
           params.params = this.paramToJson(this.editEndpoint.paramObj)
@@ -688,10 +703,10 @@ export default {
           if (params.basic_auth && !params.basic_auth.password) {
             delete params.basic_auth
           }
-          if (!Object.keys(params.param).length) {
+          if (params.param && !Object.keys(params.param).length) {
             delete params.param
           }
-          if (!Object.keys(params.labels).length) {
+          if (params.labels && !Object.keys(params.labels).length) {
             delete params.labels
           }
           this.configsCopyValue = JSON.stringify(params, null, 2)

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -680,10 +680,10 @@ export default {
           if (params.basic_auth && !params.basic_auth.password) {
             delete params.basic_auth
           }
-          if (!Object.keys(params.params).length) {
+          if (params.param && !Object.keys(params.param).length) {
-            delete params.params
+            delete params.param
           }
-          if (!Object.keys(params.labels).length) {
+          if (params.labels && !Object.keys(params.labels).length) {
             delete params.labels
           }
           this.configsCopyValue = JSON.stringify(params, null, 2)

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -196,6 +196,7 @@ export default {
   .endpointConfigsTips{
     height: 200px;
     overflow-y: auto;
+    overflow-x: hidden;
   }
   .copy-value-content{
     position: absolute;