add: draft for autoscaling feature UI in model service creation/modif…

…ication panel
lablup · Jan 14, 2025 · 9fbef16 · 9fbef16
1 parent 8ab28a8
commit 9fbef16
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 0 deletions.
diff --git a/react/src/components/InputNumberWithSlider.tsx b/react/src/components/InputNumberWithSlider.tsx
@@ -14,6 +14,7 @@ interface InputNumberWithSliderProps {
   step?: number | null;
   disabled?: boolean;
   value?: number;
+  allowNegative?: boolean;
   onChange?: (value: number) => void;
   inputNumberProps?: OmitControlledProps<InputNumberProps>;
   sliderProps?:

diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx
@@ -45,6 +45,7 @@ import {
   theme,
   Tooltip,
   Tag,
+  InputNumber,
 } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
@@ -898,6 +899,8 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                       ) : null}
                     </>
                   )}
+                </Card>
+                <Card>
                   <Form.Item
                     label={t('modelService.DesiredRoutingCount')}
                     name="desiredRoutingCount"
@@ -930,6 +933,89 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                       step={1}
                     />
                   </Form.Item>
+                  <Form.Item
+                    label={'Metric Source'}
+                    name={'metricSource'}
+                    rules={[]}
+                  >
+                    <Select>
+                      <Select.Option value={'inference_framework'}>
+                        Inference Framework
+                      </Select.Option>
+                      <Select.Option value={'kernel'}>Kernel</Select.Option>
+                    </Select>
+                  </Form.Item>
+                  <Form.Item
+                    label={'Metric Name'}
+                    name={'metricName'}
+                    rules={[{ required: true }]}
+                  >
+                    <Input />
+                  </Form.Item>
+                  <Form.Item
+                    label={'Comparator'}
+                    name={'comparator'}
+                    rules={[{ required: true }]}
+                  >
+                    <Select>
+                      <Select.Option value={'LESS_THAN'}>
+                        Less than
+                      </Select.Option>
+                      <Select.Option value={'LESS_THAN_OR_EQUAL'}>
+                        Less than or equal
+                      </Select.Option>
+                      <Select.Option value={'GREATER_THAN'}>
+                        Greater than
+                      </Select.Option>
+                      <Select.Option value={'GREATER_THAN_OR_EQUAL'}>
+                        Greater than or equal
+                      </Select.Option>
+                    </Select>
+                  </Form.Item>
+                  <Form.Item
+                    label={'Step size'}
+                    name={'stepSize'}
+                    rules={[{ required: true }]}
+                  >
+                    <InputNumberWithSlider
+                      // TODO: hardcoded for now
+                      min={-3}
+                      max={3}
+                      inputNumberProps={{}}
+                      step={1}
+                      allowNegative
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label={'Cooldown Seconds'}
+                    name={'cooldownSeconds'}
+                    rules={[]}
+                  >
+                    <InputNumber defaultValue={300}></InputNumber>
+                  </Form.Item>
+                  <Flex
+                    direction="row"
+                    justify="around"
+                    align="stretch"
+                    style={{ width: '100%' }}
+                  >
+                    <Form.Item
+                      label={'Minimum Replicas'}
+                      name={'minReplicas'}
+                      style={{ width: '100%' }}
+                    >
+                      <InputNumber min={0} max={50} style={{ width: 300 }} />
+                    </Form.Item>
+                    <Form.Item
+                      label={'Maximum Replicas'}
+                      name={'maxReplicas'}
+                      style={{ width: '100%' }}
+                    >
+                      <InputNumber min={0} max={50} style={{ width: 300 }} />
+                    </Form.Item>
+                  </Flex>
+                </Card>
+                <Card>
                   {(baiClient.supports('modify-endpoint') || !endpoint) && (
                     <>
                       <ImageEnvironmentSelectFormItems

diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx
@@ -435,6 +435,19 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
     },
   });
 
+  items.push({
+    label: 'Autoscaling Rule',
+    children: (
+      <>
+        <Tag>vllm_avg_prompt_throughput_toks_per_s</Tag>
+        <Tag>LESS_THAN</Tag>
+        <Tag>Cool down sec: 300</Tag>
+        <Tag>Min Replica #: 1</Tag>
+        <Tag>Max Replica #: 3</Tag>
+      </>
+    ),
+  });
+
   return (
     <Flex direction="column" align="stretch" gap="sm">
       <Breadcrumb