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

feat: duplicate deployment

Browse Source
This commit is contained in:
jialin
2026-02-04 14:58:48 +08:00
parent 5ad9ac277c
commit 05c05419fc
25 changed files with 366 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+14 -14
View File
@@ -86,14 +86,14 @@ export default [
redirect: '/models/deployments'
},
{
name: 'routes',
path: '/models/routes',
key: 'routes',
icon: 'icon-captive_portal',
selectedIcon: 'icon-captive_portal',
defaultIcon: 'icon-captive_portal',
name: 'modelCatalog',
path: '/models/catalog',
key: 'modelsCatalog',
icon: 'icon-layers',
selectedIcon: 'icon-layers-filled',
defaultIcon: 'icon-layers',
access: 'canSeeAdmin',
component: './model-routes/index'
component: './llmodels/catalog'
},
{
name: 'deployment',
@@ -106,14 +106,14 @@ export default [
component: './llmodels/index'
},
{
name: 'modelCatalog',
path: '/models/catalog',
key: 'modelsCatalog',
icon: 'icon-layers',
selectedIcon: 'icon-layers-filled',
defaultIcon: 'icon-layers',
name: 'routes',
path: '/models/routes',
key: 'routes',
icon: 'icon-captive_portal',
selectedIcon: 'icon-captive_portal',
defaultIcon: 'icon-captive_portal',
access: 'canSeeAdmin',
component: './llmodels/catalog'
component: './model-routes/index'
},
{
name: 'providers',
src/components/footer/index.tsx
+8 -2
View File
@@ -3,7 +3,7 @@ import { getAtomStorage } from '@/atoms/utils';
import VersionInfo, { modalConfig } from '@/components/version-info';
import externalLinks from '@/constants/external-links';
import { useIntl } from '@umijs/max';
import { Button, Divider, Modal } from 'antd';
import { Button, Divider, Modal, Typography } from 'antd';
import { createStyles } from 'antd-style';
import styled from 'styled-components';
@@ -54,7 +54,13 @@ const Footer: React.FC = () => {
<CompanyWrapper>
<span>&copy;</span>
<span> {new Date().getFullYear()}</span>
<span> {intl.formatMessage({ id: 'settings.company' })}</span>
<Typography.Link
href="https://gpustack.ai"
target="_blank"
rel="noopener noreferrer"
>
{intl.formatMessage({ id: 'settings.company' })}
</Typography.Link>
</CompanyWrapper>
<Divider orientation="vertical" />
<Button
src/hooks/use-query-data-list.ts
+1
View File
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from 'react';
* generic hook to query data list
* @template ListItem
* @param Params - query params type, e.g. { page: number; perPage: number }
* @param option.fetchList: (params, extra) => Promise<{ items: ListItem[] }>
* @returns loading, dataList, fetchData, cancelRequest
*/
src/locales/en-US/common.ts
+1 -1
View File
@@ -205,7 +205,7 @@ export default {
'common.form.password': 'Password',
'common.form.username': 'Username',
'common.login.rember': 'Remember me',
'settings.company': 'SEAL',
'settings.company': 'GPUStack.ai',
'common.button.help': 'Help',
'common.button.feedback': 'Feedback',
'common.button.docs': 'Documentation',
src/locales/en-US/models.ts
+1
View File
@@ -2,6 +2,7 @@ export default {
'models.button.deploy': 'Deploy Model',
'models.title': 'Models',
'models.title.edit': 'Edit Model',
'models.title.duplicate': 'Duplicate Model',
'models.table.models': 'models',
'models.table.name': 'Model Name',
'models.form.source': 'Source',
src/locales/ja-JP/common.ts
+1 -1
View File
@@ -205,7 +205,7 @@ export default {
'common.form.password': 'パスワード',
'common.form.username': 'ユーザー名',
'common.login.rember': 'ログイン状態を保持',
'settings.company': 'SEAL',
'settings.company': 'GPUStack.ai',
'common.button.help': 'ヘルプ',
'common.button.feedback': 'フィードバック',
'common.button.docs': 'ドキュメント',
src/locales/ja-JP/models.ts
+1
View File
@@ -2,6 +2,7 @@ export default {
'models.button.deploy': 'モデルをデプロイ',
'models.title': 'モデル',
'models.title.edit': 'モデルを編集',
'models.title.duplicate': 'モデルを複製',
'models.table.models': 'モデル',
'models.table.name': 'モデル名',
'models.form.source': 'ソース',
src/locales/ru-RU/common.ts
+1 -1
View File
@@ -203,7 +203,7 @@ export default {
'common.form.password': 'Пароль',
'common.form.username': 'Имя пользователя',
'common.login.rember': 'Запомнить меня',
'settings.company': 'SEAL',
'settings.company': 'GPUStack.ai',
'common.button.help': 'Помощь',
'common.button.feedback': 'Обратная связь',
'common.button.docs': 'Документация',
src/locales/ru-RU/models.ts
+1
View File
@@ -2,6 +2,7 @@ export default {
'models.button.deploy': 'Развернуть модель',
'models.title': 'Модели',
'models.title.edit': 'Редактировать модель',
'models.title.duplicate': 'Дублировать модель',
'models.table.models': 'Модели',
'models.table.name': 'Название модели',
'models.form.source': 'Источник',
src/locales/zh-CN/models.ts
+1
View File
@@ -2,6 +2,7 @@ export default {
'models.button.deploy': '部署模型',
'models.title': '模型',
'models.title.edit': '编辑模型',
'models.title.duplicate': '复制模型',
'models.table.models': '模型',
'models.table.name': '模型名称',
'models.form.source': '来源',
src/pages/llmodels/components/instance-item.tsx
+13 -2
View File
@@ -27,7 +27,12 @@ import _ from 'lodash';
import React, { useCallback, useEffect, useMemo } from 'react';
import styled from 'styled-components';
import { MODEL_INSTANCE_API } from '../apis';
import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
import {
InstanceStatusMap,
InstanceStatusMapValue,
modelCategoriesMap,
status
} from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { generateSource } from '../config/button-actions';
import {
@@ -431,12 +436,18 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
const intl = useIntl();
const actionItems = useMemo(() => {
return _.filter(childActionList, (action: any) => {
if (action.key === 'benchmark') {
return (
action.status.includes(instanceData.state) &&
modelData?.categories?.includes(modelCategoriesMap.llm)
);
}
if (action.status && action.status.length > 0) {
return action.status.includes(instanceData.state);
}
return true;
});
}, [instanceData.state]);
}, [instanceData.state, modelData]);
const createFileName = (name: string) => {
const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
src/pages/llmodels/components/table-list.tsx
+84 -116
View File
@@ -15,6 +15,9 @@ import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import PageBox from '@/pages/_components/page-box';
import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
import { TargetStatusValueMap } from '@/pages/model-routes/config';
import useOpenPlayground from '@/pages/model-routes/hooks/use-open-playground';
import useQueryTargets from '@/pages/model-routes/services/use-query-targets';
import { handleBatchRequest } from '@/utils';
import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
@@ -54,11 +57,10 @@ import {
ModelInstanceListItem,
SourceType
} from '../config/types';
import useEditDeployment from '../hooks/use-edit-deployment';
import useFilterStatus from '../hooks/use-filter-status';
import useFormInitialValues from '../hooks/use-form-initial-values';
import useModelsColumns from '../hooks/use-models-columns';
import AccessControlModal from './access-control-modal';
import APIAccessInfoModal from './api-access-info';
import DeployModal from './deploy-modal';
import Instances from './instances';
import UpdateModelModal from './update-modal';
@@ -140,13 +142,12 @@ const Models: React.FC<ModelsProps> = ({
const [searchParams] = useSearchParams();
const page = searchParams.get('page');
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const [updateFormInitials, setUpdateFormInitials] = useState<{
data: any;
isGGUF: boolean;
}>({
data: {},
isGGUF: false
});
const {
openEditModalStatus,
openEditModal,
openDuplicateModal,
closeEditModal
} = useEditDeployment();
const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
const [modelsSession, setModelsSession] = useAtom(modelsSessionAtom);
const intl = useIntl();
@@ -159,17 +160,18 @@ const Models: React.FC<ModelsProps> = ({
removeExpandedRowKey,
expandedRowKeys
} = useExpandedRowKeys(expandAtom);
const { handleOpenPlayGround } = useOpenPlayground();
const { labelRender, optionRender, handleStatusChange, statusOptions } =
useFilterStatus({
onStatusChange: onStatusChange
});
const { fetchData: fetchTargets, dataList: targetList } = useQueryTargets();
useEffect(() => {
fetchTargets({});
}, []);
const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
show: false,
data: {}
});
const [openLogModal, setOpenLogModal] = useState(false);
const [openAddModal, setOpenAddModal] = useState(false);
const [openDeployModal, setOpenDeployModal] = useState<{
show: boolean;
width: number | string;
@@ -183,7 +185,6 @@ const Models: React.FC<ModelsProps> = ({
isGGUF: false,
source: modelSourceMap.huggingface_value as SourceType
});
const currentData = useRef<ListItem>({} as ListItem);
const [currentInstance, setCurrentInstance] = useState<{
url: string;
status: string;
@@ -194,17 +195,6 @@ const Models: React.FC<ModelsProps> = ({
url: '',
status: ''
});
const [openAccessControlModal, setOpenAccessControlModal] = useState<{
open: boolean;
currentData: ListItem | null;
title: string;
action: PageActionType;
}>({
open: false,
currentData: null,
title: '',
action: PageAction.CREATE
});
const modalRef = useRef<any>(null);
useEffect(() => {
@@ -223,10 +213,6 @@ const Models: React.FC<ModelsProps> = ({
};
}, []);
const setCurrentData = (data: ListItem) => {
currentData.current = data;
};
const handleOnSort = (order: TableOrder | Array<TableOrder>) => {
onTableSort?.(order);
};
@@ -253,16 +239,29 @@ const Models: React.FC<ModelsProps> = ({
};
const handleModalOk = async (data: FormData) => {
const currentData = openEditModalStatus.currentData;
try {
await updateModel({
data,
id: currentData.current?.id as number
});
setOpenAddModal(false);
message.success(intl.formatMessage({ id: 'common.message.success' }));
if (data.replicas > currentData.current?.replicas) {
updateExpandedRowKeys([currentData.current?.id, ...expandedRowKeys]);
if (currentData.realAction === PageAction.COPY) {
const modelData = await createModel({
data
});
if (data.replicas > 0) {
updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
}
}
if (currentData.realAction === PageAction.EDIT) {
await updateModel({
data,
id: currentData.row.id as number
});
if (data.replicas > currentData.row.replicas) {
updateExpandedRowKeys([currentData.row.id, ...expandedRowKeys]);
}
}
closeEditModal();
message.success(intl.formatMessage({ id: 'common.message.success' }));
setTimeout(() => {
handleSearch();
}, 150);
@@ -271,7 +270,7 @@ const Models: React.FC<ModelsProps> = ({
};
const handleModalCancel = useCallback(() => {
setOpenAddModal(false);
closeEditModal();
restoreScrollHeight();
}, []);
@@ -282,29 +281,28 @@ const Models: React.FC<ModelsProps> = ({
});
};
const handleCreateModel = useCallback(
async (data: FormData) => {
try {
console.log('data:', data, openDeployModal);
const refreshListStatus = (modelData: ListItem) => {
setTimeout(() => {
updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
}, 300);
message.success(intl.formatMessage({ id: 'common.message.success' }));
setTimeout(() => {
handleSearch?.();
}, 150);
};
const modelData = await createModel({
data
});
setOpenDeployModal({
...openDeployModal,
show: false
});
setTimeout(() => {
updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
}, 300);
message.success(intl.formatMessage({ id: 'common.message.success' }));
setTimeout(() => {
handleSearch?.();
}, 150);
} catch (error) {}
},
[openDeployModal]
);
const handleCreateModel = async (data: FormData) => {
try {
const modelData = await createModel({
data
});
setOpenDeployModal({
...openDeployModal,
show: false
});
refreshListStatus(modelData);
} catch (error) {}
};
const handleLogModalCancel = useCallback(() => {
setOpenLogModal(false);
@@ -400,28 +398,23 @@ const Models: React.FC<ModelsProps> = ({
return `${MODELS_API}/${params.id}/instances`;
}, []);
const handleEdit = async (row: ListItem) => {
const handleEdit = async (row: ListItem, realAction: PageActionType) => {
const initialValues = generateFormValues(row, []);
setUpdateFormInitials({
data: initialValues,
isGGUF: false
});
setCurrentData(row);
setOpenAddModal(true);
if (realAction === PageAction.EDIT) {
openEditModal(initialValues, row);
} else if (realAction === PageAction.COPY) {
openDuplicateModal(initialValues, row);
}
saveScrollHeight();
};
const handleViewAPIInfo = useCallback((row: ListItem) => {
setAPIAccessInfo({
show: true,
data: row
});
}, []);
const handleSelect = useMemoizedFn(async (val: any, row: ListItem) => {
try {
if (val === 'edit') {
handleEdit(row);
handleEdit(row, PageAction.EDIT);
}
if (val === 'copy') {
handleEdit(row, PageAction.COPY);
}
if (val === 'delete') {
handleDelete(row);
@@ -433,10 +426,6 @@ const Models: React.FC<ModelsProps> = ({
onStart?.();
}
if (val === 'api') {
handleViewAPIInfo(row);
}
if (val === 'stop') {
modalRef.current?.show({
content: 'models.instances',
@@ -450,13 +439,16 @@ const Models: React.FC<ModelsProps> = ({
}
});
}
if (val === 'chat') {
const targetRoute = targetList.find(
(target) =>
target.model_id === row.id &&
target.state === TargetStatusValueMap.Active
);
if (val === 'accessControl') {
setOpenAccessControlModal({
title: intl.formatMessage({ id: 'models.button.accessSettings' }),
action: PageAction.EDIT,
currentData: row,
open: true
handleOpenPlayGround({
categories: row.categories || [],
name: targetRoute?.route_name || ''
});
}
} catch (error) {
@@ -551,7 +543,8 @@ const Models: React.FC<ModelsProps> = ({
return {
handleSelect,
clusterList,
sortOrder
sortOrder,
targetList: targetList
};
}, [handleSelect, clusterList, sortOrder]);
@@ -565,14 +558,6 @@ const Models: React.FC<ModelsProps> = ({
}
});
const handleCancelAccessControl = () => {
setOpenAccessControlModal({
...openAccessControlModal,
currentData: null,
open: false
});
};
const { noResourceResult } = useNoResourceResult({
loadend: loadend,
loading: loading,
@@ -735,10 +720,10 @@ const Models: React.FC<ModelsProps> = ({
></SealTable>
</PageBox>
<UpdateModelModal
open={openAddModal}
action={PageAction.EDIT}
title={intl.formatMessage({ id: 'models.title.edit' })}
updateFormInitials={updateFormInitials}
open={openEditModalStatus.open}
action={openEditModalStatus.action}
title={openEditModalStatus.title}
currentData={openEditModalStatus.currentData}
clusterList={clusterList}
onCancel={handleModalCancel}
onOk={handleModalOk}
@@ -765,23 +750,6 @@ const Models: React.FC<ModelsProps> = ({
onCancel={handleLogModalCancel}
></ViewLogsModal>
<DeleteModal ref={modalRef}></DeleteModal>
<APIAccessInfoModal
open={apiAccessInfo.show}
data={apiAccessInfo.data}
onClose={() => {
setAPIAccessInfo({
...apiAccessInfo,
show: false
});
}}
></APIAccessInfoModal>
<AccessControlModal
onCancel={handleCancelAccessControl}
title={openAccessControlModal.title}
open={openAccessControlModal.open}
currentData={openAccessControlModal.currentData}
action={openAccessControlModal.action}
></AccessControlModal>
</>
);
};
src/pages/llmodels/components/update-modal.tsx
+18 -33
View File
@@ -1,10 +1,10 @@
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
import React, { useEffect, useMemo, useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import ColumnWrapper from '../../_components/column-wrapper';
import {
DeployFormKeyMap,
@@ -22,9 +22,10 @@ type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
updateFormInitials: {
currentData: {
data: FormData;
isGGUF: boolean;
realAction?: PageActionType;
};
clusterList: Global.BaseOption<
number,
@@ -48,7 +49,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
onOk,
onCancel,
clusterList,
updateFormInitials: { isGGUF, data: formData }
currentData: { isGGUF, data: formData, realAction }
} = props || {};
const intl = useIntl();
const {
@@ -198,14 +199,6 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
onCancel?.();
};
const showExtraButton = useMemo(() => {
return (
warningStatus.show &&
warningStatus.type !== 'success' &&
!warningStatus.isDefault
);
}, [warningStatus.show, warningStatus.type, warningStatus.isDefault]);
useEffect(() => {
const initGPUSelector = async () => {
const gpuOptions = await formRef.current?.getGPUOptionList({
@@ -256,31 +249,23 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
}}
footer={
<>
<CompatibilityAlert
showClose={false}
onClose={() => {
setWarningStatus({
show: false,
message: ''
});
}}
warningStatus={warningStatus}
contentStyle={{ paddingInline: 0 }}
></CompatibilityAlert>
{realAction === PageAction.EDIT && (
<CompatibilityAlert
showClose={false}
onClose={() => {
setWarningStatus({
show: false,
message: ''
});
}}
warningStatus={warningStatus}
contentStyle={{ paddingInline: 0 }}
></CompatibilityAlert>
)}
<ModalFooter
style={ModalFooterStyle}
onCancel={onCancel}
onOk={handleSumit}
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button type="primary" onClick={handleSubmitAnyway}>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}
</Button>
)
}
></ModalFooter>
</>
}
src/pages/llmodels/config/button-actions.ts
+10 -5
View File
@@ -39,16 +39,21 @@ export const ActionList: ActionItem[] = [
key: 'edit',
icon: icons.EditOutlined
},
{
label: 'models.openinplayground',
key: 'chat',
icon: icons.ExperimentOutlined
},
{
key: 'copy',
label: 'common.button.duplicate',
icon: icons.CopyOutlined
},
{
label: 'common.button.start',
key: 'start',
icon: icons.Play
},
{
label: 'models.table.button.apiAccessInfo',
key: 'api',
icon: icons.ApiOutlined
},
{
label: 'common.button.stop',
key: 'stop',
src/pages/llmodels/hooks/use-edit-deployment.ts
+82
View File
@@ -0,0 +1,82 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { useState } from 'react';
import { ListItem } from '../config/types';
const useEditDeployment = () => {
const intl = useIntl();
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData: {
isGGUF: boolean;
data: any; // for form data
row: ListItem;
realAction?: PageActionType; // added action here for copy action
};
title: string;
}>({
open: false,
action: PageAction.EDIT,
currentData: {
isGGUF: false,
data: {},
row: {} as ListItem
},
title: ''
});
const openEditModal = (formData: any, row: ListItem) => {
setOpenModalStatus({
open: true,
action: PageAction.EDIT,
currentData: {
isGGUF: false,
data: formData,
row: row
},
title: intl.formatMessage({ id: 'models.title.edit' })
});
};
const openDuplicateModal = (formData: any, row: ListItem) => {
setOpenModalStatus({
open: true,
action: PageAction.EDIT,
currentData: {
isGGUF: false,
data: {
...formData,
name: `${formData.name}-copy`
},
row: row,
realAction: PageAction.COPY
},
title: intl.formatMessage({ id: 'models.title.duplicate' })
});
};
const closeModal = () => {
setOpenModalStatus({
open: false,
action: PageAction.EDIT,
currentData: {
isGGUF: false,
data: {},
row: {} as ListItem
},
title: ''
});
};
return {
openEditModalStatus: openModalStatus,
setOpenEditModalStatus: setOpenModalStatus,
openEditModal: openEditModal,
openDuplicateModal: openDuplicateModal,
closeEditModal: closeModal
};
};
export default useEditDeployment;
src/pages/llmodels/hooks/use-models-columns.tsx
+31 -21
View File
@@ -3,8 +3,10 @@ import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import { SealColumnProps } from '@/components/seal-table/types';
import { OPENAI_COMPATIBLE, tableSorter } from '@/config/settings';
import { TargetStatusValueMap } from '@/pages/model-routes/config';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Tooltip } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
@@ -13,24 +15,6 @@ import ModelTag from '../../_components/model-tag';
import { ActionList, generateSource } from '../config/button-actions';
import { ListItem } from '../config/types';
const setModelActionList = (record: any) => {
return _.filter(ActionList, (action: any) => {
if (action.key === 'chat' || action.key === 'api') {
return record.ready_replicas > 0;
}
if (action.key === 'start') {
return record.replicas === 0;
}
if (action.key === 'stop') {
return record.replicas > 0;
}
return true;
});
};
interface ModelsColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: string[];
@@ -43,10 +27,36 @@ interface ModelsColumnsHookProps {
const useModelsColumns = ({
handleSelect,
clusterList,
sortOrder
}: ModelsColumnsHookProps): SealColumnProps[] => {
sortOrder,
targetList
}: ModelsColumnsHookProps & { targetList: any[] }): SealColumnProps[] => {
const intl = useIntl();
const setModelActionList = useMemoizedFn((record: any) => {
return _.filter(ActionList, (action: any) => {
if (action.key === 'chat') {
return (
record.ready_replicas > 0 &&
targetList?.find(
(target) =>
target.model_id === record.id &&
target.state === TargetStatusValueMap.Active
)
);
}
if (action.key === 'start') {
return record.replicas === 0;
}
if (action.key === 'stop') {
return record.replicas > 0;
}
return true;
});
});
return useMemo(() => {
return [
{
@@ -137,7 +147,7 @@ const useModelsColumns = ({
key: 'operation',
dataIndex: 'operation',
span: 3,
render: (text, record) => (
render: (text: any, record: ListItem) => (
<DropdownButtons
items={setModelActionList(record)}
onSelect={(val) => handleSelect(val, record)}
src/pages/model-routes/apis/index.ts
+12 -11
View File
@@ -36,17 +36,18 @@ export async function deleteModelRoute(id: number) {
});
}
export async function queryRouteTargets(params: { id: number }, options?: any) {
return request<Global.PageResponse<RouteTarget>>(
`${MODEL_ROUTE_TARGETS}?route_id=${params.id}`,
{
method: 'GET',
params: {
page: -1
},
cancelToken: options?.token
}
);
export async function queryRouteTargets(
params: { id?: number },
options?: any
) {
return request<Global.PageResponse<RouteTarget>>(`${MODEL_ROUTE_TARGETS}`, {
method: 'GET',
params: {
route_id: params.id,
page: -1
},
cancelToken: options?.token
});
}
export async function deleteModelRouteTarget(id: number) {
src/pages/model-routes/config/index.ts
+5
View File
@@ -29,6 +29,11 @@ export const rowActionList = [
key: 'chat',
icon: icons.ExperimentOutlined
},
{
label: 'models.table.button.apiAccessInfo',
key: 'api',
icon: icons.ApiOutlined
},
{
label: 'models.button.accessSettings',
key: 'accessControl',
src/pages/model-routes/config/types.ts
+2 -5
View File
@@ -38,13 +38,10 @@ export interface RouteTarget {
id: number;
created_at: string;
updated_at: string;
deleted_at: string;
provider_model_name: string;
weight: number | null;
weight: number;
model_id: number;
provider_id: number;
name: string;
route_name: string;
route_id: number;
state: string;
fallback_status_codes: string[];
}
src/pages/model-routes/forms/basic.tsx
+11 -2
View File
@@ -13,10 +13,19 @@ const Basic = () => {
const { getRuleMessage } = useAppUtils();
return (
<>
<Form.Item name="name" data-field="name">
<Form.Item
name="name"
data-field="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
required
label={intl.formatMessage({ id: 'models.table.name' })}
label={intl.formatMessage({ id: 'common.table.name' })}
/>
</Form.Item>
<Form.Item
src/pages/model-routes/hooks/use-routes-columns.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const useAccessColumns = (
const filterActions = (record: RouteItem) => {
return rowActionList.filter((action) => {
if (action.key === 'chat') {
if (action.key === 'chat' || action.key === 'api') {
return record.ready_targets > 0;
}
return true;
src/pages/model-routes/hooks/use-view-api-info.ts
+30
View File
@@ -0,0 +1,30 @@
import { useState } from 'react';
const useViewApIInfo = () => {
const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
show: false,
data: {}
});
const openViewAPIInfo = (row: any) => {
setAPIAccessInfo({
show: true,
data: row
});
};
const closeViewAPIInfo = () => {
setAPIAccessInfo({
show: false,
data: {}
});
};
return {
apiAccessInfo,
openViewAPIInfo,
closeViewAPIInfo
};
};
export default useViewApIInfo;
src/pages/model-routes/index.tsx
+10
View File
@@ -10,6 +10,7 @@ import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableFetch from '@/hooks/use-table-fetch';
import useWatchList from '@/hooks/use-watch-list';
import APIAccessInfoModal from '@/pages/llmodels/components/api-access-info';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { message } from 'antd';
@@ -39,6 +40,7 @@ import useCreateRoute from './hooks/use-create-route';
import useOpenPlayground from './hooks/use-open-playground';
import useRoutesColumns from './hooks/use-routes-columns';
import useTargetSourceModels from './hooks/use-target-source-models';
import useViewApIInfo from './hooks/use-view-api-info';
const ModelRoutes: React.FC = () => {
const {
@@ -75,6 +77,7 @@ const ModelRoutes: React.FC = () => {
} = useAccessControl();
const { sourceModels, fetchSourceModels } = useTargetSourceModels();
const { handleOpenPlayGround } = useOpenPlayground();
const { apiAccessInfo, openViewAPIInfo, closeViewAPIInfo } = useViewApIInfo();
const [modelList, setModelsList] = useState<Global.BaseOption<number>[]>([]);
useEffect(() => {
@@ -149,6 +152,8 @@ const ModelRoutes: React.FC = () => {
);
} else if (val === 'chat') {
handleOpenPlayGround(row);
} else if (val === 'api') {
openViewAPIInfo(row);
}
});
@@ -316,6 +321,11 @@ const ModelRoutes: React.FC = () => {
currentData={openAccessControlModalStatus.currentData}
action={openAccessControlModalStatus.action}
></AccessControlModal>
<APIAccessInfoModal
open={apiAccessInfo.show}
data={apiAccessInfo.data}
onClose={closeViewAPIInfo}
></APIAccessInfoModal>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
src/pages/model-routes/services/use-query-targets.ts
+23
View File
@@ -0,0 +1,23 @@
import { useQueryDataList } from '@/hooks/use-query-data-list';
import { queryRouteTargets } from '../apis';
import { RouteTarget as ListItem } from '../config/types';
export const useQueryRouteTargets = (optons?: {
getLabel?: (item: ListItem) => string;
getValue?: (item: ListItem) => any;
}) => {
const { dataList, loading, fetchData, cancelRequest } =
useQueryDataList<ListItem>({
key: 'routeTargets',
fetchList: queryRouteTargets
});
return {
dataList,
loading,
fetchData,
cancelRequest
};
};
export default useQueryRouteTargets;
src/pages/resources/config/gpu-driver.ts
+4 -5
View File
@@ -179,14 +179,13 @@ const generateEnvArgs = (params: any) => {
// concat the args, the args is a key-value
const generateExtraArgs = (params: any) => {
const args = params.registrationInfo?.args || {};
const argsList = Object.entries(args);
if (argsList.length === 0) {
const args = params.registrationInfo?.args || [];
if (args.length === 0) {
return '';
}
let argsStr = '';
argsList.forEach(([key, value]) => {
argsStr += `${key} ${_.isBoolean(value) ? value : value || ''} \\\n `;
args.forEach((item: string[]) => {
argsStr += `${item[0]} ${_.isBoolean(item[1]) ? item[1] : item[1] || ''} \\\n `;
});
return argsStr;
};