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

fix: logs scrollbar ux

Browse Source
This commit is contained in:
jialin
2024-10-22 09:29:03 +08:00
parent 57386eeb55
commit eb5cf9da8d
17 changed files with 224 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/resources/components/gpus.tsx
+25 -5
View File
@@ -1,3 +1,4 @@
import AutoTooltip from '@/components/auto-tooltip';
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import useTableSort from '@/hooks/use-table-sort';
@@ -140,6 +141,16 @@ const GPUList: React.FC = () => {
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
width={200}
render={(text, record: GPUDeviceItem) => {
return (
<span style={{ display: 'flex', width: '100%' }}>
<AutoTooltip ghost maxWidth={340}>
{text}
</AutoTooltip>
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vender' })}
@@ -160,7 +171,7 @@ const GPUList: React.FC = () => {
dataIndex="core"
key="Core"
render={(text, record: GPUDeviceItem) => {
return <span>{record.core?.total}</span>;
return <>{record.core ? <span>{record.core?.total}</span> : '-'}</>;
}}
/> */}
<Column
@@ -169,9 +180,15 @@ const GPUList: React.FC = () => {
key="gpuUtil"
render={(text, record: GPUDeviceItem) => {
return (
<ProgressBar
percent={_.round(record.core?.utilization_rate, 2)}
></ProgressBar>
<>
{record.core ? (
<ProgressBar
percent={_.round(record.core?.utilization_rate, 2)}
></ProgressBar>
) : (
'-'
)}
</>
);
}}
/>
@@ -192,7 +209,10 @@ const GPUList: React.FC = () => {
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(record.memory?.used, 0)}
{convertFileSize(
record.memory?.used || record.memory?.allocated,
0
)}
</span>
</span>
}
src/pages/resources/components/workers.tsx
+21 -5
View File
@@ -307,6 +307,14 @@ const Resources: React.FC = () => {
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={100}
render={(text, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={240}>
<span>{record.name}</span>
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.labels' })}
@@ -408,10 +416,14 @@ const Resources: React.FC = () => {
>
[{item.index}]
</span>
<ProgressBar
key={index}
percent={_.round(item.core?.utilization_rate, 0)}
></ProgressBar>
{item.core ? (
<ProgressBar
key={index}
percent={_.round(item.core?.utilization_rate, 0)}
></ProgressBar>
) : (
'-'
)}
</span>
);
}
@@ -455,7 +467,11 @@ const Resources: React.FC = () => {
{intl.formatMessage({
id: 'resources.table.used'
})}
: {convertFileSize(item.memory?.used, 0)}
:{' '}
{convertFileSize(
item.memory?.used || item.memory?.allocated,
0
)}
</span>
</span>
}