feat: add max validation rule for CPU and memory in Form.Item. (#2692)

### TL;DR Normally, users cannot set the value above the maximum limit because it automatically changes when the user focuses out of the input (blur event). However, it can be set programmatically above the maximum limit. For example, on the model service modification page, the existing model service can have a value above the maximum limit. This PR added maximum value validation for CPU and memory allocation in the resource allocation form. ### What changed? - Added a new rule to validate the maximum CPU value based on resource limits. - Implemented a validator for memory allocation to ensure it doesn't exceed the maximum limit. - Added a new translation key "MaxValueNotification" across all language files to support the new validation messages. ### How to test? 1. Open model service modification page. 2. Change [the initialValue ](https://github.com/lablup/backend.ai-webui/blob/f90f62e5112bab03bbd92d7b6e16611c0ec3d682/react/src/components/ServiceLauncherPageContent.tsx#L601-L607) to value above the maximum limit (ServiceLauncherPageContent.tsx)
lablup · Sep 9, 2024 · bacb099 · bacb099
1 parent 612b54c
commit bacb099
Show file tree

Hide file tree

Showing 23 changed files with 81 additions and 21 deletions.
diff --git a/react/src/components/InputNumberWithSlider.tsx b/react/src/components/InputNumberWithSlider.tsx
@@ -66,6 +66,12 @@ const InputNumberWithSlider: React.FC<InputNumberWithSliderProps> = ({
           onChange={setValue}
           onBlur={() => {
             if (_.isNumber(step) && step > 0) {
+              if (
+                _.isNumber(max) &&
+                max < _.toNumber(inputRef.current?.value || '0')
+              ) {
+                return; // do not update value if it is greater than max
+              }
               const decimalCount = step.toString().split('.')[1]?.length || 0;
               setValue(
                 _.max([

diff --git a/react/src/components/ResourceAllocationFormItems.tsx b/react/src/components/ResourceAllocationFormItems.tsx
@@ -479,6 +479,10 @@ const ResourceAllocationFormItems: React.FC<
                         min: resourceLimits.cpu?.min,
                         // TODO: set message
                       },
+                      {
+                        type: 'number',
+                        max: resourceLimits.cpu?.max,
+                      },
                       {
                         warningOnly: true,
                         validator: async (rule, value: number) => {
@@ -586,6 +590,35 @@ const ResourceAllocationFormItems: React.FC<
                               {
                                 required: true,
                               },
+                              {
+                                validator: async (rule, value: string) => {
+                                  if (
+                                    _.isString(value) &&
+                                    resourceLimits.mem?.max &&
+                                    compareNumberWithUnits(
+                                      value,
+                                      resourceLimits.mem?.max,
+                                    ) > 0
+                                  ) {
+                                    return Promise.reject(
+                                      t('general.MaxValueNotification', {
+                                        name: t('session.launcher.Memory'),
+                                        max:
+                                          _.toUpper(
+                                            resourceLimits.mem?.max || '0g',
+                                          ) + 'iB',
+                                      }),
+                                      // t('session.launcher.MinMemory', {
+                                      //   size: _.toUpper(
+                                      //     resourceLimits.mem?.min || '0g',
+                                      //   ),
+                                      // }),
+                                    );
+                                  } else {
+                                    return Promise.resolve();
+                                  }
+                                },
+                              },
                               {
                                 // TODO: min of mem should be shmem + image's mem limit??
                                 validator: async (rule, value: string) => {

diff --git a/resources/i18n/de.json b/resources/i18n/de.json
@@ -511,7 +511,8 @@
     "NSelected": "Ausgewählte(r) {{count}} Artikel",
     "Extend": "Verlängern",
     "RemainingLoginSessionTime": "Zeit bis zur automatischen Abmeldung",
-    "Change": "Ändern Sie"
+    "Change": "Ändern Sie",
+    "MaxValueNotification": "{{name}} muss maximal {{max}} sein"
   },
   "credential": {
     "Permission": "Genehmigung",

diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -511,7 +511,8 @@
     "NSelected": "Επιλεγμένο {{count}} στοιχείο(α)",
     "Extend": "Επεκτείνω",
     "RemainingLoginSessionTime": "Χρόνος μέχρι την αυτόματη αποσύνδεση",
-    "Change": "Αλλαγή"
+    "Change": "Αλλαγή",
+    "MaxValueNotification": "{{name}} πρέπει να είναι το μέγιστο {{max}}"
   },
   "credential": {
     "Permission": "Αδεια",

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
@@ -636,7 +636,8 @@
     "NSelected": "Selected {{count}} item(s)",
     "Extend": "Extend",
     "RemainingLoginSessionTime": "Time until auto logout",
-    "Change": "Change"
+    "Change": "Change",
+    "MaxValueNotification": "{{name}} must be maximum {{max}}"
   },
   "credential": {
     "Permission": "Permission",

diff --git a/resources/i18n/es.json b/resources/i18n/es.json
@@ -533,7 +533,8 @@
     "NSelected": "Elemento(s) {{cuenta}} seleccionado(s)",
     "Extend": "Extender",
     "RemainingLoginSessionTime": "Tiempo hasta el cierre de sesión automático",
-    "Change": "Cambia"
+    "Change": "Cambia",
+    "MaxValueNotification": "{{name}} debe ser máximo {{max}}"
   },
   "import": {
     "CleanUpImportTask": "Tarea de importación de limpieza...",

diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
@@ -533,7 +533,8 @@
     "NSelected": "Valittu {{count}} kohde(t)",
     "Extend": "Laajenna",
     "RemainingLoginSessionTime": "Aika automaattiseen uloskirjautumiseen asti",
-    "Change": "Muuta"
+    "Change": "Muuta",
+    "MaxValueNotification": "{{name}} on oltava maksimi {{max}}"
   },
   "import": {
     "CleanUpImportTask": "Tuontitehtävän siivous...",

diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
@@ -511,7 +511,8 @@
     "NSelected": "Élément(s) sélectionné(s) {{count}}",
     "Extend": "Étendre",
     "RemainingLoginSessionTime": "Délai avant déconnexion automatique",
-    "Change": "Changer"
+    "Change": "Changer",
+    "MaxValueNotification": "{{nom}} doit être maximum {{max}}"
   },
   "credential": {
     "Permission": "Autorisation",

diff --git a/resources/i18n/id.json b/resources/i18n/id.json
@@ -512,7 +512,8 @@
     "NSelected": "Item {{hitung}} yang dipilih",
     "Extend": "Memperpanjang",
     "RemainingLoginSessionTime": "Waktu Hingga Keluar Otomatis",
-    "Change": "Perubahan"
+    "Change": "Perubahan",
+    "MaxValueNotification": "{{nama}} harus maksimal {{max}}"
   },
   "credential": {
     "Permission": "Izin",

diff --git a/resources/i18n/it.json b/resources/i18n/it.json
@@ -512,7 +512,8 @@
     "NSelected": "Articolo/i selezionato/i {{count}}",
     "Extend": "Estendere",
     "RemainingLoginSessionTime": "Tempo fino alla disconnessione automatica",
-    "Change": "Cambiamento"
+    "Change": "Cambiamento",
+    "MaxValueNotification": "{{nome}} deve essere massimo {{max}}"
   },
   "credential": {
     "Permission": "Autorizzazione",

diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
@@ -511,7 +511,8 @@
     "NSelected": "選択された{{count}}項目（複数可）",
     "Extend": "伸ばす",
     "RemainingLoginSessionTime": "自動ログアウトまでの時間",
-    "Change": "変更"
+    "Change": "変更",
+    "MaxValueNotification": "{{ name }}最大値は{{ max }}です"
   },
   "credential": {
     "Permission": "許可",

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -623,7 +623,8 @@
     "NSelected": "{{count}}개 선택됨",
     "Extend": "연장",
     "RemainingLoginSessionTime": "자동 로그아웃까지 남은 시간",
-    "Change": "변경"
+    "Change": "변경",
+    "MaxValueNotification": "{{ name }} 최대 값은 {{ max }}입니다"
   },
   "credential": {
     "Permission": "권한",

diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
@@ -513,7 +513,8 @@
     "NSelected": "Сонгосон {{count}} зүйл(үүд)",
     "Extend": "Сунгах",
     "RemainingLoginSessionTime": "Автоматаар гарах хүртэл хугацаа",
-    "Change": "Өөрчлөх"
+    "Change": "Өөрчлөх",
+    "MaxValueNotification": "{{name}} хамгийн ихдээ {{max}} байх ёстой"
   },
   "credential": {
     "Permission": "Зөвшөөрөл",

diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
@@ -510,7 +510,8 @@
     "Disabled": "Dilumpuhkan",
     "NSelected": "{{count}} item yang dipilih",
     "Extend": "Panjangkan",
-    "Change": "Berubah"
+    "Change": "Berubah",
+    "MaxValueNotification": "{{nama}} mestilah maksimum {{maks}}"
   },
   "credential": {
     "Permission": "Kebenaran",

diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
@@ -511,7 +511,8 @@
     "NSelected": "Wybrane elementy {{count}}",
     "Extend": "Rozszerzyć",
     "RemainingLoginSessionTime": "Czas do automatycznego wylogowania",
-    "Change": "Zmiana"
+    "Change": "Zmiana",
+    "MaxValueNotification": "{{name}} musi być maksymalna {{max}}."
   },
   "credential": {
     "Permission": "Pozwolenie",

diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
@@ -511,7 +511,8 @@
     "NSelected": "Item(ns) {{contagem}} selecionado(s)",
     "Extend": "Ampliar",
     "RemainingLoginSessionTime": "Tempo até ao encerramento automático da sessão",
-    "Change": "Alterar"
+    "Change": "Alterar",
+    "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}"
   },
   "credential": {
     "Permission": "Permissão",

diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
@@ -511,7 +511,8 @@
     "NSelected": "Item(ns) {{contagem}} selecionado(s)",
     "Extend": "Ampliar",
     "RemainingLoginSessionTime": "Tempo até ao encerramento automático da sessão",
-    "Change": "Alterar"
+    "Change": "Alterar",
+    "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}"
   },
   "credential": {
     "Permission": "Permissão",

diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
@@ -511,7 +511,8 @@
     "NSelected": "Выбранный {{count}} элемент(ы)",
     "Extend": "Продлевать",
     "RemainingLoginSessionTime": "Время до автоматического выхода из системы",
-    "Change": "Изменить"
+    "Change": "Изменить",
+    "MaxValueNotification": "{{name}} должен быть максимальным {{max}}"
   },
   "credential": {
     "Permission": "Разрешение",

diff --git a/resources/i18n/th.json b/resources/i18n/th.json
@@ -634,7 +634,8 @@
     "Disabled": "ปิดใช้งาน",
     "Extend": "ขยาย",
     "RemainingLoginSessionTime": "เวลาจนกระทั่งออกจากระบบอัตโนมัติ",
-    "Change": "เปลี่ยน"
+    "Change": "เปลี่ยน",
+    "MaxValueNotification": "{{name}} ต้องมีค่าสูงสุด {{max}}"
   },
   "credential": {
     "Permission": "สิทธิ์",

diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
@@ -511,7 +511,8 @@
     "NSelected": "Seçilen {{count}} öğe(ler)",
     "Extend": "Uzatmak",
     "RemainingLoginSessionTime": "Otomatik Çıkışa Kadar Geçen Süre",
-    "Change": "Değişim"
+    "Change": "Değişim",
+    "MaxValueNotification": "{{name}} maksimum {{max}} olmalıdır"
   },
   "credential": {
     "Permission": "izin",

diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
@@ -511,7 +511,8 @@
     "NSelected": "Đã chọn {{count}} mục",
     "Extend": "Mở rộng",
     "RemainingLoginSessionTime": "Thời gian cho đến khi tự động đăng xuất",
-    "Change": "Thay đổi"
+    "Change": "Thay đổi",
+    "MaxValueNotification": "{{name}} phải tối đa {{max}}"
   },
   "credential": {
     "Permission": "Sự cho phép",

diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
@@ -511,7 +511,8 @@
     "NSelected": "已选择的 {{count}} 项目",
     "Extend": "延长",
     "RemainingLoginSessionTime": "自动注销前的时间",
-    "Change": "改变"
+    "Change": "改变",
+    "MaxValueNotification": "{{name}} 必须是最大值 {{max}}"
   },
   "credential": {
     "Permission": "允许",

diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
@@ -511,7 +511,8 @@
     "NSelected": "已选择的 {{count}} 项目",
     "Extend": "延長",
     "RemainingLoginSessionTime": "自动注销前的时间",
-    "Change": "改变"
+    "Change": "改变",
+    "MaxValueNotification": "{{name}} 必须是最大值 {{max}}"
   },
   "credential": {
     "Permission": "允許",