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

refactor: gpu selector

Browse Source
This commit is contained in:
jialin
2025-02-17 13:49:55 +08:00
parent 9671f57b65
commit bbb133d0f2
7 changed files with 372 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auto-tooltip/index.tsx
+1 -1
View File
@@ -124,7 +124,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
style={{
position: 'absolute',
right: 8,
top: 8
top: 7
}}
/>
) : (
src/components/seal-form/seal-cascader.tsx
+107
View File
@@ -0,0 +1,107 @@
import { isNotEmptyValue } from '@/utils/index';
import { useIntl } from '@umijs/max';
import type { CascaderAutoProps } from 'antd';
import { Cascader, Form } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useMemo, useRef, useState } from 'react';
import Wrapper from './components/wrapper';
import { SealFormItemProps } from './types';
const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
props
) => {
const {
label,
placeholder,
children,
required,
description,
options,
allowNull,
isInFormItems = true,
...rest
} = props;
const intl = useIntl();
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
let status = '';
// the status can be controlled by Form.Item
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
const _options = useMemo(() => {
if (!options?.length) {
return [];
}
const list = cloneDeep(options);
return list.map((item: any) => {
if (item.locale) {
item.label = intl.formatMessage({ id: item.label as string });
}
return item;
});
}, [options, intl]);
useEffect(() => {
if (isNotEmptyValue(props.value) || (allowNull && props.value === null)) {
setIsFocus(true);
}
}, [props.value, allowNull]);
const handleClickWrapper = () => {
if (!props.disabled && !isFocus) {
inputRef.current?.focus?.();
setIsFocus(true);
}
};
const handleChange = (val: any, options: any) => {
if (isNotEmptyValue(val) || (allowNull && val === null)) {
setIsFocus(true);
} else {
setIsFocus(false);
}
props.onChange?.(val, options);
};
const handleOnFocus = (e: any) => {
setIsFocus(true);
props.onFocus?.(e);
};
const handleOnBlur = (e: any) => {
if (allowNull && props.value === null) {
setIsFocus(true);
} else if (!props.value) {
setIsFocus(false);
}
props.onBlur?.(e);
};
return (
<Wrapper
status={status}
label={label}
isFocus={isFocus}
required={required}
description={description}
disabled={props.disabled}
onClick={handleClickWrapper}
>
<Cascader
{...rest}
ref={inputRef}
options={children ? null : _options}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
onChange={handleChange}
notFoundContent={null}
></Cascader>
</Wrapper>
);
};
export default SealCascader;
src/global.less
+34
View File
@@ -777,6 +777,40 @@ body {
font-weight: var(--font-weight-bold);
}
.ant-cascader-menu-item.ant-cascader-menu-item-active {
background-color: var(--ant-select-option-selected-bg) !important;
}
.cascader-popup-wrapper {
.ant-cascader-menu {
overflow-x: hidden;
&::-webkit-scrollbar {
width: var(--scrollbar-size);
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-thumb);
border-radius: 4px;
}
}
.ant-cascader-checkbox.ant-cascader-checkbox-disabled {
display: none;
}
}
}
.ant-tooltip-content {
.ant-tooltip-inner {
a {
src/pages/llmodels/components/advance-config.tsx
+106 -40
View File
@@ -1,6 +1,7 @@
import AutoTooltip from '@/components/auto-tooltip';
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
import SealCascader from '@/components/seal-form/seal-cascader';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
@@ -122,6 +123,24 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
form.setFieldValue('backend_parameters', list);
}, []);
const gpuOptionRender = (data: any) => {
let width = {
maxWidth: 180,
minWidth: 180
};
if (!data.parent) {
width = { maxWidth: 180, minWidth: 180 };
}
if (data.parent) {
return (
<AutoTooltip ghost {...width}>
{data.label}
</AutoTooltip>
);
}
return <GPUCard data={data}></GPUCard>;
};
const collapseItems = useMemo(() => {
const children = (
<>
@@ -214,47 +233,94 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
</>
)}
{scheduleType === 'manual' && (
<Form.Item<FormData>
name={['gpu_selector', 'gpu_ids']}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{
name: intl.formatMessage({ id: 'models.form.gpuselector' })
}
)
}
]}
>
<SealSelect
allowClear
label={intl.formatMessage({ id: 'models.form.gpuselector' })}
required
mode="multiple"
maxTagCount={1}
tagRender={(props) => {
return (
<AutoTooltip
className="m-r-4"
closable={props.closable}
onClose={props.onClose}
maxWidth={240}
>
{props.label}
</AutoTooltip>
);
}}
options={gpuOptions}
optionRender={(props) => {
return <GPUCard data={props.data}></GPUCard>;
}}
></SealSelect>
</Form.Item>
<>
{/* <Form.Item<FormData>
name={['gpu_selector', 'gpu_ids']}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{
name: intl.formatMessage({
id: 'models.form.gpuselector'
})
}
)
}
]}
>
<SealSelect
label={intl.formatMessage({ id: 'models.form.gpuselector' })}
required
mode="multiple"
maxTagCount={1}
tagRender={(props) => {
return (
<AutoTooltip
className="m-r-4"
closable={props.closable}
onClose={props.onClose}
maxWidth={240}
>
{props.label}
</AutoTooltip>
);
}}
options={gpuOptions}
optionRender={(props) => {
return <GPUCard data={props.data}></GPUCard>;
}}
></SealSelect>
</Form.Item> */}
<Form.Item
name={['gpu_selector', 'gpu_ids']}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{
name: intl.formatMessage({
id: 'models.form.gpuselector'
})
}
)
}
]}
>
<SealCascader
required
multiple={backend !== backendOptionsMap.voxBox}
popupClassName="cascader-popup-wrapper"
maxTagCount="responsive"
label={intl.formatMessage({ id: 'models.form.gpuselector' })}
options={gpuOptions.map((item) => {
item.disableCheckbox = backend !== backendOptionsMap.llamaBox;
return item;
})}
tagRender={(props) => {
return (
<AutoTooltip
className="m-r-4"
closable={props.closable}
onClose={props.onClose}
maxWidth={240}
>
{props.label}
</AutoTooltip>
);
}}
optionRender={gpuOptionRender}
></SealCascader>
</Form.Item>
</>
)}
<Form.Item name="backend_version">
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.backendVersion' })}
src/pages/llmodels/components/data-form.tsx
+67 -12
View File
@@ -51,6 +51,13 @@ interface DataFormProps {
fields?: string[];
}
interface GPUOption {
label: string;
value: string;
disableCheckbox?: boolean;
children: GPUOption[];
}
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
@@ -72,9 +79,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
} = props;
const [form] = Form.useForm();
const intl = useIntl();
const [gpuOptions, setGpuOptions] = useState<
Array<GPUListItem & { label: string; value: string }>
>([]);
const [gpuOptions, setGpuOptions] = useState<Array<GPUOption>>([]);
const [modelTask, setModelTask] = useState<Record<string, any>>({
type: '',
value: '',
@@ -114,17 +119,37 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
];
const getGPUList = async () => {
const data = await queryGPUList();
const list = _.map(data.items, (item: GPUListItem) => {
const generateCascaderOptions = (list: GPUListItem[]) => {
const workerFields = ['worker_name', 'worker_id', 'worker_ip'];
const workers = _.groupBy(list, 'worker_name');
const workerList = _.map(workers, (value: GPUListItem[]) => {
return {
...item,
title: '',
label: ` ${item.name}(${item.worker_name}) [${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}]`,
value: item.id
label: `${value[0].worker_name}`,
value: value[0].worker_name,
parent: true,
disableCheckbox: true,
..._.pick(value[0], workerFields),
children: _.map(value, (item: GPUListItem) => {
return {
label: `[
${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}] ${item.name}`,
value: item.id,
disableCheckbox: false,
..._.omit(item, workerFields)
};
})
};
});
setGpuOptions(list);
return workerList;
};
const getGPUList = async () => {
const data = await queryGPUList();
const gpuList = generateCascaderOptions(data.items);
setGpuOptions(gpuList);
};
useEffect(() => {
@@ -470,6 +495,34 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
props.onBackendChange?.(val);
}, []);
const generateGPUIds = (data: FormData) => {
const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
if (!gpu_ids.length) {
return {};
}
const result: string[] = [];
_.each(gpu_ids, (item: string[]) => {
if (item.length > 1) {
result.push(..._.tail(item));
}
if (item.length === 1) {
const worker = _.find(gpuOptions, { value: item[0] });
const gpus = _.map(worker?.children, 'value');
result.push(...gpus);
}
});
if (result.length) {
return {
gpu_selector: {
gpu_ids: result
}
};
}
return {};
};
const handleOk = (formdata: FormData) => {
let data = _.cloneDeep(formdata);
if (data.categories) {
@@ -477,8 +530,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
} else {
data.categories = [];
}
const gpuSelector = generateGPUIds(data);
onOk({
..._.omit(data, ['scheduleType'])
..._.omit(data, ['scheduleType']),
...gpuSelector
});
};
src/pages/llmodels/components/update-modal.tsx
+55 -10
View File
@@ -75,18 +75,59 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
const [loading, setLoading] = useState(false);
const localPathCache = useRef<string>('');
const getGPUList = async () => {
const data = await queryGPUList();
const list = _.map(data.items, (item: GPUListItem) => {
const generateCascaderOptions = (list: GPUListItem[]) => {
const workerFields = ['worker_name', 'worker_id', 'worker_ip'];
const workers = _.groupBy(list, 'worker_name');
const workerList = _.map(workers, (value: GPUListItem[]) => {
return {
...item,
title: '',
label: ` ${item.name}(${item.worker_name})[
${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}]`,
value: item.id
label: `${value[0].worker_name}`,
value: value[0].worker_name,
parent: true,
..._.pick(value[0], workerFields),
children: _.map(value, (item: GPUListItem) => {
return {
label: `[
${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}] ${item.name}`,
value: item.id,
..._.omit(item, workerFields)
};
})
};
});
setGpuOptions(list);
return workerList;
};
const getGPUList = async () => {
const data = await queryGPUList();
const gpuList = generateCascaderOptions(data.items);
setGpuOptions(gpuList);
};
const generateGPUSelector = (data: any) => {
const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
if (gpu_ids.length === 0) {
return [];
}
const dataList = _.reduce(
gpuOptions,
(list: string[], item: any) => {
const gpuIds = _.filter(
gpu_ids,
(id: string) => id.indexOf(item.worker_name) > -1
);
if (gpuIds.length && gpuIds.length === item.children.length) {
list.push(item.worker_name);
} else if (gpuIds.length) {
list.push(item.worker_name, ...gpuIds);
}
return list;
},
{}
);
return dataList;
};
useEffect(() => {
@@ -96,6 +137,10 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
props.data
);
const gpu_ids = generateGPUSelector(props.data);
console.log('gpu_ids+++++++++', gpu_ids);
const formData = {
...result.values,
..._.omit(props.data, result.omits),
@@ -104,7 +149,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
: null,
scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: props.data?.gpu_selector || {
gpu_ids: []
gpu_ids: gpu_ids
}
};
form.setFieldsValue(formData);
src/pages/llmodels/style/gpu-card.less
+2 -2
View File
@@ -13,8 +13,8 @@
.info {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
gap: 10px;
color: var(--ant-color-text-tertiary);
}