root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: gpu selector issues

Browse Source
This commit is contained in:
jialin
2025-10-28 11:17:29 +08:00
parent 697f1f9c25
commit a86bed294e
7 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-form/seal-cascader.tsx
+1 -2
View File
@@ -60,8 +60,7 @@ const OptionNodes = (props: {
);
}
let width: any = {
maxWidth: 140,
minWidth: 140
maxWidth: 140
};
if (!data.parent) {
width = undefined;
src/pages/llmodels/components/gpu-card.tsx
+10 -4
View File
@@ -21,6 +21,12 @@ const Header = styled.div`
width: 100%;
`;
const ItemInfo = styled.div`
display: flex;
flex-wrap: wrap;
white-space: break-spaces;
`;
const Description = styled.div`
display: flex;
flex-direction: column;
@@ -60,7 +66,7 @@ const GPUCard: React.FC<{
description={
info || (
<>
<span>
<ItemInfo>
{intl.formatMessage({ id: 'resources.table.vram' })}(
{intl.formatMessage({ id: 'resources.table.used' })}/
{intl.formatMessage({ id: 'resources.table.total' })}):{' '}
@@ -70,8 +76,8 @@ const GPUCard: React.FC<{
)}{' '}
/ {convertFileSize(data?.memory?.total || 0)}
</span>
</span>
<span>
</ItemInfo>
<ItemInfo>
<span>
{intl.formatMessage({ id: 'resources.table.gpuutilization' })}
:{' '}
@@ -80,7 +86,7 @@ const GPUCard: React.FC<{
? _.round(data?.memory?.utilization_rate || 0, 2)
: _.round(data.memory?.allocated / data.memory?.total, 2) * 100}
%
</span>
</ItemInfo>
</>
)
}
src/pages/llmodels/config/form-context.ts
+3 -2
View File
@@ -1,6 +1,6 @@
import { PageActionType } from '@/config/types';
import React from 'react';
import { BackendOption, DeployFormKey } from './types';
import { BackendOption, DeployFormKey, FormData } from './types';
type EmptyObject = Record<never, never>;
@@ -17,10 +17,11 @@ interface FormContextProps {
isGGUF?: boolean;
formKey: DeployFormKey;
source: string;
pageAction: PageActionType;
action: PageActionType;
gpuOptions: CascaderOption[];
workerLabelOptions: CascaderOption[];
backendOptions: BackendOption[];
initialValues?: FormData; // for editing model
onValuesChange?: (changedValues: any, allValues: any) => void;
onBackendChange: (backend: string, option: any) => void;
}
src/pages/llmodels/forms/backend.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const BackendFields: React.FC = () => {
const {
isGGUF,
formKey,
pageAction: action,
action,
source,
gpuOptions,
onValuesChange,
src/pages/llmodels/forms/index.tsx
+3 -2
View File
@@ -55,7 +55,7 @@ const SegmentedHeader = styled.div<{ $top?: number }>`
`;
interface DataFormProps {
initialValues?: any;
initialValues?: FormData;
ref?: any;
source: SourceType;
action: PageActionType;
@@ -323,10 +323,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
isGGUF: isGGUF,
formKey: formKey,
source: props.source,
pageAction: action,
action: action,
gpuOptions: gpuOptions,
backendOptions: backendOptions,
workerLabelOptions: workerLabelOptions,
initialValues: initialValues,
onValuesChange: onValuesChange,
onBackendChange: handleBackendChange
}}
src/pages/llmodels/forms/online-source.tsx
+5 -5
View File
@@ -13,7 +13,7 @@ const HuggingFaceForm: React.FC = () => {
const formInstance = Form.useFormInstance();
const formCtx = useFormContext();
const { getRuleMessage } = useAppUtils();
const { formKey, pageAction, isGGUF, onValuesChange } = formCtx;
const { formKey, action, isGGUF, onValuesChange } = formCtx;
const source = Form.useWatch('source');
if (
@@ -47,7 +47,7 @@ const HuggingFaceForm: React.FC = () => {
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.repoid' })}
required
disabled={pageAction === PageAction.CREATE}
disabled={action === PageAction.CREATE}
onBlur={handleOnBlur}
></SealInput.Input>
</Form.Item>
@@ -58,7 +58,7 @@ const HuggingFaceForm: React.FC = () => {
>
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.filename' })}
disabled={pageAction === PageAction.CREATE}
disabled={action === PageAction.CREATE}
></SealInput.Input>
</Form.Item>
)}
@@ -78,7 +78,7 @@ const HuggingFaceForm: React.FC = () => {
<SealInput.Input
required
label={intl.formatMessage({ id: 'models.form.repoid' })}
disabled={pageAction === PageAction.CREATE}
disabled={action === PageAction.CREATE}
onBlur={handleOnBlur}
></SealInput.Input>
</Form.Item>
@@ -89,7 +89,7 @@ const HuggingFaceForm: React.FC = () => {
>
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.filename' })}
disabled={pageAction === PageAction.CREATE}
disabled={action === PageAction.CREATE}
></SealInput.Input>
</Form.Item>
)}
src/pages/llmodels/forms/schedule-type.tsx
+29 -14
View File
@@ -4,6 +4,7 @@ import SealInputNumber from '@/components/seal-form/input-number';
import SealCascader from '@/components/seal-form/seal-cascader';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
@@ -67,7 +68,13 @@ const gpuAllocateTypeTips = [
const ScheduleTypeForm: React.FC = () => {
const intl = useIntl();
const { onValuesChange, gpuOptions, workerLabelOptions } = useFormContext();
const {
onValuesChange,
action,
gpuOptions,
workerLabelOptions,
initialValues
} = useFormContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const scheduleType = Form.useWatch('scheduleType', form);
@@ -88,39 +95,41 @@ const ScheduleTypeForm: React.FC = () => {
onValuesChange?.({}, form.getFieldsValue());
};
const handleBeforeGpuSelectorChange = (gpuIds: any[]) => {};
const handleGpuSelectorChange = (value: any[]) => {
handleBeforeGpuSelectorChange(value);
onValuesChange?.({}, form.getFieldsValue());
if (value.length > 0) {
onValuesChange?.({}, form.getFieldsValue());
}
};
const handleOnStepReplicaStep = (
value: number,
info: { offset: number; type: 'up' | 'down' }
value: number | string | null,
info: { offset: number | string | null; type: 'up' | 'down' }
) => {
let newValue = value;
const isPowerOfTwo = (n: number) => (n & (n - 1)) === 0 && n !== 0; // check power of two
if (!isPowerOfTwo(value)) {
if (!isPowerOfTwo(value as number)) {
if (info.type === 'up') {
newValue = Math.pow(2, Math.ceil(Math.log2(value)));
newValue = Math.pow(2, Math.ceil(Math.log2(value as number)));
} else {
newValue = Math.pow(2, Math.floor(Math.log2(value)));
newValue = Math.pow(2, Math.floor(Math.log2(value as number)));
}
}
form.setFieldValue(['gpu_selector', 'gpus_per_replica'], newValue);
onValuesChange?.({}, form.getFieldsValue());
};
const handleOnStepReplica = (value: number | null) => {
const handleOnStepReplica = async (value: number | string | null) => {
if (value === null) {
await new Promise((resolve) => {
setTimeout(resolve, 200);
});
form.setFieldValue(['gpu_selector', 'gpus_per_replica'], 1);
return;
}
const isPowerOfTwo = (n: number) => (n & (n - 1)) === 0 && n !== 0; // check power of two
if (!isPowerOfTwo(value)) {
const newValue = Math.pow(2, Math.round(Math.log2(value)));
if (!isPowerOfTwo(value as number)) {
const newValue = Math.pow(2, Math.round(Math.log2(value as number)));
form.setFieldValue(['gpu_selector', 'gpus_per_replica'], newValue);
onValuesChange?.({}, form.getFieldsValue());
}
@@ -212,7 +221,13 @@ const ScheduleTypeForm: React.FC = () => {
onChange={handleGpuSelectorChange}
></SealCascader>
</Form.Item>
<Form.Item name="gpusCountType">
<Form.Item
name="gpusCountType"
hidden={
action === PageAction.EDIT &&
!!initialValues?.gpu_selector?.gpus_per_replica
}
>
<SealSelect
onChange={handleGpusCountTypeChange}
label={intl.formatMessage({