chore: update usage api

src/pages/dashboard/apis/index.ts

@@ -3,6 +3,9 @@ import qs from 'query-string';
 
 export const DASHBOARD_API = '/dashboard';
 
+export const DASHBOARD_USAGE_API = `${DASHBOARD_API}/usage`;
+export const DASHBOARD_STATS_API = `${DASHBOARD_API}/usage/stats`;
+
 export async function queryDashboardData() {
   return request(DASHBOARD_API);
 }
@@ -15,11 +18,12 @@ export async function queryDashboardUsageData<T>(
     user_ids?: number[];
     raw?: boolean;
   },
-  options?: {
+  options: {
+    url: string;
     token?: any;
   }
 ) {
-  return request<T>(`${DASHBOARD_API}/usage?${qs.stringify(params)}`, {
+  return request<T>(`${options.url}?${qs.stringify(params)}`, {
     method: 'GET',
     cancelToken: options?.token
   });

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

@@ -4,7 +4,9 @@ import ScrollerModal from '@/components/scroller-modal';
 import { exportJsonToExcel } from '@/utils/excel-reader';
 import { useIntl } from '@umijs/max';
 import { Table, TableColumnType } from 'antd';
+import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
+import { DASHBOARD_USAGE_API } from '../../apis';
 import { TableRow } from '../../config/types';
 import useUsageData from './use-usage-data';
 
@@ -14,17 +16,26 @@ const ExportData: React.FC<{
 }> = (props) => {
   const { open, onCancel } = props || {};
   const intl = useIntl();
-  const { FilterBar, loading, init, result, userList, modelList, query } =
-    useUsageData<{
-      items: TableRow[];
-    }>({
-      raw: true
-    });
+  const {
+    FilterBar,
+    init,
+    setResult,
+    loading,
+    result,
+    userList,
+    modelList,
+    query,
+    setQuery
+  } = useUsageData<{
+    items: TableRow[];
+  }>({
+    url: DASHBOARD_USAGE_API
+  });
 
   const exportTableColumns: TableColumnType[] = [
     {
       title: intl.formatMessage({ id: 'resources.table.index' }),
-      width: 60,
+      width: 80,
       render(text: any, row: any, index: number) {
         return index + 1;
       }
@@ -105,6 +116,18 @@ const ExportData: React.FC<{
   useEffect(() => {
     if (open) {
       init();
+    } else {
+      setQuery({
+        start_date: dayjs().subtract(30, 'days').format('YYYY-MM-DD'),
+        end_date: dayjs().format('YYYY-MM-DD'),
+        model_ids: [],
+        user_ids: []
+      });
+      setResult({
+        start_date: '',
+        end_date: '',
+        data: { items: [] }
+      });
     }
   }, [open]);
 

src/pages/dashboard/components/usage-inner/index.tsx

@@ -2,6 +2,7 @@ import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import { FC, useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
+import { DASHBOARD_STATS_API } from '../../apis';
 import { baseColorMap } from '../../config';
 import { DashboardContext } from '../../config/dashboard-context';
 import { DashboardUsageData } from '../../config/types';
@@ -22,7 +23,7 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
 
   const { usageData, handleOnCancel, handleExport, FilterBar, init, open } =
     useUsageData<DashboardUsageData>({
-      raw: false,
+      url: DASHBOARD_STATS_API,
       defaultData: {
         api_request_history: [],
         completion_token_history: [],

src/pages/dashboard/components/usage-inner/use-usage-data.tsx

@@ -2,14 +2,18 @@ import useSelectRender from '@/components/seal-form/hooks/use-select-render';
 import { queryModelsList } from '@/pages/llmodels/apis';
 import { ListItem as ModelListItem } from '@/pages/llmodels/config/types';
 import { queryUsersList } from '@/pages/users/apis';
-import { ExportOutlined } from '@ant-design/icons';
+import { DownloadOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, DatePicker, Select, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { queryDashboardUsageData } from '../../apis';
+import {
+  DASHBOARD_STATS_API,
+  DASHBOARD_USAGE_API,
+  queryDashboardUsageData
+} from '../../apis';
 import { baseColorMap } from '../../config';
 import useRangePickerPreset from '../../hooks/use-rangepicker-preset';
 
@@ -87,11 +91,11 @@ const generateData = (dateRage: string[], valueMap: Map<string, number>) => {
   });
 };
 
-export default function useUseageData<T>(config?: {
-  raw?: boolean;
+export default function useUseageData<T>(config: {
+  url: string;
   defaultData?: T;
 }) {
-  const { raw = false, defaultData } = config || {};
+  const { url, defaultData } = config || {};
   const intl = useIntl();
   const { TagRender } = useSelectRender({
     maxTagWidth: 100
@@ -115,9 +119,7 @@ export default function useUseageData<T>(config?: {
     end_date: string;
     model_ids: number[];
     user_ids: number[];
-    raw: boolean;
   }>({
-    raw: raw,
     start_date: dayjs().subtract(30, 'days').format('YYYY-MM-DD'),
     end_date: dayjs().format('YYYY-MM-DD'),
     model_ids: [],
@@ -131,7 +133,7 @@ export default function useUseageData<T>(config?: {
   const usageData = useMemo<{
     requestTokenData: RequestTokenData;
   }>(() => {
-    if (raw) {
+    if (url === DASHBOARD_USAGE_API) {
       return {
         requestTokenData: {
           requestData: [],
@@ -203,7 +205,7 @@ export default function useUseageData<T>(config?: {
         xAxisData: dateRange
       }
     };
-  }, [result, raw]);
+  }, [result, url]);
 
   const fetchModelsList = async () => {
     try {
@@ -248,7 +250,9 @@ export default function useUseageData<T>(config?: {
   const fetchUsageData = async (queryParams: any) => {
     try {
       setLoading(true);
-      const response = await queryDashboardUsageData<T>(queryParams);
+      const response = await queryDashboardUsageData<T>(queryParams, {
+        url: url
+      });
       setResult({
         start_date: queryParams.start_date,
         end_date: queryParams.end_date,
@@ -352,9 +356,12 @@ export default function useUseageData<T>(config?: {
             style={{ maxWidth: 200, minWidth: 160 }}
             onChange={handleModelsChange}
           ></Select>
-          {!raw && (
+          {url === DASHBOARD_STATS_API && (
             <Tooltip title={intl.formatMessage({ id: 'common.button.export' })}>
-              <Button icon={<ExportOutlined />} onClick={handleExport}></Button>
+              <Button
+                icon={<DownloadOutlined />}
+                onClick={handleExport}
+              ></Button>
             </Tooltip>
           )}
         </div>
@@ -370,6 +377,7 @@ export default function useUseageData<T>(config?: {
     userList,
     modelList,
     query,
+    setQuery,
     init,
     setResult,
     FilterBar,