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

style: display target model name

Browse Source
This commit is contained in:
jialin
2026-02-03 18:21:08 +08:00
parent 04c25ab0f7
commit dcda9be50b
7 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config/global.d.ts
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
type PageActionType = 'create' | 'update' | 'view' | 'edit';
type PageActionType = 'create' | 'update' | 'view' | 'edit' | 'copy';
declare namespace Global {
type WithFalse<T> = T | false;
interface Pagination {
src/pages/llmodels/components/access-control-modal/index.tsx
+3 -2
View File
@@ -2,16 +2,17 @@ import AlertBlockInfo from '@/components/alert-info/block';
import ModalFooter from '@/components/modal-footer';
import { PageActionType } from '@/config/types';
import FormDrawer from '@/pages/_components/form-drawer';
import { RouteItem } from '@/pages/model-routes/config/types';
import { useIntl } from '@umijs/max';
import { message } from 'antd';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { updateModelAccessUser } from '../../apis';
import { AccessControlFormData, ListItem } from '../../config/types';
import { AccessControlFormData } from '../../config/types';
import AccessControlForm from './form';
const AccessControlModal: React.FC<
Global.ScrollerModalProps<ListItem, AccessControlFormData>
Global.ScrollerModalProps<RouteItem, AccessControlFormData>
> = ({ open, title, currentData, action, onCancel }) => {
const intl = useIntl();
const form = useRef<any>(null);
src/pages/maas-provider/components/provider-logo.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import GPUStackLogo from '@/assets/images/small-logo-200x200.png';
import ai360 from '@/assets/providers-logo/ai360.svg';
import azure from '@/assets/providers-logo/azureai.svg';
import baichuan from '@/assets/providers-logo/baichuan.svg';
@@ -66,7 +67,8 @@ const ProviderLogoMap: Record<string, string> = {
[ProviderEnum.TOGETHERAI]: togetherai,
[ProviderEnum.ZHIPUAI]: zhipuai,
[ProviderEnum.GITHUB]: github,
[ProviderEnum.TRITON]: triton
[ProviderEnum.TRITON]: triton,
['deployments']: GPUStackLogo
};
const ProviderLogo: React.FC<{
src/pages/maas-provider/components/provider-models.tsx
+35 -37
View File
@@ -21,45 +21,43 @@ const ProviderModels: React.FC<ProviderModelProps> = ({ dataList }) => {
none: <WarningOutlined />
};
return (
<div style={{ paddingInline: 16 }}>
<Flex gap="8px" wrap="wrap">
{dataList.map((model) => (
<Tag
key={model.name}
icon={
_.isBoolean(model.accessible)
? iconsMap[model.accessible ? 'accessible' : 'inaccessible']
: iconsMap['none']
<Flex gap="8px" wrap="wrap">
{dataList.map((model) => (
<Tag
key={model.name}
icon={
_.isBoolean(model.accessible)
? iconsMap[model.accessible ? 'accessible' : 'inaccessible']
: iconsMap['none']
}
variant="outlined"
styles={{
root: {
backgroundColor: 'transparent',
display: 'flex',
alignItems: 'center',
borderRadius: 4
}
variant="outlined"
styles={{
root: {
backgroundColor: 'transparent',
display: 'flex',
alignItems: 'center',
borderRadius: 4
}
}}
color={
model.accessible === true
? 'success'
: model.accessible === false
? 'error'
: 'warning'
}
>
<span className="flex-center">
<AutoTooltip ghost maxWidth={'120px'}>
{model.name}
</AutoTooltip>
<span style={{ marginLeft: 8 }}>
{categoryConfig[model.category]?.icon}
</span>
}}
color={
model.accessible === true
? 'success'
: model.accessible === false
? 'error'
: 'warning'
}
>
<span className="flex-center">
<AutoTooltip ghost maxWidth={'120px'}>
{model.name}
</AutoTooltip>
<span style={{ marginLeft: 8 }}>
{categoryConfig[model.category]?.icon}
</span>
</Tag>
))}
</Flex>
</div>
</span>
</Tag>
))}
</Flex>
);
};
src/pages/model-routes/components/route-targets.tsx
+25 -7
View File
@@ -2,6 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import RowChildren from '@/components/seal-table/components/row-children';
import StatusTag from '@/components/status-tag';
import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
import { DeleteOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Col, Row } from 'antd';
@@ -10,6 +11,7 @@ import React from 'react';
import styled from 'styled-components';
import { TargetStatus, TargetStatusLabelMap } from '../config';
import { RouteTarget } from '../config/types';
const CellContent = styled.div`
display: flex;
align-items: center;
@@ -20,12 +22,14 @@ interface ProviderModelProps {
dataList: RouteTarget[];
onSelect: (val: any, record: any) => void;
sourceModels: any[];
modelList?: Global.BaseOption<number>[];
}
interface AccessItemProps {
interface TargetItemProps {
onSelect: (val: any, record: any) => void;
data: any;
sourceModels: any[];
modelList?: Global.BaseOption<number>[];
}
export const childActionList = [
@@ -44,10 +48,11 @@ export const childActionList = [
}
];
const RouteItem: React.FC<AccessItemProps> = ({
const RouteItem: React.FC<TargetItemProps> = ({
onSelect,
data,
sourceModels
sourceModels,
modelList
}) => {
const intl = useIntl();
@@ -58,8 +63,19 @@ const RouteItem: React.FC<AccessItemProps> = ({
}
return item.value === data.provider_id;
});
console.log('renderProviderSource model:', data, sourceModels);
return model?.label || '-';
if (!model) {
return '-';
}
return (
<span className="flex-center" style={{ gap: 8, width: '100%' }}>
<ProviderLogo provider={model.providerType}></ProviderLogo>
<AutoTooltip ghost minWidth={20}>
{data.model_id
? modelList?.find((m) => m.value === data.model_id)?.label
: data.provider_model_name}
</AutoTooltip>
</span>
);
};
return (
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
@@ -74,7 +90,7 @@ const RouteItem: React.FC<AccessItemProps> = ({
<AutoTooltip ghost>{data.name}</AutoTooltip>
</CellContent>
</Col>
<Col span={4} style={{ paddingLeft: 56 }}>
<Col span={5} style={{ paddingLeft: 56 }}>
<CellContent>{renderProviderSource()}</CellContent>
</Col>
<Col span={3}>
@@ -101,7 +117,7 @@ const RouteItem: React.FC<AccessItemProps> = ({
)}
</CellContent>
</Col>
<Col span={3}>
<Col span={2}>
<CellContent>
<AutoTooltip ghost>
<StatusTag
@@ -142,6 +158,7 @@ const RouteItem: React.FC<AccessItemProps> = ({
const RouteTargets: React.FC<ProviderModelProps> = ({
dataList,
onSelect,
modelList,
sourceModels
}) => {
return (
@@ -152,6 +169,7 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
key={index}
onSelect={onSelect}
sourceModels={sourceModels}
modelList={modelList}
></RouteItem>
))}
</div>
src/pages/model-routes/hooks/use-target-source-models.tsx
+2
View File
@@ -50,6 +50,7 @@ const useTargetSourceModels = () => {
</OptionWrapper>
),
value: 'deployments',
providerType: 'deployments',
parent: true,
children: models.items?.map?.((model: ModelListItem) => ({
label: model.name,
@@ -73,6 +74,7 @@ const useTargetSourceModels = () => {
),
value: provider.id,
parent: true,
providerType: provider.config?.type,
children: provider.models?.map?.((model) => ({
label: model.name,
value: model.name,
src/pages/model-routes/index.tsx
+22 -2
View File
@@ -15,9 +15,10 @@ import { useMemoizedFn } from 'ahooks';
import { message } from 'antd';
import { useAtom } from 'jotai';
import _ from 'lodash';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import NoResult from '../_components/no-result';
import PageBox from '../_components/page-box';
import { queryModelsList } from '../llmodels/apis';
import AccessControlModal from '../llmodels/components/access-control-modal';
import {
MODEL_ROUTES,
@@ -72,6 +73,24 @@ const Accesses: React.FC = () => {
openAccessControlModalStatus
} = useAccessControl();
const { sourceModels, fetchSourceModels } = useTargetSourceModels();
const [modelList, setModelsList] = useState<Global.BaseOption<number>[]>([]);
useEffect(() => {
const fetchModels = async () => {
try {
const res = await queryModelsList({ page: -1 });
const models =
res.items?.map((model) => ({
label: model.name,
value: model.id
})) || [];
setModelsList(models);
} catch (error) {
setModelsList([]);
}
};
fetchModels();
}, []);
const handleClickDropdown = () => {
openRouteModal(
@@ -193,6 +212,7 @@ const Accesses: React.FC = () => {
) => {
return (
<RouteTargets
modelList={modelList}
dataList={list}
onSelect={onChildSelect}
sourceModels={sourceModels}
@@ -289,7 +309,7 @@ const Accesses: React.FC = () => {
onCancel={closeAccessControlModal}
title={openAccessControlModalStatus.title}
open={openAccessControlModalStatus.open}
currentData={openAccessControlModalStatus.currentData || null}
currentData={openAccessControlModalStatus.currentData}
action={openAccessControlModalStatus.action}
></AccessControlModal>
<DeleteModal ref={modalRef}></DeleteModal>