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

refactor: resource table columns

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent 84859d1b7c
commit 949eded4ee
44 changed files with 1390 additions and 1544 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/advance-config.tsx
+2 -4
View File
@@ -2,7 +2,6 @@ import IconFont from '@/components/icon-font';
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
import CheckboxField from '@/components/seal-form/checkbox-field';
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';
@@ -28,7 +27,6 @@ import mindieConfig from '../config/mindie-config';
import { FormData } from '../config/types';
import vllmConfig from '../config/vllm-config';
import dataformStyles from '../style/data-form.less';
import GPUCard from './gpu-card';
import Performance from './performance';
interface AdvanceConfigProps {
@@ -265,7 +263,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
</Form.Item>
</>
)}
{scheduleType === 'manual' && (
{/* {scheduleType === 'manual' && (
<>
<Form.Item
name={['gpu_selector', 'gpu_ids']}
@@ -293,7 +291,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
></SealCascader>
</Form.Item>
</>
)}
)} */}
<Form.Item name="backend_version">
<SealInput.Input
src/pages/llmodels/components/deploy-builtin-modal.tsx
+1 -17
View File
@@ -3,7 +3,6 @@ import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageActionType } from '@/config/types';
import { createAxiosToken } from '@/hooks/use-chunk-request';
import { ProviderValueMap } from '@/pages/cluster-management/config';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
@@ -506,22 +505,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
return (
<GSDrawer
title={
<div className="flex-between flex-center">
<span
style={{
color: 'var(--ant-color-text)',
fontWeight: 'var(--font-weight-medium)',
fontSize: 'var(--font-size-middle)'
}}
>
{title}
</span>
<Button type="text" size="small" onClick={handleCancel}>
<CloseOutlined></CloseOutlined>
</Button>
</div>
}
title={title}
open={open}
onClose={handleCancel}
destroyOnClose={true}
src/pages/llmodels/components/deploy-modal.tsx
+14 -13
View File
@@ -246,21 +246,18 @@ const AddModal: FC<AddModalProps> = (props) => {
categories: getCategory(item)
});
setWarningStatus(
{
show: true,
title: '',
type: 'transition',
message: intl.formatMessage({ id: 'models.form.evaluating' })
},
{
override: true
}
);
let warningStatus: MessageStatus = {
show: true,
title: '',
type: 'transition',
message: intl.formatMessage({ id: 'models.form.evaluating' })
};
if (item.isGGUF) {
fetchModelFiles();
warningStatus.type = 'danger';
warningStatus.message = 'GGUF model is not supported.';
}
setWarningStatus(warningStatus, { override: true });
};
const handleOnSelectModelAfterEvaluate = (item: any, manual?: boolean) => {
@@ -531,7 +528,11 @@ const AddModal: FC<AddModalProps> = (props) => {
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button type="primary" onClick={handleSubmitAnyway}>
<Button
type="primary"
onClick={handleSubmitAnyway}
disabled={isGGUF}
>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}
src/pages/llmodels/components/instance-item.tsx
+1 -1
View File
@@ -681,4 +681,4 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
</>
);
};
export default React.memo(InstanceItem);
export default InstanceItem;
src/pages/llmodels/components/model-card.tsx
-4
View File
@@ -174,8 +174,6 @@ const ModelCard: React.FC<{
setModelData(null);
setReadmeText(null);
handleOnCollapse(null);
// setIsGGUF(false);
// setIsGGUFModel(false);
}
};
@@ -205,8 +203,6 @@ const ModelCard: React.FC<{
setModelData(null);
setReadmeText(null);
handleOnCollapse(null);
// setIsGGUF(false);
// setIsGGUFModel(false);
}
};
src/pages/llmodels/components/search-model.tsx
+1 -1
View File
@@ -199,7 +199,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
try {
const params = {
Name: `${searchInputRef.current}`,
tags: ['gptq'],
tags: [],
tasks: filterTaskRef.current
? ([ModelscopeTaskMap[filterTaskRef.current]] as string[])
: [],
src/pages/llmodels/components/table-list.tsx
+3 -1
View File
@@ -724,7 +724,9 @@ const Models: React.FC<ModelsProps> = ({
<Select
allowClear
showSearch={false}
placeholder="Filter by cluster"
placeholder={intl.formatMessage({
id: 'clusters.filterBy.cluster'
})}
style={{ width: 160 }}
size="large"
maxTagCount={1}
src/pages/llmodels/download/index.tsx
+34 -29
View File
@@ -1,10 +1,11 @@
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { ProviderValueMap } from '@/pages/cluster-management/config';
import { useIntl } from '@umijs/max';
import { debounce } from 'lodash';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ColumnWrapper from '../components/column-wrapper';
import HFModelFile from '../components/hf-model-file';
import CompatibilityAlert from '../components/compatible-alert';
import ModelCard from '../components/model-card';
import SearchModel from '../components/search-model';
import Separator from '../components/separator';
@@ -19,7 +20,6 @@ type AddModalProps = {
source: string;
width?: string | number;
hasLinuxWorker?: boolean;
workersList: Global.BaseOption<number>[];
workerOptions: any[];
onOk: (values: FormData) => void;
onCancel: () => void;
@@ -28,7 +28,6 @@ type AddModalProps = {
const DownloadModel: React.FC<AddModalProps> = (props) => {
const {
title,
workersList,
open,
onOk,
onCancel,
@@ -47,14 +46,13 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
const [selectedModel, setSelectedModel] = useState<any>({});
const [collapsed, setCollapsed] = useState<boolean>(false);
const [isGGUF, setIsGGUF] = useState<boolean>(false);
const [fileName, setFileName] = useState<string>('');
const modelFileRef = useRef<any>(null);
const generateModelInfo = () => {
if (source === modelSourceMap.huggingface_value) {
const huggingFaceModel = {
huggingface_repo_id: selectedModel.name,
huggingface_filename: fileName || null
huggingface_filename: null
};
return huggingFaceModel;
}
@@ -62,15 +60,12 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
if (source === modelSourceMap.modelscope_value) {
const modelScopeModel = {
model_scope_model_id: selectedModel.name,
model_scope_file_path: fileName || null
model_scope_file_path: null
};
return modelScopeModel;
}
return {};
};
const handleSelectModelFile = useCallback((item: any) => {
setFileName(item.fakeName);
}, []);
const handleOnSelectModel = (item: any) => {
setSelectedModel(item);
@@ -103,21 +98,30 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
onCancel?.();
}, [onCancel]);
useEffect(() => {
handleSelectModelFile({ fakeName: '' });
}, [selectedModel]);
const initDefaultWorker = () => {
if (!workerOptions || workerOptions.length === 0) {
form.current?.form?.setFieldValue('worker_id', []);
return;
}
const getWorkerId = (worker: any) => [
worker?.value ?? '',
worker?.children?.[0]?.value ?? ''
];
const customWorker = workerOptions.find(
(item) => item.provider === ProviderValueMap.Custom
);
const worker_id = getWorkerId(customWorker || workerOptions[0]);
form.current?.form?.setFieldValue('worker_id', worker_id);
};
useEffect(() => {
if (!open) {
setIsGGUF(false);
} else if (source === modelSourceMap.ollama_library_value) {
setIsGGUF(true);
}
if (open) {
form.current?.form?.setFieldValue(
'worker_id',
workersList[0]?.value || ''
);
initDefaultWorker();
}
return () => {
@@ -183,16 +187,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
modelSource={props.source}
setIsGGUF={handleSetIsGGUF}
></ModelCard>
{isGGUF && (
<HFModelFile
ref={modelFileRef}
selectedModel={selectedModel}
modelSource={props.source}
onSelectFile={handleSelectModelFile}
collapsed={collapsed}
isDownload={true}
></HFModelFile>
)}
</ColumnWrapper>
<Separator></Separator>
</div>
@@ -203,9 +197,21 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
paddingBottom={50}
footer={
<>
<CompatibilityAlert
showClose={false}
warningStatus={{
show: isGGUF,
type: 'danger',
message: 'GGUF is not supported'
}}
contentStyle={{ paddingInline: 0 }}
></CompatibilityAlert>
<ModalFooter
onCancel={handleCancel}
onOk={handleSumit}
okBtnProps={{
disabled: isGGUF
}}
style={{
padding: '16px 24px',
display: 'flex',
@@ -228,7 +234,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
ref={form}
onOk={handleOk}
source={source}
workersList={workersList}
workerOptions={workerOptions}
></TargetForm>
</>
src/pages/llmodels/download/target-form.tsx
+12 -11
View File
@@ -1,3 +1,4 @@
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';
@@ -11,14 +12,13 @@ import { localPathTipsList, modelSourceMap, sourceOptions } from '../config';
interface TargetFormProps {
ref?: any;
workersList: Global.BaseOption<number>[];
source: string;
workerOptions: any[];
onOk: (values: any) => void;
}
const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
const { onOk, source, workersList, workerOptions } = props;
const { onOk, source, workerOptions } = props;
const { getRuleMessage } = useAppUtils();
const intl = useIntl();
const [form] = Form.useForm();
@@ -29,7 +29,14 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
const handleOk = (values: any) => {
const data = _.pickBy(values, (val: string) => val);
onOk(data);
onOk({
...data,
worker_id: data.worker_id?.[1]
});
console.log('Form Data: ', {
...data,
worker_id: data.worker_id?.[1]
});
};
const handleOnLocalPathBlur = (e: any) => {
@@ -116,12 +123,7 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
}
]}
>
<SealSelect
label="Worker"
options={workersList}
required
></SealSelect>
{/* <SealCascader
<SealCascader
required
showSearch
expandTrigger="hover"
@@ -131,9 +133,8 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
label="Worker"
options={workerOptions}
showCheckedStrategy="SHOW_CHILD"
value={form.getFieldValue(['gpu_selector', 'gpu_ids'])}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
></SealCascader> */}
></SealCascader>
</Form.Item>
{source !== modelSourceMap.local_path_value && (
<Form.Item<FormData>
src/pages/llmodels/hooks/use-form-initial-values.ts
+23 -16
View File
@@ -12,14 +12,16 @@ import { queryGPUList } from '../apis';
import { backendOptionsMap, setSourceRepoConfigValue } from '../config';
import { GPUListItem, ListItem } from '../config/types';
interface CascaderOption {
type EmptyObject = Record<never, never>;
type CascaderOption<T extends object = EmptyObject> = {
label: string;
value: string | number;
parent?: boolean;
disabled?: boolean;
index?: number;
children?: CascaderOption[];
}
children?: CascaderOption<T>[];
} & Partial<T>;
export const useGenerateGPUOptions = () => {
const [gpuOptions, setGpuOptions] = useState<CascaderOption[]>([]);
@@ -102,7 +104,9 @@ export const useGenerateGPUOptions = () => {
};
export const useGenerateWorkerOptions = () => {
const [workerOptions, setWorkerOptions] = useState<CascaderOption[]>([]);
const [workerOptions, setWorkerOptions] = useState<
CascaderOption<{ state: string }>[]
>([]);
const [clusterList, setClusterList] = useState<
Global.BaseOption<number, { provider: string; state: string | number }>[]
>([]);
@@ -117,18 +121,21 @@ export const useGenerateWorkerOptions = () => {
workerList: WorkerListItem[],
clusterList: ClusterListItem[]
) => {
const options = clusterList.map((cluster) => ({
label: cluster.name,
value: cluster.id,
parent: true,
children: workerList
.filter((worker) => worker.cluster_id === cluster.id)
.map((worker) => ({
disabled: WorkerStatusMap.ready !== worker.state,
label: worker.name,
value: worker.id
}))
}));
const options = clusterList
.map((cluster) => ({
label: cluster.name,
value: cluster.id,
parent: true,
children: workerList
.filter((worker) => worker.cluster_id === cluster.id)
.map((worker) => ({
disabled: WorkerStatusMap.ready !== worker.state,
state: worker.state,
label: worker.name,
value: worker.id
}))
}))
.filter((cluster) => cluster.children.length > 0); // Filter out clusters with no workers
setWorkerOptions(options);
return options;
};