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

style: instance cell style

Browse Source
This commit is contained in:
jialin
2026-03-26 18:20:55 +08:00
committed by jialin
parent 43dfc7e1f0
commit 144d5a6d5f
14 changed files with 125 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/drop-down-buttons/index.tsx
+1 -1
View File
@@ -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
-9
View File
@@ -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
+2 -2
View File
@@ -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.instanceView': 'Instance View'
'models.table.modelView': 'Model List',
'models.table.instanceView': 'Instance List'
};
src/locales/ja-JP/models.ts
+2 -2
View File
@@ -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.instanceView': 'Instance View'
'models.table.modelView': 'Model List',
'models.table.instanceView': 'Instance List'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
src/locales/ru-RU/models.ts
+4 -4
View File
@@ -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.instanceView': 'Instance View'
'models.table.modelView': 'Model List',
'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',
// 7. 'models.table.instanceView': 'Instance View'
// 6. 'models.table.modelView': 'Model List',
// 7. 'models.table.instanceView': 'Instance List'
// ========== End of To-Do List ==========
src/locales/zh-CN/models.ts
+2 -2
View File
@@ -264,6 +264,6 @@ export default {
'models.form.maxContextLength': '最大上下文长度',
'models.form.backend.helperText': '该社区后端暂未启用，部署后将自动启用',
'models.table.instance.benchmark': '运行基准测试',
'models.table.modelView': '模型视图',
'models.table.instanceView': '实例视图'
'models.table.modelView': '模型列表',
'models.table.instanceView': '实例列表'
};
src/pages/_components/page-box.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+5 -3
View File
@@ -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
-1
View File
@@ -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
+4 -1
View File
@@ -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
+91 -22
View File
@@ -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>) => {
return _.sum(_.values(vram));
const WorkerInfoContent: React.FC<NameCellProps> = ({ record, modelData }) => {
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}
modelData={{
backend: record.backend,
backend_version: record.backend_version
}}
></NameCell>
<>
<NameCell
showWorkerInfo={false}
record={record}
modelData={{
backend: record.backend,
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>
{text &&
(!record.distributed_servers?.subordinate_workers ||
!record.distributed_servers?.subordinate_workers.length)
? workerList.find((worker) => worker.id === text)?.name
: ''}
<div className="flex-center gap-8">
<AutoTooltip ghost>{renderWorkerCell(text, record)}</AutoTooltip>
<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
? calcTotalVram(record.computed_resource_claim?.vram)
: 0,
record.computed_resource_claim?.vram ? calcTotalVram(record) : 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
-2
View File
@@ -1,6 +1,4 @@
.instance-name {
min-height: 54px;
&:hover {
.server-info {
.text {
src/pages/llmodels/utils/index.ts
+12
View File
@@ -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;
};