From ed5eae3489abbee315cb828fd8e3a366fd289f04 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 21 Mar 2022 18:07:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E4=BF=AE=E5=A4=8D=20i?=
 =?UTF-8?q?pam=20ip=20=E4=BA=8C=E7=BA=A7=E8=8F=9C=E5=8D=95=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/common/rightBox/ipam.scss  | 14 ++++++++++
 .../components/common/bottomBox/bottomBox.vue |  4 +--
 .../bottomBox/tabs/alertMessageTabNew.vue     |  5 +++-
 .../common/rightBox/ipDetailsBox.vue          | 26 +++++++++++++++++--
 .../common/table/settings/ipDetailsTable.vue  | 16 +++++++++++-
 5 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss b/nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss
index 58281a018..029964ee1 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss
@@ -24,3 +24,17 @@
   white-space:nowrap;
   width: 199px;
 }
+.ip-detail-available,.ip-detail-transient,.ip-detail-used {
+  font-size: 12px;
+  margin-right: 3px;
+  display: inline-block;
+}
+.ip-detail-used {
+  color: $--color-danger !important;
+}
+.ip-detail-transient {
+  color:$--color-silence !important;
+}
+.ip-detail-available {
+  color:$--color-success !important;
+}
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index e9dad029b..a0266a7c8 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -254,10 +254,10 @@ export default {
           { prop: 'agent', name: this.$t('config.agent.scrapeEndpoint'), active: true }
         ],
         ipam: [
-          { prop: 'ipam', name: this.$t('config.ipam.ipDetails'), active: true }
+          { prop: 'ipam', name: this.$t('ipam.subnet.ipDetails'), active: true }
         ],
         alertSilence: [
-          { prop: 'alertMessageTab', name: this.$t('config.ipam.alertSilence'), active: true }
+          { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
         ]
       }
     }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index 371880a00..61abbd155 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -16,7 +16,7 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
-        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" :disabled="from === fromRoute.alertSilence" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
         <pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
@@ -153,6 +153,9 @@ export default {
       immediate: true,
       handler (n) {
         if (n) {
+          if (this.from === fromRoute.alertSilence) {
+            this.state = '2'
+          }
           this.getTableData()
         }
       }
diff --git a/nezha-fronted/src/components/common/rightBox/ipDetailsBox.vue b/nezha-fronted/src/components/common/rightBox/ipDetailsBox.vue
index 95cb5637c..61ea90f1c 100644
--- a/nezha-fronted/src/components/common/rightBox/ipDetailsBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/ipDetailsBox.vue
@@ -44,14 +44,35 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
+import vm from '../../../main'
 
 export default {
   name: 'ipDetailsBox',
   props: {
-    obj: Object
+    obj: Object,
+    detailsType: Number
   },
   mixins: [editRigthBox],
   data () {
+    const detailsIpv = (rule, value, callback) => {
+      const Ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
+      const Ipv6 = /^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/
+      setTimeout(() => {
+        if (this.detailsType === 4) {
+          if (Ipv4.test(value)) {
+            callback()
+          } else {
+            callback(new Error(vm.$t('validate.address')))
+          }
+        } else if (this.detailsType === 6) {
+          if (Ipv6.test(value)) {
+            callback()
+          } else {
+            callback(new Error(vm.$t('validate.address')))
+          }
+        }
+      }, 100)
+    }
     return {
       editipDetails: {},
       rules: {
@@ -59,7 +80,8 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         addr: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: detailsIpv, trigger: 'blur' }
         ],
         mac: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
diff --git a/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue b/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
index ace36dd1f..e3034abee 100644
--- a/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
@@ -34,7 +34,21 @@
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
-        <template v-if="item.prop === 'asset'">{{scope.row.asset.name}}</template>
+        <template v-if="item.prop === 'asset'">{{scope.row.asset ? scope.row.asset.name : '-'}}</template>
+        <template v-else-if="item.prop === 'state'">
+          <div v-if="scope.row[item.prop] === 1">
+            <span class="nz-icon nz-icon-circle ip-detail-available"></span>
+            {{ 'Available' }}
+          </div>
+          <div v-else-if="scope.row[item.prop] === 2">
+            <span class="nz-icon nz-icon-circle ip-detail-transient"></span>
+            {{ 'Transient' }}
+          </div>
+          <div v-else-if="scope.row[item.prop] === 3">
+            <span class="nz-icon nz-icon-circle ip-detail-used"></span>
+            {{ 'Used' }}
+          </div>
+        </template>
         <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
         <template v-else>-</template>
       </template>