add more column and reorder column and form items

lablup · Feb 7, 2025 · 136bf9d · 136bf9d
1 parent 55dde53
commit 136bf9d
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 42 deletions.
diff --git a/react/src/components/AutoScalingRuleEditorModal.tsx b/react/src/components/AutoScalingRuleEditorModal.tsx
@@ -45,6 +45,20 @@ type AutoScalingRuleInput = {
   max_replicas: number;
 };
 
+export const COMPARATOR_LABELS = {
+  LESS_THAN: '<',
+  LESS_THAN_OR_EQUAL: '≤',
+  GREATER_THAN: '>',
+  GREATER_THAN_OR_EQUAL: '≥',
+};
+
+const comparators = [
+  { label: '<', value: 'LESS_THAN' },
+  { label: '≤', value: 'LESS_THAN_OR_EQUAL' },
+  { label: '>', value: 'GREATER_THAN' },
+  { label: '≥', value: 'GREATER_THAN_OR_EQUAL' },
+];
+
 const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
   onRequestClose,
   onCancel,
@@ -214,13 +228,6 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
     onRequestClose(false);
   };
 
-  const comparators = [
-    { label: '<', value: 'LESS_THAN' },
-    { label: '≤', value: 'LESS_THAN_OR_EQUAL' },
-    { label: '>', value: 'GREATER_THAN' },
-    { label: '≥', value: 'GREATER_THAN_OR_EQUAL' },
-  ];
-
   return (
     <BAIModal
       {...baiModalProps}
@@ -291,7 +298,10 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
             <Radio.Group
               block
               size={'small'}
-              options={comparators}
+              options={_.map(COMPARATOR_LABELS, (label, value) => ({
+                label,
+                value,
+              }))}
               optionType={'button'}
             ></Radio.Group>
           </Form.Item>
@@ -307,30 +317,16 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
         <Form.Item
           label={t('autoScalingRule.StepSize')}
           name={'step_size'}
-          rules={[{ required: true }]}
-        >
-          <InputNumberWithSlider
-            min={SIGNED_32BIT_MIN_INT}
-            max={SIGNED_32BIT_MAX_INT}
-            inputNumberProps={{
-              style: { width: '100%' },
-            }}
-            step={1}
-            allowNegative
-          />
-        </Form.Item>
-        <Form.Item
-          label={t('autoScalingRule.CoolDownSeconds')}
-          name={'cooldown_seconds'}
           rules={[
+            { required: true },
             {
-              required: true,
-              min: 0,
               type: 'number',
+              min: SIGNED_32BIT_MIN_INT,
+              max: SIGNED_32BIT_MAX_INT,
             },
           ]}
         >
-          <InputNumber style={{ width: '100%' }} />
+          <InputNumber step={1} style={{ width: '100%' }} />
         </Form.Item>
         <Flex
           direction="row"
@@ -370,6 +366,19 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
             <InputNumber min={0} max={50} style={{ width: '100%' }} />
           </Form.Item>
         </Flex>
+        <Form.Item
+          label={t('autoScalingRule.CoolDownSeconds')}
+          name={'cooldown_seconds'}
+          rules={[
+            {
+              required: true,
+              min: 0,
+              type: 'number',
+            },
+          ]}
+        >
+          <InputNumber style={{ width: '100%' }} />
+        </Form.Item>
       </Form>
     </BAIModal>
   );

diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx
@@ -1,4 +1,6 @@
-import AutoScalingRuleEditorModal from '../components/AutoScalingRuleEditorModal';
+import AutoScalingRuleEditorModal, {
+  COMPARATOR_LABELS,
+} from '../components/AutoScalingRuleEditorModal';
 import CopyableCodeText from '../components/CopyableCodeText';
 import EndpointOwnerInfo from '../components/EndpointOwnerInfo';
 import EndpointStatusTag from '../components/EndpointStatusTag';
@@ -766,22 +768,26 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               ),
             },
             {
-              title: 'Last Triggered',
-              render: (text, row) => {
-                return (
-                  <span>
-                    {row?.last_triggered_at
-                      ? dayjs.utc(row?.last_triggered_at).tz().format('ll LTS')
-                      : `-`}
-                  </span>
-                );
-              },
-              sorter: dayDiff,
+              title: 'Metric Source',
+              dataIndex: 'metric_source',
+              render: (text, row) => <Tag>{row?.metric_source}</Tag>,
+            },
+            {
+              title: t('autoScalingRule.Comparator'),
+              dataIndex: 'comparator',
+              // @ts-ignore
+              render: (text, row) => (
+                <Tooltip title={text}>{COMPARATOR_LABELS[text]}</Tooltip>
+              ),
             },
             {
-              title: 'Threshold',
+              title: t('autoScalingRule.Threshold'),
               render: (text, row) => <span>{row?.threshold}</span>,
             },
+            {
+              title: t('autoScalingRule.StepSize'),
+              dataIndex: 'step_size',
+            },
             {
               title: 'Min/Max Replicas',
               render: (text, row) => (
@@ -791,9 +797,22 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               ),
             },
             {
-              title: 'Metric Source',
-              dataIndex: 'metric_source',
-              render: (text, row) => <Tag>{row?.metric_source}</Tag>,
+              title: t('autoScalingRule.CoolDownSeconds'),
+              dataIndex: 'cooldown_seconds',
+              // render: (text, row) => <span>{row?.cooldown_seconds}</span>,
+            },
+            {
+              title: 'Last Triggered',
+              render: (text, row) => {
+                return (
+                  <span>
+                    {row?.last_triggered_at
+                      ? dayjs.utc(row?.last_triggered_at).tz().format('ll LTS')
+                      : `-`}
+                  </span>
+                );
+              },
+              sorter: dayDiff,
             },
             {
               title: 'Created at',