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

feat: usage

Browse Source
This commit is contained in:
jialin
2026-04-22 13:16:48 +08:00
committed by jialin
parent b057d52499
commit 7d75714662
37 changed files with 2199 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/tables/apikeys-table.tsx
+100
View File
@@ -0,0 +1,100 @@
import IconFont from '@/components/icon-font';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import NoResult from '@/pages/_components/no-result';
import PageBox from '@/pages/_components/page-box';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import _ from 'lodash';
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';
const APIKeys: React.FC<{
apiKeys: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
}> = ({ apiKeys, dateRange, scope }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
key: 'apiKeysTableData'
});
const [queryParams, setQueryParams] = useState<{
page: number;
perPage: number;
sort_by: string;
}>({
page: 1,
perPage: 10,
sort_by: ''
});
const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
const handlePageChange = (page: number, pageSize: number) => {};
const columns = useAPIKeys();
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
return (
<NoResult
loading={loading}
loadend={dataSource.loadend}
dataSource={dataSource.dataList}
image={<IconFont type="icon-key" />}
filters={_.omit(queryParams, ['sort_by'])}
noFoundText={intl.formatMessage({
id: 'noresult.keys.nofound'
})}
title={intl.formatMessage({ id: 'noresult.keys.title' })}
subTitle={intl.formatMessage({ id: 'noresult.keys.subTitle' })}
></NoResult>
);
};
useEffect(() => {
fetchData({
...queryParams,
group_by: 'api_key',
filters: {
api_keys: apiKeys || []
},
scope: scope,
...dateRange
});
}, [dateRange, apiKeys, queryParams, scope]);
return (
<>
<PageBox>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
</PageBox>
</>
);
};
export default APIKeys;
src/pages/usage/tables/models-table.tsx
+100
View File
@@ -0,0 +1,100 @@
import IconFont from '@/components/icon-font';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import NoResult from '@/pages/_components/no-result';
import PageBox from '@/pages/_components/page-box';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import _ from 'lodash';
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';
const Models: React.FC<{
models: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
}> = ({ models, dateRange, scope }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
key: 'modelsTableData'
});
const [queryParams, setQueryParams] = useState<{
page: number;
perPage: number;
sort_by: string;
}>({
page: 1,
perPage: 10,
sort_by: ''
});
const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
const handlePageChange = (page: number, pageSize: number) => {};
const columns = useUsersColumns();
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
return (
<NoResult
loading={loading}
loadend={dataSource.loadend}
dataSource={dataSource.dataList}
image={<IconFont type="icon-key" />}
filters={_.omit(queryParams, ['sort_by'])}
noFoundText={intl.formatMessage({
id: 'noresult.keys.nofound'
})}
title={intl.formatMessage({ id: 'noresult.keys.title' })}
subTitle={intl.formatMessage({ id: 'noresult.keys.subTitle' })}
></NoResult>
);
};
useEffect(() => {
fetchData({
...queryParams,
group_by: 'model',
filters: {
models: models || []
},
scope: scope,
...dateRange
});
}, [dateRange, models, queryParams, scope]);
return (
<>
<PageBox>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
</PageBox>
</>
);
};
export default Models;
src/pages/usage/tables/users-table.tsx
+99
View File
@@ -0,0 +1,99 @@
import IconFont from '@/components/icon-font';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import NoResult from '@/pages/_components/no-result';
import PageBox from '@/pages/_components/page-box';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import _ from 'lodash';
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';
const Users: React.FC<{
users: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
}> = ({ users, dateRange }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
key: 'usersTableData'
});
const [queryParams, setQueryParams] = useState<{
page: number;
perPage: number;
sort_by: string;
}>({
page: 1,
perPage: 10,
sort_by: ''
});
const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
const handlePageChange = (page: number, pageSize: number) => {};
const columns = useUsersColumns();
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
return (
<NoResult
loading={loading}
loadend={dataSource.loadend}
dataSource={dataSource.dataList}
image={<IconFont type="icon-key" />}
filters={_.omit(queryParams, ['sort_by'])}
noFoundText={intl.formatMessage({
id: 'noresult.keys.nofound'
})}
title={intl.formatMessage({ id: 'noresult.keys.title' })}
subTitle={intl.formatMessage({ id: 'noresult.keys.subTitle' })}
></NoResult>
);
};
useEffect(() => {
fetchData({
...queryParams,
group_by: 'user',
filters: {
users: users || []
},
scope: 'all',
...dateRange
});
}, [dateRange, users, queryParams]);
return (
<>
<PageBox>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
rowKey="id"
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
</PageBox>
</>
);
};
export default Users;