[Studio] Refresh alert rule threshold unit

web/src/pages/ops/__tests__/alerts.test.ts

@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { attachThresholdUnit } from '../alertRulePayload';
+
+describe('attachThresholdUnit', () => {
+  it('derives the threshold unit from the selected metric', () => {
+    expect(attachThresholdUnit({ metric: 'Broker 离线', threshold: 1 })).toEqual({
+      metric: 'Broker 离线',
+      threshold: 1,
+      thresholdUnit: '个',
+    });
+  });
+
+  it('overwrites stale units when a metric changes', () => {
+    expect(
+      attachThresholdUnit({
+        metric: '消费堆积量',
+        threshold: 100,
+        thresholdUnit: '%',
+      }),
+    ).toEqual({
+      metric: '消费堆积量',
+      threshold: 100,
+      thresholdUnit: '条',
+    });
+  });
+});

web/src/pages/ops/alertRulePayload.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const thresholdUnits: Record<string, string> = {
+  磁盘使用率: '%',
+  消费堆积量: '条',
+  'TPS 异常': 'TPS',
+  'Broker 离线': '个',
+  'Proxy 连接数': '个',
+};
+
+export function attachThresholdUnit<T extends { metric: string }>(
+  values: T,
+): T & { thresholdUnit: string } {
+  return {
+    ...values,
+    thresholdUnit: thresholdUnits[values.metric] ?? '',
+  };
+}

web/src/pages/ops/alerts.tsx

@@ -43,6 +43,7 @@ import {
   toggleAlertRule,
   updateAlertRule,
 } from '../../services/opsService';
+import { attachThresholdUnit } from './alertRulePayload';
 
 const { TextArea } = Input;
 
@@ -56,14 +57,6 @@ const metricOptions = ['磁盘使用率', '消费堆积量', 'TPS 异常', 'Brok
 
 const durationOptions = ['1分钟', '5分钟', '15分钟', '30分钟'];
 
-const thresholdUnits: Record<string, string> = {
-  磁盘使用率: '%',
-  消费堆积量: '条',
-  'TPS 异常': 'TPS',
-  'Broker 离线': '个',
-  'Proxy 连接数': '个',
-};
-
 const AlertsPage = () => {
   const { t } = useLang();
   const [rules, setRules] = useState<AlertRule[]>([]);
@@ -222,18 +215,16 @@ const AlertsPage = () => {
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
+      const payload = attachThresholdUnit(values);
       setSubmitting(true);
       if (editingRule) {
-        const updated = await updateAlertRule({ ...editingRule, ...values });
+        const updated = await updateAlertRule({ ...editingRule, ...payload });
         setRules((previous) =>
           previous.map((rule) => (rule.id === editingRule.id ? updated : rule)),
         );
         message.success('告警规则已更新');
       } else {
-        const created = await createAlertRule({
-          ...values,
-          thresholdUnit: thresholdUnits[values.metric] ?? '',
-        });
+        const created = await createAlertRule(payload);
         setRules((previous) => [...previous, created]);
         message.success(t('alerts.ruleCreated'));
       }