Skip to content

Commit

Permalink
fix: polish up layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@lizable @agatha197
lizable authored and agatha197 committed Feb 7, 2025
1 parent ffedfb8 commit 6268a28
Show file tree
Hide file tree
Showing 25 changed files with 363 additions and 127 deletions.
210 changes: 134 additions & 76 deletions react/src/components/AutoScalingRuleEditorModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import {
SIGNED_32BIT_MAX_INT,
SIGNED_32BIT_MIN_INT,
} from '../helper/const-vars';
import BAIModal, { BAIModalProps } from './BAIModal';
import Flex from './Flex';
import InputNumberWithSlider from './InputNumberWithSlider';
import { AutoScalingRuleEditorModalCreateMutation } from './__generated__/AutoScalingRuleEditorModalCreateMutation.graphql';
import {
AutoScalingMetricComparator,
AutoScalingMetricSource,
AutoScalingRuleEditorModalCreateMutation,
} from './__generated__/AutoScalingRuleEditorModalCreateMutation.graphql';
import { AutoScalingRuleEditorModalFragment$key } from './__generated__/AutoScalingRuleEditorModalFragment.graphql';
import { AutoScalingRuleEditorModalModifyMutation } from './__generated__/AutoScalingRuleEditorModalModifyMutation.graphql';
import {
Expand All @@ -14,6 +22,7 @@ import {
Select,
} from 'antd';
import graphql from 'babel-plugin-relay/macro';
import _ from 'lodash';
import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useFragment, useMutation } from 'react-relay';
Expand All @@ -25,19 +34,11 @@ interface AutoScalingRuleEditorModalProps
onRequestClose: (success?: boolean) => void;
}

type Comparators =
| 'LESS_THAN'
| 'LESS_THAN_OR_EQUAL'
| 'GREATER_THAN'
| 'GREATER_THAN_OR_EQUAL';

type AutoScalingMetricSource = 'INFERENCE_FRAMEWORK' | 'KERNEL';

