From c0919ffdf1f2c61297f07648a693b8eeceda2825 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 17 Feb 2022 15:07:24 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1572=20feat=EF=BC=9A=20agent=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A2=9E=E5=8A=A0=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/scrapeEndpoint.vue    |  2 +-
 .../src/components/common/rightBox/agentBox.vue | 17 ++++++++++++++---
 .../common/table/settings/agentTable.vue        | 11 +++++++++--
 .../src/components/page/config/agent.vue        |  7 +++++++
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue b/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
index 100de5d93..60c4d2f01 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
@@ -11,7 +11,7 @@
       :tabs="tabs"
       @changeTab="changeTab"
     >
-      <template v-slot:title><span :title="obj.name">{{obj.dc.name}}</span></template>
+      <template v-slot:title><span :title="obj.name || obj.dc.name">{{obj.name || obj.dc.name}}</span></template>
       <template v-slot:top-tool-right>
         <div class="top-tool-right">
           <div style="margin-right: 15px;">
diff --git a/nezha-fronted/src/components/common/rightBox/agentBox.vue b/nezha-fronted/src/components/common/rightBox/agentBox.vue
index ee598ebb9..de20d35b8 100644
--- a/nezha-fronted/src/components/common/rightBox/agentBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/agentBox.vue
@@ -22,7 +22,10 @@
               </el-select>
             </div>
           </el-form-item>
-
+<!--          name-->
+          <el-form-item :label='$t("overall.name")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editPromServer.name" size="small" id="agent-box-input-name"></el-input>
+          </el-form-item>
           <!--host-->
           <el-form-item :label="$t('config.agent.host')" prop="host">
             <el-input id="prom-box-input-host" maxlength="64" show-word-limit v-model="editPromServer.host" placeholder="" size="small" type="text"></el-input>
@@ -85,7 +88,7 @@
   </div>
 </template>
 <script>
-import { host, port } from '../../common/js/validate'
+import { host, noSpecialChar, port } from '../../common/js/validate'
 import { agent2 } from '@/components/common/js/constants'
 import editRigthBox from '../mixin/editRigthBox'
 export default {
@@ -102,6 +105,10 @@ export default {
         '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' }
+        ],
         host: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { validator: host, trigger: 'blur' }
@@ -204,7 +211,11 @@ export default {
       deep: true,
       handler (n) {
         this.isEdit = true
-        this.editPromServer = JSON.parse(JSON.stringify(n))
+        const editPromServer = JSON.parse(JSON.stringify(n))
+        if (!editPromServer.name) {
+          editPromServer.name = ''
+        }
+        this.editPromServer = editPromServer
       }
     },
     'editPromServer.dc': function (n, o) {
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index 9036116b2..526f7d71a 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -42,8 +42,9 @@
         <span v-else-if="item.prop === 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <span v-else-if="item.prop === 'status'">
           <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200">
-            <div slot="reference" style="width: 20px">
-              <div :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
+            <div slot="reference" style="width: 60px">
+              <span :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></span>
+              <span>{{scope.row[item.prop] == '1' ? 'UP' : 'Down'}}</span>
             </div>
           </el-popover>
         </span>
@@ -102,6 +103,12 @@ export default {
           show: true,
           width: 80,
           sortable: 'custom'
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
         }, {
           label: this.$t('config.agent.dataCenter'),
           prop: 'dc',
diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue
index 6b7f418e5..daede046a 100644
--- a/nezha-fronted/src/components/page/config/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -126,6 +126,7 @@ export default {
       tableId: 'promTable', // 需要分页的table的id，用于记录每页数量
       blankObject: {
         id: '',
+        name: '',
         host: '',
         port: 10090,
         dc: { id: '', name: '', location: '' },
@@ -141,6 +142,12 @@ export default {
           type: 'input',
           label: 'ids',
           disabled: false
+        },
+        {
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
         }, {
           name: this.$t('dashboard.overview.dataCenter.dataCenter'),
           type: 'dc',