fix: reset page after filters changed

src/pages/usage/components/breakdown-tabs.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,