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

feat: template port name

Browse Source
This commit is contained in:
jialin
2026-05-15 16:22:07 +08:00
committed by jialin
parent 5d75cfdfc5
commit c6e7075bf5
18 changed files with 292 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/logo/jupyter.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/assets/logo/pytorch_black.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

src/assets/logo/tensorflow.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 286 64"><g><g><defs><path id="SVGID_1_" d="M47.5 17.6L25 4.8v52.6l9-5.2V37.4l6.8 3.9-.1-10.1-6.7-3.9v-5.9l13.5 7.9z"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath><g clip-path="url(#SVGID_2_)"><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1.6" y1="335.05" x2="53.6" y2="335.05" gradientTransform="translate(0 -304)"><stop offset="0" stop-color="#ff6f00"/><stop offset="1" stop-color="#ffa800"/></linearGradient><path d="M-1.6 4.6h55.2v52.9H-1.6V4.6z" fill="url(#SVGID_3_)"/></g></g></g><g><g><defs><path id="SVGID_4_" d="M.5 17.6L23 4.8v52.6l-9-5.2V21.4L.5 29.3z"/></defs><clipPath id="SVGID_5_"><use xlink:href="#SVGID_4_" overflow="visible"/></clipPath><g clip-path="url(#SVGID_5_)"><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-1.9" y1="335.05" x2="53.3" y2="335.05" gradientTransform="translate(0 -304)"><stop offset="0" stop-color="#ff6f00"/><stop offset="1" stop-color="#ffa800"/></linearGradient><path d="M-1.9 4.6h55.2v52.9H-1.9V4.6z" fill="url(#SVGID_6_)"/></g></g></g><path style="fill:#425066" d="M88.2 21.1h-10v27.7h-5.6V21.1h-10v-4.5h25.6v4.5z"/><path style="fill:#425066" d="M94.9 49.2c-3.4 0-6.2-1.1-8.3-3.2-2.1-2.1-3.2-5-3.2-8.6v-.7c0-2.2.4-4.4 1.4-6.4.9-1.8 2.2-3.3 3.9-4.4 1.7-1.1 3.6-1.6 5.6-1.6 3.3 0 5.8 1 7.6 3.1s2.7 5 2.7 8.8v2.2H88.9c.1 1.8.8 3.4 2 4.7 1.2 1.2 2.7 1.8 4.4 1.7 2.4.1 4.6-1.1 6-3l2.9 2.8c-1 1.4-2.3 2.6-3.8 3.3-1.8 1-3.6 1.4-5.5 1.3zm-.6-20.5c-1.4-.1-2.7.5-3.6 1.5-1 1.2-1.6 2.7-1.7 4.3h10.3v-.4c-.1-1.8-.6-3.2-1.4-4.1-1-.8-2.3-1.4-3.6-1.3zm19.4-3.9l.2 2.8c1.7-2.1 4.3-3.3 7-3.2 5 0 7.5 2.9 7.6 8.6v15.8h-5.4V33.3c0-1.5-.3-2.6-1-3.4-.7-.7-1.7-1.1-3.2-1.1-2.1-.1-4 1.1-4.9 2.9v17h-5.4v-24l5.1.1zm32.2 17.5c0-.9-.4-1.7-1.2-2.2-1.2-.7-2.6-1.1-3.9-1.3-1.6-.3-3.1-.8-4.6-1.5-2.7-1.3-4-3.2-4-5.6 0-2 1-4 2.6-5.2 1.7-1.4 4-2.1 6.6-2.1 2.9 0 5.2.7 6.9 2.1 1.7 1.3 2.7 3.4 2.6 5.5h-5.4c0-1-.4-1.9-1.2-2.6-.9-.7-1.9-1.1-3.1-1-1 0-2 .2-2.9.8-.7.5-1.1 1.3-1.1 2.2 0 .8.4 1.5 1 1.9.7.5 2.1.9 4.2 1.4 1.7.3 3.4.9 5 1.7 1.1.5 2 1.3 2.7 2.3.6 1 .9 2.1.9 3.3 0 2.1-1 4-2.7 5.2-1.8 1.3-4.1 2-7 2-1.8 0-3.6-.3-5.2-1.1-1.4-.6-2.7-1.6-3.6-2.9-.8-1.2-1.3-2.6-1.3-4h5.2c0 1.1.5 2.2 1.4 2.9 1 .7 2.3 1.1 3.5 1 1.4 0 2.5-.3 3.2-.8 1-.4 1.4-1.2 1.4-2zm8.1-5.7c0-2.2.4-4.4 1.4-6.3.9-1.8 2.2-3.3 3.9-4.3 1.8-1 3.8-1.6 5.8-1.5 3.2 0 5.9 1 7.9 3.1s3.1 4.8 3.3 8.3v1.3c0 2.2-.4 4.3-1.4 6.3-.8 1.8-2.2 3.3-3.9 4.3-1.8 1-3.8 1.6-5.9 1.5-3.4 0-6.1-1.1-8.1-3.4-2-2.2-3-5.2-3.1-9l.1-.3zm5.3.5c0 2.5.5 4.4 1.5 5.8 1.8 2.3 5.1 2.8 7.5 1 .4-.3.7-.6 1-1 1-1.4 1.5-3.5 1.5-6.2 0-2.4-.5-4.3-1.6-5.8-1.7-2.3-5-2.8-7.4-1.1-.4.3-.8.7-1.1 1-.8 1.4-1.4 3.5-1.4 6.3zm33.1-7.3c-.7-.1-1.5-.2-2.2-.2-2.5 0-4.1.9-5 2.8v16.4h-5.4v-24h5.1l.1 2.7c1.3-2.1 3.1-3.1 5.4-3.1.6 0 1.3.1 1.9.3l.1 5.1zm22.5 5.3h-13v13.7h-5.6V16.6h20.5v4.5h-14.9v9.6h13v4.4zm10.7 13.7h-5.4V16.5h5.4v32.3zm3.9-12.2c0-2.2.4-4.4 1.4-6.3.9-1.8 2.2-3.3 3.9-4.3 1.8-1 3.8-1.6 5.8-1.5 3.2 0 5.9 1 7.9 3.1s3.1 4.8 3.3 8.3v1.3c0 2.2-.4 4.3-1.3 6.3-.8 1.8-2.2 3.3-3.9 4.3-1.8 1-3.8 1.6-5.9 1.5-3.4 0-6.1-1.1-8.1-3.4-2-2.2-3.1-5.2-3.1-9v-.3zm5.4.5c0 2.5.5 4.4 1.5 5.8 1 1.4 2.6 2.2 4.3 2.1 1.7.1 3.3-.7 4.2-2.1 1-1.4 1.5-3.5 1.5-6.2 0-2.4-.5-4.3-1.6-5.8-1.7-2.3-5-2.8-7.4-1.1-.4.3-.8.7-1.1 1-.9 1.4-1.4 3.5-1.4 6.3zm41.2 4.3l3.8-16.5h5.2l-6.5 24h-4.4l-5.1-16.5-5.1 16.5h-4.4l-6.6-24h5.3l3.9 16.4 4.9-16.4h4.1l4.9 16.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

src/assets/logo/ubuntu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/layouts/index.tsx
+1 -1
View File
@@ -358,7 +358,7 @@ export default (props: any) => {
config={{
apiBaseUrl: GPUSTACK_API_BASE_URL,
theme: userSettings.theme,
iconUrl: '//at.alicdn.com/t/c/font_4613488_r6z6oew38db.js',
iconUrl: '//at.alicdn.com/t/c/font_4613488_vy4szhexci.js',
isDarkTheme: userSettings.isDarkTheme,
defaultColorPrimary: COLOR_PRIMARY
}}
src/locales/en-US/gpuservice.ts
+7 -2
View File
@@ -15,10 +15,16 @@ export default {
'gpuservice.template.mountPath': 'Mount Path',
'gpuservice.template.containerDisk': 'Container Disk (GB)',
'gpuservice.template.memory': 'Memory (GB)',
'gpuservice.template.displayName': 'Display Name',
'gpuservice.template.displayName.max':
'Display name cannot exceed 63 characters.',
'gpuservice.template.ports': 'Ports',
'gpuservice.template.ports.add': 'Add Port',
'gpuservice.template.ports.invalid':
'Please complete the port configuration.',
'gpuservice.template.ports.name': 'Name',
'gpuservice.template.ports.name.max':
'Port name cannot exceed 16 characters.',
'gpuservice.template.env': 'Environment Variables',
'gpuservice.template.env.add': 'Add Environment Variable',
'gpuservice.template.env.invalid':
@@ -53,8 +59,7 @@ export default {
'gpuservice.instance.sliced': 'Sliced',
'gpuservice.instance.memory': 'Memory',
'gpuservice.instance.ram': 'RAM',
'gpuservice.instance.search.type.placeholder':
'Search by name, VRAM, memory or vCPU',
'gpuservice.instance.search.type.placeholder': 'Search by name',
'gpuservice.instance.search.template.placeholder':
'Search by template name, image or mount path',
'gpuservice.instance.template.image': 'Image',
src/locales/ja-JP/gpuservice.ts
+7 -2
View File
@@ -15,9 +15,15 @@ export default {
'gpuservice.template.mountPath': 'マウントパス',
'gpuservice.template.containerDisk': 'コンテナディスク (GB)',
'gpuservice.template.memory': 'メモリ (GB)',
'gpuservice.template.displayName': '表示名',
'gpuservice.template.displayName.max':
'表示名は 63 文字以内で入力してください。',
'gpuservice.template.ports': 'ポート',
'gpuservice.template.ports.add': 'ポートを追加',
'gpuservice.template.ports.invalid': 'ポート設定を完成させてください。',
'gpuservice.template.ports.name': '名前',
'gpuservice.template.ports.name.max':
'ポート名は 16 文字以内で入力してください。',
'gpuservice.template.env': '環境変数',
'gpuservice.template.env.add': '環境変数を追加',
'gpuservice.template.env.invalid': '環境変数を完成させてください。',
@@ -51,8 +57,7 @@ export default {
'gpuservice.instance.sliced': '分割',
'gpuservice.instance.memory': 'Memory',
'gpuservice.instance.ram': 'RAM',
'gpuservice.instance.search.type.placeholder':
'名前、VRAM、メモリまたは vCPU で検索',
'gpuservice.instance.search.type.placeholder': '名前で検索',
'gpuservice.instance.search.template.placeholder':
'テンプレート名、イメージまたはマウントパスで検索',
'gpuservice.instance.template.image': 'イメージ',
src/locales/ru-RU/gpuservice.ts
+7 -2
View File
@@ -16,9 +16,15 @@ export default {
'gpuservice.template.mountPath': 'Путь монтирования',
'gpuservice.template.containerDisk': 'Диск контейнера (GB)',
'gpuservice.template.memory': 'Память (GB)',
'gpuservice.template.displayName': 'Отображаемое имя',
'gpuservice.template.displayName.max':
'Отображаемое имя не должно превышать 63 символа.',
'gpuservice.template.ports': 'Порты',
'gpuservice.template.ports.add': 'Добавить порт',
'gpuservice.template.ports.invalid': 'Заполните настройки портов полностью.',
'gpuservice.template.ports.name': 'Имя',
'gpuservice.template.ports.name.max':
'Имя порта не должно превышать 16 символов.',
'gpuservice.template.env': 'Переменные окружения',
'gpuservice.template.env.add': 'Добавить переменную окружения',
'gpuservice.template.env.invalid':
@@ -53,8 +59,7 @@ export default {
'gpuservice.instance.sliced': 'Разделено',
'gpuservice.instance.memory': 'Память',
'gpuservice.instance.ram': 'RAM',
'gpuservice.instance.search.type.placeholder':
'Поиск по имени, VRAM, памяти или vCPU',
'gpuservice.instance.search.type.placeholder': 'Поиск по имени',
'gpuservice.instance.search.template.placeholder':
'Поиск по имени шаблона, образу или пути монтирования',
'gpuservice.instance.template.image': 'Образ',
src/locales/tr-TR/gpuservice.ts
+7 -2
View File
@@ -15,10 +15,16 @@ export default {
'gpuservice.template.mountPath': 'Bağlama Yolu',
'gpuservice.template.containerDisk': 'Konteyner Diski (GB)',
'gpuservice.template.memory': 'Bellek (GB)',
'gpuservice.template.displayName': 'Görünen Ad',
'gpuservice.template.displayName.max':
'Görünen ad 63 karakterden uzun olamaz.',
'gpuservice.template.ports': 'Bağlantı Noktaları',
'gpuservice.template.ports.add': 'Bağlantı Noktası Ekle',
'gpuservice.template.ports.invalid':
'Bağlantı noktası yapılandırmasını eksiksiz doldurun.',
'gpuservice.template.ports.name': 'Ad',
'gpuservice.template.ports.name.max':
'Bağlantı noktası adı 16 karakterden uzun olamaz.',
'gpuservice.template.env': 'Ortam Değişkenleri',
'gpuservice.template.env.add': 'Ortam Değişkeni Ekle',
'gpuservice.template.env.invalid': 'Ortam değişkenlerini eksiksiz doldurun.',
@@ -52,8 +58,7 @@ export default {
'gpuservice.instance.sliced': 'Bölünmüş',
'gpuservice.instance.memory': 'Bellek',
'gpuservice.instance.ram': 'RAM',
'gpuservice.instance.search.type.placeholder':
"Ada, VRAM, belleğe veya vCPU'ya göre ara",
'gpuservice.instance.search.type.placeholder': 'Ada göre ara',
'gpuservice.instance.search.template.placeholder':
'Şablon adına, imaja veya bağlama yoluna göre ara',
'gpuservice.instance.template.image': 'İmaj',
src/locales/zh-CN/gpuservice.ts
+5 -1
View File
@@ -15,9 +15,13 @@ export default {
'gpuservice.template.mountPath': '挂载路径',
'gpuservice.template.containerDisk': '容器磁盘(GB)',
'gpuservice.template.memory': '内存(GB)',
'gpuservice.template.displayName': '显示名称',
'gpuservice.template.displayName.max': '显示名称不能超过 63 个字符',
'gpuservice.template.ports': '端口',
'gpuservice.template.ports.add': '添加端口',
'gpuservice.template.ports.invalid': '请填写完整的端口配置',
'gpuservice.template.ports.name': '名称',
'gpuservice.template.ports.name.max': '端口名称不能超过 16 个字符',
'gpuservice.template.env': '环境变量',
'gpuservice.template.env.add': '添加环境变量',
'gpuservice.template.env.invalid': '请填写完整的环境变量',
@@ -50,7 +54,7 @@ export default {
'gpuservice.instance.sliced': '切分',
'gpuservice.instance.memory': '显存',
'gpuservice.instance.ram': '内存',
'gpuservice.instance.search.type.placeholder': '搜索名称、显存、内存或 vCPU',
'gpuservice.instance.search.type.placeholder': '搜索名称',
'gpuservice.instance.search.template.placeholder':
'搜索模板名称、镜像或挂载路径',
'gpuservice.instance.template.image': '镜像',
src/pages/gpu-service/instances/components/add-modal.tsx
+13 -16
View File
@@ -176,16 +176,7 @@ const AddModal: React.FC<AddModalProps> = ({
// filter instance types
const filteredInstanceTypes = instanceTypeList.filter((item) =>
matchKeyword(
[
item.metadata?.name,
item.spec?.memory,
item.status?.cpu?.capacity,
item.status?.ram?.capacity,
item.status?.accelerator?.remaining
],
instanceKeyword
)
matchKeyword([item.metadata?.name], instanceKeyword)
);
// filter templates based on selection and keyword
@@ -256,17 +247,20 @@ const AddModal: React.FC<AddModalProps> = ({
<div className={styles.colWrapper}>
<ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
<div className={styles.panelBody}>
<ColTitle style={{ paddingBottom: 0 }}>
{intl.formatMessage({ id: 'gpuservice.instance.types' })}
</ColTitle>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 16,
position: 'sticky',
top: 0,
zIndex: 10,
backgroundColor: 'var(--ant-color-bg-elevated)'
}}
>
<ColTitle style={{ paddingBottom: 0 }}>
{intl.formatMessage({ id: 'gpuservice.instance.types' })}
</ColTitle>
<Input
allowClear
prefix={<SearchOutlined className="text-tertiary" />}
@@ -290,17 +284,20 @@ const AddModal: React.FC<AddModalProps> = ({
<div className={styles.colWrapper}>
<ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
<div className={styles.panelBody}>
<ColTitle style={{ paddingBottom: 0 }}>
{intl.formatMessage({ id: 'gpuservice.instance.templates' })}
</ColTitle>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 16,
position: 'sticky',
top: 0,
zIndex: 10,
backgroundColor: 'var(--ant-color-bg-elevated)'
}}
>
<ColTitle style={{ paddingBottom: 0 }}>
{intl.formatMessage({ id: 'gpuservice.instance.templates' })}
</ColTitle>
<Input
allowClear
prefix={<SearchOutlined className="text-tertiary" />}
src/pages/gpu-service/instances/config/types.ts
+1
View File
@@ -15,6 +15,7 @@ export interface FormData {
ports: {
port: number;
protocol?: string;
name?: string;
}[];
env: {
name: string;
src/pages/gpu-service/instances/forms/template-selector.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ const TemplateSelector: React.FC<TemplateSelectorProps> = ({
<TemplateContent>
<div className="name">
<AutoTooltip ghost minWidth={20}>
{item.name}
{item.displayName || item.name || '-'}
</AutoTooltip>
</div>
<div className="info">
src/pages/gpu-service/templates/components/template-card.tsx
+84 -4
View File
@@ -2,17 +2,27 @@ import ascendLogo from '@/assets/logo/ascend.png';
import CambriconPNG from '@/assets/logo/cambricon.png';
import hyponPNG from '@/assets/logo/hygon.png';
import iluvatarWEBP from '@/assets/logo/Iluvatar.png';
import jupyterLogo from '@/assets/logo/jupyter.png';
import metaxLogo from '@/assets/logo/metax.png';
import mooreLogo from '@/assets/logo/moore-logo.png';
import nvidiaLogo from '@/assets/logo/nvidia.png';
import pytorchBlackLogo from '@/assets/logo/pytorch_black.png';
import sgLangLogo from '@/assets/logo/sglang.png';
import theadLogoEN from '@/assets/logo/t-head-en.png';
import theadLogoZH from '@/assets/logo/t-head-zh.png';
import { manfacturerValueMap } from '@/pages/resources/config/gpu-driver';
import tensorflowkLogo from '@/assets/logo/tensorflow.svg';
import ubuntuLogo from '@/assets/logo/ubuntu.png';
import vllmLogo from '@/assets/logo/vllm.png';
import {
GPUsConfigs,
manfacturerValueMap
} from '@/pages/resources/config/gpu-driver';
import {
AutoTooltip,
DropdownActions,
IconFont,
TemplateCard
TemplateCard,
ThemeTag
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Tag } from 'antd';
@@ -20,6 +30,56 @@ import styled from 'styled-components';
import { templateActions } from '../config';
import { ListItem } from '../config/types';
const imageLogoMap = {
vllm: vllmLogo,
sglang: sgLangLogo,
cann: ascendLogo,
jupyter: jupyterLogo,
pytorch: pytorchBlackLogo,
tensorflow: tensorflowkLogo,
ubuntu: ubuntuLogo
} as const;
export const manufactureColorMap: Record<string, string> = {
nvidia: 'green',
amd: 'volcano',
ascend: 'orange',
hygon: 'magenta',
moorthreads: 'cyan',
iluvatar: 'purple',
metax: 'geekblue',
cambricon: 'gold',
thead: 'red',
cpu: 'blue'
};
const manufacturerLabelMap: Record<string, string> = Object.values(
GPUsConfigs
).reduce(
(acc, item) => {
if (item.gpuVendor) acc[item.gpuVendor] = item.label;
return acc;
},
{ cpu: 'CPU' } as Record<string, string>
);
const matchImageLogo = (image: string | undefined): string | null => {
if (!image) return null;
const lower = image.toLowerCase();
let matched: keyof typeof imageLogoMap | null = null;
let earliest = Infinity;
(Object.keys(imageLogoMap) as Array<keyof typeof imageLogoMap>).forEach(
(key) => {
const idx = lower.indexOf(key);
if (idx !== -1 && idx < earliest) {
earliest = idx;
matched = key;
}
}
);
return matched ? imageLogoMap[matched] : null;
};
const StyledCard = styled(TemplateCard)`
&:hover {
.operations {
@@ -38,6 +98,8 @@ const Header = styled.div`
.title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
`;
@@ -73,7 +135,7 @@ const InfoItem = styled.div`
color: var(--ant-color-text-quaternary);
}
.value {
color: var(--ant-color-text-secondary);
color: var(--ant-color-text-tertiary);
}
`;
@@ -98,6 +160,10 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
};
const renderLogo = () => {
const imageLogo = matchImageLogo(data.spec?.image);
if (imageLogo) {
return <LogoImg src={imageLogo} height={22} />;
}
switch (data.manufacturer) {
case manfacturerValueMap.NVIDIA:
return <LogoImg src={nvidiaLogo} height={18} />;
@@ -141,6 +207,19 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
}
};
const renderManufacturerTag = () => {
if (!data.manufacturer) return null;
const label =
manufacturerLabelMap[data.manufacturer] ??
data.manufacturer.toUpperCase();
const color = manufactureColorMap[data.manufacturer] ?? 'purple';
return (
<ThemeTag color={color} style={{ fontWeight: 400 }}>
{label}
</ThemeTag>
);
};
const renderActions = () => {
return (
<span onClick={handleonClickAction} className="operations">
@@ -177,8 +256,9 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
<Content>
<CardName>
<AutoTooltip ghost minWidth={20}>
{data.name || '-'}
{data.displayName || data.name || '-'}
</AutoTooltip>
{renderManufacturerTag()}
</CardName>
<InfoItem>
<span>
src/pages/gpu-service/templates/config/types.ts
+2
View File
@@ -1,6 +1,7 @@
export interface PortItem {
protocol: 'UDP' | 'TCP';
port: number;
name?: string;
}
export type ImagePullPolicy = 'Always' | 'IfNotPresent' | 'Never';
@@ -13,6 +14,7 @@ export interface EnvItem {
export interface FormData {
name: string;
description: string;
displayName?: string;
manufacturer: string;
spec: {
image: string;
src/pages/gpu-service/templates/forms/basic.tsx
+19
View File
@@ -76,6 +76,25 @@ const Basic: React.FC<BasicProps> = ({ page = 'template', onceMaxRequest }) => {
required
/>
</Form.Item>
<Form.Item<FormData>
name="displayName"
rules={[
{
max: 63,
message: intl.formatMessage({
id: 'gpuservice.template.displayName.max'
})
}
]}
>
<CInput.Input
label={intl.formatMessage({
id: 'gpuservice.template.displayName'
})}
showCount
maxLength={63}
/>
</Form.Item>
<Form.Item<FormData>
name="manufacturer"
rules={[
src/pages/gpu-service/templates/forms/index.tsx
+3 -1
View File
@@ -36,6 +36,7 @@ const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
const handleFinish = async (values: FormData) => {
await onFinish({
...values,
displayName: values.displayName?.trim() || values.name,
spec: {
...values.spec,
command: values.spec?.command?.filter(Boolean) ?? []
@@ -65,7 +66,8 @@ const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
ports: [
{
protocol: 'TCP',
port: 22
port: 22,
name: 'SSH'
}
],
volumeMount: '/workspace',
src/pages/gpu-service/templates/forms/ports.tsx
+134 -5
View File
@@ -1,14 +1,18 @@
import {
Input as CInput,
InputNumber as CInputNumber,
MetadataList,
Select as SealSelect
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { FormData, PortItem as PortItemType } from '../config/types';
type PortProtocol = PortItemType['protocol'];
const PORT_NAME_MAX = 16;
const protocolOptions = [
{
label: 'UDP',
@@ -20,43 +24,154 @@ const protocolOptions = [
}
];
const wellKnownTcpPortNames: Record<number, string> = {
22: 'SSH',
80: 'HTTP',
443: 'HTTPS'
};
const getAutoFilledName = (
protocol: PortProtocol | undefined,
port: number | undefined,
previousProtocol: PortProtocol | undefined,
previousPort: number | undefined,
currentName: string | undefined
): string | undefined => {
if (protocol !== 'TCP' || !port) {
return currentName;
}
const suggested = wellKnownTcpPortNames[port];
if (!suggested) {
return currentName;
}
const previousSuggested =
previousProtocol === 'TCP' && previousPort
? wellKnownTcpPortNames[previousPort]
: undefined;
// Only overwrite when the name is empty or matches a previously suggested
// well-known name — never stomp on a user-entered value.
if (!currentName || currentName === previousSuggested) {
return suggested;
}
return currentName;
};
interface PortItemProps {
item: PortItemType;
index: number;
onChange: (item: PortItemType) => void;
}
interface PortNameInputProps {
value: string | undefined;
onChange: (value: string) => void;
placeholder: string;
}
const PortNameInput: React.FC<PortNameInputProps> = ({
value,
onChange,
placeholder
}) => {
const [localValue, setLocalValue] = useState<string>(value ?? '');
const isComposingRef = useRef(false);
useEffect(() => {
if (!isComposingRef.current) {
setLocalValue(value ?? '');
}
}, [value]);
return (
<CInput.Input
showCount
maxLength={PORT_NAME_MAX}
value={localValue}
placeholder={placeholder}
onCompositionStart={() => {
isComposingRef.current = true;
}}
onCompositionEnd={(e) => {
isComposingRef.current = false;
const next = (e.target as HTMLInputElement).value;
setLocalValue(next);
onChange(next);
}}
onChange={(e) => {
const next = e.target.value;
setLocalValue(next);
if (!isComposingRef.current) {
onChange(next);
}
}}
style={{ width: '100%' }}
/>
);
};
const PortItem: React.FC<PortItemProps> = ({ item, index, onChange }) => {
const intl = useIntl();
return (
<div style={{ display: 'flex', gap: 12, width: '100%' }}>
<div style={{ flex: 1 }}>
<div style={{ width: 120 }}>
<SealSelect
value={item.protocol}
options={protocolOptions}
onChange={(value) => {
const nextProtocol = value as PortProtocol;
onChange({
...item,
protocol: value as PortProtocol
protocol: nextProtocol,
name: getAutoFilledName(
nextProtocol,
item.port,
item.protocol,
item.port,
item.name
)
});
}}
style={{ width: '100%' }}
></SealSelect>
</div>
<div style={{ flex: 1 }}>
<div style={{ width: 120 }}>
<CInputNumber
min={1}
max={65535}
precision={0}
value={item.port}
onChange={(value) => {
const nextPort =
typeof value === 'number' ? value : (undefined as any);
onChange({
...item,
port: typeof value === 'number' ? value : (undefined as any)
port: nextPort,
name: getAutoFilledName(
item.protocol,
nextPort,
item.protocol,
item.port,
item.name
)
});
}}
style={{ width: '100%' }}
/>
</div>
<div style={{ flex: 1 }}>
<PortNameInput
value={item.name}
placeholder={intl.formatMessage({
id: 'gpuservice.template.ports.name'
})}
onChange={(next) => {
onChange({
...item,
name: next
});
}}
/>
</div>
</div>
);
};
@@ -75,7 +190,8 @@ const Ports: React.FC = () => {
...ports,
{
protocol: 'TCP',
port: undefined as any
port: undefined as any,
name: ''
}
]);
};
@@ -113,6 +229,19 @@ const Ports: React.FC = () => {
)
);
}
const hasInvalidName = value.some(
(item: PortItemType) =>
item.name && item.name.length > PORT_NAME_MAX
);
if (hasInvalidName) {
return Promise.reject(
new Error(
intl.formatMessage({
id: 'gpuservice.template.ports.name.max'
})
)
);
}
return Promise.resolve();
}
}