From fed3af50f8bb0b4ee5b6ac9f92b569e3b468b700 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 16 Oct 2020 16:11:23 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9tooltip=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20=E4=BB=A5=E5=8F=8A=E5=86=85=E7=BD=AE=20ale?=
 =?UTF-8?q?rt=20rule=20expression=20=E6=98=BE=E7=A4=BA=20=20-?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertRuleInfo.vue | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 4912c9185..11454aee7 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -11,14 +11,21 @@
       <!--</div>-->
       <div class="alert-rule-box">
         <div class="alert-rule-title">Expression</div>
-        <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
+        <div class="alert-rule-value" v-if="alertRuleData.buildIn!==1">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):'-'}}</div>
+        <div class="alert-rule-value" v-if="alertRuleData.buildIn===1">-</div>
       </div>
       <div class="alert-rule-box">
         <div class="alert-rule-title">Level</div>
-        <div class="alert-rule-value">
-          <span v-if="alertRuleData && alertRuleData.severity === 'P1'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P1'}).label}}</span>
-          <span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'P2'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P2'}).label}}</span>
-          <span v-if="alertRuleData && alertRuleData.severity === 'P3'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P3'}).label}}</span>
+        <div class="alert-rule-value severity">
+          <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
+            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P1'}).label}}
+          </span>
+          <span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
+            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P2'}).label}}
+          </span>
+          <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
+            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P3'}).label}}
+          </span>
         </div>
       </div>
     </div>
@@ -192,6 +199,27 @@
     white-space: normal;
     overflow: hidden;
   }
+  .severity .P1{
+    background: #F5846A;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .P2{
+    background: #F7A54A;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .P3{
+    background: #F1C13D;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
 /*  .alert-rule-info::after {
     content: '';
     display: block;