refactor(FR-2494): improve auto scaling rule v2 UI — step size sign, condition tag, preset searchable

Author: agatha197

react/src/components/AutoScalingRuleEditorModal.tsx

@@ -21,6 +21,7 @@ import {
   InputNumber,
   Segmented,
   Select,
+  Spin,
   Typography,
   theme,
 } from 'antd';
@@ -180,10 +181,7 @@ const PrometheusPresetPreview: React.FC<{
         {t('autoScalingRule.CurrentValue')}:{' '}
       </Typography.Text>
       <ErrorBoundaryWithNullFallback>
-        {/* null fallback: initial load shows nothing until data arrives.
-            On refresh via startTransition, React keeps the previous value
-            visible and never commits this fallback. */}
-        <React.Suspense fallback={null}>
+        <React.Suspense fallback={<Spin size="small" />}>
           <PreviewValue presetRawId={presetRawId} fetchKey={fetchKey} />
         </React.Suspense>
       </ErrorBoundaryWithNullFallback>
@@ -644,7 +642,7 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
         {isPrometheus && (
           <>
             <Form.Item
-              label={t('autoScalingRule.PrometheusPreset')}
+              label={`${t('autoScalingRule.MetricName')} (${t('autoScalingRule.PrometheusPreset')})`}
               name="prometheusQueryPresetId"
               rules={[
                 {
@@ -680,6 +678,12 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
                   }
                 }}
                 placeholder={t('autoScalingRule.SelectPrometheusPreset')}
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.label ?? '')
+                    .toLowerCase()
+                    .includes(input.toLowerCase())
+                }
                 options={presetOptions}
                 optionRender={(option) => (
                   <BAIFlex direction="column" align="start">

react/src/components/AutoScalingRuleList.tsx

@@ -30,7 +30,6 @@ import {
 import type { BAITableProps, GraphQLFilter } from 'backend.ai-ui';
 import { default as dayjs } from 'dayjs';
 import * as _ from 'lodash-es';
-import { CircleArrowDownIcon, CircleArrowUpIcon } from 'lucide-react';
 import { parseAsJson, parseAsStringLiteral, useQueryStates } from 'nuqs';
 import React, { useDeferredValue, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -52,12 +51,19 @@ type AutoScalingRuleNode = NonNullable<
  * - maxThreshold only → `[metric_name] < [maxThreshold]`
  * - minThreshold only → `[minThreshold] < [metric_name]`
  * - Both set → `[minThreshold] < [metric_name] < [maxThreshold]`
+ *
+ * For PROMETHEUS rules, the tag shows the preset name (from presetMap) instead of
+ * the raw metricName, since users select a preset — not the metric directly.
  */
 const renderCondition = (
   rule: AutoScalingRuleNode,
   t: (key: string) => string,
+  presetMap?: Map<string, string>,
 ) => {
-  const metricName = rule.metricName;
+  const tagLabel =
+    rule.metricSource === 'PROMETHEUS' && rule.prometheusQueryPresetId
+      ? (presetMap?.get(rule.prometheusQueryPresetId) ?? rule.metricName)
+      : rule.metricName;
   const minThreshold = rule.minThreshold;
   const maxThreshold = rule.maxThreshold;
   const suffix = rule.metricSource === 'KERNEL' ? '%' : '';
@@ -68,7 +74,7 @@ const renderCondition = (
         {minThreshold}
         {suffix}
         <Tooltip title={t('autoScalingRule.MinThreshold')}>{'<'}</Tooltip>
-        <Tag>{metricName}</Tag>
+        <Tag>{tagLabel}</Tag>
         <Tooltip title={t('autoScalingRule.MaxThreshold')}>{'<'}</Tooltip>
         {maxThreshold}
         {suffix}
@@ -79,7 +85,7 @@ const renderCondition = (
   if (maxThreshold != null) {
     return (
       <BAIFlex gap={'xs'}>
-        <Tag>{metricName}</Tag>
+        <Tag>{tagLabel}</Tag>
         <Tooltip title={t('autoScalingRule.MaxThreshold')}>{'<'}</Tooltip>
         {maxThreshold}
         {suffix}
@@ -93,7 +99,7 @@ const renderCondition = (
         {minThreshold}
         {suffix}
         <Tooltip title={t('autoScalingRule.MinThreshold')}>{'<'}</Tooltip>
-        <Tag>{metricName}</Tag>
+        <Tag>{tagLabel}</Tag>
       </BAIFlex>
     );
   }
@@ -195,7 +201,7 @@ const AutoScalingRuleListNodes: React.FC<AutoScalingRuleListNodesProps> = ({
             if (!row) return '-';
             return (
               <BAINameActionCell
-                title={renderCondition(row, t)}
+                title={renderCondition(row, t, presetMap)}
                 showActions="always"
                 actions={[
                   {
@@ -218,22 +224,6 @@ const AutoScalingRuleListNodes: React.FC<AutoScalingRuleListNodesProps> = ({
             );
           },
         },
-        {
-          key: 'prometheusPreset',
-          title: t('autoScalingRule.PrometheusPreset'),
-          render: (_text, row) => {
-            if (
-              row?.metricSource !== 'PROMETHEUS' ||
-              !row?.prometheusQueryPresetId
-            ) {
-              return '-';
-            }
-            return (
-              presetMap.get(row.prometheusQueryPresetId) ||
-              row.prometheusQueryPresetId
-            );
-          },
-        },
         {
           key: 'timeWindow',
           title: t('autoScalingRule.TimeWindow'),
@@ -248,40 +238,55 @@ const AutoScalingRuleListNodes: React.FC<AutoScalingRuleListNodesProps> = ({
           title: t('autoScalingRule.StepSize'),
           dataIndex: 'stepSize',
           render: (_text, row) => {
-            if (row?.stepSize) {
-              return (
-                <BAIFlex gap={'xs'}>
-                  <Typography.Text>
-                    {row.stepSize > 0 ? (
-                      <CircleArrowUpIcon />
-                    ) : (
-                      <CircleArrowDownIcon />
-                    )}
-                  </Typography.Text>
-                  <Typography.Text>{Math.abs(row.stepSize)}</Typography.Text>
-                </BAIFlex>
-              );
-            } else {
-              return '-';
-            }
+            if (!row?.stepSize) return '-';
+            const hasMin = row.minThreshold != null;
+            const hasMax = row.maxThreshold != null;
+            const sign = hasMin && hasMax ? '±' : hasMax ? '+' : '−';
+            return (
+              <BAIFlex gap={'xs'}>
+                <Typography.Text>{sign}</Typography.Text>
+                <Typography.Text>{Math.abs(row.stepSize)}</Typography.Text>
+              </BAIFlex>
+            );
           },
         },
         {
           key: 'minMaxReplicas',
           title: t('autoScalingRule.MIN/MAXReplicas'),
-          render: (_text, row) => (
-            <span>
-              {row?.stepSize
-                ? row.stepSize > 0
-                  ? t('autoScalingRule.MaxReplicasValue', {
-                      value: row?.maxReplicas,
-                    })
-                  : t('autoScalingRule.MinReplicasValue', {
-                      value: row?.minReplicas,
-                    })
-                : '-'}
-            </span>
-          ),
+          render: (_text, row) => {
+            if (!row?.stepSize) return '-';
+            const hasMin = row.minThreshold != null;
+            const hasMax = row.maxThreshold != null;
+            if (hasMin && hasMax) {
+              return (
+                <span>
+                  {t('autoScalingRule.MinReplicasValue', {
+                    value: row?.minReplicas,
+                  })}
+                  {' / '}
+                  {t('autoScalingRule.MaxReplicasValue', {
+                    value: row?.maxReplicas,
+                  })}
+                </span>
+              );
+            }
+            if (hasMax) {
+              return (
+                <span>
+                  {t('autoScalingRule.MaxReplicasValue', {
+                    value: row?.maxReplicas,
+                  })}
+                </span>
+              );
+            }
+            return (
+              <span>
+                {t('autoScalingRule.MinReplicasValue', {
+                  value: row?.minReplicas,
+                })}
+              </span>
+            );
+          },
         },
         {
           key: 'createdAt',