fix: backend input focus not work

gpustack · Dec 24, 2024 · bafbb39 · bafbb39
1 parent 02391e6
commit bafbb39
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 52 deletions.
diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_v10ij8hozhi.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_fabphdpng0n.js'
 });
 
 export default IconFont;
diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx
@@ -509,53 +509,50 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         ></SealInput.Number>
       </Form.Item>
       <Form.Item name="backend">
-        <div id="backend-field">
-          <SealSelect
-            onChange={handleBackendChange}
-            label={intl.formatMessage({ id: 'models.form.backend' })}
-            description={
+        <SealSelect
+          onChange={handleBackendChange}
+          label={intl.formatMessage({ id: 'models.form.backend' })}
+          description={
+            <div>
               <div>
-                <div>
-                  1.{' '}
-                  {intl.formatMessage({ id: 'models.form.backend.llamabox' })}
-                </div>
-                <div>
-                  2. {intl.formatMessage({ id: 'models.form.backend.vllm' })}
-                </div>
-                <div>
-                  3. {intl.formatMessage({ id: 'models.form.backend.voxbox' })}
-                </div>
+                1. {intl.formatMessage({ id: 'models.form.backend.llamabox' })}
               </div>
+              <div>
+                2. {intl.formatMessage({ id: 'models.form.backend.vllm' })}
+              </div>
+              <div>
+                3. {intl.formatMessage({ id: 'models.form.backend.voxbox' })}
+              </div>
+            </div>
+          }
+          options={[
+            {
+              label: `llama-box`,
+              value: backendOptionsMap.llamaBox,
+              disabled:
+                props.source === modelSourceMap.local_path_value
+                  ? false
+                  : !isGGUF
+            },
+            {
+              label: 'vLLM',
+              value: backendOptionsMap.vllm,
+              disabled:
+                props.source === modelSourceMap.local_path_value
+                  ? false
+                  : isGGUF
+            },
+            {
+              label: 'vox-box',
+              value: backendOptionsMap.voxBox,
+              disabled: props.source === modelSourceMap.ollama_library_value
             }
-            options={[
-              {
-                label: `llama-box`,
-                value: backendOptionsMap.llamaBox,
-                disabled:
-                  props.source === modelSourceMap.local_path_value
-                    ? false
-                    : !isGGUF
-              },
-              {
-                label: 'vLLM',
-                value: backendOptionsMap.vllm,
-                disabled:
-                  props.source === modelSourceMap.local_path_value
-                    ? false
-                    : isGGUF
-              },
-              {
-                label: 'vox-box',
-                value: backendOptionsMap.voxBox,
-                disabled: props.source === modelSourceMap.ollama_library_value
-              }
-            ]}
-            disabled={
-              action === PageAction.EDIT &&
-              props.source !== modelSourceMap.local_path_value
-            }
-          ></SealSelect>
-        </div>
+          ]}
+          disabled={
+            action === PageAction.EDIT &&
+            props.source !== modelSourceMap.local_path_value
+          }
+        ></SealSelect>
       </Form.Item>
       <Form.Item<FormData> name="description">
         <SealInput.TextArea

diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
@@ -1,5 +1,6 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
 import RowChildren from '@/components/seal-table/components/row-children';
 import SimpleTabel from '@/components/simple-table';
 import StatusTag from '@/components/status-tag';
@@ -10,7 +11,9 @@ import {
 import {
   DeleteOutlined,
   FieldTimeOutlined,
-  InfoCircleOutlined
+  HddFilled,
+  InfoCircleOutlined,
+  ThunderboltFilled
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Col, Divider, Row, Space, Tag, Tooltip } from 'antd';
@@ -19,6 +22,7 @@ import _ from 'lodash';
 import React, { useCallback } from 'react';
 import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
+import '../style/instance-item.less';
 
 interface InstanceItemProps {
   list: ModelInstanceListItem[];
@@ -97,12 +101,17 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     return (
       <div>
         <div>{item.worker_name}</div>
-        <div>{workerIp}</div>
-        <div>
+        <div className="flex-center">
+          <HddFilled className="m-r-5" />
+          {workerIp}
+        </div>
+        <div className="flex-center">
+          <IconFont type="icon-filled-gpu" className="m-r-5" />
           {intl.formatMessage({ id: 'models.table.gpuindex' })}: [
           {_.join(item.gpu_indexes?.sort?.(), ',')}]
         </div>
-        <div>
+        <div className="flex-center">
+          <ThunderboltFilled className="m-r-5" />
           {intl.formatMessage({ id: 'models.form.backend' })}:{' '}
           {modelData?.backend || ''}
           {modelData.backend_version ? `(${modelData.backend_version})` : ''}
@@ -150,7 +159,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       {_.map(list, (item: ModelInstanceListItem, index: number) => {
         return (
           <div
-            className="_2Q2Yw"
             key={`${item.id}`}
             style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
           >
@@ -162,12 +170,14 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     paddingInline: 'var(--ant-table-cell-padding-inline)'
                   }}
                 >
-                  <span className="flex-center">
+                  <span className="flex-center instance-name">
                     <AutoTooltip title={item.name} ghost>
                       <span className="m-r-5">{item.name}</span>
                     </AutoTooltip>
                     <Tooltip title={renderWorkerInfo(item)}>
-                      <InfoCircleOutlined />
+                      <span className="server-info">
+                        <InfoCircleOutlined />
+                      </span>
                     </Tooltip>
                   </span>
                 </Col>

diff --git a/src/pages/llmodels/style/instance-item.less b/src/pages/llmodels/style/instance-item.less
@@ -0,0 +1,23 @@
+.instance-name {
+  min-height: 54px;
+
+  &:hover {
+    .server-info {
+      .text {
+        display: block;
+      }
+
+      color: var(--ant-blue-5);
+    }
+  }
+
+  .server-info {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .text {
+      display: none;
+    }
+  }
+}