From 35a5733e823d41532adc372e1651391af2f8d1fa Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 22 Jan 2025 21:17:27 +0800 Subject: [PATCH] chore: gpu selector, source dropdown --- src/components/drop-down-buttons/index.tsx | 5 +- src/components/logs-viewer/parse-worker.ts | 17 +++- src/global.less | 22 ++++- .../llmodels/components/advance-config.tsx | 80 +++++++----------- src/pages/llmodels/components/data-form.tsx | 33 +++++--- .../llmodels/components/deploy-dropdown.tsx | 27 ++++++ .../llmodels/components/deploy-modal.tsx | 1 + src/pages/llmodels/components/gpu-card.tsx | 7 +- src/pages/llmodels/components/table-list.tsx | 8 ++ .../llmodels/components/update-modal.tsx | 83 +++++++++++++------ src/pages/llmodels/style/deploy-dropdown.less | 28 +++++++ src/pages/resources/components/workers.tsx | 7 +- 12 files changed, 221 insertions(+), 97 deletions(-) create mode 100644 src/pages/llmodels/components/deploy-dropdown.tsx create mode 100644 src/pages/llmodels/style/deploy-dropdown.less diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx index dc43e9a4..46e13a16 100644 --- a/src/components/drop-down-buttons/index.tsx +++ b/src/components/drop-down-buttons/index.tsx @@ -6,20 +6,22 @@ import _ from 'lodash'; import { memo } from 'react'; import './index.less'; +type Trigger = 'click' | 'hover'; interface DropdownButtonsProps { items: MenuProps['items']; size?: 'small' | 'middle' | 'large'; + trigger?: Trigger[]; onSelect: (val: any, item?: any) => void; } const DropdownButtons: React.FC = ({ items, size = 'middle', + trigger = ['hover'], onSelect }) => { const intl = useIntl(); const handleMenuClick = (item: any) => { - console.log('menu click', item.key); const selectItem = _.find(items, { key: item.key }); onSelect(item.key, selectItem); }; @@ -48,6 +50,7 @@ const DropdownButtons: React.FC = ({ ) : ( { return (
= (props) => { form.setFieldValue('backend_parameters', list); }, []); + const handleGPUSelectorChange = (gpuIds: any[]) => { + console.log('GPU Selector Change:', gpuIds); + if ( + backend === backendOptionsMap.llamaBox || + backend === backendOptionsMap.voxBox || + !gpuIds?.length + ) { + return; + } + const lastGroupName = gpuIds[gpuIds.length - 1][0]; + + const lastGroupItems = gpuIds.filter((item) => item[0] === lastGroupName); + + console.log('Last Group Items:', lastGroupItems); + + form.setFieldValue(['gpu_selector', 'gpu_ids'], lastGroupItems); + }; + const gpuOptionRender = (data: any) => { - let width = { - maxWidth: 180, - minWidth: 180 + let width: any = { + maxWidth: 140, + minWidth: 140 }; if (!data.parent) { - width = { maxWidth: 180, minWidth: 180 }; + width = undefined; } if (data.parent) { return ( @@ -234,47 +252,6 @@ const AdvanceConfig: React.FC = (props) => { )} {scheduleType === 'manual' && ( <> - {/* - name={['gpu_selector', 'gpu_ids']} - rules={[ - { - required: true, - message: intl.formatMessage( - { - id: 'common.form.rule.select' - }, - { - name: intl.formatMessage({ - id: 'models.form.gpuselector' - }) - } - ) - } - ]} - > - { - return ( - - {props.label} - - ); - }} - options={gpuOptions} - optionRender={(props) => { - return ; - }} - > - */} = (props) => { > { - item.disableCheckbox = backend !== backendOptionsMap.llamaBox; - return item; - })} + options={gpuOptions} + showCheckedStrategy="SHOW_CHILD" + value={form.getFieldValue(['gpu_selector', 'gpu_ids'])} tagRender={(props) => { return ( = (props) => { ); }} optionRender={gpuOptionRender} + getPopupContainer={(triggerNode) => triggerNode.parentNode} > diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx index fc4c381c..c621022c 100644 --- a/src/pages/llmodels/components/data-form.tsx +++ b/src/pages/llmodels/components/data-form.tsx @@ -129,12 +129,11 @@ const DataForm: React.FC = forwardRef((props, ref) => { label: `${value[0].worker_name}`, value: value[0].worker_name, parent: true, - disableCheckbox: true, + disableCheckbox: false, ..._.pick(value[0], workerFields), children: _.map(value, (item: GPUListItem) => { return { - label: `[ - ${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}] ${item.name}`, + label: `${item.name}`, value: item.id, disableCheckbox: false, ..._.omit(item, workerFields) @@ -484,6 +483,20 @@ const DataForm: React.FC = forwardRef((props, ref) => { return null; }, [props.source, isGGUF, byBuiltIn, intl]); + const handleSetGPUIds = (backend: string) => { + if (backend === backendOptionsMap.llamaBox) { + return; + } + const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']); + + if (!gpuids?.length) { + return; + } + if (gpuids.length > 1 && Array.isArray(gpuids[0])) { + form.setFieldValue(['gpu_selector', 'gpu_ids'], [gpuids[0]]); + } + }; + const handleBackendChange = useCallback((val: string) => { if (val === backendOptionsMap.llamaBox) { form.setFieldsValue({ @@ -492,6 +505,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { }); } form.setFieldValue('backend_version', ''); + handleSetGPUIds(val); props.onBackendChange?.(val); }, []); @@ -500,17 +514,12 @@ const DataForm: React.FC = forwardRef((props, ref) => { 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); + const result = _.map(gpu_ids, (item: string[][] | string[]) => { + if (Array.isArray(item)) { + return item[1]; } + return item; }); if (result.length) { diff --git a/src/pages/llmodels/components/deploy-dropdown.tsx b/src/pages/llmodels/components/deploy-dropdown.tsx new file mode 100644 index 00000000..3f7f55a2 --- /dev/null +++ b/src/pages/llmodels/components/deploy-dropdown.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import '../style/deploy-dropdown.less'; + +interface DeployDropdownProps { + items: { label: string; value: string; key: string; icon: React.ReactNode }[]; + onSelect: (item: { + label: string; + value: string; + key: string; + icon: React.ReactNode; + }) => void; +} + +const DeployDropdown: React.FC = ({ items, onSelect }) => { + return ( +
+ {items.map((item) => ( +
onSelect(item)} className="item"> + {item.icon} + {item.label} +
+ ))} +
+ ); +}; + +export default DeployDropdown; diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx index 6d7af926..d3146c76 100644 --- a/src/pages/llmodels/components/deploy-modal.tsx +++ b/src/pages/llmodels/components/deploy-modal.tsx @@ -129,6 +129,7 @@ const AddModal: React.FC = (props) => { closeIcon={false} maskClosable={false} keyboard={false} + zIndex={2000} styles={{ body: { height: 'calc(100vh - 57px)', diff --git a/src/pages/llmodels/components/gpu-card.tsx b/src/pages/llmodels/components/gpu-card.tsx index ec01fb8b..fb92e9a7 100644 --- a/src/pages/llmodels/components/gpu-card.tsx +++ b/src/pages/llmodels/components/gpu-card.tsx @@ -14,7 +14,12 @@ const GPUCard: React.FC<{ return (
- {header ?? {data.label}} + {header ?? ( + + [{data.index}] + {data.label} + + )}
{info ?? ( diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 1e16e996..c1948d8a 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -52,6 +52,7 @@ import { modelSourceMap } from '../config'; import { FormData, ListItem, ModelInstanceListItem } from '../config/types'; +import DeployDropdown from './deploy-dropdown'; import DeployModal from './deploy-modal'; import InstanceItem from './instance-item'; import UpdateModel from './update-modal'; @@ -787,6 +788,13 @@ const Models: React.FC = ({ items: sourceOptions, onClick: handleClickDropdown }} + trigger={['hover']} + dropdownRender={() => ( + + )} placement="bottomRight" >