style(usage): unify name column header + DeletedTag across breakdown tables

This commit is contained in:
jialin
2026-07-09 15:17:53 +08:00
committed by jialin
parent 7d9f68da2d
commit e79d49f2a8
7 changed files with 98 additions and 69 deletions
@@ -1,6 +1,8 @@
import { AutoTooltip } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useMemo } from 'react';
import { ResourceBreakdownItem } from '../../apis/resource';
import DeletedTag from '../../components/deleted-tag';
import { parseRollup } from '../../utils/time-buckets';
type GroupKey = 'volume' | 'user';
@@ -39,12 +41,30 @@ const useStorageColumns = (groupKey: GroupKey) => {
key: 'last_active',
render: (v?: string) => (v ? parseRollup(v).format('YYYY-MM-DD') : '-')
};
// Name cell with a DeletedTag when the entity no longer exists — mirrors the
// Tokens tab. The id keeps two deleted rows sharing a stale name distinct.
const renderName = (text: string, id?: number, deleted?: boolean) => (
<span className="flex items-center gap-8">
<AutoTooltip
ghost
style={{
maxWidth: 400,
...(deleted ? { color: 'var(--ant-color-text-tertiary)' } : null)
}}
>
{text || '-'}
</AutoTooltip>
{deleted && <DeletedTag id={id ?? null} />}
</span>
);
if (groupKey === 'volume') {
return [
{
title: intl.formatMessage({ id: 'usage.tabs.storage' }),
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'volume_name',
key: 'volume_name'
key: 'volume_name',
render: (text: string, row: ResourceBreakdownItem) =>
renderName(text, row.volume_id, row.deleted)
},
{
title: intl.formatMessage({ id: 'usage.table.type' }),
@@ -65,9 +85,11 @@ const useStorageColumns = (groupKey: GroupKey) => {
}
return [
{
title: intl.formatMessage({ id: 'usage.table.user' }),
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'user_name',
key: 'user_name'
key: 'user_name',
render: (text: string, row: ResourceBreakdownItem) =>
renderName(text, row.user_id, row.deleted)
},
...valueCols,
{