NEZ-3015 feat：配置同步更新页面开发

nezha-fronted/src/assets/css/components/common/configSync.scss

@@ -0,0 +1,88 @@
+.configSync-dialog{
+  .dialog-header {
+    margin-bottom: 10px;
+    word-wrap: break-word;
+    color: $--color-text-primary;
+    span{
+      word-break: break-word;
+    }
+    i.nz-icon-jinggao{
+      color: $--color-primary;
+    }
+  }
+  .el-dialog__body {
+    padding: 0 20px;
+  }
+  .batch-sync-tree{
+    border: 1px solid $--border-color-light;
+    .tree-header{
+      background: $--background-color-base;
+      padding: 7px 10px;
+      font-weight: 600;
+      margin-bottom: 0 !important;
+      .batch-sync-item-id, .batch-sync-item-name{
+        font-weight: 600;
+      }
+    }
+    .tree-body{
+      box-sizing: content-box;
+      padding-top: 10px;
+      height: 160px;
+      overflow-y: auto;
+    }
+    .tree-body-item{
+      display: flex;
+      width: 100%;
+      font-size: 14px;
+      color: $--color-text-primary;
+      font-weight: 400;
+      margin-bottom: 10px;
+      padding-left: 10px;
+      box-sizing: border-box;
+      line-height: 22px;
+      .nz-icon{
+        vertical-align: middle;
+      }
+      .batch-sync-item-id{
+        margin-left: 28px;
+        margin-right: 28px;
+        width: 100px;
+        transition: all 0.3s;
+        flex-shrink: 0;
+      }
+      .batch-sync-item-name{
+        margin-left: 14px;
+        flex: 1;
+        flex-shrink: 0;
+        width: calc(100% - 190px);
+      }
+    }
+    .batch-sync-item-text{
+      display: inline-block;
+      width: calc(100% - 30px);
+      vertical-align: middle;
+    }
+    .el-checkbox-group{
+      font-size: 14px;
+      .el-checkbox__label{
+        display: none;
+      }
+    }
+  }
+  .sync-select-list{
+    padding-top: 5px;
+    padding-bottom: 10px;
+    .sync-select-item{
+      margin-top: 6px;
+      .el-checkbox__input.is-checked+.el-checkbox__label{
+        color: $--checkbox-font-color !important;
+      }
+    }
+  }
+  .el-dialog__footer{
+    .footer__btn{
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -95,6 +95,7 @@
 @import './common/timePicker.scss';
 @import './common/deleteButton.scss';
 @import './common/diagnosisTab.scss';
+@import './common/configSync.scss';
 @import './common/filterSearch/filterSearch.scss';
 @import './common/panel/panelVariables.scss';
 

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "36651290",
+      "name": "Batch Synchronize",
+      "font_class": "a-BatchSynchronize",
+      "unicode": "e7e7",
+      "unicode_decimal": 59367
+    },
     {
       "icon_id": "34816567",
       "name": "下一播放",

nezha-fronted/src/assets/stylus/main.scss

@@ -1273,10 +1273,6 @@ li {
     &>span{
       margin-right: 12px;
     }
-    .select-auto{
-      top: auto !important;
-      left: auto !important;
-    }
   }
   .import-select-list{
     .import-select-item{
@@ -1625,3 +1621,8 @@ li {
 .hover .user-username{
   color: $--color-primary;
 }
+
+.select-auto{
+  top: auto !important;
+  left: auto !important;
+}

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

@@ -0,0 +1,136 @@
+<template>
+  <div class="configSync">
+    <div @click="showDialog" v-if="type==='batch'">
+      <i class="nz-icon nz-icon-a-BatchSynchronize" style="font-size:14px;margin-right:7px;"></i>{{$t('overall.batchSync')}}
+    </div>
+    <el-dialog
+      class="configSync-dialog"
+      :title="$t('deleteButton.confirm')"
+      v-if="dialogVisible"
+      :visible.sync="dialogVisible"
+      @close='handleClose'
+      width="580px"
+      :append-to-body="true"
+    >
+     <div class="dialog-header" style="vertical-align:top;" >
+        <i class="nz-icon nz-icon-jinggao"></i>
+        <span>{{$t('batch.syncTip', { dataLength: idArr.length })}}</span>
+      </div>
+      <div class="batch-sync-tree">
+        <div class="tree-header tree-body-item">
+          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange"></el-checkbox>
+          <div class="batch-sync-item-id">ID</div>
+          <div class="batch-sync-item-name">{{$t('overall.name')}}</div>
+        </div>
+        <el-checkbox-group v-model="idArr" @change="checkedChange">
+          <div class="tree-body">
+            <div v-for="(item,index) in batchData" :key='index' class="tree-body-item">
+              <el-checkbox :key="item.id" :label="item.id"></el-checkbox>
+              <div class="batch-sync-item-id">{{item.id}}</div>
+              <div class="batch-sync-item-name" @click="showChild(item)">
+              <i :class="selectIcon(item.type)"/>
+              <span class="text-ellipsis batch-sync-item-text" :title="item.name">{{item.name}}</span>
+              </div>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+      <ul class="sync-select-list">
+        <li class="sync-select-item">
+          <el-checkbox v-model="syncBox.endpoint">{{$t('batch.syncEndpoint')}}</el-checkbox>
+        </li>
+        <li class="sync-select-item">
+          <el-checkbox v-model="syncBox.dashboard">{{$t('batch.syncDashboard')}}</el-checkbox>
+        </li>
+      </ul>
+      <div slot="footer">
+        <button @click="dialogVisible = false" class="footer__btn footer__btn--light">{{$t("overall.cancel")}}</button>
+        <button @click="configSync" class="footer__btn" :class="{'nz-btn-disabled': prevent_opt.save||!idArr.length}" :disabled="prevent_opt.save||!idArr.length">{{$t('overall.synchronize')}}</button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'configSync',
+  data () {
+    return {
+      api: '',
+      dialogVisible: false,
+      batchData: [],
+      idArr: [],
+      syncBox: {
+        endpoint: undefined,
+        dashboard: undefined
+      },
+      checkAll: false,
+      isIndeterminate: false
+    }
+  },
+  props: {
+    type: String,
+    from: String, // 通过 from 确认删除的 icon
+    batchObjs: Array
+  },
+  created () {
+    switch (this.from) {
+      case 'asset': this.api = '/asset/asset/sync'; break
+      case 'module': this.api = '/monitor/module/sync'; break
+      case 'endpoint': this.api = '/monitor/endpoint/sync'; break
+    }
+  },
+  methods: {
+    showDialog () {
+      this.dialogVisible = true
+      this.batchData = this.$lodash.cloneDeep(this.batchObjs).map(item => {
+        item.type = this.from
+        return item
+      })
+      this.checkAll = true
+      this.idArr = this.batchData.map(item => item.id)
+    },
+    async configSync () {
+      this.prevent_opt.save = true
+      const params = {
+        ids: this.idArr,
+        endpoint: this.syncBox.endpoint ? 1 : 0,
+        dashboard: this.syncBox.dashboard ? 1 : 0
+      }
+      const res = await this.$put(this.api, params)
+      if (res.code === 200) {
+        this.dialogVisible = false
+        this.$message.success(this.$t('tip.syncSuccess'))
+      } else {
+        this.$message.error(res.msg)
+      }
+      this.prevent_opt.save = false
+    },
+    handleClose () {
+      this.dialogVisible = false
+      this.syncBox.endpoint = undefined
+      this.syncBox.dashboard = undefined
+    },
+    checkAllChange (value) {
+      const allId = this.batchData.map(item => {
+        return item.id
+      })
+      this.idArr = value ? allId : []
+      this.isIndeterminate = false
+    },
+    checkedChange (value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount > 0
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.batchData.length
+    },
+    selectIcon (type) {
+      switch (type) {
+        case 'asset' : return 'nz-icon monitorColor nz-icon-overview-project'
+        case 'module' : return 'nz-icon monitorColor nz-icon-overview-module'
+        case 'endpoint' : return 'nz-icon monitorColor nz-icon-overview-endpoint'
+      }
+      return ' '
+    }
+  }
+}
+</script>

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

@@ -85,7 +85,7 @@
     </span>
     </el-dialog>
   </div>
-  </template>
+</template>
 
 <script>
 import loading from '@/components/common/loading'

nezha-fronted/src/components/common/mixin/table.js

@@ -101,6 +101,10 @@ export default {
           })
           break
         }
+        case 'configSync': {
+          this.$parent.configSync(row)
+          break
+        }
         default:
           this.$emit(command, row, param)
           break

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -171,6 +171,7 @@
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'asset']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['diagnosis', scope.row,{from:'asset'}]"><i class="nz-icon nz-icon-diagnosis"></i><span class="operation-dropdown-text">{{$t('overall.diagnosis')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'asset_edit'" :command="['configSync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.synchronize')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -116,6 +116,7 @@
       ref="diagnosisTab"
       :diagnosisTabData ="diagnosisTabData"
     ></diagnosis-tab>
+    <config-sync ref="configSync" type="single" :from="from" :batch-objs="syncObj"></config-sync>
   </div>
 </template>
 
@@ -129,6 +130,7 @@ import routerPathParams from '@/components/common/mixin/routerPathParams'
 import SearchBox from '@/components/common/searchBox/searchBox'
 import deleteButton from '@/components/common/deleteButton'
 import diagnosisTab from '@/components/common/diagnosisTab'
+import configSync from '@/components/common/configSync'
 export default {
   name: 'nzDataList',
   mixins: [routerPathParams],
@@ -137,7 +139,8 @@ export default {
     bottomBox,
     panelChart,
     deleteButton,
-    diagnosisTab
+    diagnosisTab,
+    configSync
   },
   props: {
     from: {
@@ -218,13 +221,21 @@ export default {
       showLayout: [],
       timeRange: [new Date(), new Date()],
       // 故障诊断数据
-      diagnosisTabData: {}
+      diagnosisTabData: {},
+      // 配置同步数据
+      syncObj: []
     }
   },
   mounted () {
     bus.$on('delTableRow', this.delTableRow)
   },
   methods: {
+    configSync (row) {
+      this.syncObj = [row]
+      this.$nextTick(() => {
+        this.$refs.configSync.showDialog()
+      })
+    },
     delTableRelRow (url, row, forceDeleteShow = false, single = false, deleteTitle = '') {
       this.api = url
       this.singleDelete = [row]

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

@@ -185,6 +185,7 @@
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'endpoint']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'monitor_endpoint_add'" :command="['diagnosis', scope.row,{from:'endpoint'}]"><i class="nz-icon nz-icon-diagnosis"></i><span class="operation-dropdown-text">{{$t('overall.diagnosis')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'monitor_endpoint_add'" :command="['metricTarget', scope.row, 'endpoint']" :disabled="scope.row.configs[0].config.protocol !== ('http'||'https')"><i class="nz-icon nz-icon-Metrics"></i><span class="operation-dropdown-text">{{$t('endpoints.metricTarget')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['configSync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.synchronize')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>

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

@@ -106,6 +106,7 @@
               <el-dropdown-item v-has="'main_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'module']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'module']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'monitor_module_edit'" :command="['configSync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.synchronize')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>

nezha-fronted/src/components/page/asset/asset.vue

@@ -132,6 +132,9 @@
                   @after="getTableData"
                   @before="delFlag=true"></delete-button>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'asset_edit'" :disabled="batchDeleteObjs.length==0">
+                <config-sync type="batch" from="asset" :batch-objs="batchDeleteObjs"></config-sync>
+              </el-dropdown-item>
             </div>
           </template>
         </top-tool-more-options>
@@ -196,6 +199,7 @@
 
 <script>
 import deleteButton from '@/components/common/deleteButton'
+import configSync from '@/components/common/configSync'
 import assetBox from '@/components/common/rightBox/asset/assetBox'
 import assetBatchEditBox from '@/components/common/rightBox/asset/assetBatchEditBox'
 import nzDataList from '@/components/common/table/nzDataList'
@@ -215,6 +219,7 @@ export default {
   name: 'asset',
   components: {
     deleteButton,
+    configSync,
     assetBox,
     nzDataList,
     assetBatchEditBox,

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -129,6 +129,9 @@
                   @before="delFlag=true"
                 ></delete-button>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'monitor_endpoint_edit'" :disabled="batchDeleteObjs.length==0">
+                <config-sync type="batch" from="endpoint" :batch-objs="batchDeleteObjs"></config-sync>
+              </el-dropdown-item>
             </div>
           </template>
         </top-tool-more-options>
@@ -250,6 +253,7 @@
 </template>
 <script>
 import deleteButton from '@/components/common/deleteButton'
+import configSync from '@/components/common/configSync'
 import addEndpointBox from '@/components/common/rightBox/addEndpointBox'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
@@ -275,6 +279,7 @@ export default {
     nzDataList,
     addEndpointBox,
     deleteButton,
+    configSync,
     endpointTable,
     clickSearch,
     batchModifyEndpoint,
@@ -794,7 +799,7 @@ export default {
     },
     getSearchableStateData (data) {
       return new Promise(resolve => {
-        setTimeout(()=>{
+        setTimeout(() => {
           // this.$get('asset/model?pageSize=-1').then(response => {
           let states = []
           if (this.$route.query && this.$route.query.state) {

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -119,6 +119,9 @@
                   @before="delFlag=true"
                 ></delete-button>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'monitor_module_edit'" :disabled="batchDeleteObjs.length==0">
+                <config-sync type="batch" from="module" :batch-objs="batchDeleteObjs"></config-sync>
+              </el-dropdown-item>
             </div>
           </template>
         </top-tool-more-options>
@@ -160,6 +163,7 @@
 </template>
 <script>
 import deleteButton from '@/components/common/deleteButton'
+import configSync from '@/components/common/configSync'
 import moduleBox from '@/components/common/rightBox/moduleBox'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
@@ -178,6 +182,7 @@ export default {
     nzDataList,
     moduleBox,
     deleteButton,
+    configSync,
     moduleTable,
     alertSilenceBox,
     topToolMoreOptions,