From 304fad01216de5930ddc70bfb7361285cb6807a5 Mon Sep 17 00:00:00 2001
From: yaojp123 <15989103230@163.com>
Date: Thu, 13 Feb 2025 15:53:03 +0800
Subject: [PATCH] chore: add Contion Type to Rule Details (#122)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
---
 web/src/locales/en-US/alert.js                |  2 ++
 web/src/locales/zh-CN/alert.js                |  2 ++
 .../Alerting/Rule/components/RuleCard.jsx     | 36 ++++++++++++++++---
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/web/src/locales/en-US/alert.js b/web/src/locales/en-US/alert.js
index 288f76cd..e77009ca 100644
--- a/web/src/locales/en-US/alert.js
+++ b/web/src/locales/en-US/alert.js
@@ -206,6 +206,8 @@ export default {
   "alert.rule.table.columnns.objects": "Objects",
   "alert.rule.table.columnns.schedule": "Schedule",
   "alert.rule.table.columnns.expression": "Expression",
+  "alert.rule.table.columnns.condition.type": "Condition Type",
+  "alert.rule.table.columnns.condition": "Condition",
   "alert.rule.table.columnns.status": "Status",
   "alert.rule.table.columnns.status.failed": "Connect failed",
   "alert.rule.table.columnns.status.succeeded": "Connect succeeded",
diff --git a/web/src/locales/zh-CN/alert.js b/web/src/locales/zh-CN/alert.js
index 5dd2ec99..318eed43 100644
--- a/web/src/locales/zh-CN/alert.js
+++ b/web/src/locales/zh-CN/alert.js
@@ -194,6 +194,8 @@ export default {
   "alert.rule.table.columnns.objects": "告警对象",
   "alert.rule.table.columnns.schedule": "计划周期",
   "alert.rule.table.columnns.expression": "告警规则",
+  "alert.rule.table.columnns.condition.type": "触发条件类型",
+  "alert.rule.table.columnns.condition": "触发条件",
   "alert.rule.table.columnns.status": "运行状态",
   "alert.rule.table.columnns.status.failed": "连接失败",
   "alert.rule.table.columnns.status.succeeded": "连接成功",
diff --git a/web/src/pages/Alerting/Rule/components/RuleCard.jsx b/web/src/pages/Alerting/Rule/components/RuleCard.jsx
index 371f4089..cc64ff3f 100644
--- a/web/src/pages/Alerting/Rule/components/RuleCard.jsx
+++ b/web/src/pages/Alerting/Rule/components/RuleCard.jsx
@@ -94,6 +94,7 @@ const RuleCard = ({ ruleID, data = {} }) => {
     );
   };
   const clusters = useGlobalClusters();
+  const isBucketDiff = !!(data && data.bucket_conditions)
   
   return (
     <div>
@@ -158,10 +159,16 @@ const RuleCard = ({ ruleID, data = {} }) => {
             <span style={{ wordBreak: "break-all" }}>{data?.expression}</span>
           </Col>
         </Row>
+        <Row style={{ marginBottom: 10}}>
+          <Col span={6}>{formatMessage({ id: "alert.rule.table.columnns.condition.type" })}</Col>
+          <Col span={18}>
+            {isBucketDiff ? formatMessage({id: `alert.rule.form.label.buckets_diff`}) : formatMessage({id: `alert.rule.form.label.metrics_value`})}
+          </Col>
+        </Row>
         <Row style={{ marginBottom: 30 }}>
-          <Col span={6}>Condition</Col>
+          <Col span={6}>{formatMessage({ id: "alert.rule.table.columnns.condition" })}</Col>
           <Col span={18}>
-            <Conditions items={data.conditions?.items} />
+            <Conditions items={isBucketDiff ? data.bucket_conditions?.items : data.conditions?.items} />
           </Col>
         </Row>
       </Card>
@@ -173,6 +180,9 @@ const Conditions = ({ items }) => {
   return (items || []).map((item) => {
     let operator = "";
     switch (item.operator) {
+      case "equals":
+        operator = "=";
+        break;
       case "gte":
         operator = ">=";
         break;
@@ -185,11 +195,29 @@ const Conditions = ({ items }) => {
       case "lte":
         operator = "<=";
         break;
+      case "range":
+        operator = "range";
+        break;
     }
     return (
       <div key={item.priority} style={{ marginBottom: 10 }}>
-        <span>{operator} </span>
-        <span style={{ marginRight: 15 }}>{item.values[0]}</span>
+        {item.type && (<span style={{ marginRight: 15 }}>{formatMessage({id: `alert.rule.form.label.${item.type}`})}</span>)}
+        {
+          operator === 'range' ? (
+            <>
+              <span>{`>=`}</span>
+              <span style={{ marginRight: 4 }}>{item.values[0]}</span>
+              <span style={{ marginRight: 4 }}>{`&`}</span>
+              <span>{`<=`}</span>
+              <span style={{ marginRight: 15 }}>{item.values[1]}</span>
+            </>
+          ) : (
+            <>
+              <span>{operator} </span>
+              <span style={{ marginRight: 15 }}>{item.values[0]}</span>
+            </>
+          )
+        }
         <PriorityIconText priority={item.priority} />
       </div>
     );