type AutoScalingRuleInput = {
metric_source: AutoScalingMetricSource;
metric_name: string;
threshold: string;
comparator: Comparators;
comparator: AutoScalingMetricComparator;
step_size: number;
cooldown_seconds: number;
min_replicas: number;
Expand Down Expand Up @@ -84,6 +85,8 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
endpoint: $endpoint
props: $props
) {
ok
msg
rule {
metric_name
metric_source
Expand All @@ -105,6 +108,8 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
$props: ModifyEndpointAutoScalingRuleInput!
) {
modify_endpoint_auto_scaling_rule_node(id: $id, props: $props) {
ok
msg
rule {
metric_name
metric_source
Expand All @@ -121,68 +126,99 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({

const handleOk = () => {
// TODO: apply mutationToAddAutoScalingRule request
return formRef.current?.validateFields().then((values) => {
if (autoScalingRule) {
commitModifyAutoScalingRule({
variables: {
id: autoScalingRule.id,
props: {
metric_name: values.metric_name,
metric_source: values.metric_source as AutoScalingMetricSource,
threshold: values.threshold,
comparator: values.comparator,
step_size: values.step_size,
cooldown_seconds: values.cooldown_seconds,
min_replicas: values.min_replicas,
max_replicas: values.max_replicas,
return formRef.current
?.validateFields()
.then((values) => {
if (autoScalingRule) {
commitModifyAutoScalingRule({
variables: {
id: autoScalingRule.id,
props: {
metric_name: values.metric_name,
metric_source: values.metric_source as AutoScalingMetricSource,
threshold: values.threshold,
comparator: values.comparator,
step_size: values.step_size,
cooldown_seconds: values.cooldown_seconds,
min_replicas: values.min_replicas,
max_replicas: values.max_replicas,
},
},
},
onCompleted: (res, errors) => {
message.success(t('autoScalingRule.SuccessfullyUpdated'));
onRequestClose(true);
},
onError: (error) => {
message.error(error.message);
onRequestClose(false);
},
});
} else {
commitAddAutoScalingRule({
variables: {
endpoint: endpoint_id ?? '',
props: {
metric_name: values.metric_name,
metric_source: values.metric_source as AutoScalingMetricSource,
threshold: values.threshold,
comparator: values.comparator,
step_size: values.step_size,
cooldown_seconds: values.cooldown_seconds,
min_replicas: values.min_replicas,
max_replicas: values.max_replicas,
onCompleted: (res, errors) => {
if (!res?.modify_endpoint_auto_scaling_rule_node?.ok) {
message.error(res?.modify_endpoint_auto_scaling_rule_node?.msg);
onRequestClose(false);
return;
}
if (errors && errors.length > 0) {
const errorMsgList = _.map(errors, (error) => error.message);
for (const error of errorMsgList) {
message.error(error, 2.5);
}
onRequestClose(false);
return;
}
message.success(t('autoScalingRule.SuccessfullyUpdated'));
onRequestClose(true);
},
},
onCompleted: (res, errors) => {
message.success(t('autoScalingRule.SuccessfullyCreated'));
onRequestClose(true);
},
onError: (error) => {
message.error(error.message);
onRequestClose(false);
},
});
}
});
onError: (error) => {
message.error(error.message);
onRequestClose(false);
},
});
} else {
commitAddAutoScalingRule({
variables: {
endpoint: endpoint_id ?? '',
props: {
metric_name: values.metric_name,
metric_source: values.metric_source as AutoScalingMetricSource,
threshold: values.threshold,
comparator: values.comparator,
step_size: values.step_size,
cooldown_seconds: values.cooldown_seconds,
min_replicas: values.min_replicas,
max_replicas: values.max_replicas,
},
},
onCompleted: (res, errors) => {
if (!res?.create_endpoint_auto_scaling_rule_node?.ok) {
message.error(res?.create_endpoint_auto_scaling_rule_node?.msg);
onRequestClose(false);
return;
}
if (errors && errors.length > 0) {
const errorMsgList = _.map(errors, (error) => error.message);
for (const error of errorMsgList) {
message.error(error, 2.5);
}
onRequestClose(false);
return;
}
message.success(t('autoScalingRule.SuccessfullyCreated'));
onRequestClose(true);
},
onError: (error) => {
message.error(error.message);
onRequestClose(false);
},
});
}
})
.catch((err) => {
console.log(err);
});
};

const handleCancel = () => {
onRequestClose();
onRequestClose(false);
};

const comparators = [
{ label: '<', value: 'LESS_THAN' },
{ label: '<=', value: 'LESS_THAN_OR_EQUAL' },
{ label: '≤', value: 'LESS_THAN_OR_EQUAL' },
{ label: '>', value: 'GREATER_THAN' },
{ label: '>=', value: 'GREATER_THAN_OR_EQUAL' },
{ label: '≥', value: 'GREATER_THAN_OR_EQUAL' },
];

return (
Expand All @@ -203,6 +239,7 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
>
<Form
ref={formRef}
preserve={false}
layout={'vertical'}
requiredMark={'optional'}
initialValues={
Expand Down Expand Up @@ -249,67 +286,88 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
label={t('autoScalingRule.Comparator')}
name={'comparator'}
rules={[{ required: true }]}
style={{ width: 600 }}
style={{ flex: 3 }}
>
<Radio.Group
block
size={'small'}
options={comparators}
optionType={'button'}
buttonStyle={'solid'}
></Radio.Group>
</Form.Item>
<Form.Item
label={t('autoScalingRule.Threshold')}
name={'threshold'}
rules={[{ required: true }]}
style={{ width: 200 }}
style={{ flex: 1 }}
>
<Input></Input>
</Form.Item>
</Flex>
<Form.Item
label={'Step size'}
label={t('autoScalingRule.StepSize')}
name={'step_size'}
rules={[{ required: true }]}
>
<InputNumberWithSlider
// TODO: hardcoded for now
min={-3}
max={3}
inputNumberProps={{}}
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 }]}
rules={[
{
required: true,
min: 0,
type: 'number',
},
]}
>
<InputNumber defaultValue={300}></InputNumber>
<InputNumber style={{ width: '100%' }} />
</Form.Item>
<Flex
direction="row"
justify="around"
align="stretch"
style={{ width: '100%' }}
gap={'xs'}
>
<Form.Item
label={t('autoScalingRule.MinReplicas')}
name={'min_replicas'}
style={{ width: '100%' }}
rules={[{ required: true }]}
rules={[
{
required: true,
min: 0,
max: 50,
type: 'number',
},
]}
>
<InputNumber min={0} max={50} />
<InputNumber min={0} max={50} style={{ width: '100%' }} />
</Form.Item>
<Form.Item
label={t('autoScalingRule.MaxReplicas')}
name={'max_replicas'}
style={{ width: '100%' }}
rules={[{ required: true }]}
rules={[
{
required: true,
min: 0,
max: 50,
type: 'number',
},
]}
>
<InputNumber min={0} max={50} />
<InputNumber min={0} max={50} style={{ width: '100%' }} />
</Form.Item>
</Flex>
</Form>
Expand Down
1 change: 0 additions & 1 deletion react/src/components/ServiceLauncherPageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ import {
theme,
Tooltip,
Tag,
InputNumber,
} from 'antd';
import graphql from 'babel-plugin-relay/macro';
import _ from 'lodash';
Expand Down
2 changes: 2 additions & 0 deletions react/src/helper/const-vars.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
export const UNLIMITED_MAX_CONTAINERS_PER_SESSIONS = 1000000;
export const UNLIMITED_MAX_CONCURRENT_SESSIONS = 1000000;
export const SIGNED_32BIT_MAX_INT = 2147483647;
export const SIGNED_32BIT_MIN_INT = -2147483648;
Loading

0 comments on commit 6268a28

Please sign in to comment.