fix: sync filters

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

@@ -1,3 +1,4 @@
+import { useIntl } from '@umijs/max';
 import { Tabs } from 'antd';
 import React, { useMemo } from 'react';
 import { GroupOption } from '../config';
@@ -23,6 +24,7 @@ const BreakdownTabs: React.FC<{
     api_keys?: FilterOptionType[];
   };
 }> = ({ filters, dateRange, scope, refreshKey = 0 }) => {
+  const intl = useIntl();
   const models = filters.models || EMPTY_FILTERS;
   const users = filters.users || EMPTY_FILTERS;
   const apiKeys = filters.api_keys || EMPTY_FILTERS;
@@ -31,7 +33,7 @@ const BreakdownTabs: React.FC<{
     return [
       {
         key: 'models',
-        label: 'Models',
+        label: intl.formatMessage({ id: 'usage.tabs.models' }),
         forceRender: true,
         children: (
           <ModelsTable
@@ -45,7 +47,7 @@ const BreakdownTabs: React.FC<{
       },
       {
         key: 'users',
-        label: 'Users',
+        label: intl.formatMessage({ id: 'usage.tabs.users' }),
         forceRender: true,
         children: (
           <UsersTable
@@ -59,7 +61,7 @@ const BreakdownTabs: React.FC<{
       },
       {
         key: 'api_keys',
-        label: 'API Keys',
+        label: intl.formatMessage({ id: 'usage.tabs.apikeys' }),
         forceRender: true,
         children: (
           <ApiKeysTable

src/pages/usage/components/export-data.tsx

@@ -12,6 +12,10 @@ import FilterBar from './filter-bar';
 
 type DateType = 'date' | 'week' | 'month' | 'quarter' | 'year';
 type ValueType = string | number | null;
+const INITIAL_PAGE_PARAMS = {
+  page: 1,
+  perPage: 100
+};
 
 const ExportData: React.FC<{
   open: boolean;
@@ -22,6 +26,9 @@ const ExportData: React.FC<{
   initialState: {
     activeModels: ValueType[][];
     activeApiKeys: ValueType[][];
+    users: string[];
+    start_date: string;
+    end_date: string;
   };
   commonFilters: {
     scope: string;
@@ -48,10 +55,7 @@ const ExportData: React.FC<{
   const [pageParams, setPageParams] = React.useState<{
     page: number;
     perPage: number;
-  }>({
-    page: 1,
-    perPage: 100
-  });
+  }>(INITIAL_PAGE_PARAMS);
 
   const {
     fetchData: fetchExportData,
@@ -62,8 +66,6 @@ const ExportData: React.FC<{
     key: 'exportTableData'
   });
 
-  console.log('initialState========', initialState);
-
   const { filters, commonFilters, filterBar } = useUsageFilters({
     initialScope: initialScope,
     metaData,
@@ -234,8 +236,9 @@ const ExportData: React.FC<{
 
   useEffect(() => {
     if (open) {
+      setPageParams(INITIAL_PAGE_PARAMS);
       fetchExportData({
-        ...pageParams,
+        ...INITIAL_PAGE_PARAMS,
         granularity,
         group_by: ['date', 'user', 'model', 'api_key'],
         filters,
@@ -248,8 +251,6 @@ const ExportData: React.FC<{
     }
   }, [open]);
 
-  console.log('export dataSource', filterBar);
-
   return (
     <ScrollerModal
       title={intl.formatMessage({ id: 'dashboard.usage.export' })}
@@ -282,7 +283,7 @@ const ExportData: React.FC<{
       <Table
         columns={exportTableColumns}
         tableLayout={'auto'}
-        style={{ width: '100%', marginTop: '16px', minHeight: 300 }}
+        style={{ width: '100%', marginTop: '16px', minHeight: 400 }}
         dataSource={dataSource.dataList || []}
         rowKey={getBreakdownRowKey}
         loading={{

src/pages/usage/components/filter-bar.tsx

@@ -226,6 +226,11 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
     handlePickerChange(picker);
   };
 
+  const rangePickerValue: [dayjs.Dayjs, dayjs.Dayjs] =
+    startDate && endDate
+      ? normalizeRangeValue(startDate, endDate, picker)
+      : [dayjs().add(-DefaultDateConfig.defaultRange, 'd'), dayjs()];
+
   const renderFooter = () => {
     return (
       <Segmented
@@ -291,10 +296,7 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
       <div className={FilterBarCss.filters}>
         <DatePicker.RangePicker
           maxDate={dayjs()}
-          defaultValue={[
-            dayjs().add(-DefaultDateConfig.defaultRange, 'd'),
-            dayjs()
-          ]}
+          value={rangePickerValue}
           format={'YYYY-MM-DD'}
           picker={picker}
           disabledDate={disabledDate}