diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index 42431697..7f20ae4e 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -293,6 +293,10 @@ gap: 16px; } +.items-center { + align-items: center; +} + .color-white-tertiary { color: var(--color-white-tertiary); } diff --git a/src/pages/usage/components/daily-usage.tsx b/src/pages/usage/components/daily-usage.tsx index 4c3d14e3..5c6f0bce 100644 --- a/src/pages/usage/components/daily-usage.tsx +++ b/src/pages/usage/components/daily-usage.tsx @@ -92,7 +92,7 @@ const DailyUsage: React.FC = (props) => { }, { label: summary.models_called.toString(), - value: 'Models called', + value: 'Models used', color: baseColorMap.baseR2, iconType: 'roundRect' } diff --git a/src/pages/usage/config/index.ts b/src/pages/usage/config/index.ts index 060e8642..19b2231d 100644 --- a/src/pages/usage/config/index.ts +++ b/src/pages/usage/config/index.ts @@ -1,4 +1,8 @@ export const groupByOptions = [ + { + value: '', + label: 'None' + }, { value: 'model', label: 'Model' diff --git a/src/pages/usage/config/types.ts b/src/pages/usage/config/types.ts index f46f4e7b..8d16d725 100644 --- a/src/pages/usage/config/types.ts +++ b/src/pages/usage/config/types.ts @@ -56,6 +56,8 @@ export type BreakdownItem = UsageFilterItem & { models_called: number; api_keys_used: number; last_active: string; + provider_type: string; + provider_name: string; }; export interface UsageMeta { diff --git a/src/pages/usage/hooks/use-models-columns.tsx b/src/pages/usage/hooks/use-models-columns.tsx index 60ce789b..72719557 100644 --- a/src/pages/usage/hooks/use-models-columns.tsx +++ b/src/pages/usage/hooks/use-models-columns.tsx @@ -1,6 +1,7 @@ // columns.ts import AutoTooltip from '@/components/auto-tooltip'; import { tableSorter } from '@/config/settings'; +import ProviderLogo from '@/pages/maas-provider/components/provider-logo'; import { useIntl } from '@umijs/max'; import { useMemo } from 'react'; import { BreakdownItem as ListItem } from '../config/types'; @@ -31,16 +32,6 @@ const useModelsColumns = (): Array<{ ) }, - { - title: 'Provider', - dataIndex: 'provider', - key: 'provider', - render: (text: string, record: ListItem) => ( - - {text || '-'} - - ) - }, { title: 'Cluster', dataIndex: 'cluster_name', @@ -50,6 +41,21 @@ const useModelsColumns = (): Array<{ {text || '-'} ) }, + { + title: 'Provider', + dataIndex: 'provider_name', + key: 'provider_name', + render: (text: string, record: ListItem) => ( + + + + {text || + (!record.provider_type && + intl.formatMessage({ id: 'menu.models.deployment' }))} + + + ) + }, { title: 'Input Tokens', dataIndex: 'input_tokens', diff --git a/src/pages/usage/index.tsx b/src/pages/usage/index.tsx index e16a0f11..71056abf 100644 --- a/src/pages/usage/index.tsx +++ b/src/pages/usage/index.tsx @@ -1,6 +1,7 @@ import { exportJsonToExcel } from '@/utils/excel-reader'; import { useModel } from '@@/plugin-model'; import dayjs from 'dayjs'; +import _ from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; import BreakdownTabs from './components/breakdown-tabs'; import DailyUsage from './components/daily-usage'; @@ -134,6 +135,10 @@ const Usage: React.FC = () => { currentSelectedFilters = commonFilters, currentChartFilters = chartFilters ) => { + const filteredChartFilters = _.pickBy( + currentChartFilters, + (value: string) => value + ); fetchTimeSeriesData({ ...currentChartFilters, start_date: currentSelectedFilters.start_date, @@ -174,6 +179,10 @@ const Usage: React.FC = () => { fetchData(commonFilters, { ...chartFilters, [type]: value }); }; + const handleSearch = () => { + fetchData(commonFilters, chartFilters); + }; + console.log('timeSeriesData:', timeSeriesData); const handleOnExportChart = () => { @@ -228,7 +237,7 @@ const Usage: React.FC = () => { modelOptions={metaData?.models || []} userOptions={metaData?.users || []} apiKeyOptions={metaData?.api_keys || []} - handleSearch={fetchData} + handleSearch={handleSearch} onScopeChange={handleScopeChange} onDateChange={handleDateChange} onModelsChange={(value) => handleFilterChange('models', value)}