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

chore: backend api

Browse Source
This commit is contained in:
jialin
2026-01-30 20:48:55 +08:00
committed by Lawrence Li
parent af6f90c228
commit a2be7f6b36
22 changed files with 11829 additions and 9118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/backends/components/backend-card.tsx
+116 -20
View File
@@ -13,6 +13,8 @@ import semverGt from 'semver/functions/gt';
import styled from 'styled-components';
import {
backendActions,
BackendSourceLabelMap,
BackendSourceValueMap,
builtInBackendLogos,
customColors,
customIcons,
@@ -29,6 +31,23 @@ const StyledCard = styled(Card)`
}
`;
const SourceWrapper = styled.div`
display: grid;
width: 100%;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 0px;
.dot {
display: flex;
height: 4px;
width: 4px;
background-color: var(--ant-color-text-quaternary);
border-radius: 50%;
margin-inline: 8px;
}
`;
const TagInner = styled(Tag)`
display: flex;
align-items: center;
@@ -59,8 +78,8 @@ const CardName = styled.div`
display: flex;
align-items: center;
color: var(--ant-color-text);
margin-bottom: 4px;
gap: 16px;
margin-bottom: 8px;
gap: 8px;
`;
const Content = styled.div`
@@ -68,7 +87,7 @@ const Content = styled.div`
flex-direction: column;
align-items: flex-start;
margin-top: 12px;
gap: 16px;
gap: 8px;
color: var(--ant-color-text-secondary);
.description {
margin-block: 12px;
@@ -103,12 +122,12 @@ const Content = styled.div`
const InfoItem = styled.div`
display: grid;
width: 100%;
grid-template-columns: max-content 1fr;
grid-template-columns: max-content 1fr minmax(0, max-content);
align-items: center;
gap: 8px;
color: var(--ant-color-text-tertiary);
.icon {
color: var(--ant-color-text-tertiary);
color: var(--ant-color-text-quaternary);
}
.label {
display: flex;
@@ -123,6 +142,12 @@ interface BackendCardProps {
data: ListItem;
}
const TagColorMap: Record<string, string> = {
[BackendSourceValueMap.CUSTOM]: 'purple',
[BackendSourceValueMap.BUILTIN]: 'geekblue',
[BackendSourceValueMap.COMMUNITY]: 'cyan'
};
const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
const intl = useIntl();
@@ -138,6 +163,9 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
if (builtInBackendLogos[data.backend_name]) {
return <img src={builtInBackendLogos[data.backend_name]} height={20} />;
}
if (data.icon) {
return <img src={data.icon} height={20} />;
}
const color = customColors[data.id % customColors.length];
const icon = customIcons[data.id % customIcons.length];
@@ -149,10 +177,12 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
};
const actions = useMemo(() => {
if (data.is_built_in) {
return backendActions.filter((item) => item.key !== 'delete');
}
return backendActions.filter((item) => item.key !== 'view_versions');
return backendActions.filter((item) => {
if (item.show) {
return item.show(data);
}
return true;
});
}, [data.is_built_in]);
const onClick = (e: React.MouseEvent) => {
@@ -193,6 +223,16 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
);
};
const renderModel = (item: any) => {
return (
<AutoTooltip ghost minWidth={20} showTitle title={item}>
<ThemeTag key={item} style={{ marginRight: 0 }}>
{item}
</ThemeTag>
</AutoTooltip>
);
};
const renderFrameworks = () => {
const frameworks = _.keys(data.framework_index_map || {});
@@ -213,13 +253,30 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
);
};
const renderRecommendModels = () => {
const recommnadedModels = data.recommend_models || [];
if (recommnadedModels.length === 0) {
return null;
}
return (
<div className="flex-center">
<span className="dot"></span>
<TagWrapper
gap={8}
dataList={recommnadedModels}
renderTag={renderModel}
></TagWrapper>
</div>
);
};
return (
<StyledCard
onClick={handleClick}
clickable={true}
hoverable={true}
disabled={false}
height={140}
height={164}
ghost
header={
<Header>
@@ -244,17 +301,56 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
<Content>
<CardName>
<span>{data.backend_name}</span>
{data.is_built_in && (
<Tag
color="geekblue"
className="font-400"
variant="filled"
style={{ borderRadius: 'var(--ant-border-radius)', margin: 0 }}
>
{intl.formatMessage({ id: 'backend.builtin' })}
</Tag>
)}
</CardName>
<SourceWrapper>
<InfoItem>
<span className="label">
<IconFont type="icon-source" className="icon" />
<span>Source:</span>
</span>
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN]
: BackendSourceLabelMap[data.backend_source]
})}
</ThemeTag>
{data.backend_source === BackendSourceValueMap.COMMUNITY && (
<>
<ThemeTag
className="font-400"
variant="outlined"
color={data.enabled ? 'green' : 'default'}
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{data.enabled
? `${intl.formatMessage({ id: 'common.status.enabled' })}`
: `${intl.formatMessage({ id: 'common.status.disabled' })}`}
</ThemeTag>
</>
)}
</InfoItem>
{/* {renderRecommendModels()} */}
</SourceWrapper>
{renderFrameworks()}
</Content>
</StyledCard>
src/pages/backends/config/index.ts
+36 -1
View File
@@ -29,6 +29,20 @@ export const builtInBackendLogos: Record<string, string> = {
[backendOptionsMap.voxBox]: VoxBoxLogo
};
export const BackendSourceValueMap = {
CUSTOM: 'custom',
BUILTIN: 'built-in',
COMMUNITY: 'community',
USER_DEFINED: 'user_defined'
};
export const BackendSourceLabelMap: Record<string, string> = {
[BackendSourceValueMap.CUSTOM]: 'backend.custom',
[BackendSourceValueMap.BUILTIN]: 'backend.builtin',
[BackendSourceValueMap.COMMUNITY]: 'backend.community',
[BackendSourceValueMap.USER_DEFINED]: 'models.form.backend.custom'
};
export const backendActions = [
{
label: 'common.button.edit',
@@ -44,13 +58,34 @@ export const backendActions = [
locale: true,
icon: icons.Yaml
},
{
label: 'common.button.enable',
value: 'enable',
key: 'enable',
locale: true,
icon: icons.Yaml,
show: (record: any) =>
!record.enabled &&
record.backend_source === BackendSourceValueMap.COMMUNITY
},
{
label: 'common.button.disable',
value: 'disable',
key: 'disable',
locale: true,
icon: icons.Yaml,
show: (record: any) =>
record.enabled &&
record.backend_source === BackendSourceValueMap.COMMUNITY
},
{
label: 'common.button.delete',
value: 'delete',
key: 'delete',
icon: icons.DeleteOutlined,
locale: true,
danger: true
danger: true,
show: (record: any) => !record.is_built_in
}
];
src/pages/backends/config/types.ts
+4
View File
@@ -23,6 +23,7 @@ export interface FormData {
default_backend_param?: string[];
allowed_proxy_uris?: string[];
content?: string;
enabled?: boolean;
}
export interface ListItem extends FormData {
@@ -30,6 +31,9 @@ export interface ListItem extends FormData {
is_built_in?: boolean;
created_at?: string;
updated_at?: string;
backend_source: string;
icon: string;
recommend_models: string[];
built_in_version_configs?: Record<string, VersionConfigs>;
framework_index_map?: Record<string, string[]>;
}
src/pages/backends/index.tsx
+10
View File
@@ -25,6 +25,7 @@ import VersionInfoModal from './components/version-info-modal';
import { json2Yaml, yaml2Json } from './config';
import { FormData, ListItem } from './config/types';
import useExportYAML from './hooks/use-export-yaml';
import useEnableBackend from './services/use-enable-backend';
const BackendList = () => {
const intl = useIntl();
@@ -59,6 +60,7 @@ const BackendList = () => {
open: boolean;
currentData?: Partial<ListItem>;
}>({ open: false });
const { handleEnableBackend } = useEnableBackend();
// built_in_version_configs is read-only, but needs to be included when updating
const handleOnSubmit = async (values: FormData) => {
@@ -151,6 +153,14 @@ const BackendList = () => {
open: true,
currentData: item.data
});
} else if (item.action === 'enable' || item.action === 'disable') {
handleEnableBackend({
id: item.data.id,
data: {
...item.data,
enabled: item.action === 'enable'
}
});
}
};
src/pages/backends/services/use-enable-backend.ts
+21
View File
@@ -0,0 +1,21 @@
import { useIntl } from '@umijs/max';
import { message } from 'antd';
import { updateBackend } from '../../backends/apis';
import { FormData } from '../../backends/config/types';
const useEnableBackend = () => {
const intl = useIntl();
const handleEnableBackend = async (params: {
id: number;
data: FormData;
}) => {
await updateBackend(params.id, {
data: params.data
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
};
return { handleEnableBackend };
};
export default useEnableBackend;