style: display target model name

src/config/global.d.ts

@@ -1,4 +1,4 @@
-type PageActionType = 'create' | 'update' | 'view' | 'edit';
+type PageActionType = 'create' | 'update' | 'view' | 'edit' | 'copy';
 declare namespace Global {
   type WithFalse<T> = T | false;
   interface Pagination {

src/pages/llmodels/components/access-control-modal/index.tsx

@@ -2,16 +2,17 @@ import AlertBlockInfo from '@/components/alert-info/block';
 import ModalFooter from '@/components/modal-footer';
 import { PageActionType } from '@/config/types';
 import FormDrawer from '@/pages/_components/form-drawer';
+import { RouteItem } from '@/pages/model-routes/config/types';
 import { useIntl } from '@umijs/max';
 import { message } from 'antd';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { updateModelAccessUser } from '../../apis';
-import { AccessControlFormData, ListItem } from '../../config/types';
+import { AccessControlFormData } from '../../config/types';
 import AccessControlForm from './form';
 
 const AccessControlModal: React.FC<
-  Global.ScrollerModalProps<ListItem, AccessControlFormData>
+  Global.ScrollerModalProps<RouteItem, AccessControlFormData>
 > = ({ open, title, currentData, action, onCancel }) => {
   const intl = useIntl();
   const form = useRef<any>(null);

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

@@ -1,3 +1,4 @@
+import GPUStackLogo from '@/assets/images/small-logo-200x200.png';
 import ai360 from '@/assets/providers-logo/ai360.svg';
 import azure from '@/assets/providers-logo/azureai.svg';
 import baichuan from '@/assets/providers-logo/baichuan.svg';
@@ -66,7 +67,8 @@ const ProviderLogoMap: Record<string, string> = {
   [ProviderEnum.TOGETHERAI]: togetherai,
   [ProviderEnum.ZHIPUAI]: zhipuai,
   [ProviderEnum.GITHUB]: github,
-  [ProviderEnum.TRITON]: triton
+  [ProviderEnum.TRITON]: triton,
+  ['deployments']: GPUStackLogo
 };
 
 const ProviderLogo: React.FC<{

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

@@ -21,7 +21,6 @@ const ProviderModels: React.FC<ProviderModelProps> = ({ dataList }) => {
     none: <WarningOutlined />
   };
   return (
-    <div style={{ paddingInline: 16 }}>
     <Flex gap="8px" wrap="wrap">
       {dataList.map((model) => (
         <Tag
@@ -59,7 +58,6 @@ const ProviderModels: React.FC<ProviderModelProps> = ({ dataList }) => {
         </Tag>
       ))}
     </Flex>
-    </div>
   );
 };
 

src/pages/model-routes/components/route-targets.tsx

@@ -2,6 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import RowChildren from '@/components/seal-table/components/row-children';
 import StatusTag from '@/components/status-tag';
+import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
@@ -10,6 +11,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { TargetStatus, TargetStatusLabelMap } from '../config';
 import { RouteTarget } from '../config/types';
+
 const CellContent = styled.div`
   display: flex;
   align-items: center;
@@ -20,12 +22,14 @@ interface ProviderModelProps {
   dataList: RouteTarget[];
   onSelect: (val: any, record: any) => void;
   sourceModels: any[];
+  modelList?: Global.BaseOption<number>[];
 }
 
-interface AccessItemProps {
+interface TargetItemProps {
   onSelect: (val: any, record: any) => void;
   data: any;
   sourceModels: any[];
+  modelList?: Global.BaseOption<number>[];
 }
 
 export const childActionList = [
@@ -44,10 +48,11 @@ export const childActionList = [
   }
 ];
 
-const RouteItem: React.FC<AccessItemProps> = ({
+const RouteItem: React.FC<TargetItemProps> = ({
   onSelect,
   data,
-  sourceModels
+  sourceModels,
+  modelList
 }) => {
   const intl = useIntl();
 
@@ -58,8 +63,19 @@ const RouteItem: React.FC<AccessItemProps> = ({
       }
       return item.value === data.provider_id;
     });
-    console.log('renderProviderSource model:', data, sourceModels);
+    if (!model) {
-    return model?.label || '-';
+      return '-';
+    }
+    return (
+      <span className="flex-center" style={{ gap: 8, width: '100%' }}>
+        <ProviderLogo provider={model.providerType}></ProviderLogo>
+        <AutoTooltip ghost minWidth={20}>
+          {data.model_id
+            ? modelList?.find((m) => m.value === data.model_id)?.label
+            : data.provider_model_name}
+        </AutoTooltip>
+      </span>
+    );
   };
   return (
     <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
@@ -74,7 +90,7 @@ const RouteItem: React.FC<AccessItemProps> = ({
               <AutoTooltip ghost>{data.name}</AutoTooltip>
             </CellContent>
           </Col>
-          <Col span={4} style={{ paddingLeft: 56 }}>
+          <Col span={5} style={{ paddingLeft: 56 }}>
             <CellContent>{renderProviderSource()}</CellContent>
           </Col>
           <Col span={3}>
@@ -101,7 +117,7 @@ const RouteItem: React.FC<AccessItemProps> = ({
                 )}
             </CellContent>
           </Col>
-          <Col span={3}>
+          <Col span={2}>
             <CellContent>
               <AutoTooltip ghost>
                 <StatusTag
@@ -142,6 +158,7 @@ const RouteItem: React.FC<AccessItemProps> = ({
 const RouteTargets: React.FC<ProviderModelProps> = ({
   dataList,
   onSelect,
+  modelList,
   sourceModels
 }) => {
   return (
@@ -152,6 +169,7 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
           key={index}
           onSelect={onSelect}
           sourceModels={sourceModels}
+          modelList={modelList}
         ></RouteItem>
       ))}
     </div>

src/pages/model-routes/hooks/use-target-source-models.tsx

@@ -50,6 +50,7 @@ const useTargetSourceModels = () => {
             </OptionWrapper>
           ),
           value: 'deployments',
+          providerType: 'deployments',
           parent: true,
           children: models.items?.map?.((model: ModelListItem) => ({
             label: model.name,
@@ -73,6 +74,7 @@ const useTargetSourceModels = () => {
           ),
           value: provider.id,
           parent: true,
+          providerType: provider.config?.type,
           children: provider.models?.map?.((model) => ({
             label: model.name,
             value: model.name,

src/pages/model-routes/index.tsx

@@ -15,9 +15,10 @@ import { useMemoizedFn } from 'ahooks';
 import { message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import NoResult from '../_components/no-result';
 import PageBox from '../_components/page-box';
+import { queryModelsList } from '../llmodels/apis';
 import AccessControlModal from '../llmodels/components/access-control-modal';
 import {
   MODEL_ROUTES,
@@ -72,6 +73,24 @@ const Accesses: React.FC = () => {
     openAccessControlModalStatus
   } = useAccessControl();
   const { sourceModels, fetchSourceModels } = useTargetSourceModels();
+  const [modelList, setModelsList] = useState<Global.BaseOption<number>[]>([]);
+
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const res = await queryModelsList({ page: -1 });
+        const models =
+          res.items?.map((model) => ({
+            label: model.name,
+            value: model.id
+          })) || [];
+        setModelsList(models);
+      } catch (error) {
+        setModelsList([]);
+      }
+    };
+    fetchModels();
+  }, []);
 
   const handleClickDropdown = () => {
     openRouteModal(
@@ -193,6 +212,7 @@ const Accesses: React.FC = () => {
   ) => {
     return (
       <RouteTargets
+        modelList={modelList}
         dataList={list}
         onSelect={onChildSelect}
         sourceModels={sourceModels}
@@ -289,7 +309,7 @@ const Accesses: React.FC = () => {
         onCancel={closeAccessControlModal}
         title={openAccessControlModalStatus.title}
         open={openAccessControlModalStatus.open}
-        currentData={openAccessControlModalStatus.currentData || null}
+        currentData={openAccessControlModalStatus.currentData}
         action={openAccessControlModalStatus.action}
       ></AccessControlModal>
       <DeleteModal ref={modalRef}></DeleteModal>