feat: provider lsit

config/routes.ts

@@ -106,7 +106,7 @@ export default [
         component: './llmodels/index'
       },
       {
-        name: 'provider',
+        name: 'providers',
         path: '/models/providers',
         key: 'modelProviders',
         icon: 'icon-extension-outline',

src/components/page-tools/index.tsx

@@ -157,9 +157,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
           actionType === 'dropdown' ? (
             <DropDownActions
               styles={{
-                root: {
+                root: { minWidth: '125px' }
-                  minWidth: 140
-                }
               }}
               menu={{
                 items: actionItems,

src/locales/en-US/menu.ts

@@ -17,6 +17,7 @@ export default {
   'menu.models.benchmark': 'Benchmarks',
   'menu.models.benchmarkDetail': 'Benchmark Details',
   'menu.models.provider': 'Provider',
+  'menu.models.providers': 'Provider',
   'menu.modelCatalog': 'Catalog',
   'menu.resources': 'Resources',
   'menu.apikeys': 'API Keys',

src/locales/en-US/provider.ts

@@ -0,0 +1,6 @@
+export default {
+  'providers.title': 'Providers',
+  'providers.button.add': 'Add Provider',
+  'providers.table.providerName': 'Provider',
+  'providers.table.modelsCounts': 'Models Count'
+};

src/locales/ja-JP/menu.ts

@@ -16,7 +16,7 @@ export default {
   'menu.models.benchmark': 'Benchmarks',
   'menu.models.benchmarkDetail': 'Benchmark Details',
   'menu.modelCatalog': 'カタログ',
-  'menu.models.provider': 'Provider',
+  'menu.models.providers': 'Provider',
   'menu.resources': 'リソース',
   'menu.apikeys': 'APIキー',
   'menu.users': 'ユーザー',
@@ -56,4 +56,5 @@ export default {
 // 14. 'menu.resources.backendsList': 'Inference Backends',
 // 15. 'menu.models.benchmark': 'Benchmarks',
 // 15. 'menu.models.provider': 'Provider',
+// 15. 'menu.models.providers': 'Provider',
 // ========== End of To-Do List ==========

src/locales/ja-JP/provider.ts

@@ -0,0 +1,6 @@
+export default {
+  'providers.title': 'Providers',
+  'providers.button.add': 'Add Provider',
+  'providers.table.providerName': 'Provider',
+  'providers.table.modelsCounts': 'Models Count'
+};

src/locales/ru-RU/menu.ts

@@ -16,6 +16,7 @@ export default {
   'menu.models.benchmark': 'Benchmarks',
   'menu.models.benchmarkDetail': 'Benchmark Details',
   'menu.models.provider': 'Provider',
+  'menu.models.providers': 'Provider',
   'menu.modelCatalog': 'Каталог',
   'menu.resources': 'Ресурсы',
   'menu.apikeys': 'API-ключи',
@@ -40,7 +41,11 @@ export default {
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
+<<<<<<< HEAD
 // 1. 'menu.models.benchmark': 'Benchmarks',
 // 2. 'menu.models.benchmarkDetail': 'Benchmark Details',
 // 1. 'menu.models.provider': 'Provider',
+=======
+// 1. 'menu.models.providers': 'Provider',
+>>>>>>> ddf1a270 (feat: provider lsit)
 // ========== End of To-Do List ==========

src/locales/ru-RU/provider.ts

@@ -0,0 +1,6 @@
+export default {
+  'providers.title': 'Providers',
+  'providers.button.add': 'Add Provider',
+  'providers.table.providerName': 'Provider',
+  'providers.table.modelsCounts': 'Models Count'
+};

src/locales/zh-CN/menu.ts

@@ -16,6 +16,7 @@ export default {
   'menu.models.benchmark': '基准测试',
   'menu.models.benchmarkDetail': '基准测试详情',
   'menu.models.provider': '渠道',
+  'menu.models.providers': '渠道',
   'menu.modelCatalog': '模型库',
   'menu.models.catalog': '模型库',
   'menu.resources': '资源',

src/locales/zh-CN/provider.ts

@@ -0,0 +1,6 @@
+export default {
+  'providers.title': '渠道',
+  'providers.button.add': '添加渠道',
+  'providers.table.providerName': '渠道',
+  'providers.table.modelsCounts': '模型数量'
+};

src/pages/maas-provider/components/provider-models.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
 interface ProviderModelProps {
-  name: string;
+  dataList: any[];
+  provider: string;
+  providerId: number;
 }
 
 const ProviderModels: React.FC<ProviderModelProps> = () => {

src/pages/maas-provider/config/index.ts

@@ -25,7 +25,7 @@ export const maasProviderLabelMap = {
   [maasProviderValueMap.Anthropic]: 'Anthropic'
 };
 
-export const IconsMap = {
+export const providerIconsMap = {
   [maasProviderValueMap.Doubao]: 'icon-doubao',
   [maasProviderValueMap.Qwen]: 'icon-qwen',
   [maasProviderValueMap.OpenAI]: 'icon-openai',
@@ -33,10 +33,13 @@ export const IconsMap = {
   [maasProviderValueMap.Anthropic]: 'icon-anthropic'
 };
 
-export const maasProviderOptions = Object.keys(maasProviderValueMap).map(
+export const maasProviderOptions = Object.entries(maasProviderValueMap).map(
-  (key) => ({
+  ([key, value]) => ({
-    label: maasProviderLabelMap[key],
+    label: maasProviderLabelMap[value],
-    value: maasProviderValueMap[key as keyof typeof maasProviderValueMap]
+    value: value,
+    key: value,
+    locale: false,
+    icon: providerIconsMap[value]
   })
 );
 

src/pages/maas-provider/config/mock.ts

@@ -0,0 +1,50 @@
+import { MaasProviderItem } from '../config/types';
+
+// mock data for MaasProviderItem 5 items
+export const mockDataList: MaasProviderItem[] = [
+  {
+    id: 1,
+    name: 'Doubao',
+    state: 'Ready',
+    models: 5,
+    state_message: '',
+    provider: 'doubao',
+    builtIn: false
+  },
+  {
+    id: 2,
+    models: 3,
+    name: 'Qwen',
+    state: 'Inactive',
+    state_message: 'Provider is inactive',
+    provider: 'qwen',
+    builtIn: true
+  },
+  {
+    id: 3,
+    models: 8,
+    name: 'OpenAI',
+    state: 'Ready',
+    state_message: '',
+    provider: 'openai',
+    builtIn: false
+  },
+  {
+    id: 4,
+    models: 2,
+    name: 'Deepseek',
+    state: 'Ready',
+    state_message: '',
+    provider: 'deepseek',
+    builtIn: false
+  },
+  {
+    id: 5,
+    models: 4,
+    name: 'Anthropic',
+    state: 'Inactive',
+    state_message: 'Provider is inactive',
+    provider: 'anthropic',
+    builtIn: true
+  }
+];

src/pages/maas-provider/config/types.ts

@@ -3,9 +3,11 @@ import { maasProviderType } from '.';
 export interface MaasProviderItem {
   id: number;
   name: string;
+  models?: number;
   state: string;
   state_message: string;
   provider: maasProviderType;
+  builtIn: boolean;
 }
 
 export interface FormData {

src/pages/maas-provider/hooks/use-provider-columns.tsx

@@ -1,15 +1,17 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
 import { SealColumnProps } from '@/components/seal-table/types';
 import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
-import { StarFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Tooltip } from 'antd';
+import { Tag } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
+  maasProviderLabelMap,
+  providerIconsMap,
   ProviderStatus,
   ProviderStatusLabelMap,
   rowActionList
@@ -28,66 +30,48 @@ const useProviderColumns = (
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         sorter: tableSorter(1),
-        span: 3,
+        span: 5,
         render: (text: string, record: MaasProviderItem) => (
           <>
             <AutoTooltip ghost title={text}>
               {text}
             </AutoTooltip>
-            {record.is_default && (
+            {record.builtIn && (
-              <Tooltip
+              <Tag color="blue" style={{ marginLeft: 8 }}>
-                title={intl.formatMessage({
+                BuiltIn
-                  id: 'clusters.form.setDefault.tips'
+              </Tag>
-                })}
-              >
-                <StarFilled
-                  style={{ color: 'var(--ant-gold-4)', marginLeft: 4 }}
-                />
-              </Tooltip>
             )}
           </>
         )
       },
       {
-        title: intl.formatMessage({ id: 'clusters.table.provider' }),
+        title: intl.formatMessage({ id: 'providers.table.providerName' }),
         dataIndex: 'provider',
         sorter: tableSorter(2),
-        span: 3,
+        span: 4,
         render: (value: string) => (
-          <AutoTooltip ghost minWidth={20}>
+          <>
-            {ProviderStatusLabelMap[value]}
+            <IconFont
-          </AutoTooltip>
+              type={providerIconsMap[value]}
+              style={{ marginRight: 8, fontSize: 16 }}
+            ></IconFont>
+            <AutoTooltip ghost minWidth={20}>
+              {maasProviderLabelMap[value]}
+            </AutoTooltip>
+          </>
         )
       },
       {
-        title: 'GPUs',
+        title: intl.formatMessage({ id: 'providers.table.modelsCounts' }),
-        dataIndex: 'gpus',
+        dataIndex: 'models',
-        span: 2,
+        span: 3,
         sorter: tableSorter(3),
         render: (value: number) => <span>{value}</span>
       },
-      {
-        title: intl.formatMessage({ id: 'clusters.table.deployments' }),
-        dataIndex: 'models',
-        sorter: tableSorter(4),
-        span: 3,
-        render: (value: number) => <span>{value}</span>
-      },
-      {
-        title: intl.formatMessage({ id: 'resources.nodes' }),
-        dataIndex: 'workers',
-        sorter: tableSorter(5),
-        span: 3,
-        render: (value: number, record: MaasProviderItem) => (
-          <span>
-            {record.ready_workers} / {record.workers}
-          </span>
-        )
-      },
       {
         title: intl.formatMessage({ id: 'common.table.status' }),
         dataIndex: 'state',
-        span: 3,
+        span: 4,
         render: (value: string, record: MaasProviderItem) => (
           <StatusTag
             statusValue={{

src/pages/maas-provider/index.tsx

@@ -27,6 +27,8 @@ import {
 } from './apis';
 import AddMaasProvider from './components/add-provider-modal';
 import ProviderModels from './components/provider-models';
+import { maasProviderOptions } from './config';
+import { mockDataList } from './config/mock';
 import {
   FormData,
   MaasProviderItem as ListItem,
@@ -53,7 +55,7 @@ const MaasProvider: React.FC = () => {
     deleteAPI: deleteProvider,
     watch: true,
     API: MAAS_PROVIDERS_API,
-    contentForDelete: 'menu.clusterManagement.clusters'
+    contentForDelete: 'menu.models.providers'
   });
   const { watchDataList: allProviderModels } =
     useWatchList(PROVIDER_MODELS_API);
@@ -166,7 +168,7 @@ const MaasProvider: React.FC = () => {
       <ProviderModels
         dataList={list}
         provider={options.parent?.provider}
-        clusterId={options.parent?.id}
+        providerId={options.parent?.id}
       />
     );
   };
@@ -177,16 +179,23 @@ const MaasProvider: React.FC = () => {
     <>
       <PageBox>
         <FilterBar
+          actionType="dropdown"
           showSelect={false}
           marginBottom={22}
           marginTop={30}
           widths={{ input: 300 }}
-          buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
+          buttonText={intl.formatMessage({ id: 'providers.button.add' })}
           rowSelection={rowSelection}
           handleInputChange={handleNameChange}
           handleSearch={handleSearch}
           handleDeleteByBatch={handleDeleteBatch}
           handleClickPrimary={handleClickDropdown}
+          actionItems={maasProviderOptions.map((option) => ({
+            ...option,
+            icon: (
+              <IconFont type={option.icon as string} style={{ fontSize: 14 }} />
+            )
+          }))}
         ></FilterBar>
         <TableContext.Provider
           value={{
@@ -203,7 +212,7 @@ const MaasProvider: React.FC = () => {
             renderChildren={renderChildren}
             onTableSort={handleOnSortChange}
             showSorterTooltip={false}
-            dataSource={dataSource.dataList}
+            dataSource={mockDataList}
             loading={dataSource.loading}
             loadend={dataSource.loadend}
             rowSelection={rowSelection}