chore: add Contion Type to Rule Details (#122)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2025-02-13 15:53:03 +08:00 committed by GitHub
parent 4e8215482c
commit 304fad0121
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 5 deletions

View File

@ -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",

View File

@ -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": "连接成功",

View File

@ -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: 30 }}>
<Col span={6}>Condition</Col>
<Row style={{ marginBottom: 10}}>
<Col span={6}>{formatMessage({ id: "alert.rule.table.columnns.condition.type" })}</Col>
<Col span={18}>
<Conditions items={data.conditions?.items} />
{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}>{formatMessage({ id: "alert.rule.table.columnns.condition" })}</Col>
<Col span={18}>
<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>
);