feat(FR-555): Improve the auto-scaling rule editor interface and list (#3202)

Resolves #3201 (FR-555)
### TL;DR

> For test, please pull this lablup/backend.ai#3757 to your test server

Redesigned the auto-scaling rule editor interface to improve usability and add separate controls for scale up/down operations.

### What changed?

- Added distinct scale up/down options instead of combining them
- Simplified metric selection with autocomplete and predefined options
- Consolidated condition inputs (metric, comparator, threshold) into a single row
- Removed redundant min/max replica fields based on scaling direction
- Added tooltips and improved validation logic
- Updated translations for all supported languages with new UI strings

### How to test?

1. Open the endpoint detail page
2. Click to add a new auto-scaling rule
3. Verify the new UI with separate scale up/down options
4. Test metric name autocomplete functionality
5. Confirm min/max replicas show correctly based on scale direction
6. Validate form submissions work for both scale up and down scenarios

### Why make this change?

The previous interface combined scale up/down operations which made it confusing for users to configure rules correctly. This redesign separates the concerns and provides a more intuitive workflow while reducing potential configuration errors through better validation and clearer UI elements.

Author: agatha197

react/src/components/AutoScalingRuleEditorModal.tsx

@@ -12,6 +12,7 @@ import ImageMetaIcon from '../components/ImageMetaIcon';
 import InferenceSessionErrorModal from '../components/InferenceSessionErrorModal';
 import ResourceNumber from '../components/ResourceNumber';
 import SessionDetailDrawer from '../components/SessionDetailDrawer';
+import UnmountModalAfterClose from '../components/UnmountModalAfterClose';
 import VFolderLazyView from '../components/VFolderLazyView';
 import { AutoScalingRuleEditorModalFragment$key } from '../components/__generated__/AutoScalingRuleEditorModalFragment.graphql';
 import { InferenceSessionErrorModalFragment$key } from '../components/__generated__/InferenceSessionErrorModalFragment.graphql';
@@ -63,7 +64,11 @@ import { DescriptionsItemType } from 'antd/es/descriptions';
 import graphql from 'babel-plugin-relay/macro';
 import { default as dayjs } from 'dayjs';
 import _ from 'lodash';
-import { BotMessageSquareIcon } from 'lucide-react';
+import {
+  BotMessageSquareIcon,
+  CircleArrowDownIcon,
+  CircleArrowUpIcon,
+} from 'lucide-react';
 import React, { Suspense, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery, useMutation } from 'react-relay';
@@ -634,21 +639,33 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
             rowKey={'id'}
             columns={[
               {
-                title: '#',
+                title: t('autoScalingRule.ScalingType'),
                 fixed: 'left',
-                render: (id, record, index) => {
-                  ++index;
-                  return index;
-                },
+                render: (text, row) =>
+                  (row?.step_size || 0) > 0 ? 'Up' : 'Down',
+              },
+              {
+                title: t('autoScalingRule.MetricSource'),
+                dataIndex: 'metric_source',
+                // render: (text, row) => <Tag>{row?.metric_source}</Tag>,
               },
               {
-                title: t('autoScalingRule.MetricName'),
+                title: t('autoScalingRule.Condition'),
                 dataIndex: 'metric_name',
                 fixed: 'left',
                 render: (text, row) => (
-                  <Typography.Text ellipsis copyable style={{ width: 150 }}>
-                    {row?.metric_name}
-                  </Typography.Text>
+                  <Flex gap={'xs'}>
+                    <Tag>{row?.metric_name}</Tag>
+                    {row?.comparator ? (
+                      <Tooltip title={row.comparator}>
+                        {/* @ts-ignore */}
+                        {COMPARATOR_LABELS[row.comparator]}
+                      </Tooltip>
+                    ) : (
+                      '-'
+                    )}
+                    {row?.threshold}
+                  </Flex>
                 ),
               },
               {
@@ -769,32 +786,40 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
                   </Flex>
                 ),
               },
-              {
-                title: t('autoScalingRule.MetricSource'),
-                dataIndex: 'metric_source',
-                render: (text, row) => <Tag>{row?.metric_source}</Tag>,
-              },
-              {
-                title: t('autoScalingRule.Comparator'),
-                dataIndex: 'comparator',
-                render: (text, row) => (
-                  // @ts-ignore
-                  <Tooltip title={text}>{COMPARATOR_LABELS[text]}</Tooltip>
-                ),
-              },
-              {
-                title: t('autoScalingRule.Threshold'),
-                render: (text, row) => <span>{row?.threshold}</span>,
-              },
+
               {
                 title: t('autoScalingRule.StepSize'),
                 dataIndex: 'step_size',
+                render: (text, row) => {
+                  if (row?.step_size) {
+                    return (
+                      <Flex gap={'xs'}>
+                        <Typography.Text>
+                          {row?.step_size > 0 ? (
+                            <CircleArrowUpIcon />
+                          ) : (
+                            <CircleArrowDownIcon />
+                          )}
+                        </Typography.Text>
+                        <Typography.Text>
+                          {Math.abs(row?.step_size)}
+                        </Typography.Text>
+                      </Flex>
+                    );
+                  } else {
+                    return '-';
+                  }
+                },
               },
               {
                 title: t('autoScalingRule.MIN/MAXReplicas'),
                 render: (text, row) => (
                   <span>
-                    Min: {row?.min_replicas} / Max: {row?.max_replicas}
+                    {row?.step_size
+                      ? row?.step_size > 0
+                        ? `Max: ${row?.max_replicas}`
+                        : `Min: ${row?.min_replicas}`
+                      : '-'}
                   </span>
                 ),
               },
@@ -1064,20 +1089,22 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
         }}
       />
       {isSupportAutoScalingRule && (
-        <AutoScalingRuleEditorModal
-          open={isOpenAutoScalingRuleModal}
-          endpoint_id={endpoint?.endpoint_id as string}
-          autoScalingRuleFrgmt={editingAutoScalingRule}
-          onRequestClose={(success) => {
-            setIsOpenAutoScalingRuleModal(!isOpenAutoScalingRuleModal);
-            setEditingAutoScalingRule(null);
-            if (success) {
-              startRefetchTransition(() => {
-                updateFetchKey();
-              });
-            }
-          }}
-        />
+        <UnmountModalAfterClose>
+          <AutoScalingRuleEditorModal
+            open={isOpenAutoScalingRuleModal}
+            endpoint_id={endpoint?.endpoint_id as string}
+            autoScalingRuleFrgmt={editingAutoScalingRule}
+            onRequestClose={(success) => {
+              setIsOpenAutoScalingRuleModal(!isOpenAutoScalingRuleModal);
+              setEditingAutoScalingRule(null);
+              if (success) {
+                startRefetchTransition(() => {
+                  updateFetchKey();
+                });
+              }
+            }}
+          />
+        </UnmountModalAfterClose>
       )}
       <SessionDetailDrawer
         open={!selectedSessionId}

