[INLONG-8804][Dashboard] Separate plugin images and UI components (#9006

)

* [INLONG-8804][Dashboard] Separate plugin images and UI components

* [INLONG-8804][Dashboard] Change the image key to "label" in the CheckCard component

inlong-dashboard/src/plugins/images/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export const loadImage = (img: string) => import(`./${img}.png`);

inlong-dashboard/src/plugins/sinks/common/SinkDefaultInfo.ts

@@ -20,6 +20,7 @@
 import { DataWithBackend } from '@/plugins/DataWithBackend';
 import { RenderRow } from '@/plugins/RenderRow';
 import { RenderList } from '@/plugins/RenderList';
+import { loadImage } from '@/plugins/images';
 import i18n from '@/i18n';
 import CheckCard from '@/ui/components/CheckCard';
 import { statusList, genStatusTag } from './status';
@@ -68,6 +69,7 @@ export class SinkDefaultInfo implements DataWithBackend, RenderRow, RenderList {
         .map(item => ({
           label: item.label,
           value: item.value,
+          image: loadImage(item.label),
         })),
     }),
   })

inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts

@@ -20,6 +20,7 @@
 import { DataWithBackend } from '@/plugins/DataWithBackend';
 import { RenderRow } from '@/plugins/RenderRow';
 import { RenderList } from '@/plugins/RenderList';
+import { loadImage } from '@/plugins/images';
 import CheckCard from '@/ui/components/CheckCard';
 import { statusList, genStatusTag } from './status';
 import { sources, defaultValue } from '..';
@@ -66,6 +67,7 @@ export class SourceDefaultInfo implements DataWithBackend, RenderRow, RenderList
         .map(item => ({
           label: item.label,
           value: item.value,
+          image: loadImage(item.label),
         })),
     }),
   })
@@ -133,6 +135,7 @@ export class SourceDefaultInfo implements DataWithBackend, RenderRow, RenderList
             .map(item => ({
               label: item.label,
               value: item.value,
+              image: loadImage(item.label),
             })),
         });
       }
@@ -152,6 +155,7 @@ export class SourceDefaultInfo implements DataWithBackend, RenderRow, RenderList
             .map(item => ({
               label: item.label,
               value: item.value,
+              image: loadImage(item.label),
             })),
         });
       }

inlong-dashboard/src/ui/components/CheckCard/index.tsx

@@ -25,6 +25,7 @@ import styles from './index.module.less';
 export interface CheckCardOption {
   label: string;
   value: string | number;
+  image?: string | Promise<{ default: string }>;
 }
 
 export interface CheckCardProps {
@@ -62,17 +63,16 @@ const CheckCard: React.FC<CheckCardProps> = ({ options, value, onChange, disable
     */
     (async () => {
       setLogoMap(
-        (
-          await Promise.allSettled(options.map(option => import(`./logo/${option.label}.png`)))
-        ).reduce((res, item) => {
-          if (item.status === 'fulfilled') {
-            const {
-              value: { default: url },
-            } = item;
-            res[url.split('/').pop().split('.').shift()] = url;
-          }
-          return res;
-        }, {}),
+        (await Promise.allSettled(options.map(option => option.image))).reduce(
+          (res, item, index) => {
+            if (item.status === 'fulfilled' && item.value) {
+              const url = typeof item.value === 'string' ? item.value : item.value.default;
+              res[options[index].label] = url;
+            }
+            return res;
+          },
+          {},
+        ),
       );
     })();
   }, [options]);