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

style: card style

Browse Source
This commit is contained in:
jialin
2026-04-22 13:16:48 +08:00
committed by jialin
parent daa3d74500
commit c92f56ec8f
19 changed files with 532 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/tables/apikeys-table.tsx
+16 -5
View File
@@ -9,12 +9,14 @@ import { useEffect, useState } from 'react';
import { FilterOptionType } from '../config/types';
import useAPIKeys from '../hooks/use-apikeys-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
import getBreakdownRowKey from '../utils/get-breakdown-row-key';
const APIKeys: React.FC<{
apiKeys: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
}> = ({ apiKeys, dateRange, scope }) => {
refreshKey?: number;
}> = ({ apiKeys, dateRange, scope, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -57,14 +59,23 @@ const APIKeys: React.FC<{
useEffect(() => {
fetchData({
...queryParams,
group_by: 'api_key',
group_by: ['api_key'],
filters: {
api_keys: apiKeys || []
api_keys: apiKeys
},
scope: scope,
...dateRange
});
}, [dateRange, apiKeys, queryParams, scope]);
}, [
apiKeys,
dateRange.end_date,
dateRange.start_date,
queryParams.page,
queryParams.perPage,
queryParams.sort_by,
refreshKey,
scope
]);
return (
<>
@@ -73,13 +84,13 @@ const APIKeys: React.FC<{
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={getBreakdownRowKey}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'middle',
src/pages/usage/tables/models-table.tsx
+20 -9
View File
@@ -9,12 +9,14 @@ import { useEffect, useState } from 'react';
import { FilterOptionType } from '../config/types';
import useUsersColumns from '../hooks/use-models-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
import getBreakdownRowKey from '../utils/get-breakdown-row-key';
const Models: React.FC<{
models: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
}> = ({ models, dateRange, scope }) => {
refreshKey?: number;
}> = ({ models, dateRange, scope, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -43,13 +45,13 @@ const Models: React.FC<{
loading={loading}
loadend={dataSource.loadend}
dataSource={dataSource.dataList}
image={<IconFont type="icon-key" />}
image={<IconFont type="icon-resources" />}
filters={_.omit(queryParams, ['sort_by'])}
noFoundText={intl.formatMessage({
id: 'noresult.keys.nofound'
id: 'noresult.mymodels.nofound'
})}
title={intl.formatMessage({ id: 'noresult.keys.title' })}
subTitle={intl.formatMessage({ id: 'noresult.keys.subTitle' })}
title={intl.formatMessage({ id: 'noresult.deployments.title' })}
subTitle={intl.formatMessage({ id: 'noresult.deployments.subTitle' })}
></NoResult>
);
};
@@ -57,14 +59,23 @@ const Models: React.FC<{
useEffect(() => {
fetchData({
...queryParams,
group_by: 'model',
group_by: ['model'],
filters: {
models: models || []
models
},
scope: scope,
...dateRange
});
}, [dateRange, models, queryParams, scope]);
}, [
dateRange.end_date,
dateRange.start_date,
models,
queryParams.page,
queryParams.perPage,
queryParams.sort_by,
refreshKey,
scope
]);
return (
<>
@@ -73,13 +84,13 @@ const Models: React.FC<{
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={getBreakdownRowKey}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'middle',
src/pages/usage/tables/users-table.tsx
+20 -9
View File
@@ -9,12 +9,14 @@ import { useEffect, useState } from 'react';
import { FilterOptionType } from '../config/types';
import useUsersColumns from '../hooks/use-users-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
import getBreakdownRowKey from '../utils/get-breakdown-row-key';
const Users: React.FC<{
users: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
}> = ({ users, dateRange, scope }) => {
refreshKey?: number;
}> = ({ users, dateRange, scope, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -43,13 +45,13 @@ const Users: React.FC<{
loading={loading}
loadend={dataSource.loadend}
dataSource={dataSource.dataList}
image={<IconFont type="icon-key" />}
image={<IconFont type="icon-users" />}
filters={_.omit(queryParams, ['sort_by'])}
noFoundText={intl.formatMessage({
id: 'noresult.keys.nofound'
id: 'noresult.users.nofound'
})}
title={intl.formatMessage({ id: 'noresult.keys.title' })}
subTitle={intl.formatMessage({ id: 'noresult.keys.subTitle' })}
title={intl.formatMessage({ id: 'noresult.users.title' })}
subTitle={intl.formatMessage({ id: 'noresult.users.subTitle' })}
></NoResult>
);
};
@@ -58,15 +60,24 @@ const Users: React.FC<{
if (scope === 'all') {
fetchData({
...queryParams,
group_by: 'user',
group_by: ['user'],
filters: {
users: users || []
users
},
scope: scope,
...dateRange
});
}
}, [dateRange, users, queryParams, scope]);
}, [
dateRange.end_date,
dateRange.start_date,
queryParams.page,
queryParams.perPage,
queryParams.sort_by,
refreshKey,
scope,
users
]);
return (
<>
@@ -75,13 +86,13 @@ const Users: React.FC<{
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={getBreakdownRowKey}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'middle',