From 2690c80e7e219c077a532b77cfc4570e86a44e18 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Thu, 15 Jun 2023 23:01:53 +0800
Subject: [PATCH 1/5] support alert define threshold expression display ui

---
 .../hertzbeat/manager/pojo/dto/Hierarchy.java |  15 ++
 .../manager/service/impl/AppServiceImpl.java  |   3 +
 .../alert-setting.component.html              | 134 +++++++++++++++---
 .../alert-setting/alert-setting.component.ts  | 106 +++++++++++++-
 web-app/src/assets/i18n/en-US.json            |  10 ++
 web-app/src/assets/i18n/zh-CN.json            |  12 +-
 web-app/src/assets/i18n/zh-TW.json            |  28 ++--
 7 files changed, 274 insertions(+), 34 deletions(-)

diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java b/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java
index 94f9358a0db..975cdff7936 100644
--- a/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java
+++ b/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java
@@ -64,6 +64,21 @@ public class Hierarchy {
      */
     @Schema(description = "是否是叶子节点", example = "true", accessMode = READ_WRITE)
     Boolean isLeaf = false;
+    
+    /**
+     * For leaf metric
+     * metric type 0-number: number 1-string: string
+     * 指标类型 0-number:数字 1-string:字符串
+     */
+    @Schema(description = "metric type 0-number: number 1-string: string")
+    private Byte type;
+    
+    /**
+     * metric unit
+     * 指标单位
+     */
+    @Schema(description = "metric unit")
+    private String unit;
 
     /**
      * Next level of association
diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java b/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java
index b339c32ecc1..073d0a5c903 100644
--- a/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java
+++ b/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java
@@ -178,6 +178,9 @@ public List<Hierarchy> getAllAppHierarchy(String lang) {
                             hierarchyField.setValue(field.getField());
                             hierarchyField.setLabel(field.getField());
                             hierarchyField.setIsLeaf(true);
+                            // for metric
+                            hierarchyField.setType(field.getType());
+                            hierarchyField.setUnit(field.getUnit());
                             hierarchyFieldList.add(hierarchyField);
                         }
                         hierarchyMetric.setChildren(hierarchyFieldList);
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index bbbde377abe..30a68a19287 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -139,14 +139,14 @@
   (nzOnCancel)="onManageModalCancel()"
   (nzOnOk)="onManageModalOk()"
   nzMaskClosable="false"
-  nzWidth="60%"
+  nzWidth="70%"
   [nzOkLoading]="isManageModalOkLoading"
 >
   <div *nzModalContent class="-inner-content">
     <form nz-form #defineForm="ngForm">
       <nz-form-item>
         <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">{{ 'alert.setting.target' | i18n }}</nz-form-label>
-        <nz-form-control [nzSpan]="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-cascader
             required
             name="target"
@@ -158,17 +158,27 @@
         </nz-form-control>
       </nz-form-item>
       <nz-form-item *ngIf="cascadeValues.length != 2">
-        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 7 }">
+        <nz-col [nzXs]="{ span: 24, offset: 0 }" [nzLg]="{ span: 8, offset: 16 }">
+          <button nz-button [nzType]="isExpr ? 'primary' : 'default'" (click)="switchAlertRuleShow()">
+            <i nz-icon nzType="code" nzTheme="outline"></i>
+            {{ 'alert.setting.rule.switch-expr' | i18n }}
+          </button>
+        </nz-col>
+      </nz-form-item>
+      <nz-form-item *ngIf="cascadeValues.length != 2 && isExpr">
+        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }">
           <nz-collapse>
             <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.expr.tip' | i18n">
               <nz-list nzSize="small" nzSplit="false">
-                <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>{{ cascadeValues[2] }} : {{ 'alert.setting.target.tip' | i18n }}</code>
-                </nz-list-item>
-                <nz-list-item *ngFor="let item of otherMetrics">
-                  <code>{{ item }} : {{ 'alert.setting.target.other' | i18n }}</code>
+                <nz-list-item *ngFor="let item of currentMetrics; let i = index">
+                  <code>
+                    {{ item.value }} : {{ i == 0 ? ('alert.setting.target.tip' | i18n) : ('alert.setting.target.other' | i18n) }}
+                  </code>
+                  <nz-tag [nzColor]="item.type === 0 ? 'success' : 'processing'">
+                    {{ item.type === 0 ? ('alert.setting.number' | i18n) : ('alert.setting.string' | i18n) }}
+                  </nz-tag>
                 </nz-list-item>
-                <nz-list-item *ngIf="otherMetrics.length != 0">
+                <nz-list-item *ngIf="currentMetrics.length > 1">
                   <code>instance : {{ 'alert.setting.target.instance' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item>
@@ -179,11 +189,11 @@
           </nz-collapse>
         </nz-col>
       </nz-form-item>
-      <nz-form-item *ngIf="cascadeValues.length != 2">
+      <nz-form-item *ngIf="cascadeValues.length != 2 && isExpr">
         <nz-form-label [nzSpan]="7" nzFor="expr" nzRequired="true" [nzTooltipTitle]="'alert.setting.expr.label' | i18n">
-          {{ 'alert.setting.expr' | i18n }}
+          {{ 'alert.setting.rule' | i18n }}
         </nz-form-label>
-        <nz-form-control [nzSpan]="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-textarea-count [nzMaxCharacterCount]="100">
             <textarea
               [(ngModel)]="define.expr"
@@ -198,6 +208,92 @@
           </nz-textarea-count>
         </nz-form-control>
       </nz-form-item>
+      <nz-form-item *ngIf="cascadeValues.length != 2 && !isExpr">
+        <nz-form-label [nzSpan]="7" nzFor="rule" nzRequired="true" [nzTooltipTitle]="'alert.setting.rule.label' | i18n">
+          {{ 'alert.setting.rule' | i18n }}
+        </nz-form-label>
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
+          <div id="rule">
+            <div style="width: 100%; margin-bottom: 2px" nz-row *ngFor="let alertRule of alertRules; let i = index">
+              <nz-select
+                [(ngModel)]="alertRule.metric"
+                [ngModelOptions]="{ standalone: true }"
+                nz-col
+                nzSpan="8"
+                [nzDropdownMatchSelectWidth]="false"
+                [nzPlaceHolder]="'alert.setting.rule.metric.place-holder' | i18n"
+              >
+                <nz-option *ngFor="let item of currentMetrics" [nzValue]="item" [nzLabel]="item.value" nzCustomContent>
+                  {{ item.value }}
+                  <nz-tag [nzColor]="item.type === 0 ? 'success' : 'processing'">
+                    {{ item.type === 0 ? ('alert.setting.number' | i18n) : ('alert.setting.string' | i18n) }}
+                  </nz-tag>
+                  <nz-tag *ngIf="item.unit">
+                    {{ item.unit }}
+                  </nz-tag>
+                </nz-option>
+              </nz-select>
+              <nz-select
+                [(ngModel)]="alertRule.operator"
+                [ngModelOptions]="{ standalone: true }"
+                nz-col
+                nzSpan="4"
+                [nzShowArrow]="false"
+                style="text-align: center; font-weight: bolder"
+                [nzDropdownStyle]="{ 'text-align': 'center', 'font-weight': 'bolder', 'font-size': 'larger' }"
+                [nzPlaceHolder]="'alert.setting.rule.operator' | i18n"
+              >
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'>'" [nzLabel]="'>'"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'<'" [nzLabel]="'<'"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'=='" [nzLabel]="'=='"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'!='" [nzLabel]="'!='"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'<='" [nzLabel]="'<='"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'>='" [nzLabel]="'<='"></nz-option>
+                <nz-option
+                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
+                  [nzValue]="'equals'"
+                  [nzLabel]="'alert.setting.rule.operator.str-equals' | i18n"
+                ></nz-option>
+                <nz-option
+                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
+                  [nzValue]="'!equals'"
+                  [nzLabel]="'alert.setting.rule.operator.str-no-equals' | i18n"
+                ></nz-option>
+              </nz-select>
+              <input
+                nz-input
+                [(ngModel)]="alertRule.value"
+                [ngModelOptions]="{ standalone: true }"
+                [placeholder]="'alert.setting.rule.match-value.place-holder' | i18n"
+                nz-col
+                nzSpan="10"
+              />
+              <button
+                *ngIf="i === alertRules.length - 1 && i < 4"
+                nz-button
+                nzType="primary"
+                nz-col
+                nzSpan="2"
+                nzGhost="true"
+                (click)="onAddNewAlertRule()"
+              >
+                <span nz-icon nzType="plus"></span>
+              </button>
+              <button
+                *ngIf="i != alertRules.length - 1 || i == 4"
+                nz-button
+                nz-col
+                nzSpan="2"
+                nzDanger
+                nzGhost="true"
+                (click)="onRemoveAlertRule(i)"
+              >
+                <span nz-icon nzType="minus"></span>
+              </button>
+            </div>
+          </div>
+        </nz-form-control>
+      </nz-form-item>
       <nz-form-item *ngIf="cascadeValues.length == 2">
         <nz-form-label [nzSpan]="7" nzFor="available">
           {{ 'monitor.availability' | i18n }}
@@ -214,7 +310,7 @@
         <nz-form-label nzSpan="7" nzRequired="true" nzFor="priority" [nzTooltipTitle]="'alert.setting.priority.tip' | i18n">
           {{ 'alert.priority' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-select [(ngModel)]="define.priority" nzPlaceHolder="Choose" name="priority" id="priority">
             <nz-option [nzValue]="0" [nzLabel]="'alert.priority.0' | i18n"></nz-option>
             <nz-option [nzValue]="1" [nzLabel]="'alert.priority.1' | i18n"></nz-option>
@@ -226,13 +322,13 @@
         <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" [nzTooltipTitle]="'alert.setting.times.tip' | i18n">
           {{ 'alert.setting.times' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="999" [nzStep]="1" required name="duration" id="duration">
           </nz-input-number>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 7 }">
+        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }">
           <nz-collapse>
             <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.template.tip' | i18n">
               <nz-list nzSize="small" nzSplit="false">
@@ -248,7 +344,7 @@
                 <nz-list-item *ngIf="cascadeValues.length == 3">
                   <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : {{ 'alert.setting.template.metric-value' | i18n }}</code>
                 </nz-list-item>
-                <nz-list-item *ngFor="let item of otherMetrics">
+                <nz-list-item *ngFor="let item of currentMetrics">
                   <code>&#36;{{ '{' + item + '}' }} : {{ 'alert.setting.template.other-value' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngIf="cascadeValues.length == 3">
@@ -263,7 +359,7 @@
         <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" [nzTooltipTitle]="'alert.setting.template.label' | i18n">
           {{ 'alert.setting.template' | i18n }}
         </nz-form-label>
-        <nz-form-control [nzSpan]="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-textarea-count [nzMaxCharacterCount]="200">
             <textarea
               [(ngModel)]="define.template"
@@ -282,7 +378,7 @@
         <nz-form-label nzSpan="7" nzFor="preset" [nzTooltipTitle]="'alert.setting.default.tip' | i18n">
           {{ 'alert.setting.default' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10">
+        <nz-form-control nzSpan="12">
           <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
         </nz-form-control>
       </nz-form-item>
@@ -290,7 +386,7 @@
         <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" [nzTooltipTitle]="'alert.setting.enable.tip' | i18n">
           {{ 'alert.setting.enable' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10">
+        <nz-form-control nzSpan="12">
           <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" name="enable" id="enable"></nz-switch>
         </nz-form-control>
       </nz-form-item>
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
index ccdf9326d16..32910268765 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
@@ -181,6 +181,7 @@ export class AlertSettingComponent implements OnInit {
               this.cascadeValues = [this.define.app, this.define.metric];
             }
             this.cascadeOnChange(this.cascadeValues);
+            this.renderAlertRuleExpr(this.define.expr);
           } else {
             this.notifySvc.error(this.i18nSvc.fanyi('common.notify.monitor-fail'), message.msg);
           }
@@ -281,7 +282,9 @@ export class AlertSettingComponent implements OnInit {
   isManageModalAdd = true;
   define: AlertDefine = new AlertDefine();
   cascadeValues: string[] = [];
-  otherMetrics: string[] = [];
+  currentMetrics: any[] = [];
+  alertRules: any[] = [{}];
+  isExpr = false;
   cascadeOnChange(values: string[]): void {
     if (values == null || values.length != 3) {
       return;
@@ -290,12 +293,10 @@ export class AlertSettingComponent implements OnInit {
       if (hierarchy.value == values[0]) {
         hierarchy.children.forEach((metrics: { value: string; children: any[] }) => {
           if (metrics.value == values[1]) {
-            this.otherMetrics = [];
+            this.currentMetrics = [];
             if (metrics.children) {
               metrics.children.forEach(item => {
-                if (item.value != values[2]) {
-                  this.otherMetrics.push(item.value);
-                }
+                this.currentMetrics.push(item);
               });
             }
           }
@@ -303,6 +304,95 @@ export class AlertSettingComponent implements OnInit {
       }
     });
   }
+
+  switchAlertRuleShow() {
+    this.isExpr = !this.isExpr;
+    if (this.isExpr) {
+      let expr = this.calculateAlertRuleExpr();
+      if (expr != '') {
+        this.define.expr = expr;
+      }
+    }
+  }
+
+  onAddNewAlertRule() {
+    this.alertRules.push({});
+  }
+
+  onRemoveAlertRule(index: number) {
+    this.alertRules.splice(index, 1);
+  }
+
+  calculateAlertRuleExpr() {
+    let rules = this.alertRules.filter(rule => rule.metric != undefined && rule.operator != undefined && rule.value != undefined);
+    let index = 0;
+    let expr = '';
+    rules.forEach(rule => {
+      let ruleStr = '';
+      if (rule.metric.type === 0) {
+        ruleStr = `${rule.metric.value} ${rule.operator} ${rule.value} `;
+      } else if (rule.metric.type === 1) {
+        ruleStr = `${rule.operator}(${rule.metric.value},"${rule.value}")`;
+      }
+      if (ruleStr != '') {
+        expr = expr + ruleStr;
+      }
+      if (index != rules.length - 1) {
+        expr = `${expr} && `;
+      }
+      index++;
+    });
+    return expr;
+  }
+
+  renderAlertRuleExpr(expr: string) {
+    if (expr == undefined || expr == '') {
+      return;
+    }
+    if (expr.indexOf('||') > 0 || expr.indexOf(' + ') > 0 || expr.indexOf(' - ') > 0) {
+      this.isExpr = true;
+      return;
+    }
+    this.alertRules = [];
+    try {
+      let exprArr: string[] = expr.split('&&');
+      for (let index in exprArr) {
+        let exprStr = exprArr[index].trim();
+        if (exprStr.startsWith('!equals') || exprStr.startsWith('equals')) {
+          let tmp = exprStr.substring(exprStr.indexOf('(') + 1, exprStr.length - 1);
+          let tmpArr = tmp.split(',');
+          if (tmpArr.length == 2) {
+            let metric = this.currentMetrics.find(item => item.value == tmpArr[0].trim());
+            let value = tmpArr[1].substring(1, tmpArr[1].length - 1);
+            if (exprStr.startsWith('!')) {
+              let rule = { metric: metric, operator: '!equals', value: value };
+              this.alertRules.push(rule);
+            } else {
+              let rule = { metric: metric, operator: 'equals', value: value };
+              this.alertRules.push(rule);
+            }
+          }
+        } else {
+          let values = exprStr.trim().split(' ');
+          if (values.length == 3) {
+            let metric = this.currentMetrics.find(item => item.value == values[0].trim());
+            let rule = { metric: metric, operator: values[1].trim(), value: values[2].trim() };
+            this.alertRules.push(rule);
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      this.isExpr = true;
+      this.alertRules = [{}];
+      return;
+    }
+    if (this.alertRules.length == 0) {
+      this.alertRules = [{}];
+      this.isExpr = true;
+    }
+  }
+
   onManageModalCancel() {
     this.isManageModalVisible = false;
   }
@@ -315,6 +405,12 @@ export class AlertSettingComponent implements OnInit {
     } else {
       this.define.expr = '';
     }
+    if (!this.isExpr) {
+      let expr = this.calculateAlertRuleExpr();
+      if (expr != '') {
+        this.define.expr = expr;
+      }
+    }
     if (this.isManageModalAdd) {
       const modalOk$ = this.alertDefineSvc
         .newAlertDefine(this.define)
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index c558d393067..560bae9e5e5 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -106,6 +106,16 @@
   "alert.setting.target": "Metric Target",
   "alert.setting.expr": "Threshold Trigger Expr",
   "alert.setting.trigger": "Trigger Threshold Alerts",
+  "alert.setting.rule": "Threshold Rule",
+  "alert.setting.number": "Numeric",
+  "alert.setting.string": "String",
+  "alert.setting.rule.label": "Graphical selection to set indicator trigger alarm rules, support multiple rules and",
+  "alert.setting.rule.metric.place-holder": "Please select metric",
+  "alert.setting.rule.switch-expr": "Coding Threshold",
+  "alert.setting.rule.operator": "Operator",
+  "alert.setting.rule.operator.str-equals": "equals",
+  "alert.setting.rule.operator.str-no-equals": "not equals",
+  "alert.setting.rule.match-value.place-holder": "Please enter a matching value",
   "alert.setting.times": "Trigger Times",
   "alert.setting.times.tip": "Set how many times the threshold is triggered before sending an alert",
   "alert.setting.template": "Notice Template",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 1fcdd0b3931..d291e0f7746 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -106,6 +106,16 @@
   "alert.setting.target": "指标对象",
   "alert.setting.expr": "阈值触发表达式",
   "alert.setting.trigger": "异常时触发告警",
+  "alert.setting.rule": "阈值规则",
+  "alert.setting.number": "数值型",
+  "alert.setting.string": "字符型",
+  "alert.setting.rule.label": "图形化选择设置指标触发告警规则,支持多规则与",
+  "alert.setting.rule.metric.place-holder": "请选择指标",
+  "alert.setting.rule.switch-expr": "阈值表达式",
+  "alert.setting.rule.operator": "运算符",
+  "alert.setting.rule.operator.str-equals": "等于",
+  "alert.setting.rule.operator.str-no-equals": "不等于",
+  "alert.setting.rule.match-value.place-holder": "请输入匹配值",
   "alert.setting.times": "触发次数",
   "alert.setting.times.tip": "设置触发阈值多少次之后才会发送告警",
   "alert.setting.template": "通知模版",
@@ -126,7 +136,7 @@
   "alert.setting.connect.left": "未关联监控",
   "alert.setting.connect.right": "已关联监控",
   "alert.setting.expr.tip": "支持的阈值触发表达式环境变量与操作符",
-  "alert.setting.expr.label": "根据此表达式来计算判断是否触发阈值,表达式环境变量和操作符见上方",
+  "alert.setting.expr.label": "表达式配置指标触发告警规则,表达式环境变量和操作符见上方",
   "alert.setting.expr.example": "根据此表达式计算判断是否触发阈值.示例",
   "alert.setting.priority.tip": "触发阈值的告警级别,从低到高依次为:警告-warning，严重-critical，紧急-emergency",
   "alert.setting.target.tip": "选中的指标对象",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index 0ff4cd25dd8..3e8d3da5c33 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -3,7 +3,7 @@
     "main": "主導航",
     "lang": "語言",
     "dashboard": "儀表盤",
-    "search.placeholder": "搜索監控：名稱、IP等",
+    "search.placeholder": "搜索監控:名稱、IP等",
     "fullscreen": "全屏",
     "fullscreen.exit": "退出全屏",
     "clear.local.storage": "清理本地緩存",
@@ -106,6 +106,16 @@
   "alert.setting.target": "指標對象",
   "alert.setting.expr": "阈值觸發表達式",
   "alert.setting.trigger": "異常時觸發告警",
+  "alert.setting.rule": "閾值規則",
+  "alert.setting.number": "數值型",
+  "alert.setting.string": "字符型",
+  "alert.setting.rule.label": "圖形化選擇設置指標觸發告警規則,支援多規則與",
+  "alert.setting.rule.metric.place-holder": "請選擇指標",
+  "alert.setting.rule.switch-expr": "閾值表達式",
+  "alert.setting.rule.operator": "運算符",
+  "alert.setting.rule.operator.str-equals": "等於",
+  "alert.setting.rule.operator.str-no-equals": "不等於",
+  "alert.setting.rule.match-value.place-holder": "請輸入匹配值",
   "alert.setting.times": "觸發次數",
   "alert.setting.times.tip": "設置觸發阈值多少次之後才會發送告警",
   "alert.setting.template": "通知模版",
@@ -126,9 +136,9 @@
   "alert.setting.connect.left": "未關聯監控",
   "alert.setting.connect.right": "已關聯監控",
   "alert.setting.expr.tip": "支持的阈值觸發表達式環境變量與操作符",
-  "alert.setting.expr.label": "根據此表達式來計算判斷是否觸發阈值,表達式環境變量和操作符見上方",
+  "alert.setting.expr.label": "根據表達式計算觸發阈值,表達式環境變量和操作符見上方",
   "alert.setting.expr.example": "根據此表達式計算判斷是否觸發阈值.示例",
-  "alert.setting.priority.tip": "觸發阈值的告警級別,從低到高依次爲:警告-warning，嚴重-critical，緊急-emergency",
+  "alert.setting.priority.tip": "觸發阈值的告警級別,從低到高依次爲:警告-warning,嚴重-critical,緊急-emergency",
   "alert.setting.target.tip": "選中的指標對象",
   "alert.setting.target.other": "所屬行其它指標對象",
   "alert.setting.target.instance": "所屬行實例",
@@ -255,7 +265,7 @@
   "monitors.edit": "編輯",
   "monitors.edit.success": "修改監控成功",
   "monitors.edit.failed": "修改監控失敗",
-  "monitors.not-found": "查詢異常，此監控不存在",
+  "monitors.not-found": "查詢異常,此監控不存在",
   "monitors.delete": "刪除",
   "monitors.edit-monitor": "編輯監控",
   "monitors.delete-monitor": "刪除監控",
@@ -286,7 +296,7 @@
   "monitors.detail.history": "監控曆史圖表詳情",
   "monitors.collect.time": "采集時間",
   "monitors.collect.time.tip": "最近采集時間",
-  "monitors.detail.time-series.unavailable": "無法提供曆史圖表數據，請配置時序數據庫",
+  "monitors.detail.time-series.unavailable": "無法提供曆史圖表數據,請配置時序數據庫",
   "monitors.detail.chart.zoom": "區域縮放",
   "monitors.detail.chart.back": "縮放還原",
   "monitors.detail.chart.save": "保存圖片",
@@ -391,7 +401,7 @@
   "tag.update-time": "更新時間",
   "tag.display": "效果",
   "tag.bind": "綁定標簽",
-  "tag.bind.tip": "您可以使用標簽(Tag)進行監控資源的分類管理， 例如給資源分別綁定生産環境、測試環境的標簽。",
+  "tag.bind.tip": "您可以使用標簽(Tag)進行監控資源的分類管理, 例如給資源分別綁定生産環境、測試環境的標簽。",
   "define.save-apply": "保存並應用",
   "define.delete": "刪除監控類型",
   "define.delete.confirm": "請確認是否刪除 {{app}} 監控類型? 刪除後無法添加此類監控。",
@@ -412,9 +422,9 @@
   "validation.password.required": "請輸入密碼！",
   "validation.password.twice": "兩次輸入的密碼不匹配!",
   "validation.password.strength.msg": "請至少輸入 6 個字符。請不要使用容易被猜到的密碼。",
-  "validation.password.strength.strong": "強度：強",
-  "validation.password.strength.medium": "強度：中",
-  "validation.password.strength.short": "強度：太短",
+  "validation.password.strength.strong": "強度:強",
+  "validation.password.strength.medium": "強度:中",
+  "validation.password.strength.short": "強度:太短",
   "validation.confirm-password.required": "請確認密碼！",
   "validation.phone-number.required": "請輸入手機號！",
   "validation.phone-number.wrong-format": "手機號格式錯誤！",

From 74da4825f822ca954815a7c12c9faab2d450eddc Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Thu, 15 Jun 2023 23:01:53 +0800
Subject: [PATCH 2/5] support alert define threshold expression display ui

---
 .../hertzbeat/manager/pojo/dto/Hierarchy.java |  15 ++
 .../manager/service/impl/AppServiceImpl.java  |   3 +
 .../alert-setting.component.html              | 134 +++++++++++++++---
 .../alert-setting/alert-setting.component.ts  | 106 +++++++++++++-
 web-app/src/assets/i18n/en-US.json            |  10 ++
 web-app/src/assets/i18n/zh-CN.json            |  12 +-
 web-app/src/assets/i18n/zh-TW.json            |  28 ++--
 7 files changed, 274 insertions(+), 34 deletions(-)

diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java b/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java
index 94f9358a0db..975cdff7936 100644
--- a/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java
+++ b/manager/src/main/java/org/dromara/hertzbeat/manager/pojo/dto/Hierarchy.java
@@ -64,6 +64,21 @@ public class Hierarchy {
      */
     @Schema(description = "是否是叶子节点", example = "true", accessMode = READ_WRITE)
     Boolean isLeaf = false;
+    
+    /**
+     * For leaf metric
+     * metric type 0-number: number 1-string: string
+     * 指标类型 0-number:数字 1-string:字符串
+     */
+    @Schema(description = "metric type 0-number: number 1-string: string")
+    private Byte type;
+    
+    /**
+     * metric unit
+     * 指标单位
+     */
+    @Schema(description = "metric unit")
+    private String unit;
 
     /**
      * Next level of association
diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java b/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java
index b339c32ecc1..073d0a5c903 100644
--- a/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java
+++ b/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/AppServiceImpl.java
@@ -178,6 +178,9 @@ public List<Hierarchy> getAllAppHierarchy(String lang) {
                             hierarchyField.setValue(field.getField());
                             hierarchyField.setLabel(field.getField());
                             hierarchyField.setIsLeaf(true);
+                            // for metric
+                            hierarchyField.setType(field.getType());
+                            hierarchyField.setUnit(field.getUnit());
                             hierarchyFieldList.add(hierarchyField);
                         }
                         hierarchyMetric.setChildren(hierarchyFieldList);
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index bbbde377abe..30a68a19287 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -139,14 +139,14 @@
   (nzOnCancel)="onManageModalCancel()"
   (nzOnOk)="onManageModalOk()"
   nzMaskClosable="false"
-  nzWidth="60%"
+  nzWidth="70%"
   [nzOkLoading]="isManageModalOkLoading"
 >
   <div *nzModalContent class="-inner-content">
     <form nz-form #defineForm="ngForm">
       <nz-form-item>
         <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">{{ 'alert.setting.target' | i18n }}</nz-form-label>
-        <nz-form-control [nzSpan]="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-cascader
             required
             name="target"
@@ -158,17 +158,27 @@
         </nz-form-control>
       </nz-form-item>
       <nz-form-item *ngIf="cascadeValues.length != 2">
-        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 7 }">
+        <nz-col [nzXs]="{ span: 24, offset: 0 }" [nzLg]="{ span: 8, offset: 16 }">
+          <button nz-button [nzType]="isExpr ? 'primary' : 'default'" (click)="switchAlertRuleShow()">
+            <i nz-icon nzType="code" nzTheme="outline"></i>
+            {{ 'alert.setting.rule.switch-expr' | i18n }}
+          </button>
+        </nz-col>
+      </nz-form-item>
+      <nz-form-item *ngIf="cascadeValues.length != 2 && isExpr">
+        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }">
           <nz-collapse>
             <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.expr.tip' | i18n">
               <nz-list nzSize="small" nzSplit="false">
-                <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>{{ cascadeValues[2] }} : {{ 'alert.setting.target.tip' | i18n }}</code>
-                </nz-list-item>
-                <nz-list-item *ngFor="let item of otherMetrics">
-                  <code>{{ item }} : {{ 'alert.setting.target.other' | i18n }}</code>
+                <nz-list-item *ngFor="let item of currentMetrics; let i = index">
+                  <code>
+                    {{ item.value }} : {{ i == 0 ? ('alert.setting.target.tip' | i18n) : ('alert.setting.target.other' | i18n) }}
+                  </code>
+                  <nz-tag [nzColor]="item.type === 0 ? 'success' : 'processing'">
+                    {{ item.type === 0 ? ('alert.setting.number' | i18n) : ('alert.setting.string' | i18n) }}
+                  </nz-tag>
                 </nz-list-item>
-                <nz-list-item *ngIf="otherMetrics.length != 0">
+                <nz-list-item *ngIf="currentMetrics.length > 1">
                   <code>instance : {{ 'alert.setting.target.instance' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item>
@@ -179,11 +189,11 @@
           </nz-collapse>
         </nz-col>
       </nz-form-item>
-      <nz-form-item *ngIf="cascadeValues.length != 2">
+      <nz-form-item *ngIf="cascadeValues.length != 2 && isExpr">
         <nz-form-label [nzSpan]="7" nzFor="expr" nzRequired="true" [nzTooltipTitle]="'alert.setting.expr.label' | i18n">
-          {{ 'alert.setting.expr' | i18n }}
+          {{ 'alert.setting.rule' | i18n }}
         </nz-form-label>
-        <nz-form-control [nzSpan]="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-textarea-count [nzMaxCharacterCount]="100">
             <textarea
               [(ngModel)]="define.expr"
@@ -198,6 +208,92 @@
           </nz-textarea-count>
         </nz-form-control>
       </nz-form-item>
+      <nz-form-item *ngIf="cascadeValues.length != 2 && !isExpr">
+        <nz-form-label [nzSpan]="7" nzFor="rule" nzRequired="true" [nzTooltipTitle]="'alert.setting.rule.label' | i18n">
+          {{ 'alert.setting.rule' | i18n }}
+        </nz-form-label>
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
+          <div id="rule">
+            <div style="width: 100%; margin-bottom: 2px" nz-row *ngFor="let alertRule of alertRules; let i = index">
+              <nz-select
+                [(ngModel)]="alertRule.metric"
+                [ngModelOptions]="{ standalone: true }"
+                nz-col
+                nzSpan="8"
+                [nzDropdownMatchSelectWidth]="false"
+                [nzPlaceHolder]="'alert.setting.rule.metric.place-holder' | i18n"
+              >
+                <nz-option *ngFor="let item of currentMetrics" [nzValue]="item" [nzLabel]="item.value" nzCustomContent>
+                  {{ item.value }}
+                  <nz-tag [nzColor]="item.type === 0 ? 'success' : 'processing'">
+                    {{ item.type === 0 ? ('alert.setting.number' | i18n) : ('alert.setting.string' | i18n) }}
+                  </nz-tag>
+                  <nz-tag *ngIf="item.unit">
+                    {{ item.unit }}
+                  </nz-tag>
+                </nz-option>
+              </nz-select>
+              <nz-select
+                [(ngModel)]="alertRule.operator"
+                [ngModelOptions]="{ standalone: true }"
+                nz-col
+                nzSpan="4"
+                [nzShowArrow]="false"
+                style="text-align: center; font-weight: bolder"
+                [nzDropdownStyle]="{ 'text-align': 'center', 'font-weight': 'bolder', 'font-size': 'larger' }"
+                [nzPlaceHolder]="'alert.setting.rule.operator' | i18n"
+              >
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'>'" [nzLabel]="'>'"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'<'" [nzLabel]="'<'"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'=='" [nzLabel]="'=='"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'!='" [nzLabel]="'!='"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'<='" [nzLabel]="'<='"></nz-option>
+                <nz-option *ngIf="!alertRule.metric || alertRule.metric.type === 0" [nzValue]="'>='" [nzLabel]="'<='"></nz-option>
+                <nz-option
+                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
+                  [nzValue]="'equals'"
+                  [nzLabel]="'alert.setting.rule.operator.str-equals' | i18n"
+                ></nz-option>
+                <nz-option
+                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
+                  [nzValue]="'!equals'"
+                  [nzLabel]="'alert.setting.rule.operator.str-no-equals' | i18n"
+                ></nz-option>
+              </nz-select>
+              <input
+                nz-input
+                [(ngModel)]="alertRule.value"
+                [ngModelOptions]="{ standalone: true }"
+                [placeholder]="'alert.setting.rule.match-value.place-holder' | i18n"
+                nz-col
+                nzSpan="10"
+              />
+              <button
+                *ngIf="i === alertRules.length - 1 && i < 4"
+                nz-button
+                nzType="primary"
+                nz-col
+                nzSpan="2"
+                nzGhost="true"
+                (click)="onAddNewAlertRule()"
+              >
+                <span nz-icon nzType="plus"></span>
+              </button>
+              <button
+                *ngIf="i != alertRules.length - 1 || i == 4"
+                nz-button
+                nz-col
+                nzSpan="2"
+                nzDanger
+                nzGhost="true"
+                (click)="onRemoveAlertRule(i)"
+              >
+                <span nz-icon nzType="minus"></span>
+              </button>
+            </div>
+          </div>
+        </nz-form-control>
+      </nz-form-item>
       <nz-form-item *ngIf="cascadeValues.length == 2">
         <nz-form-label [nzSpan]="7" nzFor="available">
           {{ 'monitor.availability' | i18n }}
@@ -214,7 +310,7 @@
         <nz-form-label nzSpan="7" nzRequired="true" nzFor="priority" [nzTooltipTitle]="'alert.setting.priority.tip' | i18n">
           {{ 'alert.priority' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-select [(ngModel)]="define.priority" nzPlaceHolder="Choose" name="priority" id="priority">
             <nz-option [nzValue]="0" [nzLabel]="'alert.priority.0' | i18n"></nz-option>
             <nz-option [nzValue]="1" [nzLabel]="'alert.priority.1' | i18n"></nz-option>
@@ -226,13 +322,13 @@
         <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" [nzTooltipTitle]="'alert.setting.times.tip' | i18n">
           {{ 'alert.setting.times' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="999" [nzStep]="1" required name="duration" id="duration">
           </nz-input-number>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 7 }">
+        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }">
           <nz-collapse>
             <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.template.tip' | i18n">
               <nz-list nzSize="small" nzSplit="false">
@@ -248,7 +344,7 @@
                 <nz-list-item *ngIf="cascadeValues.length == 3">
                   <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : {{ 'alert.setting.template.metric-value' | i18n }}</code>
                 </nz-list-item>
-                <nz-list-item *ngFor="let item of otherMetrics">
+                <nz-list-item *ngFor="let item of currentMetrics">
                   <code>&#36;{{ '{' + item + '}' }} : {{ 'alert.setting.template.other-value' | i18n }}</code>
                 </nz-list-item>
                 <nz-list-item *ngIf="cascadeValues.length == 3">
@@ -263,7 +359,7 @@
         <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" [nzTooltipTitle]="'alert.setting.template.label' | i18n">
           {{ 'alert.setting.template' | i18n }}
         </nz-form-label>
-        <nz-form-control [nzSpan]="10" [nzErrorTip]="'validation.required' | i18n">
+        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
           <nz-textarea-count [nzMaxCharacterCount]="200">
             <textarea
               [(ngModel)]="define.template"
@@ -282,7 +378,7 @@
         <nz-form-label nzSpan="7" nzFor="preset" [nzTooltipTitle]="'alert.setting.default.tip' | i18n">
           {{ 'alert.setting.default' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10">
+        <nz-form-control nzSpan="12">
           <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
         </nz-form-control>
       </nz-form-item>
@@ -290,7 +386,7 @@
         <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" [nzTooltipTitle]="'alert.setting.enable.tip' | i18n">
           {{ 'alert.setting.enable' | i18n }}
         </nz-form-label>
-        <nz-form-control nzSpan="10">
+        <nz-form-control nzSpan="12">
           <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" name="enable" id="enable"></nz-switch>
         </nz-form-control>
       </nz-form-item>
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
index ccdf9326d16..32910268765 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
@@ -181,6 +181,7 @@ export class AlertSettingComponent implements OnInit {
               this.cascadeValues = [this.define.app, this.define.metric];
             }
             this.cascadeOnChange(this.cascadeValues);
+            this.renderAlertRuleExpr(this.define.expr);
           } else {
             this.notifySvc.error(this.i18nSvc.fanyi('common.notify.monitor-fail'), message.msg);
           }
@@ -281,7 +282,9 @@ export class AlertSettingComponent implements OnInit {
   isManageModalAdd = true;
   define: AlertDefine = new AlertDefine();
   cascadeValues: string[] = [];
-  otherMetrics: string[] = [];
+  currentMetrics: any[] = [];
+  alertRules: any[] = [{}];
+  isExpr = false;
   cascadeOnChange(values: string[]): void {
     if (values == null || values.length != 3) {
       return;
@@ -290,12 +293,10 @@ export class AlertSettingComponent implements OnInit {
       if (hierarchy.value == values[0]) {
         hierarchy.children.forEach((metrics: { value: string; children: any[] }) => {
           if (metrics.value == values[1]) {
-            this.otherMetrics = [];
+            this.currentMetrics = [];
             if (metrics.children) {
               metrics.children.forEach(item => {
-                if (item.value != values[2]) {
-                  this.otherMetrics.push(item.value);
-                }
+                this.currentMetrics.push(item);
               });
             }
           }
@@ -303,6 +304,95 @@ export class AlertSettingComponent implements OnInit {
       }
     });
   }
+
+  switchAlertRuleShow() {
+    this.isExpr = !this.isExpr;
+    if (this.isExpr) {
+      let expr = this.calculateAlertRuleExpr();
+      if (expr != '') {
+        this.define.expr = expr;
+      }
+    }
+  }
+
+  onAddNewAlertRule() {
+    this.alertRules.push({});
+  }
+
+  onRemoveAlertRule(index: number) {
+    this.alertRules.splice(index, 1);
+  }
+
+  calculateAlertRuleExpr() {
+    let rules = this.alertRules.filter(rule => rule.metric != undefined && rule.operator != undefined && rule.value != undefined);
+    let index = 0;
+    let expr = '';
+    rules.forEach(rule => {
+      let ruleStr = '';
+      if (rule.metric.type === 0) {
+        ruleStr = `${rule.metric.value} ${rule.operator} ${rule.value} `;
+      } else if (rule.metric.type === 1) {
+        ruleStr = `${rule.operator}(${rule.metric.value},"${rule.value}")`;
+      }
+      if (ruleStr != '') {
+        expr = expr + ruleStr;
+      }
+      if (index != rules.length - 1) {
+        expr = `${expr} && `;
+      }
+      index++;
+    });
+    return expr;
+  }
+
+  renderAlertRuleExpr(expr: string) {
+    if (expr == undefined || expr == '') {
+      return;
+    }
+    if (expr.indexOf('||') > 0 || expr.indexOf(' + ') > 0 || expr.indexOf(' - ') > 0) {
+      this.isExpr = true;
+      return;
+    }
+    this.alertRules = [];
+    try {
+      let exprArr: string[] = expr.split('&&');
+      for (let index in exprArr) {
+        let exprStr = exprArr[index].trim();
+        if (exprStr.startsWith('!equals') || exprStr.startsWith('equals')) {
+          let tmp = exprStr.substring(exprStr.indexOf('(') + 1, exprStr.length - 1);
+          let tmpArr = tmp.split(',');
+          if (tmpArr.length == 2) {
+            let metric = this.currentMetrics.find(item => item.value == tmpArr[0].trim());
+            let value = tmpArr[1].substring(1, tmpArr[1].length - 1);
+            if (exprStr.startsWith('!')) {
+              let rule = { metric: metric, operator: '!equals', value: value };
+              this.alertRules.push(rule);
+            } else {
+              let rule = { metric: metric, operator: 'equals', value: value };
+              this.alertRules.push(rule);
+            }
+          }
+        } else {
+          let values = exprStr.trim().split(' ');
+          if (values.length == 3) {
+            let metric = this.currentMetrics.find(item => item.value == values[0].trim());
+            let rule = { metric: metric, operator: values[1].trim(), value: values[2].trim() };
+            this.alertRules.push(rule);
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      this.isExpr = true;
+      this.alertRules = [{}];
+      return;
+    }
+    if (this.alertRules.length == 0) {
+      this.alertRules = [{}];
+      this.isExpr = true;
+    }
+  }
+
   onManageModalCancel() {
     this.isManageModalVisible = false;
   }
@@ -315,6 +405,12 @@ export class AlertSettingComponent implements OnInit {
     } else {
       this.define.expr = '';
     }
+    if (!this.isExpr) {
+      let expr = this.calculateAlertRuleExpr();
+      if (expr != '') {
+        this.define.expr = expr;
+      }
+    }
     if (this.isManageModalAdd) {
       const modalOk$ = this.alertDefineSvc
         .newAlertDefine(this.define)
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index 1111ec73f34..029215a2a92 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -107,6 +107,16 @@
   "alert.setting.target": "Metric Target",
   "alert.setting.expr": "Threshold Trigger Expr",
   "alert.setting.trigger": "Trigger Threshold Alerts",
+  "alert.setting.rule": "Threshold Rule",
+  "alert.setting.number": "Numeric",
+  "alert.setting.string": "String",
+  "alert.setting.rule.label": "Graphical selection to set indicator trigger alarm rules, support multiple rules and",
+  "alert.setting.rule.metric.place-holder": "Please select metric",
+  "alert.setting.rule.switch-expr": "Coding Threshold",
+  "alert.setting.rule.operator": "Operator",
+  "alert.setting.rule.operator.str-equals": "equals",
+  "alert.setting.rule.operator.str-no-equals": "not equals",
+  "alert.setting.rule.match-value.place-holder": "Please enter a matching value",
   "alert.setting.times": "Trigger Times",
   "alert.setting.times.tip": "Set how many times the threshold is triggered before sending an alert",
   "alert.setting.template": "Notice Template",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 489458dc0c4..3e014e134a8 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -107,6 +107,16 @@
   "alert.setting.target": "指标对象",
   "alert.setting.expr": "阈值触发表达式",
   "alert.setting.trigger": "异常时触发告警",
+  "alert.setting.rule": "阈值规则",
+  "alert.setting.number": "数值型",
+  "alert.setting.string": "字符型",
+  "alert.setting.rule.label": "图形化选择设置指标触发告警规则,支持多规则与",
+  "alert.setting.rule.metric.place-holder": "请选择指标",
+  "alert.setting.rule.switch-expr": "阈值表达式",
+  "alert.setting.rule.operator": "运算符",
+  "alert.setting.rule.operator.str-equals": "等于",
+  "alert.setting.rule.operator.str-no-equals": "不等于",
+  "alert.setting.rule.match-value.place-holder": "请输入匹配值",
   "alert.setting.times": "触发次数",
   "alert.setting.times.tip": "设置触发阈值多少次之后才会发送告警",
   "alert.setting.template": "通知模版",
@@ -127,7 +137,7 @@
   "alert.setting.connect.left": "未关联监控",
   "alert.setting.connect.right": "已关联监控",
   "alert.setting.expr.tip": "支持的阈值触发表达式环境变量与操作符",
-  "alert.setting.expr.label": "根据此表达式来计算判断是否触发阈值,表达式环境变量和操作符见上方",
+  "alert.setting.expr.label": "表达式配置指标触发告警规则,表达式环境变量和操作符见上方",
   "alert.setting.expr.example": "根据此表达式计算判断是否触发阈值.示例",
   "alert.setting.priority.tip": "触发阈值的告警级别,从低到高依次为:警告-warning，严重-critical，紧急-emergency",
   "alert.setting.target.tip": "选中的指标对象",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index a5958b7ef69..de2b6f8b79c 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -3,7 +3,7 @@
     "main": "主導航",
     "lang": "語言",
     "dashboard": "儀表盤",
-    "search.placeholder": "搜索監控：名稱、IP等",
+    "search.placeholder": "搜索監控:名稱、IP等",
     "fullscreen": "全屏",
     "fullscreen.exit": "退出全屏",
     "clear.local.storage": "清理本地緩存",
@@ -107,6 +107,16 @@
   "alert.setting.target": "指標對象",
   "alert.setting.expr": "阈值觸發表達式",
   "alert.setting.trigger": "異常時觸發告警",
+  "alert.setting.rule": "閾值規則",
+  "alert.setting.number": "數值型",
+  "alert.setting.string": "字符型",
+  "alert.setting.rule.label": "圖形化選擇設置指標觸發告警規則,支援多規則與",
+  "alert.setting.rule.metric.place-holder": "請選擇指標",
+  "alert.setting.rule.switch-expr": "閾值表達式",
+  "alert.setting.rule.operator": "運算符",
+  "alert.setting.rule.operator.str-equals": "等於",
+  "alert.setting.rule.operator.str-no-equals": "不等於",
+  "alert.setting.rule.match-value.place-holder": "請輸入匹配值",
   "alert.setting.times": "觸發次數",
   "alert.setting.times.tip": "設置觸發阈值多少次之後才會發送告警",
   "alert.setting.template": "通知模版",
@@ -127,9 +137,9 @@
   "alert.setting.connect.left": "未關聯監控",
   "alert.setting.connect.right": "已關聯監控",
   "alert.setting.expr.tip": "支持的阈值觸發表達式環境變量與操作符",
-  "alert.setting.expr.label": "根據此表達式來計算判斷是否觸發阈值,表達式環境變量和操作符見上方",
+  "alert.setting.expr.label": "根據表達式計算觸發阈值,表達式環境變量和操作符見上方",
   "alert.setting.expr.example": "根據此表達式計算判斷是否觸發阈值.示例",
-  "alert.setting.priority.tip": "觸發阈值的告警級別,從低到高依次爲:警告-warning，嚴重-critical，緊急-emergency",
+  "alert.setting.priority.tip": "觸發阈值的告警級別,從低到高依次爲:警告-warning,嚴重-critical,緊急-emergency",
   "alert.setting.target.tip": "選中的指標對象",
   "alert.setting.target.other": "所屬行其它指標對象",
   "alert.setting.target.instance": "所屬行實例",
@@ -256,7 +266,7 @@
   "monitors.edit": "編輯",
   "monitors.edit.success": "修改監控成功",
   "monitors.edit.failed": "修改監控失敗",
-  "monitors.not-found": "查詢異常，此監控不存在",
+  "monitors.not-found": "查詢異常,此監控不存在",
   "monitors.delete": "刪除",
   "monitors.edit-monitor": "編輯監控",
   "monitors.delete-monitor": "刪除監控",
@@ -287,7 +297,7 @@
   "monitors.detail.history": "監控曆史圖表詳情",
   "monitors.collect.time": "采集時間",
   "monitors.collect.time.tip": "最近采集時間",
-  "monitors.detail.time-series.unavailable": "無法提供曆史圖表數據，請配置時序數據庫",
+  "monitors.detail.time-series.unavailable": "無法提供曆史圖表數據,請配置時序數據庫",
   "monitors.detail.chart.zoom": "區域縮放",
   "monitors.detail.chart.back": "縮放還原",
   "monitors.detail.chart.save": "保存圖片",
@@ -392,7 +402,7 @@
   "tag.update-time": "更新時間",
   "tag.display": "效果",
   "tag.bind": "綁定標簽",
-  "tag.bind.tip": "您可以使用標簽(Tag)進行監控資源的分類管理， 例如給資源分別綁定生産環境、測試環境的標簽。",
+  "tag.bind.tip": "您可以使用標簽(Tag)進行監控資源的分類管理, 例如給資源分別綁定生産環境、測試環境的標簽。",
   "define.save-apply": "保存並應用",
   "define.delete": "刪除監控類型",
   "define.delete.confirm": "請確認是否刪除 {{app}} 監控類型? 刪除後無法添加此類監控。",
@@ -413,9 +423,9 @@
   "validation.password.required": "請輸入密碼！",
   "validation.password.twice": "兩次輸入的密碼不匹配!",
   "validation.password.strength.msg": "請至少輸入 6 個字符。請不要使用容易被猜到的密碼。",
-  "validation.password.strength.strong": "強度：強",
-  "validation.password.strength.medium": "強度：中",
-  "validation.password.strength.short": "強度：太短",
+  "validation.password.strength.strong": "強度:強",
+  "validation.password.strength.medium": "強度:中",
+  "validation.password.strength.short": "強度:太短",
   "validation.confirm-password.required": "請確認密碼！",
   "validation.phone-number.required": "請輸入手機號！",
   "validation.phone-number.wrong-format": "手機號格式錯誤！",

From e26461a948613ffcc1a2e34e28be042b7c55d799 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Thu, 15 Jun 2023 23:13:34 +0800
Subject: [PATCH 3/5] fix pmd warning

---
 .../hertzbeat/manager/controller/MonitorsController.java      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java b/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java
index f9357534b81..469582be21f 100644
--- a/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java
+++ b/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java
@@ -59,6 +59,8 @@ public class MonitorsController {
 	
 	private static final byte ALL_MONITOR_STATUS = 9;
 	
+	private static final int TAG_LENGTH = 2;
+	
 	@Autowired
 	private MonitorService monitorService;
 	
@@ -101,7 +103,7 @@ public ResponseEntity<Message<Page<Monitor>>> getMonitors(
 				ListJoin<Monitor, org.dromara.hertzbeat.common.entity.manager.Tag> tagJoin = root
 						.join(root.getModel()
 								.getList("tags", org.dromara.hertzbeat.common.entity.manager.Tag.class), JoinType.LEFT);
-				if (tagArr.length == 2) {
+				if (tagArr.length == TAG_LENGTH) {
 					andList.add(criteriaBuilder.equal(tagJoin.get("name"), tagName));
 					andList.add(criteriaBuilder.equal(tagJoin.get("value"), tagValue));
 				} else {

From a471ec00ee197594dd9c2237fd66cf43e8056d88 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Fri, 16 Jun 2023 09:52:14 +0800
Subject: [PATCH 4/5] support alert define threshold expression display ui

---
 .../alert/alert-setting/alert-setting.component.html |  7 ++++++-
 .../alert/alert-setting/alert-setting.component.ts   |  7 ++++++-
 web-app/src/assets/app-data.json                     | 12 ++++++------
 web-app/src/assets/i18n/en-US.json                   |  3 ++-
 web-app/src/assets/i18n/zh-CN.json                   |  3 ++-
 web-app/src/assets/i18n/zh-TW.json                   |  3 ++-
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index 30a68a19287..6a279a9e25b 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -262,9 +262,14 @@
               </nz-select>
               <input
                 nz-input
+                [type]="alertRule.metric?.type === 0 ? 'number' : 'text'"
                 [(ngModel)]="alertRule.value"
                 [ngModelOptions]="{ standalone: true }"
-                [placeholder]="'alert.setting.rule.match-value.place-holder' | i18n"
+                [placeholder]="
+                  alertRule.metric?.type === 0
+                    ? ('alert.setting.rule.numeric-value.place-holder' | i18n)
+                    : ('alert.setting.rule.string-value.place-holder' | i18n)
+                "
                 nz-col
                 nzSpan="10"
               />
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
index 32910268765..c91911f70ae 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
@@ -374,13 +374,18 @@ export class AlertSettingComponent implements OnInit {
           }
         } else {
           let values = exprStr.trim().split(' ');
-          if (values.length == 3) {
+          if (values.length == 3 && values[2].trim() != '' && !Number.isNaN(parseFloat(values[2].trim()))) {
             let metric = this.currentMetrics.find(item => item.value == values[0].trim());
             let rule = { metric: metric, operator: values[1].trim(), value: values[2].trim() };
             this.alertRules.push(rule);
           }
         }
       }
+      if (this.alertRules.length != exprArr.length) {
+        this.alertRules = [{}];
+        this.isExpr = true;
+        return;
+      }
     } catch (e) {
       console.error(e);
       this.isExpr = true;
diff --git a/web-app/src/assets/app-data.json b/web-app/src/assets/app-data.json
index 3193bb66ca1..bcf667af9af 100644
--- a/web-app/src/assets/app-data.json
+++ b/web-app/src/assets/app-data.json
@@ -45,7 +45,7 @@
           "key": "db",
           "text": "数据库",
           "i18n": "menu.monitor.db",
-          "icon": "anticon-database"
+          "icon": "anticon-console-sql"
         },
         {
           "key": "os",
@@ -59,27 +59,27 @@
           "text": "中间件",
           "hide": false,
           "i18n": "menu.monitor.mid",
-          "icon": "anticon-merge-cells"
+          "icon": "anticon-cluster"
         },
         {
           "key": "cn",
           "text": "云原生",
           "hide": false,
           "i18n": "menu.monitor.cn",
-          "icon": "anticon-cloud"
+          "icon": "anticon-cloud-server"
         },
         {
           "key": "network",
           "text": "网络",
           "hide": false,
           "i18n": "menu.monitor.network",
-          "icon": "anticon-wifi"
+          "icon": "anticon-global"
         },
         {
           "key": "custom",
           "text": "自定义",
           "i18n": "menu.monitor.custom",
-          "icon": "anticon-skin"
+          "icon": "anticon-robot"
         }
       ]
     },
@@ -92,7 +92,7 @@
         {
           "text": "告警配置",
           "i18n": "menu.alert.setting",
-          "icon": "anticon-bulb",
+          "icon": "anticon-calculator",
           "link": "/alert/setting"
         },
         {
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index 029215a2a92..4a552932480 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -116,7 +116,8 @@
   "alert.setting.rule.operator": "Operator",
   "alert.setting.rule.operator.str-equals": "equals",
   "alert.setting.rule.operator.str-no-equals": "not equals",
-  "alert.setting.rule.match-value.place-holder": "Please enter a matching value",
+  "alert.setting.rule.string-value.place-holder": "Please input string",
+  "alert.setting.rule.numeric-value.place-holder": "Please input numeric",
   "alert.setting.times": "Trigger Times",
   "alert.setting.times.tip": "Set how many times the threshold is triggered before sending an alert",
   "alert.setting.template": "Notice Template",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 3e014e134a8..befba07cba1 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -116,7 +116,8 @@
   "alert.setting.rule.operator": "运算符",
   "alert.setting.rule.operator.str-equals": "等于",
   "alert.setting.rule.operator.str-no-equals": "不等于",
-  "alert.setting.rule.match-value.place-holder": "请输入匹配值",
+  "alert.setting.rule.string-value.place-holder": "请输入匹配字符串",
+  "alert.setting.rule.numeric-value.place-holder": "请输入匹配数值",
   "alert.setting.times": "触发次数",
   "alert.setting.times.tip": "设置触发阈值多少次之后才会发送告警",
   "alert.setting.template": "通知模版",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index de2b6f8b79c..754325a3f50 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -116,7 +116,8 @@
   "alert.setting.rule.operator": "運算符",
   "alert.setting.rule.operator.str-equals": "等於",
   "alert.setting.rule.operator.str-no-equals": "不等於",
-  "alert.setting.rule.match-value.place-holder": "請輸入匹配值",
+  "alert.setting.rule.string-value.place-holder": "請輸入匹配字符串",
+  "alert.setting.rule.numeric-value.place-holder": "請輸入匹配數值",
   "alert.setting.times": "觸發次數",
   "alert.setting.times.tip": "設置觸發阈值多少次之後才會發送告警",
   "alert.setting.template": "通知模版",

From 0e4b57c3b3d5703ce3b30c41de68ed08c01917db Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Fri, 16 Jun 2023 10:18:37 +0800
Subject: [PATCH 5/5] support alert define threshold expression display ui

---
 web-app/src/assets/i18n/en-US.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index 4a552932480..8494c13f7c3 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -110,7 +110,7 @@
   "alert.setting.rule": "Threshold Rule",
   "alert.setting.number": "Numeric",
   "alert.setting.string": "String",
-  "alert.setting.rule.label": "Graphical selection to set indicator trigger alarm rules, support multiple rules and",
+  "alert.setting.rule.label": "Graphical setting alarm threshold rules, support multiple rules &&",
   "alert.setting.rule.metric.place-holder": "Please select metric",
   "alert.setting.rule.switch-expr": "Coding Threshold",
   "alert.setting.rule.operator": "Operator",