From dee14d052f6df596ff605c3fa82f5e80a3be6c6b Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 16 Jun 2022 17:04:25 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1939=20fix=EF=BC=9A=20Rules=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E8=A7=86=E5=9B=BE=E5=90=8E=EF=BC=8C=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E8=99=9A=E6=B5=AE=E5=9C=A8=E5=90=8D=E7=A7=B0=E5=A4=84=E6=97=B6?=
 =?UTF-8?q?=E5=87=BA=E7=8E=B0=E9=94=99=E4=BD=8D=E7=8E=B0=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertRuleInfo.vue | 130 +++++++++---------
 .../src/components/common/js/validate.js      |   2 +-
 2 files changed, 67 insertions(+), 65 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 041e41de1..fbc7f5be8 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -1,78 +1,80 @@
 <template>
-  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
-    <div class="alert-label-header-title">
-      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
-        <i  class="nz-icon nz-icon-Alertrule"></i>
+  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels">
+    <div v-my-loading="loading">
+      <div class="alert-label-header-title">
+        <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
+          <i  class="nz-icon nz-icon-Alertrule"></i>
+        </div>
+        <div class="alert-label-header-name">
+          {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
+        </div>
       </div>
-      <div class="alert-label-header-name">
-        {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
-      </div>
-    </div>
-    <div class="alert-rule-nfo" >
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">ID</div>
-        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
-      </div>
-      <div class="alert-rule-box name-labe">
-        <div class="alert-rule-title">{{$t('overall.name')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
-      </div>
-<!--      <div class="alert-rule-box">-->
-<!--        <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
-<!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
-<!--      </div>-->
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('overall.type')}}</div>
-        <div class="alert-rule-value">
+      <div class="alert-rule-nfo" >
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">ID</div>
+          <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
+        </div>
+        <div class="alert-rule-box name-labe">
+          <div class="alert-rule-title">{{$t('overall.name')}}</div>
+          <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
+        </div>
+        <!--      <div class="alert-rule-box">-->
+        <!--        <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
+        <!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
+        <!--      </div>-->
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">{{$t('overall.type')}}</div>
+          <div class="alert-rule-value">
           <span v-if="alertRuleData.type === 1">
             {{$t('project.metrics.metrics')}}
           </span>
-          <span v-else-if="alertRuleData.type === 2">
+            <span v-else-if="alertRuleData.type === 2">
             {{$t('overall.logs')}}
           </span>
-          <span v-else-if="alertRuleData.type === 3">SNMP trap</span>
-          <span v-else>--</span>
+            <span v-else-if="alertRuleData.type === 3">SNMP trap</span>
+            <span v-else>--</span>
+          </div>
         </div>
-      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.severity')}}</div>
-        <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
-      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
-      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
-        <div class="alert-rule-value" v-if="alertRuleData">
-          <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
-            <div class="severity-info" style='justify-content: space-between'>
-              <div class="severity-name">{{$t('overall.result.total')}}</div>
-              <div class="severity-value">{{alertRuleData.alertNum}}</div>
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">{{$t('alert.severity')}}</div>
+          <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
+        </div>
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
+          <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
+        </div>
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
+          <div class="alert-rule-value" v-if="alertRuleData">
+            <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
+            <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
+              <div class="severity-info" style='justify-content: space-between'>
+                <div class="severity-name">{{$t('overall.result.total')}}</div>
+                <div class="severity-value">{{alertRuleData.alertNum}}</div>
+              </div>
             </div>
+            <alertDaysInfo
+              v-show="!trendLoading"
+              :alertDaysData="alertDaysData"
+            />
           </div>
-          <alertDaysInfo
-            v-show="!trendLoading"
-            :alertDaysData="alertDaysData"
-          />
         </div>
-      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
-        <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
-      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('overall.state')}}</div>
-        <div class="alert-rule-value" style="margin-left: 3px">
-          <div v-if="alertRuleData.state === 1">
-            <i class="active-icon green-bg inline-block"></i>
-            {{ $t('overall.enabled') }}
-          </div>
-          <div v-else-if="alertRuleData.state === 0">
-            <i class="active-icon gray-bg inline-block"></i>
-            {{ $t('overall.disabled') }}
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
+          <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
+        </div>
+        <div class="alert-rule-box">
+          <div class="alert-rule-title">{{$t('overall.state')}}</div>
+          <div class="alert-rule-value" style="margin-left: 3px">
+            <div v-if="alertRuleData.state === 1">
+              <i class="active-icon green-bg inline-block"></i>
+              {{ $t('overall.enabled') }}
+            </div>
+            <div v-else-if="alertRuleData.state === 0">
+              <i class="active-icon gray-bg inline-block"></i>
+              {{ $t('overall.disabled') }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/nezha-fronted/src/components/common/js/validate.js b/nezha-fronted/src/components/common/js/validate.js
index a2914ae63..fe429bb0e 100644
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -154,7 +154,7 @@ export function uSize (rule, value, callback) {
     } else {
       const num = Number(value)
       if (num < 0 || num > 47) {
-        callback(new Error(vm.$t('validate.usize')))
+        callback(new Error(vm.$t('validate.uSize')))
       } else {
         callback()
       }