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

fix: reset page after filters changed

Browse Source
This commit is contained in:
jialin
2026-04-22 13:16:48 +08:00
committed by jialin
parent f566ea3b63
commit 5f3b9b88ff
5 changed files with 89 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/components/breakdown-tabs.tsx
+6 -2
View File
@@ -17,13 +17,14 @@ const BreakdownTabs: React.FC<{
end_date: string;
};
scope: string;
pageResetKey?: number;
refreshKey?: number;
filters: {
models?: FilterOptionType[];
users?: FilterOptionType[];
api_keys?: FilterOptionType[];
};
}> = ({ filters, dateRange, scope, refreshKey = 0 }) => {
}> = ({ filters, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
const intl = useIntl();
const models = filters.models || EMPTY_FILTERS;
const users = filters.users || EMPTY_FILTERS;
@@ -41,6 +42,7 @@ const BreakdownTabs: React.FC<{
models={models}
dateRange={dateRange}
scope={scope}
pageResetKey={pageResetKey}
refreshKey={refreshKey}
/>
)
@@ -55,6 +57,7 @@ const BreakdownTabs: React.FC<{
users={users}
dateRange={dateRange}
scope={scope}
pageResetKey={pageResetKey}
refreshKey={refreshKey}
/>
)
@@ -69,6 +72,7 @@ const BreakdownTabs: React.FC<{
apiKeys={apiKeys}
dateRange={dateRange}
scope={scope}
pageResetKey={pageResetKey}
refreshKey={refreshKey}
/>
)
@@ -79,7 +83,7 @@ const BreakdownTabs: React.FC<{
}
return true;
});
}, [apiKeys, dateRange, models, refreshKey, scope, users]);
}, [apiKeys, dateRange, models, pageResetKey, refreshKey, scope, users]);
return (
<div style={{ marginTop: 16 }}>
src/pages/usage/index.tsx
+26
View File
@@ -21,6 +21,7 @@ const Usage: React.FC = () => {
const { exportTable } = useExportTable();
const [openExportModal, setOpenExportModal] = useState(false);
const [breakdownRefreshKey, setBreakdownRefreshKey] = useState(0);
const [breakdownPageResetKey, setBreakdownPageResetKey] = useState(0);
const summaryColumns = [
{
@@ -147,10 +148,34 @@ const Usage: React.FC = () => {
setBreakdownRefreshKey((prev) => prev + 1);
};
const handleBreakdownPageReset = () => {
setBreakdownPageResetKey((prev) => prev + 1);
};
return (
<div>
<FilterBar
{...filterBar}
onScopeChange={(value) => {
filterBar.onScopeChange(value);
handleBreakdownPageReset();
}}
onDateChange={(dates, dateStrings) => {
filterBar.onDateChange(dates, dateStrings);
handleBreakdownPageReset();
}}
onModelsChange={(value) => {
filterBar.onModelsChange(value);
handleBreakdownPageReset();
}}
onUsersChange={(value) => {
filterBar.onUsersChange(value);
handleBreakdownPageReset();
}}
onApiKeysChange={(value) => {
filterBar.onApiKeysChange(value);
handleBreakdownPageReset();
}}
handleSearch={handleSearch}
handlePickerChange={handlePickerChange}
onExportTable={exportTable}
@@ -189,6 +214,7 @@ const Usage: React.FC = () => {
filters={filters}
dateRange={breakdownDateRange}
scope={commonFilters.scope}
pageResetKey={breakdownPageResetKey}
refreshKey={breakdownRefreshKey}
></BreakdownTabs>
<ExportData
src/pages/usage/tables/apikeys-table.tsx
+19 -2
View File
@@ -5,7 +5,7 @@ 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 { useEffect, useRef, useState } from 'react';
import { FilterOptionType } from '../config/types';
import useAPIKeys from '../hooks/use-apikeys-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
@@ -15,8 +15,9 @@ const APIKeys: React.FC<{
apiKeys: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
pageResetKey?: number;
refreshKey?: number;
}> = ({ apiKeys, dateRange, scope, refreshKey = 0 }) => {
}> = ({ apiKeys, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -31,6 +32,7 @@ const APIKeys: React.FC<{
perPage: 10,
sort_by: ''
});
const pendingPageResetRef = useRef(false);
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
let sort_by =
@@ -50,6 +52,16 @@ const APIKeys: React.FC<{
};
const columns = useAPIKeys();
useEffect(() => {
if (queryParams.page !== 1) {
pendingPageResetRef.current = true;
setQueryParams((prev) => ({
...prev,
page: 1
}));
}
}, [pageResetKey]);
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
return (
@@ -69,6 +81,11 @@ const APIKeys: React.FC<{
};
useEffect(() => {
if (pendingPageResetRef.current && queryParams.page !== 1) {
return;
}
pendingPageResetRef.current = false;
fetchData({
...queryParams,
group_by: ['api_key'],
src/pages/usage/tables/models-table.tsx
+19 -2
View File
@@ -5,7 +5,7 @@ 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 { useEffect, useRef, useState } from 'react';
import { FilterOptionType } from '../config/types';
import useUsersColumns from '../hooks/use-models-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
@@ -15,8 +15,9 @@ const Models: React.FC<{
models: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
pageResetKey?: number;
refreshKey?: number;
}> = ({ models, dateRange, scope, refreshKey = 0 }) => {
}> = ({ models, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -31,6 +32,7 @@ const Models: React.FC<{
perPage: 10,
sort_by: ''
});
const pendingPageResetRef = useRef(false);
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
console.log('pagination, filters, sorter: ', pagination, filters, sorter);
@@ -52,6 +54,16 @@ const Models: React.FC<{
const columns = useUsersColumns();
useEffect(() => {
if (queryParams.page !== 1) {
pendingPageResetRef.current = true;
setQueryParams((prev) => ({
...prev,
page: 1
}));
}
}, [pageResetKey]);
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
return (
@@ -71,6 +83,11 @@ const Models: React.FC<{
};
useEffect(() => {
if (pendingPageResetRef.current && queryParams.page !== 1) {
return;
}
pendingPageResetRef.current = false;
fetchData({
...queryParams,
group_by: ['model'],
src/pages/usage/tables/users-table.tsx
+19 -2
View File
@@ -5,7 +5,7 @@ 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 { useEffect, useRef, useState } from 'react';
import { FilterOptionType } from '../config/types';
import useUsersColumns from '../hooks/use-users-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
@@ -15,8 +15,9 @@ const Users: React.FC<{
users: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
pageResetKey?: number;
refreshKey?: number;
}> = ({ users, dateRange, scope, refreshKey = 0 }) => {
}> = ({ users, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -31,6 +32,7 @@ const Users: React.FC<{
perPage: 10,
sort_by: ''
});
const pendingPageResetRef = useRef(false);
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
let sort_by =
@@ -70,6 +72,21 @@ const Users: React.FC<{
};
useEffect(() => {
if (queryParams.page !== 1) {
pendingPageResetRef.current = true;
setQueryParams((prev) => ({
...prev,
page: 1
}));
}
}, [pageResetKey]);
useEffect(() => {
if (pendingPageResetRef.current && queryParams.page !== 1) {
return;
}
pendingPageResetRef.current = false;
if (scope === 'all') {
fetchData({
...queryParams,