From 5d0086331dd26b89f7b45cd0b18ca523104a25d5 Mon Sep 17 00:00:00 2001
From: nowgnuesLee <seungwon@lablup.com>
Date: Mon, 20 Jan 2025 12:57:38 +0900
Subject: [PATCH] fix: add max value for User/Project setting modal

---
 .../KeypairResourcePolicySettingModal.tsx     | 119 ++++++++++--------
 .../ProjectResourcePolicySettingModal.tsx     |  20 ++-
 .../UserResourcePolicySettingModal.tsx        |  26 +++-
 react/src/helper/const-vars.ts                |   1 +
 4 files changed, 104 insertions(+), 62 deletions(-)

diff --git a/react/src/components/KeypairResourcePolicySettingModal.tsx b/react/src/components/KeypairResourcePolicySettingModal.tsx
index 2c2a36edfd..e8895aa051 100644
--- a/react/src/components/KeypairResourcePolicySettingModal.tsx
+++ b/react/src/components/KeypairResourcePolicySettingModal.tsx
@@ -329,65 +329,74 @@ const KeypairResourcePolicySettingModal: React.FC<
               },
             }}
           >
-            {_.map(
-              _.chunk(_.keys(resourceSlots), 2),
-              (resourceSlotKeys, index) => (
+            {_.chain(resourceSlots)
+              .keys()
+              .chunk(2)
+              .map((resourceSlotKeys, index) => (
                 <Row gutter={[16, 16]} key={index}>
-                  {_.map(resourceSlotKeys, (resourceSlotKey) => (
-                    <Col
-                      span={12}
-                      key={resourceSlotKey}
-                      style={{ alignSelf: 'end', marginBottom: token.marginLG }}
-                    >
-                      <FormItemWithUnlimited
-                        unlimitedValue={undefined}
-                        label={
-                          _.get(mergedResourceSlots, resourceSlotKey)
-                            ?.description || resourceSlotKey
-                        }
-                        name={['parsedTotalResourceSlots', resourceSlotKey]}
-                        rules={[
-                          {
-                            validator(__, value) {
-                              if (
-                                _.includes(resourceSlotKey, 'mem') &&
-                                value &&
-                                // @ts-ignore
-                                convertBinarySizeUnit(value, 'p').number >
+                  {_.chain(resourceSlotKeys)
+                    .map((resourceSlotKey) => (
+                      <Col
+                        span={12}
+                        key={resourceSlotKey}
+                        style={{
+                          alignSelf: 'end',
+                          marginBottom: token.marginLG,
+                        }}
+                      >
+                        <FormItemWithUnlimited
+                          unlimitedValue={undefined}
+                          label={
+                            _.get(mergedResourceSlots, resourceSlotKey)
+                              ?.description || resourceSlotKey
+                          }
+                          name={['parsedTotalResourceSlots', resourceSlotKey]}
+                          rules={[
+                            {
+                              validator(__, value) {
+                                console.log(resourceSlotKey);
+                                if (
+                                  _.includes(resourceSlotKey, 'mem') &&
+                                  value &&
                                   // @ts-ignore
-                                  convertBinarySizeUnit('300p', 'p').number
-                              ) {
-                                return Promise.reject(
-                                  new Error(
-                                    t('resourcePolicy.MemorySizeExceedsLimit'),
-                                  ),
-                                );
-                              }
-                              return Promise.resolve();
+                                  convertBinarySizeUnit(value, 'p').number >
+                                    // @ts-ignore
+                                    convertBinarySizeUnit('300p', 'p').number
+                                ) {
+                                  return Promise.reject(
+                                    new Error(
+                                      t(
+                                        'resourcePolicy.MemorySizeExceedsLimit',
+                                      ),
+                                    ),
+                                  );
+                                }
+                                return Promise.resolve();
+                              },
                             },
-                          },
-                        ]}
-                      >
-                        {_.includes(resourceSlotKey, 'mem') ? (
-                          <DynamicUnitInputNumber />
-                        ) : (
-                          <InputNumber
-                            min={0}
-                            step={
-                              _.includes(resourceSlotKey, '.shares') ? 0.1 : 1
-                            }
-                            addonAfter={
-                              _.get(mergedResourceSlots, resourceSlotKey)
-                                ?.display_unit
-                            }
-                          />
-                        )}
-                      </FormItemWithUnlimited>
-                    </Col>
-                  ))}
+                          ]}
+                        >
+                          {_.includes(resourceSlotKey, 'mem') ? (
+                            <DynamicUnitInputNumber />
+                          ) : (
+                            <InputNumber
+                              min={0}
+                              step={
+                                _.includes(resourceSlotKey, '.shares') ? 0.1 : 1
+                              }
+                              addonAfter={
+                                _.get(mergedResourceSlots, resourceSlotKey)
+                                  ?.display_unit
+                              }
+                            />
+                          )}
+                        </FormItemWithUnlimited>
+                      </Col>
+                    ))
+                    .value()}
                 </Row>
-              ),
-            )}
+              ))
+              .value()}
           </Card>
         </Form.Item>
         <Form.Item label={t('resourcePolicy.Sessions')} required>
diff --git a/react/src/components/ProjectResourcePolicySettingModal.tsx b/react/src/components/ProjectResourcePolicySettingModal.tsx
index efbdd22581..e672027fd6 100644
--- a/react/src/components/ProjectResourcePolicySettingModal.tsx
+++ b/react/src/components/ProjectResourcePolicySettingModal.tsx
@@ -1,4 +1,5 @@
 import { GBToBytes, bytesToGB } from '../helper';
+import { SIGNED_32BIT_MAX_INT } from '../helper/const-vars';
 import { useSuspendedBackendaiClient } from '../hooks';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
@@ -266,7 +267,11 @@ const ProjectResourcePolicySettingModal: React.FC<Props> = ({
               label={t('resourcePolicy.MaxFolderCount')}
               style={{ width: '100%', margin: 0 }}
             >
-              <InputNumber min={0} style={{ width: '100%' }} />
+              <InputNumber
+                min={0}
+                max={SIGNED_32BIT_MAX_INT}
+                style={{ width: '100%' }}
+              />
             </FormItemWithUnlimited>
           ) : null}
           {supportMaxQuotaScopeSize ? (
@@ -276,7 +281,12 @@ const ProjectResourcePolicySettingModal: React.FC<Props> = ({
               label={t('storageHost.MaxFolderSize')}
               style={{ width: '100%', margin: 0 }}
             >
-              <InputNumber min={0} addonAfter="GB" style={{ width: '100%' }} />
+              <InputNumber
+                min={0}
+                max={Number.MAX_SAFE_INTEGER}
+                addonAfter="GB"
+                style={{ width: '100%' }}
+              />
             </FormItemWithUnlimited>
           ) : null}
           {supportMaxNetworkCount ? (
@@ -286,7 +296,11 @@ const ProjectResourcePolicySettingModal: React.FC<Props> = ({
               label={t('resourcePolicy.MaxNetworkCount')}
               style={{ width: '100%', margin: 0 }}
             >
-              <InputNumber min={0} style={{ width: '100%' }} />
+              <InputNumber
+                min={0}
+                max={SIGNED_32BIT_MAX_INT}
+                style={{ width: '100%' }}
+              />
             </FormItemWithUnlimited>
           ) : null}
         </Flex>
diff --git a/react/src/components/UserResourcePolicySettingModal.tsx b/react/src/components/UserResourcePolicySettingModal.tsx
index 87e9ecf887..a708db60eb 100644
--- a/react/src/components/UserResourcePolicySettingModal.tsx
+++ b/react/src/components/UserResourcePolicySettingModal.tsx
@@ -1,4 +1,5 @@
 import { GBToBytes, bytesToGB } from '../helper';
+import { SIGNED_32BIT_MAX_INT } from '../helper/const-vars';
 import { useSuspendedBackendaiClient } from '../hooks';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
@@ -275,7 +276,11 @@ const UserResourcePolicySettingModal: React.FC<Props> = ({
               label={t('resourcePolicy.MaxFolderCount')}
               style={{ width: '100%', margin: 0 }}
             >
-              <InputNumber min={0} style={{ width: '100%' }} />
+              <InputNumber
+                min={0}
+                max={SIGNED_32BIT_MAX_INT}
+                style={{ width: '100%' }}
+              />
             </FormItemWithUnlimited>
           ) : null}
           {supportMaxQuotaScopeSize ? (
@@ -285,7 +290,12 @@ const UserResourcePolicySettingModal: React.FC<Props> = ({
               label={t('storageHost.MaxFolderSize')}
               style={{ width: '100%', margin: 0 }}
             >
-              <InputNumber min={0} addonAfter="GB" style={{ width: '100%' }} />
+              <InputNumber
+                min={0}
+                max={Number.MAX_SAFE_INTEGER}
+                addonAfter="GB"
+                style={{ width: '100%' }}
+              />
             </FormItemWithUnlimited>
           ) : null}
         </Flex>
@@ -297,7 +307,11 @@ const UserResourcePolicySettingModal: React.FC<Props> = ({
               { required: true, message: t('data.explorer.ValueRequired') },
             ]}
           >
-            <InputNumber min={0} style={{ width: '100%' }} />
+            <InputNumber
+              min={0}
+              max={SIGNED_32BIT_MAX_INT}
+              style={{ width: '100%' }}
+            />
           </Form.Item>
         ) : null}
         {supportMaxCustomizedImageCount ? (
@@ -308,7 +322,11 @@ const UserResourcePolicySettingModal: React.FC<Props> = ({
               { required: true, message: t('data.explorer.ValueRequired') },
             ]}
           >
-            <InputNumber min={0} style={{ width: '100%' }} />
+            <InputNumber
+              min={0}
+              max={SIGNED_32BIT_MAX_INT}
+              style={{ width: '100%' }}
+            />
           </Form.Item>
         ) : null}
       </Form>
diff --git a/react/src/helper/const-vars.ts b/react/src/helper/const-vars.ts
index 23d833ebb7..90600d0f8c 100644
--- a/react/src/helper/const-vars.ts
+++ b/react/src/helper/const-vars.ts
@@ -1,2 +1,3 @@
 export const UNLIMITED_MAX_CONTAINERS_PER_SESSIONS = 1000000;
 export const UNLIMITED_MAX_CONCURRENT_SESSIONS = 1000000;
+export const SIGNED_32BIT_MAX_INT = Math.pow(2, 31) - 1;