From 5f7df3f8715d6e057c1a6da6530d783c7e639191 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 24 Jun 2025 16:51:28 +0800 Subject: [PATCH] chore: update usage api --- src/pages/dashboard/apis/index.ts | 8 +++- .../components/usage-inner/export-data.tsx | 37 +++++++++++++++---- .../components/usage-inner/index.tsx | 3 +- .../components/usage-inner/use-usage-data.tsx | 32 ++++++++++------ 4 files changed, 58 insertions(+), 22 deletions(-) diff --git a/src/pages/dashboard/apis/index.ts b/src/pages/dashboard/apis/index.ts index aafa34f1..e81dfdbe 100644 --- a/src/pages/dashboard/apis/index.ts +++ b/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( user_ids?: number[]; raw?: boolean; }, - options?: { + options: { + url: string; token?: any; } ) { - return request(`${DASHBOARD_API}/usage?${qs.stringify(params)}`, { + return request(`${options.url}?${qs.stringify(params)}`, { method: 'GET', cancelToken: options?.token }); diff --git a/src/pages/dashboard/components/usage-inner/export-data.tsx b/src/pages/dashboard/components/usage-inner/export-data.tsx index 30727a2b..7602510f 100644 --- a/src/pages/dashboard/components/usage-inner/export-data.tsx +++ b/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]); diff --git a/src/pages/dashboard/components/usage-inner/index.tsx b/src/pages/dashboard/components/usage-inner/index.tsx index 3322fd75..433f3098 100644 --- a/src/pages/dashboard/components/usage-inner/index.tsx +++ b/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({ - raw: false, + url: DASHBOARD_STATS_API, defaultData: { api_request_history: [], completion_token_history: [], diff --git a/src/pages/dashboard/components/usage-inner/use-usage-data.tsx b/src/pages/dashboard/components/usage-inner/use-usage-data.tsx index 0cf045c8..202e8986 100644 --- a/src/pages/dashboard/components/usage-inner/use-usage-data.tsx +++ b/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) => { }); }; -export default function useUseageData(config?: { - raw?: boolean; +export default function useUseageData(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(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(config?: { const usageData = useMemo<{ requestTokenData: RequestTokenData; }>(() => { - if (raw) { + if (url === DASHBOARD_USAGE_API) { return { requestTokenData: { requestData: [], @@ -203,7 +205,7 @@ export default function useUseageData(config?: { xAxisData: dateRange } }; - }, [result, raw]); + }, [result, url]); const fetchModelsList = async () => { try { @@ -248,7 +250,9 @@ export default function useUseageData(config?: { const fetchUsageData = async (queryParams: any) => { try { setLoading(true); - const response = await queryDashboardUsageData(queryParams); + const response = await queryDashboardUsageData(queryParams, { + url: url + }); setResult({ start_date: queryParams.start_date, end_date: queryParams.end_date, @@ -352,9 +356,12 @@ export default function useUseageData(config?: { style={{ maxWidth: 200, minWidth: 160 }} onChange={handleModelsChange} > - {!raw && ( + {url === DASHBOARD_STATS_API && ( - + )} @@ -370,6 +377,7 @@ export default function useUseageData(config?: { userList, modelList, query, + setQuery, init, setResult, FilterBar,