From 0b343a7ffdad1ccc03635b491296e3d880fa248c Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 12 Apr 2023 11:44:54 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20alertRulebox=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9=20=E4=BB=A5=E5=8F=8A=20pro?=
 =?UTF-8?q?ject=20topology=20=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/L5/topologyTopTool.scss    | 30 ++++++++++++-------
 .../common/project/meta2d/topologyTopTool.vue |  4 +--
 .../common/rightBox/alertRuleBox.vue          | 19 +++++++-----
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss b/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss
index aea7ceb85..9d348ea29 100644
--- a/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss
@@ -29,22 +29,31 @@
 
   .top-tool-item {
     cursor: pointer;
-    background: $--background-color-base;
-    border: 1px solid $--border-color-light;
+    background-color: $--background-color-empty;
+    border: 1px solid $--button-icon-border-color;
     border-radius: 2px;
     padding: 8px 11px;
     line-height: 14px;
     margin-right: 10px;
   }
+  .top-tool-item:active{
+    background-color: $--button-icon-active-background-color;
+    border: 1px solid $--button-icon-active-border-color !important;
+    color: $--color-primary;
+  }
+  .top-tool-item.nz-btn-disabled {
+    background-color: $--background-color-empty !important;
+    border: 1px solid $--button-icon-border-color !important;
+  }
   .is-active-meta2d.top-tool-item {
-    background: mix(#FFF, $--background-color-disabled, 35%);
-    border: 1px solid mix(#000, $--background-color-disabled, 35%);
-    color: $--color-text-disabled;
+    //background: mix(#FFF, $--background-color-disabled, 35%);
+    //border: 1px solid mix(#000, $--background-color-disabled, 35%);
+    //color: $--color-text-disabled;
   }
   .top-tool-item-delete:active{
-    background: mix(#FFF, $--background-color-disabled, 35%);
-    border: 1px solid mix(#000, $--background-color-disabled, 35%);
-    color: $--color-text-disabled;
+    //background: mix(#FFF, $--background-color-disabled, 35%);
+    //border: 1px solid mix(#000, $--background-color-disabled, 35%);
+    //color: $--color-text-disabled;
   }
   .top-tool-item-scale {
     margin-left: 40px;
@@ -125,8 +134,9 @@
     }
   }
   .top-tool-item-disabled {
-    color: #CECECE;
-    opacity: 0.3;
+    background-image: none;
+    opacity: .6;
+    cursor: default !important;
   }
   .tool-item-active {
     background: #1a1a1a;
diff --git a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue b/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
index d751d23a1..fa011518c 100644
--- a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
@@ -27,13 +27,13 @@
 <!--    </div>-->
     <div id="undo"
          class="top-tool-item"
-         :class="undoFlag ? '' : 'is-active-meta2d' "
+         :class="undoFlag ? '' : 'nz-btn-disabled' "
          @click="undo">
       <i class="nz-icon nz-icon-revoke" :title="$t('overall.revocation')"/>
     </div>
     <div id="redo"
          class="top-tool-item"
-         :class="redoFlag ? '' : 'is-active-meta2d' "
+         :class="redoFlag ? '' : 'nz-btn-disabled' "
          @click="redo"
     >
       <i class="nz-icon nz-icon-revoke1"  :title="$t('overall.redo')"/>
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index c3ed50cbe..8032a1a5b 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -28,7 +28,7 @@
               @change="selectAlertRuleMetric">
               <el-option
                 v-for="item in searchMetrics"
-                :key="item.value"
+                :key="editAlertRule.type+ '-' + item.value"
                 :label="item.label"
                 :value="item.value"></el-option>
             </el-select>
@@ -78,7 +78,7 @@
           <!--threshold-->
           <el-form-item :label="$t('alert.config.threshold')" key="threshold">
             <div class="threshold-list">
-                <el-form-item v-for="(item,index) of editAlertRule.condition" :key="index" :prop="'condition.' + index + '.value'"
+                <el-form-item v-for="(item,index) of editAlertRule.condition" :key="'threshold-list' + index" :prop="'condition.' + index + '.value'"
                   :rules="[
                     { required: true, message: $t('validate.required'), trigger: 'blur'},
                     { validator: thresholdValidator, trigger: 'blur' , item:item},
@@ -89,7 +89,7 @@
                     <div class="threshold-item-center">
                       <span>{{$t('alert.config.when')}} Result</span>
                       <el-select :disabled="!showSnmpTrap" :value="item.operator" @change="operatorChange(item,index,$event)" class="hide-icon" popper-class="prevent-clickoutside" size="small">
-                        <el-option v-for="subItem in operators" :id="'operator-'+subItem.key" :key="subItem.value" :label="subItem.label" :value="subItem.value"></el-option>
+                        <el-option v-for="subItem in operators" :id="'operator-'+subItem.key" :key="'Result' + subItem.value" :label="subItem.label" :value="subItem.value"></el-option>
                       </el-select>
                     </div>
                     <el-input v-model="item.value" :placeholder="item.operator==='=~'?$t('alert.config.enterRegular'):$t('alert.config.enterThreshold')" size="small" type="text" style="flex:1"/>
@@ -209,8 +209,8 @@
             >
               <el-option
                 style="width: 620px"
-                v-for="item in userData"
-                :key="item.id"
+                v-for="(item, index) in userData"
+                :key="'receiver' + index + item.id"
                 :label="item.name"
                 :value="item.id">
                 <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
@@ -284,7 +284,7 @@
             >
               <el-option
                 v-for="item in weekList"
-                :key="item.value"
+                :key="'schedDays' + item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
@@ -532,6 +532,7 @@ export default {
           params.receiver = this.editAlertRule.receiverShow.join(',')
           params.schedDays = this.editAlertRule.schedDays.join(',')
           params.trbShot = this.$refs.richTextEditor.getContent()
+          params.condition = JSON.stringify(params.condition)
           if (this.editAlertRule.id) {
             this.$put('alert/rule', params).then(response => {
               this.prevent_opt.save = false
@@ -668,11 +669,13 @@ export default {
       immediate: true,
       handler (n, o) {
         this.isEdit = true
-        this.editAlertRule = JSON.parse(JSON.stringify(n))
+        const obj = this.$loadsh.cloneDeep(n)
+        this.editAlertRule = this.$loadsh.cloneDeep(obj)
         // 获取缓存中的告警等级列表
         const severityData = JSON.parse(localStorage.getItem('nz-severityDataWeight'))
         // 给condition赋值
         if (this.editAlertRule.condition && this.editAlertRule.condition.length) {
+          this.editAlertRule.condition = JSON.parse(this.editAlertRule.condition)
           this.$set(this.editAlertRule, 'condition', severityData.map(item => {
             item = {
               ...item,
@@ -723,7 +726,7 @@ export default {
           this.$nextTick(() => {
             this.expressions.forEach((ex, index) => {
               if (ex) {
-                this.$refs.promql.metricChange(ex)
+                this.$refs.promql && this.$refs.promql.metricChange(ex)
               }
             })
           })