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

fix: gpu selector by cluster

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent 207c90e26c
commit 553ec724c2
40 changed files with 1106 additions and 1233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icon-font/icons.ts
+7 -1
View File
@@ -6,6 +6,8 @@ import {
EditOutlined,
ExperimentOutlined,
FileTextOutlined,
KubernetesOutlined,
ProfileOutlined,
RetweetOutlined,
ThunderboltOutlined
} from '@ant-design/icons';
@@ -20,6 +22,8 @@ const icons = {
DownloadOutlined: React.createElement(DownloadOutlined),
FileTextOutlined: React.createElement(FileTextOutlined),
ApiOutlined: React.createElement(ApiOutlined),
KubernetesOutlined: React.createElement(KubernetesOutlined),
ProfileOutlined: React.createElement(ProfileOutlined),
Stop: React.createElement(IconFont, { type: 'icon-stop1' }),
Play: React.createElement(IconFont, { type: 'icon-outline-play' }),
Catalog: React.createElement(IconFont, { type: 'icon-catalog' }),
@@ -29,7 +33,9 @@ const icons = {
LocalPath: React.createElement(IconFont, { type: 'icon-hard-disk' }),
Launch: React.createElement(IconFont, { type: 'icon-rocket-launch' }),
Deployment: React.createElement(IconFont, { type: 'icon-rocket-launch1' }),
Docker: React.createElement(IconFont, { type: 'icon-docker' })
Docker: React.createElement(IconFont, { type: 'icon-docker' }),
DigitalOcean: React.createElement(IconFont, { type: 'icon-digitalocean' }),
DetailInfo: React.createElement(IconFont, { type: 'icon-detail-info' })
};
export default icons;
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_arejw0wk0kd.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_wy0l8ooa03c.js'
});
export default IconFont;
src/components/scroller-modal/index.tsx
+6 -4
View File
@@ -56,10 +56,12 @@ const ScrollerModal = (props: ModalProps & { maxContentHeight?: number }) => {
body: {
padding: '0'
},
footer: {
padding: '12px 24px 24px',
margin: '0'
}
footer: props.footer
? {
padding: '12px 24px 24px',
margin: '0'
}
: {}
}}
>
<Wrapper
src/components/seal-form/seal-select.tsx
+4 -1
View File
@@ -46,7 +46,10 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
}, [options, intl]);
useEffect(() => {
if (isNotEmptyValue(props.value) || (allowNull && props.value === null)) {
if (
isNotEmptyValue(props.value) ||
(allowNull && (props.value === null || props.value === undefined))
) {
setIsFocus(true);
}
}, [props.value, allowNull]);
src/config/global.d.ts
Vendored
+4 -4
View File
@@ -24,18 +24,18 @@ declare namespace Global {
avatar_url?: string;
}
interface BaseListItem<T> {
type BaseListItem<T, U extends Record<string, any>> = {
key: string;
locale?: boolean;
value: T;
}
} & U;
interface BaseOption<T> {
type BaseOption<T, U extends Record<string, any>> = {
label: string;
locale?: boolean;
value: T;
meta?: Record<string, any>;
}
} & U;
interface HintOptions {
label: string;
src/pages/cluster-management/apis/index.ts
+4 -4
View File
@@ -8,13 +8,13 @@ import {
NodePoolListItem
} from '../config/types';
export const CREDENTIALS_API = '/credentials';
export const CREDENTIALS_API = '/cloud-credentials';
export const CLUSTERS_API = '/clusters';
export const WORKER_POOLS_API = '/worker-pools';
export const CLUSTER_TOKEN = 'registration_token';
export const CLUSTER_TOKEN = 'registration-token';
// ===================== Credentials =====================
@@ -89,8 +89,8 @@ export async function queryClusterDetail(id: number) {
});
}
export async function queryClusterToken(id: number) {
return request(`${CLUSTERS_API}/${id}/${CLUSTER_TOKEN}`, {
export async function queryClusterToken(params: { id: number }) {
return request(`${CLUSTERS_API}/${params.id}/${CLUSTER_TOKEN}`, {
method: 'GET'
});
}
src/pages/cluster-management/clusters.tsx
+93 -111
View File
@@ -1,5 +1,4 @@
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import CardList from '@/components/templates/card-list';
import CardSkeleton from '@/components/templates/card-skelton';
@@ -7,12 +6,6 @@ import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import AddWorker from '@/pages/resources/components/add-worker';
import {
DeleteOutlined,
EditOutlined,
KubernetesOutlined,
ProfileOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Table, message } from 'antd';
@@ -21,76 +14,19 @@ import {
createCluster,
deleteCluster,
queryClusterList,
queryClusterToken,
updateCluster
} from './apis';
import AddCluster from './components/add-cluster';
import ClusterDetailModal from './components/cluster-detail-modal';
import ClusterItem from './components/cluster-item';
import { ClusterDataList } from './config';
import { ProviderLabelMap, ProviderValueMap, addActions } from './config';
import {
ClusterFormData as FormData,
ClusterListItem as ListItem
} from './config/types';
const { Column } = Table;
const addActions = [
{
label: 'Custom',
locale: false,
value: 'custom',
key: 'custom',
icon: <IconFont type="icon-docker" className="size-16" />
},
{
label: 'Kubernetes',
locale: false,
value: 'kubernetes',
key: 'kubernetes',
icon: <KubernetesOutlined className="size-16" />
},
{
label: 'Digital Ocean',
locale: false,
value: 'digitalocean',
key: 'digitalocean',
icon: <IconFont type="icon-digitalocean" />
}
];
const ActionList = [
{
key: 'edit',
label: 'common.button.edit',
icon: <EditOutlined></EditOutlined>
},
{
key: 'add',
label: 'Add Worker',
locale: false,
icon: <EditOutlined></EditOutlined>
},
{
key: 'terminal',
label: 'common.button.detail',
icon: <ProfileOutlined />
},
{
key: 'addPool',
label: 'Add Node Pool',
locale: false,
icon: <IconFont type="icon-catalog1" />
},
{
key: 'delete',
props: {
danger: true
},
label: 'common.button.delete',
icon: <DeleteOutlined></DeleteOutlined>
}
];
const Credentials: React.FC = () => {
const {
dataSource,
@@ -121,15 +57,33 @@ const Credentials: React.FC = () => {
});
const [openAddWorker, setOpenAddWorker] = useState<{
open: boolean;
token: string;
registrationInfo: {
token: string;
image: string;
server_url: string;
};
}>({
open: false,
token: ''
registrationInfo: {
token: '',
image: '',
server_url: ''
}
});
const [openAddModal, setOpenAddModal] = useState(false);
const [provider, setProvider] = useState<string>('custom');
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
const [title, setTitle] = useState<string>('');
const [openAddModal, setOpenAddModal] = useState<{
open: boolean;
action: PageActionType;
currentData?: ListItem;
title: string;
provider: string;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
});
const [addPoolStatus, setAddPoolStatus] = useState<{
open: boolean;
action: PageActionType;
@@ -139,25 +93,19 @@ const Credentials: React.FC = () => {
open: false,
action: PageAction.CREATE,
title: '',
provider: 'digitalocean'
provider: ProviderValueMap.DigitalOcean
});
const [currentData, setCurrentData] = useState<ListItem | undefined>(
undefined
);
const setActions = (row: ListItem) => {
if (row.provider !== 'custom') {
return ActionList.filter((item) => item.key !== 'add');
}
return ActionList;
};
const handleAddCluster = (value: string) => {
setOpenAddModal(true);
setAction(PageAction.CREATE);
setProvider(value);
const label = addActions.find((item) => item.value === value)?.label;
setTitle(`Add ${label} Cluster`);
const label = ProviderLabelMap[value];
setOpenAddModal({
open: true,
action: PageAction.CREATE,
currentData: undefined,
title: `Add ${label} Cluster`,
provider: value
});
};
const handleAddPool = (value: string) => {
@@ -178,32 +126,65 @@ const Credentials: React.FC = () => {
...data
};
try {
if (action === PageAction.EDIT) {
if (openAddModal.action === PageAction.EDIT) {
await updateCluster({
data: params,
id: currentData!.id
id: openAddModal.currentData!.id
});
} else {
await createCluster({ data: params });
}
fetchData();
setOpenAddModal(false);
setOpenAddModal({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
setOpenAddModal(false);
setOpenAddModal({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
});
}
};
const handleModalCancel = () => {
console.log('handleModalCancel');
setOpenAddModal(false);
setOpenAddModal({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: ''
});
};
const handleEditCluster = (row: ListItem) => {
setCurrentData(row);
setOpenAddModal(true);
setAction(PageAction.EDIT);
setTitle(`Edit ${row.name} Cluster`);
setOpenAddModal({
open: true,
action: PageAction.EDIT,
currentData: row,
title: `Edit ${row.name} Cluster`,
provider: row.provider
});
};
const handleAddWorker = async (row: ListItem) => {
try {
const data = await queryClusterToken({ id: row.id });
setOpenAddWorker({
open: true,
registrationInfo: data
});
} catch (error: any) {
message.error(error.message || 'Failed to fetch cluster token');
}
};
const handleSelect = (val: any, row: ListItem) => {
@@ -212,11 +193,7 @@ const Credentials: React.FC = () => {
} else if (val === 'delete') {
handleDelete({ ...row, name: row.name });
} else if (val === 'add_worker') {
setOpenAddWorker({
open: true,
token: '${token}'
});
setCurrentData(row);
handleAddWorker(row);
} else if (val === 'addPool') {
handleAddPool(row.provider);
} else if (val === 'details') {
@@ -255,14 +232,14 @@ const Credentials: React.FC = () => {
marginTop={30}
handleInputChange={handleNameChange}
handleSearch={handleSearch}
width={{ input: 200 }}
width={{ input: 300 }}
buttonText="Add Cluster"
actionType="dropdown"
actionItems={addActions}
handleClickPrimary={handleClickDropdown}
></FilterBar>
<CardList
dataList={ClusterDataList}
dataList={dataSource.dataList}
loading={dataSource.loading}
activeId={-1}
isFirst={!dataSource.loadend}
@@ -273,18 +250,23 @@ const Credentials: React.FC = () => {
></CardList>
</PageContainer>
<AddCluster
provider={provider}
open={openAddModal}
action={action}
title={title}
data={currentData}
provider={openAddModal.provider}
open={openAddModal.open}
action={openAddModal.action}
title={openAddModal.title}
currentData={openAddModal.currentData}
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddCluster>
<AddWorker
open={openAddWorker.open}
onCancel={() => setOpenAddWorker({ open: false, token: '' })}
token={openAddWorker.token}
onCancel={() =>
setOpenAddWorker({
open: false,
registrationInfo: { token: '', image: '', server_url: '' }
})
}
registrationInfo={openAddWorker.registrationInfo}
></AddWorker>
<ClusterDetailModal
open={openClusterDetail.open}
src/pages/cluster-management/components/add-cluster.tsx
+19 -4
View File
@@ -19,6 +19,7 @@ type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
currentData?: ListItem; // Used when action is EDIT
provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
onOk: (values: FormData) => void;
onCancel: () => void;
@@ -28,6 +29,7 @@ const AddCluster: React.FC<AddModalProps> = ({
action,
open,
provider,
currentData,
onOk,
onCancel
}) => {
@@ -36,12 +38,20 @@ const AddCluster: React.FC<AddModalProps> = ({
const [submissionStatus, setSubmissionStatus] = React.useState<{
success: boolean;
data: ListItem;
}>({ success: true, data: {} as ListItem });
}>({ success: false, data: {} as ListItem });
const handleSubmit = () => {
form.submit();
};
const handleOk = async (data: FormData) => {
console.log('handleOk===', data);
onOk({
...data,
provider
});
};
const handleCancel = () => {
form.resetFields();
onCancel();
@@ -109,9 +119,14 @@ const AddCluster: React.FC<AddModalProps> = ({
{submissionStatus.success ? (
renderAddWorkerContent()
) : (
<Form form={form} onFinish={onOk} preserve={false}>
<Form
form={form}
onFinish={handleOk}
preserve={false}
initialValues={currentData}
>
<Form.Item<FormData>
name="display_name"
name="name"
rules={[
{
required: true,
@@ -129,7 +144,7 @@ const AddCluster: React.FC<AddModalProps> = ({
required
></SealInput.Input>
</Form.Item>
{provider === 'digitalocean' && (
{provider === ProviderValueMap.DigitalOcean && (
<CloudProvider provider={provider}></CloudProvider>
)}
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
src/pages/cluster-management/components/add-credential.tsx
+22 -16
View File
@@ -1,19 +1,23 @@
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import SealInput from '@/components/seal-form/seal-input';
import { PageAction, PasswordReg } from '@/config';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import React from 'react';
import { FormData, ListItem } from '../config/types';
import { ProviderValueMap } from '../config';
import {
CredentialFormData as FormData,
CredentialListItem as ListItem
} from '../config/types';
type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
onOk: (values: FormData) => void;
data?: ListItem;
currentData?: ListItem;
onCancel: () => void;
provider: string; // 'kubernetes' | 'digitalocean';
};
@@ -22,7 +26,7 @@ const AddModal: React.FC<AddModalProps> = ({
action,
open,
onOk,
data,
currentData,
provider,
onCancel
}) => {
@@ -33,6 +37,10 @@ const AddModal: React.FC<AddModalProps> = ({
form.submit();
};
const handleOk = async (data: FormData) => {
onOk(data);
};
return (
<ScrollerModal
title={title}
@@ -53,7 +61,12 @@ const AddModal: React.FC<AddModalProps> = ({
></ModalFooter>
}
>
<Form form={form} onFinish={onOk} preserve={false}>
<Form
form={form}
onFinish={handleOk}
preserve={false}
initialValues={currentData}
>
<Form.Item<FormData>
name="name"
rules={[
@@ -73,14 +86,13 @@ const AddModal: React.FC<AddModalProps> = ({
required
></SealInput.Input>
</Form.Item>
{provider === 'digital_ocean' && (
{provider === ProviderValueMap.DigitalOcean && (
<>
<Form.Item<FormData>
name="access_key"
name="key"
rules={[
{
required: action === PageAction.CREATE,
pattern: PasswordReg,
message: intl.formatMessage({
id: 'users.form.rule.password'
})
@@ -93,11 +105,10 @@ const AddModal: React.FC<AddModalProps> = ({
></SealInput.Password>
</Form.Item>
<Form.Item<FormData>
name="secret_key"
name="secret"
rules={[
{
required: action === PageAction.CREATE,
pattern: PasswordReg,
message: intl.formatMessage({
id: 'users.form.rule.password'
})
@@ -105,17 +116,12 @@ const AddModal: React.FC<AddModalProps> = ({
]}
>
<SealInput.Password
label="Secret Key"
label="Access Secret"
required={action === PageAction.CREATE}
></SealInput.Password>
</Form.Item>
</>
)}
{provider === 'kubernetes' && (
<Form.Item<FormData> name="kubeconfig" rules={[{ required: false }]}>
<SealInput.TextArea label="Kubeconfig"></SealInput.TextArea>
</Form.Item>
)}
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
label={intl.formatMessage({ id: 'common.table.description' })}
src/pages/cluster-management/components/cloud-provider-form.tsx
+2 -2
View File
@@ -30,9 +30,9 @@ const CloudProvider: React.FC<CloudProviderProps> = () => {
label="Credential"
required
options={['credential1', 'credential2', 'credential3'].map(
(item) => ({
(item, i) => ({
label: item,
value: item
value: i
})
)}
></SealSelect>
src/pages/cluster-management/components/cluster-item.tsx
+54 -75
View File
@@ -5,78 +5,22 @@ import StatusTag from '@/components/status-tag';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import Card from '@/components/templates/card';
import { PageAction } from '@/config';
import {
DeleteOutlined,
EditOutlined,
KubernetesOutlined
} from '@ant-design/icons';
import { Card as ACard, Col, Collapse, Row } from 'antd';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { queryClusterToken } from '../apis';
import {
ClusterStatus,
ClusterStatusLabelMap,
ProviderLabelMap,
ProviderValueMap
ProviderValueMap,
poolActionList
} from '../config';
import { ClusterListItem as ListItem, NodePoolListItem } from '../config/types';
import AddPool from './add-pool';
import RegisterCluster from './register-cluster';
import WorkerPools from './worker-pools';
const actionItems = [
{
key: 'edit',
label: 'common.button.edit',
icon: <EditOutlined />
},
{
key: 'details',
label: 'common.button.view',
icon: <IconFont type="icon-detail-info" className="font-size-16" />
},
{
key: 'add_worker',
label: 'Add Worker',
provider: ProviderValueMap.Custom,
locale: false,
icon: <IconFont type="icon-docker" />
},
{
key: 'register_cluster',
label: 'Register Cluster',
provider: ProviderValueMap.Kubernetes,
locale: false,
icon: <KubernetesOutlined />
},
{
key: 'addPool',
label: 'Add Node Pool',
provider: ProviderValueMap.DigitalOcean,
locale: false,
icon: <IconFont type="icon-catalog1" />
},
{
key: 'delete',
label: 'common.button.delete',
icon: <DeleteOutlined />,
props: {
danger: true
}
}
];
const CollapseTitle = styled.div`
display: flex;
align-items: center;
gap: 8px;
font-size: var(--font-size-middle);
font-weight: 500;
color: var(--ant-color-text);
height: 32px;
cursor: pointer;
`;
const Content = styled.div`
display: flex;
justify-content: space-between;
@@ -216,12 +160,39 @@ const CardItem: React.FC<CardProps> = (props) => {
open: false,
action: PageAction.CREATE,
title: '',
provider: 'digitalocean'
provider: ProviderValueMap.DigitalOcean
});
const [registerClusterStatus, setRegisterClusterStatus] = React.useState({
open: false
const [registerClusterStatus, setRegisterClusterStatus] = React.useState<{
open: boolean;
registrationInfo: {
token: string;
image: string;
server_url: string;
cluster_id: number;
};
}>({
open: false,
registrationInfo: {
token: '',
image: '',
server_url: '',
cluster_id: 0
}
});
const handleRegisterCluster = async () => {
try {
const info = await queryClusterToken({ id: data.id });
setRegisterClusterStatus({
open: true,
registrationInfo: {
...info,
cluster_id: data.id
}
});
} catch (error) {}
};
// cluster action handler
const handleOnSelect = (key: string) => {
if (key === 'addPool') {
@@ -235,9 +206,7 @@ const CardItem: React.FC<CardProps> = (props) => {
}
if (key === 'register_cluster') {
setRegisterClusterStatus({
open: true
});
handleRegisterCluster();
return;
}
onSelect?.(key, data);
@@ -256,7 +225,7 @@ const CardItem: React.FC<CardProps> = (props) => {
};
const actions = useMemo(() => {
return actionItems.filter((item) => {
return poolActionList.filter((item) => {
if (item.provider) {
return item.provider === data.provider;
}
@@ -269,7 +238,7 @@ const CardItem: React.FC<CardProps> = (props) => {
height={'auto'}
clickable={false}
ghost
footer={
footerHolder={
<CollapseWrapper
onChange={() => setShow(!show)}
expandIconPosition="end"
@@ -340,11 +309,13 @@ const CardItem: React.FC<CardProps> = (props) => {
<div className="title">
<span className="flex-center gap-8">
<span className="text">{data.name}</span>
<ThemeTag>{ProviderLabelMap[data.provider]}</ThemeTag>
<ThemeTag color="purple">
{ProviderLabelMap[data.provider]}
</ThemeTag>
<StatusTag
statusValue={{
status: ClusterStatus[data.status],
text: ClusterStatusLabelMap[data.status]
status: ClusterStatus[data.state],
text: ClusterStatusLabelMap[data.state]
}}
/>
</span>
@@ -359,15 +330,17 @@ const CardItem: React.FC<CardProps> = (props) => {
<CardBox>
<CardWrapper bordered={false}>
<div className="label">Workers</div>
<div className="value">1/1</div>
<div className="value">
{data.ready_workers} / {data.workers}
</div>
</CardWrapper>
<CardWrapper bordered={false}>
<div className="label">GPUs</div>
<div className="value">12</div>
<div className="value">{data.gpus}</div>
</CardWrapper>
<CardWrapper bordered={false}>
<div className="label">Deployments</div>
<div className="value">2</div>
<div className="value">{data.models}</div>
</CardWrapper>
</CardBox>
</Content>
@@ -397,10 +370,16 @@ const CardItem: React.FC<CardProps> = (props) => {
<RegisterCluster
title="Register Cluster"
open={registerClusterStatus.open}
data={data}
registrationInfo={registerClusterStatus.registrationInfo}
onCancel={() => {
setRegisterClusterStatus({
open: false
open: false,
registrationInfo: {
token: '',
image: '',
server_url: '',
cluster_id: 0
}
});
}}
></RegisterCluster>
src/pages/cluster-management/components/register-cluster.tsx
+8 -4
View File
@@ -1,18 +1,22 @@
import ScrollerModal from '@/components/scroller-modal/index';
import React from 'react';
import { ClusterListItem as ListItem } from '../config/types';
import RegisterClusterInner from './resiter-cluster-inner';
type AddModalProps = {
title: string;
open: boolean;
data: ListItem;
registrationInfo: {
token: string;
image: string;
server_url: string;
cluster_id: number;
};
onCancel: () => void;
};
const AddCluster: React.FC<AddModalProps> = ({
title,
open,
data,
registrationInfo,
onCancel
}) => {
const handleCancel = () => {
@@ -31,7 +35,7 @@ const AddCluster: React.FC<AddModalProps> = ({
width={600}
footer={false}
>
<RegisterClusterInner data={data} />
<RegisterClusterInner registrationInfo={registrationInfo} />
</ScrollerModal>
);
};
src/pages/cluster-management/components/resiter-cluster-inner.tsx
+30 -32
View File
@@ -1,41 +1,39 @@
import HighlightCode from '@/components/highlight-code';
import React, { useEffect } from 'react';
import { queryClusterToken } from '../apis';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { generateRegisterCommand } from '../config';
import { ClusterListItem as ListItem } from '../config/types';
const Title = styled.h3`
font-weight: 600;
color: var(--ant-color-text);
margin-bottom: 12px;
margin-top: 12px;
font-size: var(--font-size-normal);
.ant-tag {
color: var(--ant-color-text-secondary);
font-weight: 400;
}
`;
type AddModalProps = {
data: ListItem;
registrationInfo: {
token: string;
image: string;
server_url: string;
cluster_id: number;
};
};
const AddCluster: React.FC<AddModalProps> = ({ data }) => {
const [code, setCode] = React.useState<string>('');
const getToken = async () => {
const res = await queryClusterToken(data?.id);
return res.data?.token || '';
};
const AddCluster: React.FC<AddModalProps> = ({ registrationInfo }) => {
const code = useMemo(() => {
return generateRegisterCommand({
server: registrationInfo?.server_url || window.location.origin,
clusterId: registrationInfo?.cluster_id,
registrationToken: registrationInfo?.token
});
}, [registrationInfo]);
const getCode = async () => {
try {
const token = await getToken();
const command = generateRegisterCommand({
server: window.location.origin,
clusterId: data?.id || 0,
registrationToken: token
});
setCode(command);
} catch (error) {
setCode(
generateRegisterCommand({
server: window.location.origin,
clusterId: data?.id || 0,
registrationToken: '{token}'
})
);
}
};
useEffect(() => {
getCode();
const applyCommand = useMemo(() => {
return `kubectl apply -f manifest.yaml`;
}, []);
return (
src/pages/cluster-management/config/index.ts
+79 -41
View File
@@ -1,57 +1,29 @@
import icons from '@/components/icon-font/icons';
import { StatusMaps } from '@/config';
import { StatusType } from '@/config/types';
export const ClusterDataList = [
{
id: 3,
name: 'Custom-cluster',
provider: 'custom',
clusterType: 'Custom',
workers: 4,
gpus: 8,
status: 'ready',
deployments: 3
},
{
id: 1,
name: 'kubernetes-cluster',
provider: 'kubernetes',
clusterType: 'Kubernetes',
workers: 2,
gpus: 4,
status: 'ready',
deployments: 1
},
{
id: 2,
name: 'Digital-Ocean-cluster',
provider: 'digitalocean',
workers: 3,
gpus: 6,
status: 'error',
deployments: 2
}
];
export const ClusterStatusValueMap = {
Ready: 'ready',
Error: 'error'
Provisioning: 0,
Ready: 3,
ProvisionedNotReady: 1
};
export const ClusterStatusLabelMap = {
[ClusterStatusValueMap.Provisioning]: 'Provisioning',
[ClusterStatusValueMap.Ready]: 'Ready',
[ClusterStatusValueMap.Error]: 'Error'
[ClusterStatusValueMap.ProvisionedNotReady]: 'Provisioned Not Ready'
};
export const ClusterStatus: Record<string, StatusType> = {
[ClusterStatusValueMap.Provisioning]: StatusMaps.transitioning,
[ClusterStatusValueMap.Ready]: StatusMaps.success,
[ClusterStatusValueMap.Error]: StatusMaps.error
[ClusterStatusValueMap.ProvisionedNotReady]: StatusMaps.error
};
export const ProviderValueMap = {
Kubernetes: 'kubernetes',
DigitalOcean: 'digitalocean',
Custom: 'custom'
Kubernetes: 'Kubernetes',
DigitalOcean: 'DigitalOcean',
Custom: 'Custom'
};
export const ProviderLabelMap = {
@@ -65,6 +37,72 @@ export const generateRegisterCommand = (params: {
clusterId: number;
registrationToken: string;
}) => {
return `curl -k -L '${params.server}/v2/clusters/${params.clusterId}/manifests' \\
--header 'Authorization: Bearer ${params.registrationToken}'`;
return `curl -k -L '${params.server}/v1/clusters/${params.clusterId}/manifests' \\
--header 'Authorization: Bearer ${params.registrationToken}' | kubectl apply -f -`;
};
export const addActions = [
{
label: 'Custom',
locale: false,
value: ProviderValueMap.Custom,
key: ProviderValueMap.Custom,
icon: icons.Docker
},
{
label: 'Kubernetes',
locale: false,
value: ProviderValueMap.Kubernetes,
key: ProviderValueMap.Kubernetes,
icon: icons.KubernetesOutlined
},
{
label: 'Digital Ocean',
locale: false,
value: ProviderValueMap.DigitalOcean,
key: ProviderValueMap.DigitalOcean,
icon: icons.DigitalOcean
}
];
export const poolActionList = [
{
key: 'edit',
label: 'common.button.edit',
icon: icons.EditOutlined
},
{
key: 'details',
label: 'common.button.view',
icon: icons.DetailInfo
},
{
key: 'add_worker',
label: 'Add Worker',
provider: ProviderValueMap.Custom,
locale: false,
icon: icons.Docker
},
{
key: 'register_cluster',
label: 'Register Cluster',
provider: ProviderValueMap.Kubernetes,
locale: false,
icon: icons.KubernetesOutlined
},
{
key: 'addPool',
label: 'Add Node Pool',
provider: ProviderValueMap.DigitalOcean,
locale: false,
icon: icons.Catalog
},
{
key: 'delete',
label: 'common.button.delete',
icon: icons.DeleteOutlined,
props: {
danger: true
}
}
];
src/pages/cluster-management/config/types.ts
+9 -5
View File
@@ -1,12 +1,14 @@
export interface CredentialFormData {
name: string;
provider: string;
access_key: string;
secret_key: string;
key: string;
secret: string;
description?: string;
id?: number;
}
export type ClusterStatusType = 0 | 1 | 3;
export interface CredentialListItem {
id: number;
name: string;
@@ -19,7 +21,7 @@ export interface CredentialListItem {
}
export interface ClusterFormData {
display_name: string;
name: string;
description: string;
provider: string;
credential_id: number;
@@ -55,9 +57,11 @@ export interface ClusterListItem {
zone: string;
region: string;
gpus: number;
deployments: number;
models: number;
workers: number;
ready_workers: number;
id: number;
status: string;
state: ClusterStatusType;
state_message: string;
worker_pools: NodePoolListItem[];
}
src/pages/cluster-management/credentials.tsx
+28 -85
View File
@@ -1,30 +1,19 @@
import AutoTooltip from '@/components/auto-tooltip';
import DeleteModal from '@/components/delete-modal';
import DropDownActions from '@/components/drop-down-actions';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import PageTools from '@/components/page-tools';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import {
DeleteOutlined,
DownOutlined,
EditOutlined,
KubernetesOutlined,
SyncOutlined
KubernetesOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import {
Button,
ConfigProvider,
Empty,
Input,
Space,
Table,
message
} from 'antd';
import { ConfigProvider, Empty, Table, message } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import {
@@ -34,6 +23,7 @@ import {
updateCredential
} from './apis';
import AddModal from './components/add-credential';
import { ProviderValueMap } from './config';
import {
CredentialFormData as FormData,
CredentialListItem as ListItem
@@ -99,26 +89,22 @@ const Credentials: React.FC = () => {
open: boolean;
action: PageActionType;
title: string;
currentData: ListItem | undefined;
}>({
provider: '',
open: false,
action: PageAction.CREATE,
title: ''
title: '',
currentData: undefined
});
const [currentData, setCurrentData] = useState<ListItem | undefined>(
undefined
);
const handleAddCredential = (value: string) => {
const title =
value === 'digital_ocean'
? 'Add Digital Ocean Credential'
: 'Add Kubernetes Credential';
const handleAddCredential = () => {
setOpenModalStatus({
provider: value,
provider: ProviderValueMap.DigitalOcean,
open: true,
action: PageAction.CREATE,
title: title
title: 'Add Cloud Credential',
currentData: undefined
});
};
@@ -132,7 +118,7 @@ const Credentials: React.FC = () => {
data: {
...params
},
id: currentData!.id
id: openModalStatus.currentData!.id
});
} else {
await createCredential({ data: params });
@@ -151,12 +137,12 @@ const Credentials: React.FC = () => {
};
const handleEditUser = (row: ListItem) => {
setCurrentData(row);
setOpenModalStatus({
provider: row.provider,
open: true,
action: PageAction.EDIT,
title: `Edit ${row.provider} Credential`
title: `Edit ${row.name} Credential`,
currentData: row
});
};
@@ -180,11 +166,6 @@ const Credentials: React.FC = () => {
return <div></div>;
};
const handleClickDropdown = (e: any) => {
const value = e.key;
handleAddCredential(value);
};
return (
<>
<PageContainer
@@ -200,58 +181,20 @@ const Credentials: React.FC = () => {
}}
extra={[]}
>
<PageTools
<FilterBar
showSelect={false}
showPrimaryButton={true}
marginBottom={22}
left={
<Space>
<Input
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
</Space>
}
right={
<Space size={20}>
<DropDownActions
menu={{
items: addActions,
onClick: handleClickDropdown
}}
trigger={['hover']}
placement="bottomRight"
>
<Button
icon={<DownOutlined></DownOutlined>}
type="primary"
iconPosition="end"
>
Add Credential
</Button>
</DropDownActions>
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
<span>
{intl?.formatMessage?.({ id: 'common.button.delete' })}
{rowSelection.selectedRowKeys.length > 0 && (
<span>({rowSelection.selectedRowKeys?.length})</span>
)}
</span>
</Button>
</Space>
}
></PageTools>
marginTop={30}
buttonText={'Add Cloud Credential'}
handleDeleteByBatch={handleDeleteBatch}
handleSearch={handleSearch}
handleInputChange={handleNameChange}
handleClickPrimary={handleAddCredential}
rowSelection={rowSelection}
width={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
dataSource={dataSource.dataList}
@@ -355,7 +298,7 @@ const Credentials: React.FC = () => {
open={openModalStatus.open}
action={openModalStatus.action}
title={openModalStatus.title}
data={currentData}
currentData={openModalStatus.currentData}
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddModal>
src/pages/llmodels/apis/index.ts
+5 -3
View File
@@ -52,9 +52,11 @@ export async function queryModelsList(
);
}
export async function queryGPUList(params?: Global.SearchParams) {
export async function queryGPUList<T extends Record<string, any>>(
params?: Global.SearchParams & T
) {
return request<Global.PageResponse<GPUListItem>>(`/gpu-devices`, {
methos: 'GET',
method: 'GET',
params
});
}
@@ -172,7 +174,7 @@ export async function queryModelScopeModels(
config?: any
) {
const tagsCriterion = params.tags?.map((tag: string) => {
return { category: 'libraries', predicate: 'contains', values: [tag] };
return { category: 'tags', predicate: 'contains', values: [tag] };
});
const tasksCriterion = params.tasks?.map((task: string) => {
return { category: 'tasks', predicate: 'contains', values: [task] };
src/pages/llmodels/components/advance-config.tsx
+13 -14
View File
@@ -30,7 +30,6 @@ import vllmConfig from '../config/vllm-config';
import dataformStyles from '../style/data-form.less';
import GPUCard from './gpu-card';
import Performance from './performance';
import Scaling from './scaling';
interface AdvanceConfigProps {
isGGUF: boolean;
@@ -460,19 +459,19 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
forceRender: true,
children: <Performance></Performance>
},
{
key: '3',
label: (
<span
style={{ fontWeight: 'var(--font-weight-medium)' }}
className="font-size-14"
>
Scaling
</span>
),
forceRender: true,
children: <Scaling></Scaling>
},
// {
// key: '3',
// label: (
// <span
// style={{ fontWeight: 'var(--font-weight-medium)' }}
// className="font-size-14"
// >
// Scaling
// </span>
// ),
// forceRender: true,
// children: <Scaling></Scaling>
// },
{
key: '1',
label: (
src/pages/llmodels/components/data-form.tsx
+106 -90
View File
@@ -6,17 +6,13 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useImperativeHandle } from 'react';
import {
backendOptionsMap,
excludeFields,
modelSourceMap,
sourceOptions
} from '../config';
import { backendOptionsMap, excludeFields, sourceOptions } from '../config';
import { FormInnerContext } from '../config/form-context';
import { FormData, SourceType } from '../config/types';
import CatalogFrom from '../forms/catalog';
import HuggingFaceForm from '../forms/hugging-face';
import LocalPathForm from '../forms/local-path';
import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
import AdvanceConfig from './advance-config';
interface DataFormProps {
@@ -29,8 +25,7 @@ interface DataFormProps {
sourceDisable?: boolean;
backendOptions?: Global.BaseOption<string>[];
sourceList?: Global.BaseOption<string>[];
gpuOptions: any[];
modelFileOptions?: any[];
clusterList: Global.BaseOption<number>[];
fields?: string[];
onValuesChange?: (changedValues: any, allValues: any) => void;
onSourceChange?: (value: string) => void;
@@ -38,11 +33,6 @@ interface DataFormProps {
onBackendChange?: (value: string) => void;
}
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
];
const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
const {
action,
@@ -51,13 +41,13 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
sourceDisable = true,
backendOptions,
sourceList,
gpuOptions = [],
modelFileOptions = [],
clusterList = [],
fields = ['source'],
onSourceChange,
onValuesChange,
onOk
} = props;
const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
const { getRuleMessage } = useAppUtils();
const [form] = Form.useForm();
const intl = useIntl();
@@ -143,6 +133,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onSourceChange?.(val);
};
const handleClusterChange = (value: number) => {
getGPUOptionList({ clusterId: value });
};
const handleOnValuesChange = async (changedValues: any, allValues: any) => {
const fieldName = Object.keys(changedValues)[0];
@@ -172,6 +166,9 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
},
getFieldsValue: () => {
return form.getFieldsValue();
},
getGPUOptionList(params: { clusterId: number }) {
getGPUOptionList(params);
}
};
},
@@ -179,78 +176,96 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
);
return (
<Form
name="deployModel"
form={form}
onFinish={handleOk}
preserve={false}
style={{ padding: '16px 24px' }}
clearOnDestroy={true}
onValuesChange={handleOnValuesChange}
scrollToFirstError={true}
initialValues={{
replicas: 1,
source: props.source,
placement_strategy: 'spread',
cpu_offloading: true,
scheduleType: 'auto',
categories: null,
restart_on_error: true,
distributed_inference_across_workers: true,
...initialValues
<FormInnerContext.Provider
value={{
onBackendChange: handleBackendChange,
onValuesChange: onValuesChange,
gpuOptions: gpuOptions
}}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
<Form
name="deployModel"
form={form}
onFinish={handleOk}
preserve={false}
style={{ padding: '16px 24px' }}
clearOnDestroy={true}
onValuesChange={handleOnValuesChange}
scrollToFirstError={true}
initialValues={{
replicas: 1,
source: props.source,
placement_strategy: 'spread',
cpu_offloading: true,
scheduleType: 'auto',
categories: null,
restart_on_error: true,
distributed_inference_across_workers: true,
...initialValues
}}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
{fields.includes('source') && (
<Form.Item<FormData>
name="source"
name="name"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
{fields.includes('source') && (
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
{
<SealSelect
onChange={handleOnSourceChange}
disabled={sourceDisable}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceList ?? sourceOptions}
required
></SealSelect>
}
</Form.Item>
)}
<HuggingFaceForm></HuggingFaceForm>
<LocalPathForm></LocalPathForm>
<Form.Item<FormData>
name="cluster_id"
rules={[
{
required: true,
message: getRuleMessage('select', 'Cluster', false)
}
]}
>
{
<SealSelect
onChange={handleOnSourceChange}
disabled={sourceDisable}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceList ?? sourceOptions}
onChange={handleClusterChange}
label="Cluster"
options={clusterList}
required
></SealSelect>
}
</Form.Item>
)}
<FormInnerContext.Provider
value={{
onBackendChange: handleBackendChange,
onValuesChange: onValuesChange,
gpuOptions: gpuOptions
}}
>
<HuggingFaceForm></HuggingFaceForm>
<LocalPathForm></LocalPathForm>
</FormInnerContext.Provider>
{/* <Form.Item name="backend" rules={[{ required: true }]}>
{/* <Form.Item name="backend" rules={[{ required: true }]}>
<SealSelect
required
onChange={handleBackendChange}
@@ -291,25 +306,26 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
></SealSelect>
</Form.Item> */}
<CatalogFrom></CatalogFrom>
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<AdvanceConfig
form={form}
gpuOptions={gpuOptions}
isGGUF={isGGUF}
action={action}
source={props.source}
backendOptions={backendOptions}
handleBackendChange={handleBackendChange}
></AdvanceConfig>
</Form>
<CatalogFrom></CatalogFrom>
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<AdvanceConfig
form={form}
gpuOptions={gpuOptions}
isGGUF={isGGUF}
action={action}
source={props.source}
backendOptions={backendOptions}
handleBackendChange={handleBackendChange}
></AdvanceConfig>
</Form>
</FormInnerContext.Provider>
);
});
src/pages/llmodels/components/deploy-builtin-modal.tsx
+23 -22
View File
@@ -2,6 +2,7 @@ import ModalFooter from '@/components/modal-footer';
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';
@@ -17,11 +18,8 @@ import {
} from '../config';
import { FormContext } from '../config/form-context';
import { CatalogSpec, FormData, ListItem, SourceType } from '../config/types';
import {
checkOnlyAscendNPU,
useCheckCompatibility,
useGenerateFormEditInitialValues
} from '../hooks';
import { useCheckCompatibility } from '../hooks';
import useFormInitialValues from '../hooks/use-form-initial-values';
import ColumnWrapper from './column-wrapper';
import CompatibilityAlert from './compatible-alert';
import DataForm from './data-form';
@@ -104,10 +102,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
handleOnValuesChange,
warningStatus
} = useCheckCompatibility();
const { getClusterList, clusterList } = useFormInitialValues();
const intl = useIntl();
const { getGPUList } = useGenerateFormEditInitialValues();
const form = useRef<any>({});
const [gpuOptions, setGpuOptions] = useState<any[]>([]);
const [isGGUF, setIsGGUF] = useState<boolean>(false);
const [sourceList, setSourceList] = useState<any[]>([]);
const [backendList, setBackendList] = useState<any[]>([]);
@@ -161,15 +158,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
return EmbeddingRerankFirstQuant.includes(_.toUpper(data.quantOption));
}
if (
data.backend === backendOptionsMap.llamaBox &&
checkOnlyAscendNPU(gpuOptions)
) {
return hasF16Ref.current
? AscendNPUQuant_F16.includes(_.toUpper(data.quantOption))
: AscendNPUQuant_Q8.includes(_.toUpper(data.quantOption));
}
return defaultQuant.includes(_.toUpper(data.quantOption));
};
@@ -360,6 +348,15 @@ const AddModal: React.FC<AddModalProps> = (props) => {
handleCheckFormData();
};
const initClusterId = () => {
const cluster_id =
clusterList?.find((item) => item.provider === ProviderValueMap.Custom)
?.value || clusterList?.[0]?.value;
console.log('cluster_id:', cluster_id);
return cluster_id;
};
const fetchSpecData = async () => {
try {
axiosToken.current?.cancel?.();
@@ -407,7 +404,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
size: defaultSpec.size,
backend: defaultSpec.backend
});
initFormDataBySource(defaultSpec);
initFormDataBySource({
...defaultSpec,
cluster_id: initClusterId()
});
const name = _.toLower(current.name).replace(/\s/g, '-') || '';
form.current.setFieldValue('name', name);
@@ -420,6 +420,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const allValues = generateSubmitData({
...defaultSpec,
categories: _.get(current, 'categories.0', null),
cluster_id: initClusterId(),
name
});
handleCheckCompatibility(allValues);
@@ -484,7 +485,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
useEffect(() => {
if (open) {
fetchSpecData();
setTimeout(() => {
fetchSpecData();
}, 100);
}
return () => {
axiosToken.current?.cancel?.();
@@ -498,9 +501,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}, [open, current]);
useEffect(() => {
getGPUList().then((data) => {
setGpuOptions(data);
});
getClusterList();
}, []);
return (
@@ -608,7 +609,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
sourceDisable={false}
backendOptions={backendList}
sourceList={sourceList}
gpuOptions={gpuOptions}
clusterList={clusterList}
onBackendChange={handleBackendChange}
onSourceChange={handleSourceChange}
onValuesChange={onValuesChange}
src/pages/llmodels/components/deploy-modal.tsx
+33 -89
View File
@@ -1,8 +1,8 @@
import { getRequestId } from '@/atoms/models';
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageActionType } from '@/config/types';
import useDeferredRequest from '@/hooks/use-deferred-request';
import { ProviderValueMap } from '@/pages/cluster-management/config';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
@@ -68,10 +68,12 @@ type AddModalProps = {
source: SourceType;
isGGUF?: boolean;
width?: string | number;
gpuOptions: any[];
modelFileOptions: any[];
initialValues?: any;
deploymentType?: 'modelList' | 'modelFiles';
clusterList: Global.BaseOption<
number,
{ provider: string; state: string | number }
>[];
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -95,7 +97,8 @@ const AddModal: FC<AddModalProps> = (props) => {
action,
width = 600,
deploymentType = 'modelList',
initialValues
initialValues,
clusterList
} = props || {};
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
@@ -113,7 +116,7 @@ const AddModal: FC<AddModalProps> = (props) => {
warningStatus,
submitAnyway
} = useCheckCompatibility();
const { onSelectModel } = useSelectModel({ gpuOptions: props.gpuOptions });
const { onSelectModel } = useSelectModel({ gpuOptions: [] });
const form = useRef<any>({});
const intl = useIntl();
const [selectedModel, setSelectedModel] = useState<any>({});
@@ -161,15 +164,6 @@ const AddModal: FC<AddModalProps> = (props) => {
evaluateStateRef.current = state;
};
const updateEvaluateState = (state: EvaluateProccessType) => {
const currentRequestModelId = evaluateStateRef.current.requestModelId;
setEvaluteState({
...evaluateStateRef.current,
state
});
return currentRequestModelId;
};
const handleOnValuesChange = (data: {
changedValues: any;
allValues: any;
@@ -199,71 +193,6 @@ const AddModal: FC<AddModalProps> = (props) => {
return categories || null;
};
const { run: onSelectFile } = useDeferredRequest(
async (item: any, modelInfo: any, manual?: boolean) => {
unlockWarningStatus();
const evaluateRes = await handleOnValuesChangeBefore?.({
changedValues: {},
allValues: form.current?.form?.getFieldsValue?.(),
source: props.source
});
console.log('onSelectFile:', item, modelInfo, evaluateRes);
// for cancel evaluate request case
if (!evaluateRes) {
return;
}
const defaultSpec = getDefaultSpec({
evaluateResult: evaluateRes
});
/**
* do not reset backend_parameters when select a model file
*/
const formValues = form.current?.getFieldsValue?.(pickFieldsFromSpec);
form.current?.setFieldsValue?.({
..._.omit(modelInfo, ['name']),
file_name: item.fakeName,
backend_parameters:
formValues.backend_parameters?.length > 0
? formValues.backend_parameters
: defaultSpec.backend_parameters || [],
backend_version:
formValues.backend_version || defaultSpec.backend_version,
env: formValues.env || defaultSpec.env,
categories: getCategory(item)
});
},
100
);
const handleSelectModelFile = async (
item: any,
options: { requestModelId: number; manual?: boolean }
) => {
const { requestModelId, manual } = options || {};
if (requestModelId !== getRequestId()) {
return;
}
console.log('handleSelectModelFile:', item, selectedModel);
const modelInfo = onSelectModel(selectedModel, props.source);
form.current?.setFieldsValue?.({
..._.omit(modelInfo, ['name']),
file_name: item.fakeName,
categories: getCategory(item)
});
// evaluate the form data when select a model file
if (item.fakeName) {
onSelectFile(item, modelInfo, manual);
}
};
const handleCancelFiles = () => {
cancelEvaluate();
modelFileRef.current?.cancelRequest();
@@ -441,22 +370,37 @@ const AddModal: FC<AddModalProps> = (props) => {
onCancel?.();
}, [onCancel]);
const initClusterId = () => {
const cluster_id =
clusterList?.find((item) => item.provider === ProviderValueMap.Custom)
?.value || clusterList?.[0]?.value;
return cluster_id;
};
const handleOnOpen = () => {
if (props.deploymentType === 'modelFiles') {
form.current?.form?.setFieldsValue({
...props.initialValues
...props.initialValues,
cluster_id: initClusterId()
});
handleOnValuesChange?.({
changedValues: {},
allValues: props.initialValues,
allValues: {
...props.initialValues,
cluster_id: initClusterId()
},
source: source
});
} else {
let backend = checkOnlyAscendNPU(props.gpuOptions)
let backend = checkOnlyAscendNPU([])
? backendOptionsMap.ascendMindie
: backendOptionsMap.vllm;
form.current?.setFieldValue?.('backend', backend);
form.current?.setFieldsValue?.({
backend,
cluster_id: initClusterId()
});
}
};
@@ -483,6 +427,9 @@ const AddModal: FC<AddModalProps> = (props) => {
useEffect(() => {
if (open) {
handleOnOpen();
form.current?.getGPUOptionList?.({
clusterId: initClusterId()
});
} else {
cancelEvaluate();
clearCahceFormValues();
@@ -495,7 +442,7 @@ const AddModal: FC<AddModalProps> = (props) => {
message: []
});
};
}, [open, props.gpuOptions.length]);
}, [open, clusterList]);
return (
<GSDrawer
@@ -534,7 +481,7 @@ const AddModal: FC<AddModalProps> = (props) => {
handleOnSelectModelAfterEvaluate
}
displayEvaluateStatus={displayEvaluateStatus}
gpuOptions={props.gpuOptions}
gpuOptions={[]}
></SearchModel>
</ColumnWrapper>
<Separator></Separator>
@@ -559,8 +506,6 @@ const AddModal: FC<AddModalProps> = (props) => {
value={{
isGGUF: isGGUF,
pageAction: action,
modelFileOptions: props.modelFileOptions,
gpuOptions: props.gpuOptions,
onValuesChange: onValuesChange
}}
>
@@ -609,12 +554,11 @@ const AddModal: FC<AddModalProps> = (props) => {
initialValues={initialValues}
source={source}
action={action}
clusterList={clusterList}
selectedModel={selectedModel}
onOk={handleOnOk}
ref={form}
isGGUF={isGGUF}
gpuOptions={props.gpuOptions}
modelFileOptions={props.modelFileOptions}
onBackendChange={handleBackendChange}
onValuesChange={onValuesChange}
></DataForm>
src/pages/llmodels/components/performance.tsx
+5 -12
View File
@@ -1,4 +1,3 @@
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealCascader from '@/components/seal-form/seal-cascader';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
@@ -7,8 +6,7 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { backendOptionsMap } from '../config';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import { useFormContext, useFormInnerContext } from '../config/form-context';
import GPUCard from './gpu-card';
const scheduleTypeTips = [
@@ -30,13 +28,8 @@ const scheduleTypeTips = [
const Performance: React.FC = () => {
const intl = useIntl();
const {
onValuesChange,
onQuantizationChange,
gpuOptions,
source,
quantizationOptions
} = useFormContext();
const { gpuOptions } = useFormInnerContext();
const { onValuesChange, onQuantizationChange } = useFormContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
@@ -167,7 +160,7 @@ const Performance: React.FC = () => {
</Form.Item>
</>
)}
<div style={{ paddingBottom: 22, paddingLeft: 10 }}>
{/* <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
<Form.Item<FormData>
name="optimize_long_prompt"
valuePropName="checked"
@@ -192,7 +185,7 @@ const Performance: React.FC = () => {
})}
></CheckboxField>
</Form.Item>
</div>
</div> */}
</>
);
};
src/pages/llmodels/components/scaling.tsx
+1 -2
View File
@@ -45,8 +45,7 @@ const CheckboxField: React.FC<{
const Scaling: React.FC = () => {
const intl = useIntl();
const { onValuesChange, onQuantizationChange, source, quantizationOptions } =
useFormContext();
const { onValuesChange, onQuantizationChange } = useFormContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
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: [],
tags: ['gptq'],
tasks: filterTaskRef.current
? ([ModelscopeTaskMap[filterTaskRef.current]] as string[])
: [],
src/pages/llmodels/components/table-list.tsx
+19 -130
View File
@@ -14,11 +14,6 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import { handleBatchRequest } from '@/utils';
import {
IS_FIRST_LOGIN,
readState,
writeState
} from '@/utils/localstore/index';
import {
DownOutlined,
QuestionCircleOutlined,
@@ -26,16 +21,7 @@ import {
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useNavigate } from '@umijs/max';
import {
Button,
Empty,
Input,
Select,
Space,
Tooltip,
Typography,
message
} from 'antd';
import { Button, Input, Select, Space, Tooltip, message } from 'antd';
import dayjs from 'dayjs';
import { useAtom } from 'jotai';
import _ from 'lodash';
@@ -76,7 +62,7 @@ import {
ModelInstanceListItem,
SourceType
} from '../config/types';
import { useGenerateFormEditInitialValues } from '../hooks';
import useFormInitialValues from '../hooks/use-form-initial-values';
import APIAccessInfoModal from './api-access-info';
import DeployModal from './deploy-modal';
import Instances from './instances';
@@ -88,6 +74,7 @@ interface ModelsProps {
handleNameChange: (e: any) => void;
handleShowSizeChange?: (page: number, size: number) => void;
handlePageChange: (page: number, pageSize: number | undefined) => void;
handleClusterChange: (value: number) => void;
handleDeleteSuccess: () => void;
handleCategoryChange: (val: any) => void;
onViewLogs: () => void;
@@ -103,29 +90,12 @@ interface ModelsProps {
};
deleteIds?: number[];
workerList: WorkerListItem[];
modelFileOptions: any[];
catalogList?: any[];
dataSource: ListItem[];
loading: boolean;
loadend: boolean;
total: number;
}
const clusterList = [
{
label: 'Custom',
value: 'custom'
},
{
label: 'Kubernetes',
value: 'kubernetes'
},
{
label: 'Digital Ocean',
value: 'digital_ocean'
}
];
const statusList = [
{
label: 'Running',
@@ -164,34 +134,27 @@ const Models: React.FC<ModelsProps> = ({
onCancelViewLogs,
handleCategoryChange,
handleOnToggleExpandAll,
handleClusterChange,
onStop,
onStart,
modelFileOptions,
deleteIds,
dataSource,
workerList,
catalogList,
queryParams,
loading,
loadend,
total
}) => {
const { getGPUList, generateFormValues, gpuDeviceList } =
useGenerateFormEditInitialValues();
const { getGPUOptionList, generateFormValues, clusterList, getClusterList } =
useFormInitialValues();
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const [updateFormInitials, setUpdateFormInitials] = useState<{
gpuOptions: any[];
modelFileOptions?: any[];
data: any;
isGGUF: boolean;
}>({
gpuOptions: [],
modelFileOptions: [],
data: {},
isGGUF: false
});
const [isFirstLogin, setIsFirstLogin] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
const intl = useIntl();
const navigate = useNavigate();
@@ -218,17 +181,13 @@ const Models: React.FC<ModelsProps> = ({
width: number | string;
hasLinuxWorker?: boolean;
source: SourceType;
gpuOptions: any[];
isGGUF?: boolean;
modelFileOptions?: any[];
}>({
show: false,
hasLinuxWorker: false,
width: 600,
isGGUF: false,
source: modelSourceMap.huggingface_value as SourceType,
gpuOptions: [],
modelFileOptions: []
source: modelSourceMap.huggingface_value as SourceType
});
const currentData = useRef<ListItem>({} as ListItem);
const [currentInstance, setCurrentInstance] = useState<{
@@ -243,17 +202,6 @@ const Models: React.FC<ModelsProps> = ({
});
const modalRef = useRef<any>(null);
useEffect(() => {
if (!catalogList?.length) {
return;
}
const getFirstLoginState = async () => {
const is_first_login = await readState(IS_FIRST_LOGIN);
setIsFirstLogin(is_first_login);
};
getFirstLoginState();
}, [catalogList?.length]);
useEffect(() => {
if (deleteIds?.length) {
rowSelection.removeSelectedKey(deleteIds);
@@ -262,7 +210,9 @@ const Models: React.FC<ModelsProps> = ({
useEffect(() => {
const getData = async () => {
await getGPUList();
const res = await getClusterList();
const clusterId = res[0]?.value;
await getGPUOptionList({ clusterId });
};
getData();
return () => {
@@ -470,10 +420,8 @@ const Models: React.FC<ModelsProps> = ({
}, []);
const handleEdit = async (row: ListItem) => {
const initialValues = generateFormValues(row, gpuDeviceList.current);
const initialValues = generateFormValues(row, []);
setUpdateFormInitials({
gpuOptions: gpuDeviceList.current,
modelFileOptions: modelFileOptions,
data: initialValues,
isGGUF: row.backend === backendOptionsMap.llamaBox
});
@@ -584,9 +532,7 @@ const Models: React.FC<ModelsProps> = ({
if (config) {
setOpenDeployModal({
...config,
hasLinuxWorker: hasLinuxWorker,
gpuOptions: gpuDeviceList.current,
modelFileOptions: modelFileOptions
hasLinuxWorker: hasLinuxWorker
});
}
};
@@ -652,7 +598,10 @@ const Models: React.FC<ModelsProps> = ({
span: 3,
render: (text: string, record: ListItem) => (
<span className="flex flex-column" style={{ width: '100%' }}>
{['Custom', 'Kubernetes', 'Digital Ocean'][record.id] || 'Custom'}
{
clusterList.find((item) => item.value === record.cluster_id)
?.label
}
</span>
)
},
@@ -724,31 +673,6 @@ const Models: React.FC<ModelsProps> = ({
];
}, [sortOrder, intl, handleSelect]);
const handleOnClick = async () => {
if (isLoading) {
return;
}
const data = catalogList?.[0] || {};
try {
setIsLoading(true);
const modelData = await createModel({
data: data
});
writeState(IS_FIRST_LOGIN, false);
setIsFirstLogin(false);
setTimeout(() => {
updateExpandedRowKeys([modelData.id]);
}, 300);
message.success(intl.formatMessage({ id: 'common.message.success' }));
handleSearch?.();
} catch (error) {
// ingore
} finally {
setIsLoading(false);
}
};
const handleToggleExpandAll = useCallback(
(expanded: boolean) => {
const keys = dataSource.map((item) => item.id);
@@ -760,33 +684,6 @@ const Models: React.FC<ModelsProps> = ({
[dataSource]
);
const renderEmpty = useMemo(() => {
if (dataSource.length || !isFirstLogin || !catalogList?.length) {
return null;
}
return (
<div
className="flex-column justify-center flex-center"
style={{ height: 300 }}
>
<Empty description=""></Empty>
<Typography.Title level={4} style={{ marginBottom: 30 }}>
{intl.formatMessage({ id: 'models.table.list.empty' })}
</Typography.Title>
<div>
<Button type="primary" onClick={handleOnClick} loading={isLoading}>
<span
className="flex-center"
dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'models.table.list.getStart' })
}}
></span>
</Button>
</div>
</div>
);
}, [dataSource.length, isFirstLogin, isLoading, intl]);
return (
<>
<PageContainer
@@ -831,17 +728,9 @@ const Models: React.FC<ModelsProps> = ({
style={{ width: 160 }}
size="large"
maxTagCount={1}
onChange={handleClusterChange}
options={clusterList}
></Select>
<Select
allowClear
showSearch={false}
placeholder="Running Replicas"
style={{ width: 140 }}
size="large"
maxTagCount={1}
options={statusList}
></Select>
<Button
type="text"
style={{ color: 'var(--ant-color-text-tertiary)' }}
@@ -918,6 +807,7 @@ const Models: React.FC<ModelsProps> = ({
action={PageAction.EDIT}
title={intl.formatMessage({ id: 'models.title.edit' })}
updateFormInitials={updateFormInitials}
clusterList={clusterList}
onCancel={handleModalCancel}
onOk={handleModalOk}
></UpdateModel>
@@ -929,8 +819,7 @@ const Models: React.FC<ModelsProps> = ({
width={openDeployModal.width}
isGGUF={openDeployModal.isGGUF}
hasLinuxWorker={openDeployModal.hasLinuxWorker}
gpuOptions={openDeployModal.gpuOptions}
modelFileOptions={openDeployModal.modelFileOptions || []}
clusterList={clusterList}
onCancel={handleDeployModalCancel}
onOk={handleCreateModel}
></DeployModal>
src/pages/llmodels/components/update-modal.tsx
+89 -113
View File
@@ -1,7 +1,6 @@
import ModalFooter from '@/components/modal-footer';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
@@ -10,9 +9,7 @@ import { Button, Form, Modal } from 'antd';
import _ from 'lodash';
import React, { useEffect, useMemo, useRef } from 'react';
import {
backendLabelMap,
backendOptionsMap,
backendTipsList,
updateExcludeFields as excludeFields,
getSourceRepoConfigValue,
modelSourceMap,
@@ -24,6 +21,7 @@ import { FormData, ListItem } from '../config/types';
import HuggingFaceForm from '../forms/hugging-face';
import LocalPathForm from '../forms/local-path';
import { useCheckCompatibility } from '../hooks';
import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
import AdvanceConfig from './advance-config';
import ColumnWrapper from './column-wrapper';
import CompatibilityAlert from './compatible-alert';
@@ -34,9 +32,12 @@ type AddModalProps = {
open: boolean;
updateFormInitials: {
data?: ListItem;
gpuOptions: any[];
isGGUF: boolean;
};
clusterList: Global.BaseOption<
number,
{ provider: string; state: string | number }
>[];
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -48,7 +49,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
open,
onOk,
onCancel,
updateFormInitials: { gpuOptions, isGGUF, data: formData }
clusterList,
updateFormInitials: { isGGUF, data: formData }
} = props || {};
const intl = useIntl();
const {
@@ -58,12 +60,17 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
checkTokenRef,
warningStatus
} = useCheckCompatibility();
const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
const { getRuleMessage } = useAppUtils();
const [form] = Form.useForm();
const submitAnyway = useRef<boolean>(false);
const originFormData = useRef<any>(null);
const handleClusterChange = (value: number) => {
getGPUOptionList({ clusterId: value });
};
const setOriginalFormData = () => {
if (!originFormData.current) {
originFormData.current = _.cloneDeep(formData);
@@ -336,48 +343,53 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
onValuesChange: handleManulOnValuesChange
}}
>
<Form
name="updateModalForm"
form={form}
onFinish={handleOk}
onValuesChange={onValuesChange}
scrollToFirstError={true}
preserve={false}
clearOnDestroy={true}
initialValues={{
...formData
}}
style={{
padding: 'var(--ant-modal-content-padding)',
paddingBlock: 0
<FormInnerContext.Provider
value={{
onBackendChange: handleBackendChange,
gpuOptions: gpuOptions
}}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
<Form
name="updateModalForm"
form={form}
onFinish={handleOk}
onValuesChange={onValuesChange}
scrollToFirstError={true}
preserve={false}
clearOnDestroy={true}
initialValues={{
...formData
}}
style={{
padding: 'var(--ant-modal-content-padding)',
paddingBlock: 0
}}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
{action === PageAction.EDIT && (
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
<SealSelect
disabled={true}
label={intl.formatMessage({
@@ -386,82 +398,46 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
options={sourceOptions}
required
></SealSelect>
)}
</Form.Item>
<FormInnerContext.Provider
value={{
onBackendChange: handleBackendChange,
gpuOptions: gpuOptions
}}
>
</Form.Item>
<HuggingFaceForm></HuggingFaceForm>
<LocalPathForm></LocalPathForm>
</FormInnerContext.Provider>
<Form.Item name="backend" rules={[{ required: true }]}>
<SealSelect
required
onChange={handleAsyncBackendChange}
label={intl.formatMessage({ id: 'models.form.backend' })}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={[
<Form.Item<FormData>
name="cluster_id"
rules={[
{
label: backendLabelMap[backendOptionsMap.llamaBox],
value: backendOptionsMap.llamaBox,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: !isGGUF
},
{
label: backendLabelMap[backendOptionsMap.vllm],
value: backendOptionsMap.vllm,
disabled:
formData?.source === modelSourceMap.local_path_value ||
isVllmOrAscend
? false
: isGGUF
},
{
label: backendLabelMap[backendOptionsMap.ascendMindie],
value: backendOptionsMap.ascendMindie,
disabled:
formData?.source === modelSourceMap.local_path_value ||
isVllmOrAscend
? false
: isGGUF
},
{
label: backendLabelMap[backendOptionsMap.voxBox],
value: backendOptionsMap.voxBox,
disabled:
formData?.source !== modelSourceMap.local_path_value ||
!isVllmOrAscend
required: true,
message: getRuleMessage('select', 'Cluster', false)
}
]}
disabled={
action === PageAction.EDIT &&
formData?.source !== modelSourceMap.local_path_value &&
!isVllmOrAscend
>
{
<SealSelect
onChange={handleClusterChange}
label="Cluster"
options={clusterList}
required
></SealSelect>
}
></SealSelect>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<AdvanceConfig
form={form}
gpuOptions={gpuOptions}
action={PageAction.EDIT}
source={formData?.source || ''}
isGGUF={formData?.backend === backendOptionsMap.llamaBox}
></AdvanceConfig>
</Form>
<AdvanceConfig
form={form}
gpuOptions={gpuOptions}
action={PageAction.EDIT}
source={formData?.source || ''}
isGGUF={formData?.backend === backendOptionsMap.llamaBox}
></AdvanceConfig>
</Form>
</FormInnerContext.Provider>
</FormContext.Provider>
</ColumnWrapper>
</Modal>
src/pages/llmodels/config/form-context.ts
-1
View File
@@ -8,7 +8,6 @@ interface FormContextProps {
pageAction: PageActionType;
sizeOptions?: Global.BaseOption<number>[];
quantizationOptions?: Global.BaseOption<string>[];
modelFileOptions?: any[];
gpuOptions?: any[];
onSizeChange?: (val: number) => void;
onQuantizationChange?: (val: string) => void;
src/pages/llmodels/config/types.ts
+2
View File
@@ -20,6 +20,7 @@ export interface ListItem {
name: string;
description: string;
id: number;
cluster_id: number;
local_path?: string;
created_at: string;
updated_at: string;
@@ -69,6 +70,7 @@ export interface FormData {
description: string;
optimize_long_prompt: boolean;
enable_speculative_decoding: boolean;
cluster_id: number;
}
interface ComputedResourceClaim {
src/pages/llmodels/download/index.tsx
+4 -1
View File
@@ -20,6 +20,7 @@ type AddModalProps = {
width?: string | number;
hasLinuxWorker?: boolean;
workersList: Global.BaseOption<number>[];
workerOptions: any[];
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -33,7 +34,8 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
onCancel,
hasLinuxWorker,
source,
width = 600
width = 600,
workerOptions
} = props || {};
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
@@ -227,6 +229,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
onOk={handleOk}
source={source}
workersList={workersList}
workerOptions={workerOptions}
></TargetForm>
</>
</ColumnWrapper>
src/pages/llmodels/download/target-form.tsx
+20 -8
View File
@@ -13,11 +13,12 @@ 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 } = props;
const { onOk, source, workersList, workerOptions } = props;
const { getRuleMessage } = useAppUtils();
const intl = useIntl();
const [form] = Form.useForm();
@@ -115,13 +116,24 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
}
]}
>
{
<SealSelect
label="Worker"
options={workersList}
required
></SealSelect>
}
<SealSelect
label="Worker"
options={workersList}
required
></SealSelect>
{/* <SealCascader
required
showSearch
expandTrigger="hover"
multiple={false}
popupClassName="cascader-popup-wrapper gpu-selector"
maxTagCount={1}
label="Worker"
options={workerOptions}
showCheckedStrategy="SHOW_CHILD"
value={form.getFieldValue(['gpu_selector', 'gpu_ids'])}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
></SealCascader> */}
</Form.Item>
{source !== modelSourceMap.local_path_value && (
<Form.Item<FormData>
src/pages/llmodels/hooks/index.ts
+4 -156
View File
@@ -1,30 +1,19 @@
import { createAxiosToken } from '@/hooks/use-chunk-request';
import { queryModelFilesList, queryWorkersList } from '@/pages/resources/apis';
import {
WorkerStatusMap,
WorkerStatusMapValue
} from '@/pages/resources/config';
import { queryModelFilesList } from '@/pages/resources/apis';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import { convertFileSize } from '@/utils';
import { useIntl } from '@umijs/max';
import { useDebounceFn } from 'ahooks';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { evaluationsModelSpec, queryGPUList } from '../apis';
import { evaluationsModelSpec } from '../apis';
import {
backendOptionsMap,
getSourceRepoConfigValue,
modelSourceMap,
modelTaskMap,
setSourceRepoConfigValue
modelTaskMap
} from '../config';
import { handleRecognizeAudioModel } from '../config/audio-catalog';
import {
EvaluateResult,
FormData,
GPUListItem,
ListItem
} from '../config/types';
import { EvaluateResult, FormData } from '../config/types';
export type MessageStatus = {
show: boolean;
@@ -41,123 +30,6 @@ export type WarningStausOptions = {
override?: boolean;
};
export const useGenerateFormEditInitialValues = () => {
const gpuDeviceList = useRef<any[]>([]);
const workerList = useRef<any[]>([]);
const generateCascaderOptions = (
list: GPUListItem[],
workerList: WorkerListItem[]
) => {
// pick the worker fields from gpuList
const workerFields = new Set(['worker_name', 'worker_id', 'worker_ip']);
// generate a map for workerList by name to data
const workerDataMap = new Map<string, WorkerListItem>();
for (const worker of workerList) {
workerDataMap.set(worker.name, worker);
}
const workersMap = new Map<string, GPUListItem[]>();
for (const gpu of list) {
if (!workersMap.has(gpu.worker_name)) {
workersMap.set(gpu.worker_name, []);
}
workersMap.get(gpu.worker_name)!.push(gpu);
}
const gpuSelectorList = Array.from(workersMap.entries()).map(
([workerName, items]) => {
const firstItem = items[0];
const currentState = workerDataMap.get(workerName)?.state || '';
const disDisabled = WorkerStatusMap.ready !== currentState;
return {
label: disDisabled
? `${workerName} [${WorkerStatusMapValue[currentState]}]`
: workerName,
value: workerName,
parent: true,
disabled: disDisabled,
children: items
.map((item) => ({
label: item.name,
value: item.id,
index: item.index,
...Object.fromEntries(
Object.entries(item).filter(([key]) => !workerFields.has(key))
)
}))
.sort((a, b) => a.index - b.index),
...Object.fromEntries(
Object.entries(firstItem).filter(([key]) => workerFields.has(key))
)
};
}
);
return gpuSelectorList;
};
const getGPUList = async () => {
const [gpuData, workerData] = await Promise.all([
queryGPUList({ page: 1, perPage: 100 }),
queryWorkersList({ page: 1, perPage: 100 })
]);
const gpuList = generateCascaderOptions(gpuData.items, workerData.items);
gpuDeviceList.current = gpuList;
workerList.current = workerData.items;
return gpuList;
};
const generateGPUSelector = (data: any, gpuOptions: any[]) => {
const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
if (gpu_ids.length === 0) {
return [];
}
const valueMap = new Map<string, string>();
gpuOptions?.forEach((item) => {
item.children?.forEach((child: any) => {
valueMap.set(child.value, item.value);
});
});
const gpuids: string[][] = gpu_ids
.map((id: string) => {
const parent = valueMap.get(id);
return parent ? [parent, id] : null;
})
.filter(Boolean) as string[][];
return data.backend === backendOptionsMap.voxBox ? gpuids[0] : gpuids;
};
const generateFormValues = (data: ListItem, gpuOptions: any[]) => {
const result = setSourceRepoConfigValue(data?.source || '', data);
const formData = {
...result.values,
categories: data?.categories?.length ? data.categories[0] : null,
scheduleType: data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: data?.gpu_selector?.gpu_ids?.length
? {
gpu_ids: generateGPUSelector(data, gpuOptions)
}
: null
};
return formData;
};
return {
getGPUList,
generateFormValues,
gpuDeviceList,
workerList
};
};
export const useGenerateModelFileOptions = () => {
const getModelFileList = async () => {
try {
@@ -514,25 +386,6 @@ export const useCheckCompatibility = () => {
return null;
};
const checkRequiredValue = (allValues: any) => {
const { scheduleType } = allValues;
const gpuIds = allValues.gpu_selector?.gpu_ids || [];
const noLocalValue =
allValues.source === modelSourceMap.local_path_value &&
!allValues.local_path;
const noOllamaValue =
allValues.source === modelSourceMap.ollama_library_value &&
!allValues.ollama_library_model_name;
if (scheduleType === 'manual') {
return !gpuIds.length || noLocalValue || noOllamaValue;
}
return noLocalValue || noOllamaValue;
};
const clearCahceFormValues = () => {
cacheFormValuesRef.current = {};
};
@@ -585,11 +438,6 @@ export const useCheckCompatibility = () => {
return res;
};
const { run: debounceHandleValuesChange } = useDebounceFn(
handleOnValuesChange,
{ wait: 500 }
);
const cancelEvaluate = () => {
// update the requestId to cancel the current evaluation
updateRequestId();
src/pages/llmodels/hooks/use-form-initial-values.ts
+255
View File
@@ -0,0 +1,255 @@
import { queryClusterList } from '@/pages/cluster-management/apis';
import { ClusterListItem } from '@/pages/cluster-management/config/types';
import { queryWorkersList } from '@/pages/resources/apis';
import {
WorkerStatusMap,
WorkerStatusMapValue
} from '@/pages/resources/config';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import _ from 'lodash';
import { useState } from 'react';
import { queryGPUList } from '../apis';
import { backendOptionsMap, setSourceRepoConfigValue } from '../config';
import { GPUListItem, ListItem } from '../config/types';
interface CascaderOption {
label: string;
value: string | number;
parent?: boolean;
disabled?: boolean;
index?: number;
children?: CascaderOption[];
}
export const useGenerateGPUOptions = () => {
const [gpuOptions, setGpuOptions] = useState<CascaderOption[]>([]);
const generateCascaderGPUOptions = (
gpuList: GPUListItem[],
workerList: WorkerListItem[]
) => {
// pick the worker fields from gpuList
const workerFields = new Set(['worker_name', 'worker_id', 'worker_ip']);
// generate a map for workerList by name to data
const workerDataMap = new Map<string, WorkerListItem>();
for (const worker of workerList) {
workerDataMap.set(worker.name, worker);
}
const workersMap = new Map<string, GPUListItem[]>();
for (const gpu of gpuList) {
if (!workersMap.has(gpu.worker_name)) {
workersMap.set(gpu.worker_name, []);
}
workersMap.get(gpu.worker_name)!.push(gpu);
}
const gpuSelectorList = Array.from(workersMap.entries()).map(
([workerName, items]) => {
const firstItem = items[0];
const currentState = workerDataMap.get(workerName)?.state || '';
const disDisabled = WorkerStatusMap.ready !== currentState;
return {
label: disDisabled
? `${workerName} [${WorkerStatusMapValue[currentState]}]`
: workerName,
value: workerName,
parent: true,
disabled: disDisabled,
children: items
.map((item) => ({
label: item.name,
value: item.id,
index: item.index,
...Object.fromEntries(
Object.entries(item).filter(([key]) => !workerFields.has(key))
)
}))
.sort((a, b) => a.index - b.index),
...Object.fromEntries(
Object.entries(firstItem).filter(([key]) => workerFields.has(key))
)
};
}
);
return gpuSelectorList;
};
const getGPUOptionList = async (params?: { clusterId: number }) => {
const { clusterId } = params || {};
const [gpuData, workerData] = await Promise.all([
queryGPUList({
page: 1,
perPage: 100,
cluster_id: clusterId
}),
queryWorkersList({
page: 1,
perPage: 100,
cluster_id: clusterId
})
]);
const gpuList = generateCascaderGPUOptions(gpuData.items, workerData.items);
setGpuOptions(gpuList);
return gpuList;
};
return {
getGPUOptionList,
gpuOptions
};
};
export const useGenerateWorkerOptions = () => {
const [workerOptions, setWorkerOptions] = useState<CascaderOption[]>([]);
const [clusterList, setClusterList] = useState<
Global.BaseOption<number, { provider: string; state: string | number }>[]
>([]);
const [workersList, setWorkersList] = useState<
Global.BaseOption<
number,
{ state: string; labels: Record<string, string> }
>[]
>([]);
const generateCascaderWorkerOptions = (
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
}))
}));
setWorkerOptions(options);
return options;
};
const getDataList = async (): Promise<
[WorkerListItem[], ClusterListItem[]]
> => {
const [workerRes, clusterRes] = await Promise.all([
queryWorkersList({
page: 1,
perPage: 100
}),
queryClusterList({
page: 1,
perPage: 100
})
]);
const workerList = workerRes.items || ([] as WorkerListItem[]);
const clusterList = clusterRes.items || ([] as ClusterListItem[]);
return [workerList, clusterList];
};
const getWorkerOptionList = async () => {
const data = await getDataList();
const [workerList, clusterList] = data;
generateCascaderWorkerOptions(workerList, clusterList);
setWorkersList(
workerList.map((item) => ({
state: item.state,
label: item.name,
value: item.id
}))
);
setClusterList(
clusterList.map((item) => ({
label: item.name,
value: item.id,
provider: item.provider,
state: item.state
}))
);
};
return {
getWorkerOptionList,
workerOptions,
clusterList,
workersList
};
};
export default function useFormInitialValues() {
const { getGPUOptionList } = useGenerateGPUOptions();
const [clusterList, setClusterList] = useState<
Global.BaseOption<number, { provider: string; state: string | number }>[]
>([]);
const getClusterList = async (): Promise<Global.BaseOption<number>[]> => {
try {
const response = await queryClusterList({
page: 1,
perPage: 100
});
const list = response.items.map((item) => ({
label: item.name,
value: item.id,
provider: item.provider,
state: item.state
}));
setClusterList(list);
return list;
} catch (error) {
console.error('Failed to fetch cluster list:', error);
setClusterList([]);
return [];
}
};
const generateGPUSelector = (data: any, gpuOptions: any[]) => {
const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
if (gpu_ids.length === 0) {
return [];
}
const valueMap = new Map<string, string>();
gpuOptions?.forEach((item) => {
item.children?.forEach((child: any) => {
valueMap.set(child.value, item.value);
});
});
const gpuids: string[][] = gpu_ids
.map((id: string) => {
const parent = valueMap.get(id);
return parent ? [parent, id] : null;
})
.filter(Boolean) as string[][];
return data.backend === backendOptionsMap.voxBox ? gpuids[0] : gpuids;
};
const generateFormValues = (data: ListItem, gpuOptions: any[]) => {
const result = setSourceRepoConfigValue(data?.source || '', data);
const formData = {
...result.values,
categories: data?.categories?.length ? data.categories[0] : null,
scheduleType: data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: data?.gpu_selector?.gpu_ids?.length
? {
gpu_ids: generateGPUSelector(data, gpuOptions)
}
: null
};
return formData;
};
return {
getGPUOptionList,
generateFormValues,
getClusterList,
clusterList
};
}
src/pages/llmodels/index.tsx
+35 -97
View File
@@ -3,26 +3,19 @@ import useSetChunkRequest from '@/hooks/use-chunk-request';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { queryWorkersList } from '@/pages/resources/apis';
import { ListItem as WokerListItem } from '@/pages/resources/config/types';
import { IS_FIRST_LOGIN, readState } from '@/utils/localstore';
import _ from 'lodash';
import qs from 'query-string';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
MODELS_API,
MODEL_INSTANCE_API,
queryCatalogItemSpec,
queryCatalogList,
queryModelsInstances,
queryModelsList
} from './apis';
import TableList from './components/table-list';
import { backendOptionsMap } from './config';
import { ListItem } from './config/types';
import { useGenerateModelFileOptions } from './hooks';
const Models: React.FC = () => {
const { getModelFileList, generateModelFileOptions } =
useGenerateModelFileOptions();
const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
const { setChunkRequest: setModelInstanceChunkRequest } =
useSetChunkRequest();
@@ -41,9 +34,7 @@ const Models: React.FC = () => {
total: 0
});
const [catalogList, setCatalogList] = useState<any[]>([]);
const [workerList, setWorkerList] = useState<WokerListItem[]>([]);
const [modelFileOptions, setModelFileOptions] = useState<any[]>([]);
const chunkRequedtRef = useRef<any>();
const chunkInstanceRequedtRef = useRef<any>();
const isPageHidden = useRef(false);
@@ -168,20 +159,20 @@ const Models: React.FC = () => {
[queryParams]
);
const handleQueryChange = (params: any) => {
setQueryParams({
...queryParams,
...params
});
fetchData({ query: { ...queryParams, ...params } });
};
const handlePageChange = useCallback(
(page: number, pageSize: number | undefined) => {
setQueryParams({
...queryParams,
handleQueryChange({
page: page,
perPage: pageSize || 10
});
fetchData({
query: {
...queryParams,
page: page,
perPage: pageSize || 10
}
});
},
[queryParams]
);
@@ -269,18 +260,10 @@ const Models: React.FC = () => {
);
const debounceUpdateFilter = _.debounce((e: any) => {
setQueryParams({
...queryParams,
handleQueryChange({
page: 1,
search: e.target.value
});
fetchData({
query: {
...queryParams,
page: 1,
search: e.target.value
}
});
createModelsChunkRequest({
search: e.target.value,
categories: queryParams.categories
@@ -289,27 +272,27 @@ const Models: React.FC = () => {
const handleNameChange = useCallback(debounceUpdateFilter, [queryParams]);
const handleCategoryChange = useCallback(
async (value: any) => {
setQueryParams({
...queryParams,
page: 1,
categories: value
});
fetchData({
query: {
...queryParams,
page: 1,
categories: value
}
});
createModelsChunkRequest({
search: queryParams.search,
categories: value
});
},
[queryParams]
);
const handleCategoryChange = async (value: any) => {
handleQueryChange({
page: 1,
categories: value
});
createModelsChunkRequest({
search: queryParams.search,
categories: value
});
};
const handleClusterChange = async (value: any) => {
handleQueryChange({
page: 1,
cluster_id: value
});
createModelsChunkRequest({
search: queryParams.search,
cluster_id: value
});
};
useEffect(() => {
let timer: any = null;
@@ -345,55 +328,12 @@ const Models: React.FC = () => {
}
};
// get catalog list
const getCataLogList = async () => {
const isFirstLogin = readState(IS_FIRST_LOGIN);
if (!isFirstLogin) {
return;
}
try {
const res: any = await queryCatalogList({
search: 'DeepSeek R1',
page: 1
});
if (!res?.items?.length) {
return [];
}
const name = _.toLower(res?.items[0]?.name).replace(/\s/g, '-') || '';
const catalogSpecs: any = await queryCatalogItemSpec({
id: res?.items[0]?.id
});
const list = catalogSpecs?.items?.map((item: any) => {
item.name = name;
return item;
});
const deepseekr1dstill = _.toLower('DeepSeek-R1-Distill-Qwen-1.5B');
const resultList = list?.filter((item: any) => {
return (
item.backend === backendOptionsMap.llamaBox &&
(_.toLower(item?.huggingface_repo_id)?.indexOf(deepseekr1dstill) >
-1 ||
_.toLower(item?.model_scope_model_id)?.indexOf(deepseekr1dstill) >
-1)
);
});
return resultList || [];
} catch (error) {
// ignore
return [];
}
};
const init = async () => {
const [modelRes, workerRes, modelFileList] = await Promise.all([
const [modelRes, workerRes] = await Promise.all([
getTableData(),
getWorkerList(),
getModelFileList()
getWorkerList()
]);
const dataList = generateModelFileOptions(
modelFileList,
workerRes.items || []
);
setDataSource({
dataList: modelRes.items || [],
loading: false,
@@ -402,7 +342,6 @@ const Models: React.FC = () => {
deletedIds: []
});
setWorkerList(workerRes.items || []);
setModelFileOptions(dataList);
clearTimeout(timer);
timer = setTimeout(() => {
@@ -464,6 +403,7 @@ const Models: React.FC = () => {
dataSource={dataSource.dataList}
handleNameChange={handleNameChange}
handleCategoryChange={handleCategoryChange}
handleClusterChange={handleClusterChange}
handleSearch={handleSearch}
handlePageChange={handlePageChange}
handleDeleteSuccess={fetchData}
@@ -478,8 +418,6 @@ const Models: React.FC = () => {
total={dataSource.total}
deleteIds={dataSource.deletedIds}
workerList={workerList}
modelFileOptions={modelFileOptions}
catalogList={catalogList}
></TableList>
</TableContext.Provider>
);
src/pages/resources/apis/index.ts
+4 -2
View File
@@ -5,9 +5,11 @@ export const WORKERS_API = '/workers';
export const GPU_DEVICES_API = '/gpu-devices';
export const MODEL_FILES_API = '/model-files';
export async function queryWorkersList(params: Global.SearchParams) {
export async function queryWorkersList<T extends Record<string, any>>(
params: Global.SearchParams & T
) {
return request<Global.PageResponse<ListItem>>(`${WORKERS_API}`, {
methos: 'GET',
method: 'GET',
params
});
}
src/pages/resources/components/add-worker.tsx
+7 -3
View File
@@ -5,12 +5,16 @@ import ContainerInstall from './container-install';
type ViewModalProps = {
open: boolean;
token: string;
registrationInfo: {
token: string;
image: string;
server_url: string;
};
onCancel: () => void;
};
const AddWorker: React.FC<ViewModalProps> = (props) => {
const { open, onCancel, token = '${token}' } = props || {};
const { open, onCancel, registrationInfo } = props || {};
const intl = useIntl();
return (
@@ -30,7 +34,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
maxContentHeight={450}
footer={null}
>
<ContainerInstall token={token} />
<ContainerInstall registrationInfo={registrationInfo} />
</ScrollerModal>
);
};
src/pages/resources/components/container-install.tsx
+16 -5
View File
@@ -9,7 +9,11 @@ import { addWorkerGuide, containerInstallOptions } from '../config';
import './styles/installation.less';
type ViewModalProps = {
token: string;
registrationInfo: {
token: string;
image: string;
server_url: string;
};
};
const npuOptions = [
@@ -18,6 +22,7 @@ const npuOptions = [
];
const AddWorker: React.FC<ViewModalProps> = (props) => {
const { registrationInfo } = props || {};
const intl = useIntl();
const origin = window.location.origin;
@@ -40,12 +45,18 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
const tag = activeKey === 'cuda' ? version : `${version}-${activeKey}`;
return commandCode?.registerWorker({
server: origin,
server: registrationInfo.server_url || origin,
tag: tag,
token: props.token || '${token}',
token: registrationInfo.token || '${token}',
workerip: '${workerip}'
});
}, [versionInfo, activeKey, props.token, npuKey]);
}, [
versionInfo,
activeKey,
registrationInfo.token,
registrationInfo.server_url,
npuKey
]);
const handleOnChange = (value: string | number) => {
setNpuKey(value as string);
@@ -53,7 +64,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
return (
<div className="container-install">
<h3 className="m-t-10 font-size-14 font-600">
<h3 className="m-t-0 font-size-14 font-600">
1. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
<span
className="font-size-12"
src/pages/resources/components/model-files.tsx
+22 -64
View File
@@ -20,6 +20,7 @@ import {
} from '@/pages/llmodels/config/button-actions';
import { SourceType } from '@/pages/llmodels/config/types';
import DownloadModal from '@/pages/llmodels/download';
import { useGenerateWorkerOptions } from '@/pages/llmodels/hooks/use-form-initial-values';
import { convertFileSize } from '@/utils';
import {
CheckCircleFilled,
@@ -32,19 +33,14 @@ import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
import dayjs from 'dayjs';
import { useAtom } from 'jotai';
import _ from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import {
checkCurrentbackend,
useGenerateFormEditInitialValues,
useGenerateModelFileOptions
} from '../../llmodels/hooks';
import { checkCurrentbackend } from '../../llmodels/hooks';
import {
MODEL_FILES_API,
deleteModelFile,
downloadModelFile,
queryModelFilesList,
queryWorkersList,
retryDownloadModelFile
} from '../apis';
import {
@@ -53,10 +49,7 @@ import {
ModelfileStateMapValue,
WorkerStatusMap
} from '../config';
import {
ModelFile as ListItem,
ListItem as WorkerListItem
} from '../config/types';
import { ModelFile as ListItem } from '../config/types';
const { Paragraph } = Typography;
@@ -287,7 +280,8 @@ const ResolvedPathColumn = (props: { record: ListItem }) => {
};
const ModelFiles = () => {
const { getGPUList } = useGenerateFormEditInitialValues();
const { getWorkerOptionList, workerOptions, clusterList, workersList } =
useGenerateWorkerOptions();
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const [modelsExpandKeys, setModelsExpandKeys] = useAtom(modelsExpandKeysAtom);
const navigate = useNavigate();
@@ -311,63 +305,36 @@ const ModelFiles = () => {
watch: true,
contentForDelete: 'resources.modelfiles.modelfile'
});
const { getModelFileList, generateModelFileOptions } =
useGenerateModelFileOptions();
const intl = useIntl();
const { showSuccess } = useAppUtils();
const [workersList, setWorkersList] = useState<any[]>([]);
const [downloadModalStatus, setDownlaodMoalStatus] = useState<{
show: boolean;
width: number | string;
source: string;
hasLinuxWorker: boolean;
gpuOptions: any[];
}>({
show: false,
width: 600,
hasLinuxWorker: false,
source: modelSourceMap.huggingface_value,
gpuOptions: []
source: modelSourceMap.huggingface_value
});
const [openDeployModal, setOpenDeployModal] = useState<{
show: boolean;
width: number | string;
source: SourceType;
gpuOptions: any[];
modelFileOptions?: any[];
initialValues: any;
isGGUF?: boolean;
}>({
show: false,
width: 600,
source: modelSourceMap.local_path_value as SourceType,
gpuOptions: [],
modelFileOptions: [],
initialValues: {},
isGGUF: false
});
useEffect(() => {
const fetchWorkerList = async () => {
try {
const res = await queryWorkersList({
page: 1,
perPage: 100
});
const list = res.items?.map((item: WorkerListItem) => {
return {
...item,
value: item.id,
label: item.name
};
});
setWorkersList(list);
} catch (error) {
// console.log('error', error);
}
};
fetchWorkerList();
getWorkerOptionList();
}, []);
const extractFileName = (name: string) => {
@@ -440,16 +407,10 @@ const ModelFiles = () => {
showSuccess();
} else if (val === 'deploy') {
saveScrollHeight();
const [modelFileList, gpuList] = await Promise.all([
getModelFileList(),
getGPUList()
]);
const dataList = generateModelFileOptions(modelFileList, workersList);
const initialValues = generateInitialValues(record, gpuList);
const initialValues = generateInitialValues(record, []);
setOpenDeployModal({
...openDeployModal,
modelFileOptions: dataList,
gpuOptions: gpuList,
initialValues: initialValues,
isGGUF: initialValues.isGGUF,
show: true
@@ -472,18 +433,15 @@ const ModelFiles = () => {
return <div></div>;
};
const handleClickDropdown = useCallback(
(item: any) => {
const config = modalConfig[item.key];
const hasLinuxWorker = workersList.some(
(worker) => _.toLower(worker.labels?.os) === 'linux'
);
if (config) {
setDownlaodMoalStatus({ ...config, hasLinuxWorker, gpuOptions: [] });
}
},
[workersList]
);
const handleClickDropdown = (item: any) => {
const config = modalConfig[item.key];
const hasLinuxWorker = workersList.some(
(worker) => _.toLower(worker.labels?.os) === 'linux'
);
if (config) {
setDownlaodMoalStatus({ ...config, hasLinuxWorker });
}
};
const handleDownloadCancel = () => {
setDownlaodMoalStatus({
@@ -709,6 +667,7 @@ const ModelFiles = () => {
width={downloadModalStatus.width}
hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
workersList={readyWorkers}
workerOptions={workerOptions}
></DownloadModal>
<DeployModal
deploymentType="modelFiles"
@@ -719,10 +678,9 @@ const ModelFiles = () => {
action={PageAction.CREATE}
source={openDeployModal.source}
width={openDeployModal.width}
gpuOptions={openDeployModal.gpuOptions}
modelFileOptions={openDeployModal.modelFileOptions || []}
initialValues={openDeployModal.initialValues}
isGGUF={openDeployModal.isGGUF}
clusterList={clusterList}
></DeployModal>
</PageContainer>
</>
src/pages/resources/components/workers.tsx
+68 -27
View File
@@ -7,6 +7,7 @@ import ProgressBar from '@/components/progress-bar';
import InfoColumn from '@/components/simple-table/info-column';
import StatusTag from '@/components/status-tag';
import useTableFetch from '@/hooks/use-table-fetch';
import { queryClusterList } from '@/pages/cluster-management/apis';
import { convertFileSize } from '@/utils';
import {
CodeOutlined,
@@ -18,7 +19,7 @@ import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Empty, Table, Tooltip, message } from 'antd';
import _ from 'lodash';
import React, { useCallback, useState } from 'react';
import React, { useEffect, useState } from 'react';
import {
WORKERS_API,
deleteWorker,
@@ -27,7 +28,6 @@ import {
} from '../apis';
import { WorkerStatusMapValue, status } from '../config';
import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
import AddWorker from './add-worker';
import UpdateLabels from './update-labels';
const { Column } = Table;
@@ -115,6 +115,7 @@ const Workers: React.FC = () => {
handlePageChange,
handleTableChange,
handleSearch,
handleQueryChange,
handleNameChange
} = useTableFetch<ListItem>({
fetchAPI: queryWorkersList,
@@ -125,7 +126,6 @@ const Workers: React.FC = () => {
});
const intl = useIntl();
const [open, setOpen] = useState(false);
const [updateLabelsData, setUpdateLabelsData] = useState<{
open: boolean;
data: ListItem;
@@ -133,35 +133,65 @@ const Workers: React.FC = () => {
open: false,
data: {} as ListItem
});
const [clusterData, setClusterData] = useState<{
list: Global.BaseOption<number>[];
data: Record<number, string>;
}>({
list: [],
data: {}
});
const handleAddWorker = () => {
setOpen(true);
const getClusterList = async () => {
try {
const params = {
page: 1,
perPage: 100
};
const res = await queryClusterList(params);
const clusterMap = res?.items?.reduce(
(acc: Record<number, string>, item: any) => {
acc[item.id] = item.name;
return acc;
},
{}
);
const list = res?.items?.map((item: any) => ({
label: item.name,
value: item.id
}));
setClusterData({
list,
data: clusterMap
});
} catch (error) {
setClusterData({
list: [],
data: {}
});
}
};
const handleUpdateLabelsOk = useCallback(
async (values: Record<string, any>) => {
try {
console.log('updateLabelsData.data', updateLabelsData.data);
await updateWorker(updateLabelsData.data.id, {
...updateLabelsData.data,
labels: values.labels
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
fetchData();
setUpdateLabelsData({ open: false, data: {} as ListItem });
} catch (error) {
console.log('error', error);
}
},
[updateLabelsData, fetchData]
);
const handleUpdateLabelsOk = async (values: Record<string, any>) => {
try {
console.log('updateLabelsData.data', updateLabelsData.data);
await updateWorker(updateLabelsData.data.id, {
...updateLabelsData.data,
labels: values.labels
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
fetchData();
setUpdateLabelsData({ open: false, data: {} as ListItem });
} catch (error) {
console.log('error', error);
}
};
const handleCancelUpdateLabels = useCallback(() => {
const handleCancelUpdateLabels = () => {
setUpdateLabelsData({
...updateLabelsData,
open: false
});
}, []);
};
const handleUpdateLabels = (record: ListItem) => {
console.log('record', record);
@@ -210,6 +240,17 @@ const Workers: React.FC = () => {
);
};
const handleClusterChange = (value: number) => {
handleQueryChange({
page: 1,
cluster_id: value
});
};
useEffect(() => {
getClusterList();
}, []);
return (
<>
<PageContainer
@@ -232,9 +273,10 @@ const Workers: React.FC = () => {
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
handleDeleteByBatch={handleDeleteBatch}
handleSearch={handleSearch}
handleClickPrimary={handleAddWorker}
handleSelectChange={handleClusterChange}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
selectOptions={clusterData.list}
width={{ input: 200 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
@@ -309,7 +351,7 @@ const Workers: React.FC = () => {
render={(text, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={240}>
<span>digital-ocean-cluster</span>
<span>{clusterData.data[record.cluster_id]}</span>
</AutoTooltip>
);
}}
@@ -496,7 +538,6 @@ const Workers: React.FC = () => {
</Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal>
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
<UpdateLabels
open={updateLabelsData.open}
onOk={handleUpdateLabelsOk}
src/pages/resources/config/types.ts
+1
View File
@@ -64,6 +64,7 @@ export interface ListItem {
labels: Record<string, string>;
state: string;
ip: string;
cluster_id: number;
state_message: string;
status: {
cpu: {