From e3cdcff2c379abff1b5d2c169fde49a08a939e2e Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 12 May 2023 13:42:19 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2816=20feat=EF=BC=9A=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E8=B0=83=E6=95=B4=20=20=E4=BB=A5=E5=8F=8A=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91(30%)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/asset/assetDiscoveryBox.vue      | 137 ++++++++++++++++++
 .../table/asset/assetDiscoveryTable.vue       |  14 +-
 .../components/page/asset/assetDiscovery.vue  |  33 +++--
 3 files changed, 164 insertions(+), 20 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue

diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue
new file mode 100644
index 000000000..00770d58d
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue
@@ -0,0 +1,137 @@
+<template>
+  <div v-clickoutside="{obj:editAssetDiscovery,func:clickOutside}" class="right-box right-box-prom">
+    <!-- begin--标题-->
+    <div class="right-box__header">
+      <div class="header__title">{{editAssetDiscovery.id ? ($t("config.agent.editProm")) : $t("overall.createPrometheusServer")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editAssetDiscovery, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
+      </div>
+    </div>
+    <!-- end--标题-->
+    <!-- begin--表单-->
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="agentForm" :model="editAssetDiscovery" :rules="rules" label-position = "top" label-width="120px">
+          <!--          name-->
+          <el-form-item :label='$t("overall.name")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.name" size="small" id="asset-discovery-box-input-name"></el-input>
+          </el-form-item>
+          <!--          ipSubnet-->
+          <el-form-item :label='$t("asset.ipSubnet")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.subnet" size="small" id="asset-discovery-box-input-subnet"></el-input>
+          </el-form-item>
+          <!--          snmpCredentialIds-->
+          <el-form-item :label='$t("config.mib.credentials")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.snmpCredentialIds" size="small" id="asset-discovery-box-input-credentials"></el-input>
+          </el-form-item>
+          <!--          schedule.type-->
+          <el-form-item :label='$t("alert.config.schedEnable")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.type" size="small" id="asset-discovery-box-input-type"></el-input>
+          </el-form-item>
+          <!--         schedule.stime -->
+          <el-form-item :label='$t(" Start at")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.stime" size="small" id="asset-discovery-box-input-name"></el-input>
+          </el-form-item>
+          <!--         schedule.repeat -->
+          <el-form-item :label='$t("Repeat every")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.repeat" size="small" id="asset-discovery-box-input-name"></el-input>
+          </el-form-item>
+          <!--         schedule.nums -->
+          <el-form-item :label='$t("nums")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.nums" size="small" id="asset-discovery-box-input-name"></el-input>
+          </el-form-item>
+          <!--remark-->
+          <el-form-item :label="$t('overall.remark')">
+            <el-input  maxlength="256" show-word-limit v-model="editAssetDiscovery.remark" size="small" :rows="2" type="textarea"/>
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </div>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box__footer">
+      <button id="prom-esc" v-cancel="{obj:editAssetDiscovery,func:esc}"
+              class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="prom-save" :class="{'nz-btn-disabled':prevent_opt.save}"
+              :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import { noSpecialChar } from '@/components/common/js/validate'
+import editRigthBox from '@/components/common/mixin/editRigthBox'
+export default {
+  name: 'agentBox',
+  props: {
+    assetDiscovery: Object
+  },
+  mixins: [editRigthBox],
+  data () {
+    return {
+      rules: {
+        'dc.name': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: noSpecialChar, trigger: 'blur' }
+        ]
+      },
+      editAssetDiscovery: {}
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      this.$refs.agentForm.validate(valid => {
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.editAssetDiscovery.id) {
+            this.$put('/tool/discovery', this.editAssetDiscovery).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            this.$post('/tool/discovery', this.editAssetDiscovery).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    assetDiscovery: {
+      immediate: true,
+      handler (n) {
+        this.editAssetDiscovery = this.$loadsh.cloneDeep(n)
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/table/asset/assetDiscoveryTable.vue b/nezha-fronted/src/components/common/table/asset/assetDiscoveryTable.vue
index d1af763bf..b90404f42 100644
--- a/nezha-fronted/src/components/common/table/asset/assetDiscoveryTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetDiscoveryTable.vue
@@ -119,43 +119,43 @@ export default {
           minWidth: 250,
           sortable: 'custom'
         }, {
-          label: this.$t('IP subnet'),
+          label: this.$t('asset.ipSubnet'),
           prop: 'subnet',
           show: true,
           minWidth: 250,
           sortable: 'custom'
         }, {
-          label: this.$t('SNMP credentials'),
+          label: this.$t('config.mib.credentials'),
           prop: 'snmpCredentialIds',
           show: true,
           minWidth: 250,
           sortable: 'custom'
         }, {
-          label: this.$t('Schedule'),
+          label: this.$t('alert.config.schedEnable'),
           prop: 'schedule',
           show: true,
           minWidth: 200,
           sortable: 'custom'
         }, {
-          label: this.$t('Last execute time'),
+          label: this.$t('asset.lastExecuteTime'),
           prop: 'uts',
           show: true,
           minWidth: 250,
           sortable: 'custom'
         }, {
-          label: this.$t('Duration'),
+          label: this.$t('config.terminallog.duration'),
           prop: 'duration',
           show: true,
           minWidth: 160,
           sortable: 'custom'
         }, {
-          label: this.$t('State'),
+          label: this.$t('overall.state'),
           prop: 'status',
           show: true,
           minWidth: 250,
           sortable: 'custom'
         }, {
-          label: this.$t('Discovery hosts'),
+          label: this.$t('asset.discoveryHosts'),
           prop: 'total',
           show: true,
           minWidth: 200,
diff --git a/nezha-fronted/src/components/page/asset/assetDiscovery.vue b/nezha-fronted/src/components/page/asset/assetDiscovery.vue
index 71935d437..74cf3b5b4 100644
--- a/nezha-fronted/src/components/page/asset/assetDiscovery.vue
+++ b/nezha-fronted/src/components/page/asset/assetDiscovery.vue
@@ -81,7 +81,13 @@
     </nz-data-list>
     <!--侧滑-->
     <transition name="right-box">
-
+      <assetDiscoveryBox v-if="rightBox.show"
+                 ref="assetBox"
+                 :from="fromRoute.assetDiscovery"
+                 :assetDiscovery="object"
+                 @close="closeRightBox"
+                 @refresh="getTableData">
+      </assetDiscoveryBox>
     </transition>
   </div>
 </template>
@@ -93,14 +99,15 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import assetDiscoveryTable from '@/components/common/table/asset/assetDiscoveryTable'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
-
+import assetDiscoveryBox from '@/components/common/rightBox/asset/assetDiscoveryBox'
 export default {
   name: 'assetDiscovery',
   components: {
     deleteButton,
     nzDataList,
     assetDiscoveryTable,
-    topToolMoreOptions
+    topToolMoreOptions,
+    assetDiscoveryBox
   },
   mixins: [dataListMixin, routerPathParams],
   data () {
@@ -143,14 +150,14 @@ export default {
       blankObject: {
         id: '',
         name: '',
-        metaKey: '',
-        groupIds: '',
-        group: {},
-        search: '0',
-        display: '0',
-        type: 'TEXT',
-        param: {},
-        remark: ''
+        subnet: '',
+        snmpCredentialIds: '',
+        schedule: {
+          type: 1,
+          stime: '2021-01-10 10:10:10',
+          repeat: 1,
+          nums: [1, 2, 3, 4, 5, 6, 7]
+        }
       },
       blankMetaGroup: {
         id: '',
@@ -168,8 +175,8 @@ export default {
   },
   methods: {
     add () {
-      this.object = JSON.parse(JSON.stringify(this.blankObject))
-      this.rightBox.metaShow = true
+      this.object = this.$loadsh.cloneDeep(this.blankObject)
+      this.rightBox.show = true
     },
     edit (row) {
       this.$get(`${this.url}/${row.id}`).then(response => {