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;
-  }>({
+  }>(INITIAL_PAGE_PARAMS);
-    page: 1,
-    perPage: 100
-  });
 
   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={[
+          value={rangePickerValue}
-            dayjs().add(-DefaultDateConfig.defaultRange, 'd'),
-            dayjs()
-          ]}
           format={'YYYY-MM-DD'}
           picker={picker}
           disabledDate={disabledDate}

src/pages/usage/hooks/use-usage-filters.ts

@@ -1,6 +1,6 @@
 import { exportJsonToExcel } from '@/utils/excel-reader';
 import dayjs from 'dayjs';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   generateColumns,
   GroupOption,
@@ -36,6 +36,9 @@ interface UseUsageFiltersParams {
   initialState?: {
     activeModels?: ValueType[][];
     activeApiKeys?: ValueType[][];
+    users?: string[];
+    start_date?: string;
+    end_date?: string;
   };
   summaryColumns: {
     title: string;
@@ -66,28 +69,43 @@ export const useUsageFilters = ({
   metaData,
   chartFilters,
   summaryColumns,
-  initialState: {
+  initialState,
-    activeModels: initialActiveModels = [],
-    activeApiKeys: initialActiveApiKeys = []
-  } = {},
-
   autoFetchOnFilterChange = true,
   onFetchData
 }: UseUsageFiltersParams) => {
+  const {
+    activeModels: initialActiveModels = [],
+    activeApiKeys: initialActiveApiKeys = [],
+    users: initialUsers = [],
+    start_date = '',
+    end_date = ''
+  } = initialState || {};
   const {
     detailData: timeSeriesData,
     loading,
     fetchData: fetchTimeSeriesData
   } = useQueryTimeSeriesData();
+
+  const extractSelectedValues = (value: ValueType[][] = []) =>
+    value.map((item) => {
+      if (Array.isArray(item)) {
+        return item[item.length - 1] as string;
+      }
+
+      return item as string;
+    });
+
   const [commonFilters, setCommonFilters] = useState({
     scope: initialScope,
-    models: [] as string[],
+    models: extractSelectedValues(initialActiveModels),
-    users: [] as string[],
+    users: initialUsers || [],
-    api_keys: [] as string[],
+    api_keys: extractSelectedValues(initialActiveApiKeys),
-    start_date: dayjs()
+    start_date:
-      .subtract(DefaultDateConfig.defaultRange, 'days')
+      start_date ||
-      .format('YYYY-MM-DD'),
+      dayjs()
-    end_date: dayjs().format('YYYY-MM-DD')
+        .subtract(DefaultDateConfig.defaultRange, 'days')
+        .format('YYYY-MM-DD'),
+    end_date: end_date || dayjs().format('YYYY-MM-DD')
   });
 
   const modelOptions = metaData?.models || [];
@@ -98,6 +116,36 @@ export const useUsageFilters = ({
   const [activeApiKeys, setActiveApiKeys] =
     useState<ValueType[][]>(initialActiveApiKeys);
 
+  useEffect(() => {
+    if (!initialState) {
+      return;
+    }
+
+    setActiveModels(initialActiveModels);
+    setActiveApiKeys(initialActiveApiKeys);
+    setCommonFilters((prev) => ({
+      ...prev,
+      scope: initialScope,
+      models: extractSelectedValues(initialActiveModels),
+      users: initialUsers || [],
+      api_keys: extractSelectedValues(initialActiveApiKeys),
+      start_date:
+        start_date ||
+        dayjs()
+          .subtract(DefaultDateConfig.defaultRange, 'days')
+          .format('YYYY-MM-DD'),
+      end_date: end_date || dayjs().format('YYYY-MM-DD')
+    }));
+  }, [
+    end_date,
+    initialActiveApiKeys,
+    initialActiveModels,
+    initialUsers,
+    initialScope,
+    initialState,
+    start_date
+  ]);
+
   const buildFilters = (selected: typeof commonFilters) => {
     const filters: {
       models?: FilterOptionType[];

src/pages/usage/index.tsx

@@ -201,7 +201,10 @@ const Usage: React.FC = () => {
         onCancel={() => setOpenExportModal(false)}
         initialState={{
           activeModels: filterBar.activeModels,
-          activeApiKeys: filterBar.activeApiKeys
+          activeApiKeys: filterBar.activeApiKeys,
+          users: commonFilters.users,
+          start_date: commonFilters.start_date,
+          end_date: commonFilters.end_date
         }}
       ></ExportData>
     </div>