129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import useCreatorColumn from '@/pages/gpu-service/hooks/use-creator-column';
|
|
import { usePluginListColumns } from '@/plugins/list-extra-columns';
|
|
import { AutoTooltip, DropdownButtons, StatusTag } from '@gpustack/core-ui';
|
|
import { useIntl } from '@umijs/max';
|
|
import type { ColumnsType } from 'antd/lib/table';
|
|
import dayjs from 'dayjs';
|
|
import { useMemo } from 'react';
|
|
import { rowActionList, status, StoragePhaseLabelMap } from '../config';
|
|
import { ListItem } from '../config/types';
|
|
|
|
interface ColumnsHookProps {
|
|
handleSelect: (val: string, record: ListItem) => void;
|
|
storageClassList: Global.BaseOption<string>[];
|
|
sortOrder: string[];
|
|
}
|
|
|
|
const useStorageColumns = ({
|
|
handleSelect,
|
|
storageClassList,
|
|
sortOrder
|
|
}: ColumnsHookProps): ColumnsType<ListItem> => {
|
|
const intl = useIntl();
|
|
const pluginCols = usePluginListColumns('gpuStorage');
|
|
const creatorCols = useCreatorColumn<ListItem>('gpuStorage');
|
|
return useMemo(() => {
|
|
const pluginRendered = pluginCols.map((c) => ({
|
|
title: intl.formatMessage({ id: c.titleId }),
|
|
key: c.key,
|
|
ellipsis: { showTitle: false },
|
|
render: (_text: any, record: ListItem) => c.render(record)
|
|
}));
|
|
return [
|
|
{
|
|
title: intl.formatMessage({ id: 'common.table.name' }),
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
sorter: true,
|
|
ellipsis: {
|
|
showTitle: false
|
|
},
|
|
render: (text: string, record: ListItem) => (
|
|
<AutoTooltip
|
|
ghost
|
|
style={{ maxWidth: 360 }}
|
|
title={<span>{record.displayName || text}</span>}
|
|
>
|
|
<span className="text-primary">{record.displayName || text}</span>
|
|
</AutoTooltip>
|
|
)
|
|
},
|
|
...pluginRendered,
|
|
{
|
|
title: intl.formatMessage({ id: 'common.table.type' }),
|
|
dataIndex: ['spec', 'type'],
|
|
key: 'type',
|
|
sorter: false,
|
|
render: (value: string) => {
|
|
return (
|
|
<AutoTooltip ghost>
|
|
{storageClassList.find((item) => item.value === value)?.label ||
|
|
'-'}
|
|
</AutoTooltip>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'gpuservice.storage.capacity' }),
|
|
dataIndex: ['spec', 'capacity'],
|
|
key: 'capacity',
|
|
sorter: false,
|
|
render: (value: string) => (value ? value.replace(/Gi$/, 'GB') : '-')
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'common.table.status' }),
|
|
dataIndex: ['status', 'phase'],
|
|
key: 'status',
|
|
sorter: false,
|
|
render: (value: string, record: ListItem) =>
|
|
value ? (
|
|
<StatusTag
|
|
statusValue={{
|
|
status: status[value],
|
|
text: StoragePhaseLabelMap[value] || value,
|
|
message: record?.status?.phaseMessage || ''
|
|
}}
|
|
></StatusTag>
|
|
) : (
|
|
'-'
|
|
)
|
|
},
|
|
...creatorCols,
|
|
{
|
|
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
|
dataIndex: 'created_at',
|
|
key: 'created_at',
|
|
sorter: false,
|
|
ellipsis: {
|
|
showTitle: false
|
|
},
|
|
render: (text: string) => (
|
|
<AutoTooltip ghost>
|
|
{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
|
</AutoTooltip>
|
|
)
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'common.table.operation' }),
|
|
key: 'operation',
|
|
dataIndex: 'operation',
|
|
render: (_text, record) => (
|
|
<DropdownButtons
|
|
items={rowActionList}
|
|
onSelect={(val) => handleSelect(val, record)}
|
|
/>
|
|
)
|
|
}
|
|
];
|
|
}, [
|
|
handleSelect,
|
|
sortOrder,
|
|
storageClassList,
|
|
intl,
|
|
pluginCols,
|
|
creatorCols
|
|
]);
|
|
};
|
|
|
|
export default useStorageColumns;
|