react/src/pages/EndpointDetailPage.tsx

@@ -1785,7 +1785,12 @@
     "MetricSource": "Metrische Quelle",
     "MIN/MAXReplicas": "Min / Max Replikas",
     "LastTriggered": "Zuletzt ausgelöst",
-    "CreatedAt": "Zeit erstellt"
+    "CreatedAt": "Zeit erstellt",
+    "ConditionTooltip": "Sie können jede von der Laufzeitumgebung unterstützte Metrik frei eingeben.\nZum Beispiel: \"cuda_mem\", \"cuda_util\"",
+    "ScalingType": "Typ",
+    "ScaleUp": "Hochskalieren",
+    "ScaleDown": "Verkleinern",
+    "Condition": "Zustand"
   },
   "kernel": {
     "KernelId": "Kernel ID",

resources/i18n/de.json

@@ -1785,7 +1785,12 @@
     "MetricSource": "Μετρική πηγή",
     "MIN/MAXReplicas": "Min / Max Replicas",
     "LastTriggered": "Τελευταία ενεργοποιημένη",
-    "CreatedAt": "Δημιουργήθηκε ώρα"
+    "CreatedAt": "Δημιουργήθηκε ώρα",
+    "ConditionTooltip": "Μπορείτε να εισαγάγετε ελεύθερα οποιαδήποτε μετρική που υποστηρίζεται από το περιβάλλον εκτέλεσης.\nΓια παράδειγμα: \"cuda_mem\", \"cuda_util\".",
+    "ScalingType": "Τύπος",
+    "ScaleUp": "Κλιμάκωση",
+    "ScaleDown": "Κλιμάκωση προς τα κάτω",
+    "Condition": "Κατάσταση"
   },
   "kernel": {
     "KernelId": "Αναγνωριστικό πυρήνα",

resources/i18n/el.json

@@ -1791,7 +1791,12 @@
     "StepSize": "Step Size",
     "MIN/MAXReplicas": "Min / MAX Replicas",
     "LastTriggered": "Last Triggered",
-    "CreatedAt": "Created At"
+    "CreatedAt": "Created At",
+    "ScaleUp": "Scale Up",
+    "ScaleDown": "Scale Down",
+    "Condition": "Condition",
+    "ConditionTooltip": "You can freely input any metric supported by the runtime environment.\nFor example: \"cuda_mem\", \"cuda_util\"",
+    "ScalingType": "Type"
   },
   "kernel": {
     "KernelId": "Kernel ID",

resources/i18n/en.json

@@ -1785,7 +1785,12 @@
     "MetricSource": "Fuente métrica",
     "MIN/MAXReplicas": "Réplicas min / max",
     "LastTriggered": "Última activación",
-    "CreatedAt": "Tiempo creado"
+    "CreatedAt": "Tiempo creado",
+    "ConditionTooltip": "Puede introducir libremente cualquier métrica admitida por el entorno de ejecución.\nPor ejemplo: \"cuda_mem\", \"cuda_util\"",
+    "ScalingType": "Tipo",
+    "ScaleUp": "Ampliar",
+    "ScaleDown": "Reducción de escala",
+    "Condition": "Condición"
   },
   "kernel": {
     "KernelId": "ID de núcleo",

resources/i18n/es.json

@@ -1784,7 +1784,12 @@
     "MetricSource": "Metrilähde",
     "MIN/MAXReplicas": "Min / max -kopiot",
     "LastTriggered": "Viimeksi laukaistu",
-    "CreatedAt": "Luotu aika"
+    "CreatedAt": "Luotu aika",
+    "ConditionTooltip": "Voit syöttää vapaasti minkä tahansa ajoympäristön tukeman mittarin.\nEsimerkiksi: \"cuda_mem\", \"cuda_util\".",
+    "ScalingType": "Tyyppi",
+    "ScaleUp": "Laajentaminen",
+    "ScaleDown": "Pienennä mittakaavaa",
+    "Condition": "Kunto"
   },
   "kernel": {
     "KernelId": "Ytimen tunnus",

resources/i18n/fi.json

@@ -1785,7 +1785,12 @@
     "MetricSource": "Source métrique",
     "MIN/MAXReplicas": "Répliques min / max",
     "LastTriggered": "Dernière déclenché",
-    "CreatedAt": "Temps créé"
+    "CreatedAt": "Temps créé",
+    "ConditionTooltip": "Vous pouvez saisir librement n'importe quelle mesure prise en charge par l'environnement d'exécution.\nPar exemple : \"cuda_mem\", \"cuda_util\", etc : \"cuda_mem\", \"cuda_util\"",
+    "ScalingType": "Type",
+    "ScaleUp": "Augmentation d'échelle",
+    "ScaleDown": "Réduction d'échelle",
+    "Condition": "Condition"
   },
   "kernel": {
     "KernelId": "ID du noyau",

resources/i18n/fr.json

@@ -1785,7 +1785,12 @@
     "MetricSource": "Sumber metrik",
     "MIN/MAXReplicas": "Replika min / maks",
     "LastTriggered": "Terakhir dipicu",
-    "CreatedAt": "Waktu yang dibuat"
+    "CreatedAt": "Waktu yang dibuat",
+    "ConditionTooltip": "Anda dapat dengan bebas memasukkan metrik apa pun yang didukung oleh lingkungan runtime.\nSebagai contoh: \"cuda_mem\", \"cuda_util\"",
+    "ScalingType": "Jenis",
+    "ScaleUp": "Meningkatkan Skala",
+    "ScaleDown": "Skala Turun",
+    "Condition": "Kondisi"
   },
   "kernel": {
     "KernelId": "ID kernel",

resources/i18n/id.json

@@ -1783,7 +1783,12 @@
     "MetricSource": "Fonte metrica",
     "MIN/MAXReplicas": "Repliche min / max",
     "LastTriggered": "Ultimo attivato",
-    "CreatedAt": "Tempo creato"
+    "CreatedAt": "Tempo creato",
+    "ConditionTooltip": "È possibile inserire liberamente qualsiasi metrica supportata dall'ambiente di runtime.\nAd esempio: \"cuda_mem\", \"cuda_util\".",
+    "ScalingType": "Tipo",
+    "ScaleUp": "Scalare",
+    "ScaleDown": "Riduzione della scala",
+    "Condition": "Condizione"
   },
   "kernel": {
     "KernelId": "Kernel ID",