fix: deduplicate in select provider models and target models

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

@@ -88,7 +88,7 @@ const RouteItem: React.FC<TargetItemProps> = ({
           <Col span={5} style={{ paddingLeft: 56 }}>
             <CellContent>{renderProviderSource()}</CellContent>
           </Col>
-          <Col span={3}>
+          <Col span={2}>
             <CellContent>
               {data.weight > 0 && (
                 <AutoTooltip ghost>
@@ -112,7 +112,7 @@ const RouteItem: React.FC<TargetItemProps> = ({
                 )}
             </CellContent>
           </Col>
-          <Col span={2}>
+          <Col span={3}>
             <CellContent>
               <AutoTooltip ghost>
                 <StatusTag

src/pages/model-routes/forms/targets.tsx

@@ -134,16 +134,18 @@ const TargetsForm = forwardRef((props, ref) => {
 
     const selectedDataList = [...dataList, { value: fallbackValues.value }];
 
-    const selectedKeys = selectedDataList
-      .filter((item) => item.value)
-      .map((item) => buildKey(item.value));
+    const selectedKeys = new Set(
+      selectedDataList
+        .filter((item) => item.value)
+        .map((item) => buildKey(item.value))
+    );
 
     return sourceModels
       .map((model) => {
         const children = model.children?.filter((child) => {
           const key = buildKey([child.data?.parentId, child.value]);
 
-          return !selectedKeys.includes(key) || key === currKey;
+          return !selectedKeys.has(key) || key === currKey;
         });
 
         return {

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

@@ -5,6 +5,7 @@ import { queryMaasProviders } from '@/pages/maas-provider/apis';
 import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { MaasProviderItem } from '@/pages/maas-provider/config/types';
 import { useIntl } from '@umijs/max';
+import _ from 'lodash';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
@@ -52,30 +53,27 @@ const useTargetSourceModels = () => {
           value: 'deployments',
           providerType: 'deployments',
           parent: true,
-          children: models.items?.map?.((model: ModelListItem) => ({
-            label: model.name,
-            value: model.id,
-            data: {
-              model_id: model.id,
-              parentId: 'deployments'
-            },
-            source: 'deployment'
-          }))
+          children: _.uniqBy(
+            models.items?.map?.((model: ModelListItem) => [
+              model.id,
+              {
+                label: model.name,
+                value: model.id,
+                data: {
+                  model_id: model.id,
+                  parentId: 'deployments'
+                },
+                source: 'deployment'
+              }
+            ]),
+            'value'
+          )
         }
       ].filter((group) => group.children && group.children.length > 0);
 
       const providerOptions: CascaderOption[] = providers.items
-        ?.map?.((provider: MaasProviderItem) => ({
-          label: (
-            <OptionWrapper>
-              <ProviderLogo provider={provider.config?.type as string} />
-              <span>{provider.name}</span>
-            </OptionWrapper>
-          ),
-          value: provider.id,
-          parent: true,
-          providerType: provider.config?.type,
-          children: provider.models?.map?.((model) => ({
+        ?.map?.((provider: MaasProviderItem) => {
+          const children = provider.models?.map?.((model) => ({
             label: model.name,
             value: model.name,
             data: {
@@ -84,8 +82,21 @@ const useTargetSourceModels = () => {
               parentId: provider.id
             },
             source: 'providerModel'
-          }))
-        }))
+          }));
+
+          return {
+            label: (
+              <OptionWrapper>
+                <ProviderLogo provider={provider.config?.type as string} />
+                <span>{provider.name}</span>
+              </OptionWrapper>
+            ),
+            value: provider.id,
+            parent: true,
+            providerType: provider.config?.type,
+            children: _.uniqBy(children, 'value')
+          };
+        })
         .filter((group) => group.children && group.children.length > 0);
 
       setSourceModels([...modelsList, ...providerOptions]);

src/pages/model-routes/index.tsx

@@ -65,8 +65,13 @@ const ModelRoutes: React.FC = () => {
   const { watchDataList: allRouteTargets, deleteItemFromCache } =
     useWatchList(MODEL_ROUTE_TARGETS);
   const [expandAtom] = useAtom(expandKeysAtom);
-  const { handleExpandChange, handleExpandAll, expandedRowKeys } =
-    useExpandedRowKeys(expandAtom);
+  const {
+    handleExpandChange,
+    handleExpandAll,
+    updateExpandedRowKeys,
+    removeExpandedRowKey,
+    expandedRowKeys
+  } = useExpandedRowKeys(expandAtom);
   const intl = useIntl();
   const { openRouteModalStatus, openRouteModal, closeRouteModal } =
     useCreateRoute();
@@ -109,17 +114,22 @@ const ModelRoutes: React.FC = () => {
       ...data
     };
     try {
+      let data: ListItem = {} as any;
       if (openRouteModalStatus.action === PageAction.EDIT) {
-        await updateModelRoute({
+        data = await updateModelRoute({
           data: params,
           id: openRouteModalStatus.currentData!.id
         });
       }
       if (openRouteModalStatus.action === PageAction.CREATE) {
-        await createModelRoute({
+        data = await createModelRoute({
           data: params
         });
       }
+
+      if (data.targets > 0) {
+        updateExpandedRowKeys([data.id, ...expandedRowKeys]);
+      }
       fetchData();
       closeRouteModal();
       message.success(intl.formatMessage({ id: 'common.message.success' }));