feat: template port name

src/pages/gpu-service/templates/forms/basic.tsx

@@ -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

@@ -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

@@ -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();
           }
         }