style: instance cell style

src/components/drop-down-buttons/index.tsx

@@ -123,7 +123,7 @@ const DropdownButtons: React.FC<
             menu={{
               onClick: handleMenuClick,
               items: _.tail(items).map((item: any) => ({
-                ...item,
+                ..._.omit(item, ['label', 'locale']),
                 ...item.props,
                 label:
                   item.locale || item.locale === undefined

src/components/logs-viewer/virtual-log-list.tsx

@@ -71,7 +71,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   };
 
   const setCurrentData = (lines: string[]) => {
-    console.log('setCurrentData', lines);
     const dataList = lines.map((line, index) => {
       return {
         content: line,
@@ -140,7 +139,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const handleonToFirst = useCallback(() => {
     pageRef.current = 1;
     getCurrent();
-    console.log('pageRef.current', pageRef.current);
     setScrollPos(['top', pageRef.current]);
     scrollPosRef.current = {
       pos: 'top',
@@ -182,13 +180,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     async (data: { isTop: boolean; isBottom: boolean }) => {
       const { isTop, isBottom } = data;
       setIsAtTop(isTop);
-      console.log('scroll========', {
-        isTop,
-        isBottom,
-        loadMoreDone: loadMoreDone.current,
-        loading: loading,
-        lineCount: lineCountRef.current
-      });
       if (isBottom) {
         scrollPosRef.current = {
           pos: 'bottom',

src/locales/en-US/models.ts

@@ -280,6 +280,6 @@ export default {
   'models.form.backend.helperText':
     'Not enabled yet. Will be enabled after deployment. ',
   'models.table.instance.benchmark': 'Run Benchmark',
-  'models.table.modelView': 'Model View',
+  'models.table.modelView': 'Model List',
-  'models.table.instanceView': 'Instance View'
+  'models.table.instanceView': 'Instance List'
 };

src/locales/ja-JP/models.ts

@@ -280,8 +280,8 @@ export default {
   'models.form.backend.helperText':
     'Not enabled yet. Will be enabled after deployment. ',
   'models.table.instance.benchmark': 'Run Benchmark',
-  'models.table.modelView': 'Model View',
+  'models.table.modelView': 'Model List',
-  'models.table.instanceView': 'Instance View'
+  'models.table.instanceView': 'Instance List'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/ru-RU/models.ts

@@ -284,8 +284,8 @@ export default {
   'models.form.backend.helperText':
     'Not enabled yet. Will be enabled after deployment. ',
   'models.table.instance.benchmark': 'Run Benchmark',
-  'models.table.modelView': 'Model View',
+  'models.table.modelView': 'Model List',
-  'models.table.instanceView': 'Instance View'
+  'models.table.instanceView': 'Instance List'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -296,6 +296,6 @@ export default {
 // 3.  'models.form.enableModelRoute.tips': 'Enable Model Route',
 // 4. 'models.form.backend.vllm': 'Built-in support for NVIDIA, AMD, Ascend, Hygon, Moore Threads, Iluvatar, MetaX, T-Head PPU devices.',
 // 5.  'models.form.backend.sglang': 'Built-in support for NVIDIA, AMD, Ascend, Moore Threads, MetaX, T-Head PPU devices.',
-// 6.  'models.table.modelView': 'Model View',
+// 6.  'models.table.modelView': 'Model List',
-// 7.  'models.table.instanceView': 'Instance View'
+// 7.  'models.table.instanceView': 'Instance List'
 // ========== End of To-Do List ==========

src/locales/zh-CN/models.ts

@@ -264,6 +264,6 @@ export default {
   'models.form.maxContextLength': '最大上下文长度',
   'models.form.backend.helperText': '该社区后端暂未启用，部署后将自动启用',
   'models.table.instance.benchmark': '运行基准测试',
-  'models.table.modelView': '模型视图',
+  'models.table.modelView': '模型列表',
-  'models.table.instanceView': '实例视图'
+  'models.table.instanceView': '实例列表'
 };

src/pages/_components/page-box.tsx

@@ -32,7 +32,7 @@ export const PageContainerInner: React.FC<PageContainerProps> = ({
   return (
     <StyledPageContainer
       {...rest}
-      fixedHeader
+      fixedHeader={true}
       token={{
         paddingInlinePageContainerContent: paddingInlinePageContainerContent
       }}

src/pages/llmodels/components/instance-cells/distribute-info-cell.tsx

@@ -163,7 +163,7 @@ const DistributeInfoCell: React.FC<{
             marginRight: 0,
             display: 'flex',
             alignItems: 'center',
-            maxWidth: '100%',
+            maxWidth: 'max-content',
             minWidth: 50,
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',

src/pages/llmodels/components/instance-cells/name-cell.tsx

@@ -14,10 +14,11 @@ import React, { useEffect } from 'react';
 import { ModelInstanceListItem } from '../../config/types';
 import '../../style/instance-item.less';
 
-interface NameCellProps {
+export interface NameCellProps {
   record: ModelInstanceListItem;
   modelData: any;
   defaultOpenId?: string;
+  showWorkerInfo?: boolean;
 }
 
 const calcTotalVram = (vram: Record<string, number>) => {
@@ -108,14 +109,15 @@ const WorkerInfo = (props: {
 const NameCell: React.FC<NameCellProps> = ({
   record,
   modelData,
-  defaultOpenId
+  defaultOpenId,
+  showWorkerInfo = true
 }) => {
   return (
     <span className="flex-center instance-name">
       <AutoTooltip title={record.name} ghost>
         <span className="m-r-5">{record.name}</span>
       </AutoTooltip>
-      {!!record.worker_id && (
+      {!!record.worker_id && showWorkerInfo && (
         <WorkerInfo
           title={
             <WorkerInfoContent

src/pages/llmodels/components/view-logs-modal.tsx

@@ -96,7 +96,6 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
           </span>
         </span>
       }
-      zIndex={3000}
       open={open}
       centered={true}
       onCancel={handleCancel}

src/pages/llmodels/instance-view/index.tsx

@@ -53,7 +53,9 @@ const InstanceView = forwardRef((props, ref) => {
 
   const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
     if (val === 'delete') {
-      handleDelete(row);
+      handleDelete(row, {
+        okText: 'common.button.delrecreate'
+      });
     }
 
     if (val === 'viewlog') {
@@ -151,6 +153,7 @@ const InstanceView = forwardRef((props, ref) => {
           <Table
             rowKey="id"
             tableLayout="fixed"
+            className={'scroll-table'}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}
             dataSource={dataSource.dataList}

src/pages/llmodels/instance-view/use-instance-columns.tsx

@@ -1,8 +1,10 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
+import IconFont from '@/components/icon-font';
 import { tableSorter } from '@/config/settings';
 import { ListItem as workerListItem } from '@/pages/resources/config/types';
 import { convertFileSize } from '@/utils';
+import { ThunderboltFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
@@ -12,11 +14,55 @@ import ActionsCell from '../components/instance-cells/actions-cell';
 import DistributeInfoCell from '../components/instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../components/instance-cells/downloading-status-cell';
 import InstanceStatusCell from '../components/instance-cells/instance-status-cell';
-import NameCell from '../components/instance-cells/name-cell';
+import NameCell, {
+  NameCellProps
+} from '../components/instance-cells/name-cell';
 import { ModelInstanceListItem as ListItem } from '../config/types';
+import { calcTotalVram } from '../utils';
 
-const calcTotalVram = (vram: Record<string, number>) => {
+const WorkerInfoContent: React.FC<NameCellProps> = ({ record, modelData }) => {
-  return _.sum(_.values(vram));
+  let workerIp = '-';
+  if (record.worker_ip) {
+    workerIp = record.port
+      ? `${record.worker_ip}:${record.port}`
+      : record.worker_ip;
+  }
+  return (
+    <div>
+      <div>{record.worker_name}</div>
+      {/* <div className="flex-center">
+        <HddFilled className="m-r-5 text-tertiary" style={{ fontSize: 12 }} />
+        <span className="text-secondary">{workerIp}</span>
+      </div> */}
+      <div className="flex-center">
+        <IconFont
+          type="icon-filled-gpu"
+          className="m-r-5 text-tertiary"
+          style={{ fontSize: 12 }}
+        />
+        <span className="text-tertiary">
+          GPU:[
+          {_.join(
+            record.gpu_indexes?.sort?.((a, b) => a - b),
+            ','
+          )}
+          ]
+        </span>
+      </div>
+      {/* <div className="flex-center">
+        <ThunderboltFilled
+          className="m-r-5 text-tertiary"
+          style={{ fontSize: 12 }}
+        />
+        <span className="text-secondary">
+          {record?.backend || modelData?.backend || ''}
+          {record.backend_version || modelData?.backend_version
+            ? `(${record.backend_version || modelData?.backend_version})`
+            : ''}
+        </span>
+      </div> */}
+    </div>
+  );
 };
 
 const useProviderColumns = (options: {
@@ -35,6 +81,21 @@ const useProviderColumns = (options: {
   const intl = useIntl();
   const { workerList, clusterList, handleSelect, onCellClick } = options;
 
+  const renderWorkerCell = (text: number, record: ListItem) => {
+    if (text) {
+      return (
+        <WorkerInfoContent
+          record={record}
+          modelData={{
+            backend: record.backend,
+            backend_version: record.backend_version
+          }}
+        ></WorkerInfoContent>
+      );
+    }
+    return null;
+  };
+
   return useMemo(() => {
     return [
       {
@@ -43,13 +104,28 @@ const useProviderColumns = (options: {
         sorter: tableSorter(1),
         minWidth: 160,
         render: (value: string, record: ListItem) => (
-          <NameCell
+          <>
-            record={record}
+            <NameCell
-            modelData={{
+              showWorkerInfo={false}
-              backend: record.backend,
+              record={record}
-              backend_version: record.backend_version
+              modelData={{
-            }}
+                backend: record.backend,
-          ></NameCell>
+                backend_version: record.backend_version
+              }}
+            ></NameCell>
+            <div className="flex-center">
+              <ThunderboltFilled
+                className="m-r-5 text-tertiary"
+                style={{ fontSize: 12 }}
+              />
+              <span className="text-tertiary">
+                {record?.backend || record?.backend || ''}
+                {record.backend_version || record?.backend_version
+                  ? `(${record.backend_version || record?.backend_version})`
+                  : ''}
+              </span>
+            </div>
+          </>
         )
       },
       {
@@ -67,19 +143,14 @@ const useProviderColumns = (options: {
       {
         title: intl.formatMessage({ id: 'resources.worker' }),
         dataIndex: 'worker_id',
-        minWidth: 200,
         render: (text, record) => (
-          <AutoTooltip ghost>
+          <div className="flex-center gap-8">
-            {text &&
+            <AutoTooltip ghost>{renderWorkerCell(text, record)}</AutoTooltip>
-            (!record.distributed_servers?.subordinate_workers ||
-              !record.distributed_servers?.subordinate_workers.length)
-              ? workerList.find((worker) => worker.id === text)?.name
-              : ''}
             <DistributeInfoCell
               record={record}
               workerList={workerList}
             ></DistributeInfoCell>
-          </AutoTooltip>
+          </div>
         )
       },
       {
@@ -89,9 +160,7 @@ const useProviderColumns = (options: {
         render: (text, record) => (
           <AutoTooltip ghost>
             {convertFileSize(
-              record.computed_resource_claim?.vram
+              record.computed_resource_claim?.vram ? calcTotalVram(record) : 0,
-                ? calcTotalVram(record.computed_resource_claim?.vram)
-                : 0,
               1
             )}
           </AutoTooltip>
@@ -128,7 +197,7 @@ const useProviderColumns = (options: {
         title: intl.formatMessage({ id: 'common.table.operation' }),
         dataIndex: 'operations',
         span: 3,
-        minWidth: 120,
+        width: 120,
         render: (value: string, record: ListItem) => (
           <ActionsCell
             record={record}

src/pages/llmodels/style/instance-item.less

@@ -1,6 +1,4 @@
 .instance-name {
-  min-height: 54px;
-
   &:hover {
     .server-info {
       .text {

src/pages/llmodels/utils/index.ts

@@ -69,3 +69,15 @@ export const generateGPUIds = (data: FormData) => {
     worker_selector: null
   };
 };
+
+export const calcTotalVram = (record: any) => {
+  const vramInMain = _.sum(
+    _.values(record.computed_resource_claim?.vram || {})
+  );
+  const vramInDistributed = _.sum(
+    _.values(record.distributed_servers?.subordinate_workers || []).map(
+      (item: any) => _.sum(_.values(item.computed_resource_claim?.vram || {}))
+    )
+  );
+  return vramInMain + vramInDistributed;
+};