fix: usage filter

src/assets/styles/common.less

@@ -293,6 +293,10 @@
   gap: 16px;
 }
 
+.items-center {
+  align-items: center;
+}
+
 .color-white-tertiary {
   color: var(--color-white-tertiary);
 }

src/pages/usage/components/daily-usage.tsx

@@ -92,7 +92,7 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
       },
       {
         label: summary.models_called.toString(),
-        value: 'Models called',
+        value: 'Models used',
         color: baseColorMap.baseR2,
         iconType: 'roundRect'
       }

src/pages/usage/config/index.ts

@@ -1,4 +1,8 @@
 export const groupByOptions = [
+  {
+    value: '',
+    label: 'None'
+  },
   {
     value: 'model',
     label: 'Model'

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 {

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<{
           </span>
         )
       },
-      {
-        title: 'Provider',
-        dataIndex: 'provider',
-        key: 'provider',
-        render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost style={{ maxWidth: 400 }}>
-            {text || '-'}
-          </AutoTooltip>
-        )
-      },
       {
         title: 'Cluster',
         dataIndex: 'cluster_name',
@@ -50,6 +41,21 @@ const useModelsColumns = (): Array<{
           <AutoTooltip ghost>{text || '-'}</AutoTooltip>
         )
       },
+      {
+        title: 'Provider',
+        dataIndex: 'provider_name',
+        key: 'provider_name',
+        render: (text: string, record: ListItem) => (
+          <span className="flex-center gap-8">
+            <ProviderLogo provider={record.provider_type || 'deployments'} />
+            <AutoTooltip ghost style={{ maxWidth: 400 }}>
+              {text ||
+                (!record.provider_type &&
+                  intl.formatMessage({ id: 'menu.models.deployment' }))}
+            </AutoTooltip>
+          </span>
+        )
+      },
       {
         title: 'Input Tokens',
         dataIndex: 'input_tokens',

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)}