diff --git a/react/src/components/AutoScalingRuleEditorModal.tsx b/react/src/components/AutoScalingRuleEditorModal.tsx index bdfe5f207..a110bc9c6 100644 --- a/react/src/components/AutoScalingRuleEditorModal.tsx +++ b/react/src/components/AutoScalingRuleEditorModal.tsx @@ -1,7 +1,11 @@ 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 { @@ -14,6 +18,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'; @@ -25,19 +30,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; @@ -84,6 +81,8 @@ const AutoScalingRuleEditorModal: React.FC = ({ endpoint: $endpoint props: $props ) { + ok + msg rule { metric_name metric_source @@ -105,6 +104,8 @@ const AutoScalingRuleEditorModal: React.FC = ({ $props: ModifyEndpointAutoScalingRuleInput! ) { modify_endpoint_auto_scaling_rule_node(id: $id, props: $props) { + ok + msg rule { metric_name metric_source @@ -121,61 +122,92 @@ const AutoScalingRuleEditorModal: React.FC = ({ 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 = [ @@ -203,6 +235,7 @@ const AutoScalingRuleEditorModal: React.FC = ({ >
= ({ label={t('autoScalingRule.Comparator')} name={'comparator'} rules={[{ required: true }]} - style={{ width: 600 }} + style={{ flex: 3 }} > @@ -285,31 +319,52 @@ const AutoScalingRuleEditorModal: React.FC = ({ - + - + - + diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx index f88f2d8d1..7597d677e 100644 --- a/react/src/components/ServiceLauncherPageContent.tsx +++ b/react/src/components/ServiceLauncherPageContent.tsx @@ -45,7 +45,6 @@ import { theme, Tooltip, Tag, - InputNumber, } from 'antd'; import graphql from 'babel-plugin-relay/macro'; import _ from 'lodash'; diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx index f21d559de..c872cbd44 100644 --- a/react/src/pages/EndpointDetailPage.tsx +++ b/react/src/pages/EndpointDetailPage.tsx @@ -113,8 +113,6 @@ const EndpointDetailPage: React.FC = () => { const [editingAutoScalingRule, setEditingAutoScalingRule] = useState(null); - const [isPendingReload, startReloadTransition] = useTransition(); - const [isOpenTokenGenerationModal, setIsOpenTokenGenerationModal] = useState(false); const [openChatModal, setOpenChatModal] = useState(false); @@ -638,7 +636,6 @@ const EndpointDetailPage: React.FC = () => { ++index; return index; }, - showSorterTooltip: false, }, { title: 'Metric Name', @@ -659,7 +656,6 @@ const EndpointDetailPage: React.FC = () => {