style: display target model name

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);
-    return model?.label || '-';
+    if (!model) {
+      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>