feat: customizable automatic retry status codes

web/src/pages/Setting/Operation/SettingsMonitoring.jsx

@@ -24,8 +24,6 @@ import {
   Form,
   Row,
   Spin,
-  Tag,
-  Typography,
 } from '@douyinfe/semi-ui';
 import {
   compareObjects,
@@ -34,13 +32,12 @@ import {
   showSuccess,
   showWarning,
   parseHttpStatusCodeRules,
-  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import HttpStatusCodeRulesInput from '../../../components/settings/HttpStatusCodeRulesInput';
 
 export default function SettingsMonitoring(props) {
   const { t } = useTranslation();
-  const { Text } = Typography;
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     ChannelDisableThreshold: '',
@@ -49,6 +46,7 @@ export default function SettingsMonitoring(props) {
     AutomaticEnableChannelEnabled: false,
     AutomaticDisableKeywords: '',
     AutomaticDisableStatusCodes: '401',
+    AutomaticRetryStatusCodes: '100-199,300-399,401-407,409-499,500-503,505-523,525-599',
     'monitor_setting.auto_test_channel_enabled': false,
     'monitor_setting.auto_test_channel_minutes': 10,
   });
@@ -57,6 +55,9 @@ export default function SettingsMonitoring(props) {
   const parsedAutoDisableStatusCodes = parseHttpStatusCodeRules(
     inputs.AutomaticDisableStatusCodes || '',
   );
+  const parsedAutoRetryStatusCodes = parseHttpStatusCodeRules(
+    inputs.AutomaticRetryStatusCodes || '',
+  );
 
   function onSubmit() {
     const updateArray = compareObjects(inputs, inputsRow);
@@ -69,16 +70,24 @@ export default function SettingsMonitoring(props) {
           : '';
       return showError(`${t('自动禁用状态码格式不正确')}${details}`);
     }
+    if (!parsedAutoRetryStatusCodes.ok) {
+      const details =
+        parsedAutoRetryStatusCodes.invalidTokens &&
+        parsedAutoRetryStatusCodes.invalidTokens.length > 0
+          ? `: ${parsedAutoRetryStatusCodes.invalidTokens.join(', ')}`
+          : '';
+      return showError(`${t('自动重试状态码格式不正确')}${details}`);
+    }
     const requestQueue = updateArray.map((item) => {
       let value = '';
       if (typeof inputs[item.key] === 'boolean') {
         value = String(inputs[item.key]);
       } else {
-        if (item.key === 'AutomaticDisableStatusCodes') {
-          value = parsedAutoDisableStatusCodes.normalized;
-        } else {
-          value = inputs[item.key];
-        }
+        const normalizedMap = {
+          AutomaticDisableStatusCodes: parsedAutoDisableStatusCodes.normalized,
+          AutomaticRetryStatusCodes: parsedAutoRetryStatusCodes.normalized,
+        };
+        value = normalizedMap[item.key] ?? inputs[item.key];
       }
       return API.put('/api/option/', {
         key: item.key,
@@ -233,7 +242,7 @@ export default function SettingsMonitoring(props) {
             </Row>
             <Row gutter={16}>
               <Col xs={24} sm={16}>
-                <Form.Input
+                <HttpStatusCodeRulesInput
                   label={t('自动禁用状态码')}
                   placeholder={t('例如：401, 403, 429, 500-599')}
                   extraText={t(
@@ -243,35 +252,22 @@ export default function SettingsMonitoring(props) {
                   onChange={(value) =>
                     setInputs({ ...inputs, AutomaticDisableStatusCodes: value })
                   }
+                  parsed={parsedAutoDisableStatusCodes}
+                  invalidText={t('自动禁用状态码格式不正确')}
                 />
-                {parsedAutoDisableStatusCodes.ok &&
-                  parsedAutoDisableStatusCodes.tokens.length > 0 && (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexWrap: 'wrap',
-                        gap: 8,
-                        marginTop: 8,
-                      }}
-                    >
-                      {parsedAutoDisableStatusCodes.tokens.map((token) => (
-                        <Tag key={token} size='small'>
-                          {token}
-                        </Tag>
-                      ))}
-                    </div>
+                <HttpStatusCodeRulesInput
+                  label={t('自动重试状态码')}
+                  placeholder={t('例如：401, 403, 429, 500-599')}
+                  extraText={t(
+                    '支持填写单个状态码或范围（含首尾），使用逗号分隔',
                   )}
-                {!parsedAutoDisableStatusCodes.ok && (
-                  <Text type='danger' style={{ display: 'block', marginTop: 8 }}>
-                    {t('自动禁用状态码格式不正确')}
-                    {parsedAutoDisableStatusCodes.invalidTokens &&
-                    parsedAutoDisableStatusCodes.invalidTokens.length > 0
-                      ? `: ${parsedAutoDisableStatusCodes.invalidTokens.join(
-                          ', ',
-                        )}`
-                      : ''}
-                  </Text>
-                )}
+                  field={'AutomaticRetryStatusCodes'}
+                  onChange={(value) =>
+                    setInputs({ ...inputs, AutomaticRetryStatusCodes: value })
+                  }
+                  parsed={parsedAutoRetryStatusCodes}
+                  invalidText={t('自动重试状态码格式不正确')}
+                />
                 <Form.TextArea
                   label={t('自动禁用关键词')}
                   placeholder={t('一行一个，不区分大小写')}