From 2ab581eb739cfcb31ab7daf4ae072ef8d6593318 Mon Sep 17 00:00:00 2001
From: richardji202 <69453277+richardji202@users.noreply.github.com>
Date: Mon, 9 Oct 2023 15:43:56 +0800
Subject: [PATCH] [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
---
 .../logo => plugins/images}/ClickHouse.png    | Bin
 .../logo => plugins/images}/Doris.png         | Bin
 .../logo => plugins/images}/Elasticsearch.png | Bin
 .../logo => plugins/images}/File.png          | Bin
 .../logo => plugins/images}/Greenplum.png     | Bin
 .../logo => plugins/images}/HBase.png         | Bin
 .../logo => plugins/images}/Hive.png          | Bin
 .../logo => plugins/images}/Hudi.png          | Bin
 .../logo => plugins/images}/Iceberg.png       | Bin
 .../logo => plugins/images}/Kafka.png         | Bin
 .../logo => plugins/images}/Kudu.png          | Bin
 .../logo => plugins/images}/MQTT.png          | Bin
 .../logo => plugins/images}/MongoDB.png       | Bin
 .../logo => plugins/images}/MySQL.png         | Bin
 .../logo => plugins/images}/Oracle.png        | Bin
 .../logo => plugins/images}/PostgreSQL.png    | Bin
 .../logo => plugins/images}/Pulsar.png        | Bin
 .../logo => plugins/images}/Redis.png         | Bin
 .../logo => plugins/images}/SQLServer.png     | Bin
 .../logo => plugins/images}/StarRocks.png     | Bin
 .../images}/TDSQLPostgreSQL.png               | Bin
 inlong-dashboard/src/plugins/images/index.ts  |  19 +++++++++++++++
 .../plugins/sinks/common/SinkDefaultInfo.ts   |   2 ++
 .../sources/common/SourceDefaultInfo.ts       |   4 ++++
 .../src/ui/components/CheckCard/index.tsx     |  22 +++++++++---------
 25 files changed, 36 insertions(+), 11 deletions(-)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/ClickHouse.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Doris.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Elasticsearch.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/File.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Greenplum.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/HBase.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Hive.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Hudi.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Iceberg.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Kafka.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Kudu.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/MQTT.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/MongoDB.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/MySQL.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Oracle.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/PostgreSQL.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Pulsar.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/Redis.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/SQLServer.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/StarRocks.png (100%)
 rename inlong-dashboard/src/{ui/components/CheckCard/logo => plugins/images}/TDSQLPostgreSQL.png (100%)
 create mode 100644 inlong-dashboard/src/plugins/images/index.ts

diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/ClickHouse.png b/inlong-dashboard/src/plugins/images/ClickHouse.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/ClickHouse.png
rename to inlong-dashboard/src/plugins/images/ClickHouse.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Doris.png b/inlong-dashboard/src/plugins/images/Doris.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Doris.png
rename to inlong-dashboard/src/plugins/images/Doris.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Elasticsearch.png b/inlong-dashboard/src/plugins/images/Elasticsearch.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Elasticsearch.png
rename to inlong-dashboard/src/plugins/images/Elasticsearch.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/File.png b/inlong-dashboard/src/plugins/images/File.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/File.png
rename to inlong-dashboard/src/plugins/images/File.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Greenplum.png b/inlong-dashboard/src/plugins/images/Greenplum.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Greenplum.png
rename to inlong-dashboard/src/plugins/images/Greenplum.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/HBase.png b/inlong-dashboard/src/plugins/images/HBase.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/HBase.png
rename to inlong-dashboard/src/plugins/images/HBase.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Hive.png b/inlong-dashboard/src/plugins/images/Hive.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Hive.png
rename to inlong-dashboard/src/plugins/images/Hive.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Hudi.png b/inlong-dashboard/src/plugins/images/Hudi.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Hudi.png
rename to inlong-dashboard/src/plugins/images/Hudi.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Iceberg.png b/inlong-dashboard/src/plugins/images/Iceberg.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Iceberg.png
rename to inlong-dashboard/src/plugins/images/Iceberg.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Kafka.png b/inlong-dashboard/src/plugins/images/Kafka.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Kafka.png
rename to inlong-dashboard/src/plugins/images/Kafka.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Kudu.png b/inlong-dashboard/src/plugins/images/Kudu.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Kudu.png
rename to inlong-dashboard/src/plugins/images/Kudu.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/MQTT.png b/inlong-dashboard/src/plugins/images/MQTT.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/MQTT.png
rename to inlong-dashboard/src/plugins/images/MQTT.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/MongoDB.png b/inlong-dashboard/src/plugins/images/MongoDB.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/MongoDB.png
rename to inlong-dashboard/src/plugins/images/MongoDB.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/MySQL.png b/inlong-dashboard/src/plugins/images/MySQL.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/MySQL.png
rename to inlong-dashboard/src/plugins/images/MySQL.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Oracle.png b/inlong-dashboard/src/plugins/images/Oracle.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Oracle.png
rename to inlong-dashboard/src/plugins/images/Oracle.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/PostgreSQL.png b/inlong-dashboard/src/plugins/images/PostgreSQL.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/PostgreSQL.png
rename to inlong-dashboard/src/plugins/images/PostgreSQL.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Pulsar.png b/inlong-dashboard/src/plugins/images/Pulsar.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Pulsar.png
rename to inlong-dashboard/src/plugins/images/Pulsar.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Redis.png b/inlong-dashboard/src/plugins/images/Redis.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/Redis.png
rename to inlong-dashboard/src/plugins/images/Redis.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/SQLServer.png b/inlong-dashboard/src/plugins/images/SQLServer.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/SQLServer.png
rename to inlong-dashboard/src/plugins/images/SQLServer.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/StarRocks.png b/inlong-dashboard/src/plugins/images/StarRocks.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/StarRocks.png
rename to inlong-dashboard/src/plugins/images/StarRocks.png
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/TDSQLPostgreSQL.png b/inlong-dashboard/src/plugins/images/TDSQLPostgreSQL.png
similarity index 100%
rename from inlong-dashboard/src/ui/components/CheckCard/logo/TDSQLPostgreSQL.png
rename to inlong-dashboard/src/plugins/images/TDSQLPostgreSQL.png
diff --git a/inlong-dashboard/src/plugins/images/index.ts b/inlong-dashboard/src/plugins/images/index.ts
new file mode 100644
index 00000000000..c2a85f77098
--- /dev/null
+++ b/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`);
diff --git a/inlong-dashboard/src/plugins/sinks/common/SinkDefaultInfo.ts b/inlong-dashboard/src/plugins/sinks/common/SinkDefaultInfo.ts
index d662c76391a..73969b82edb 100644
--- a/inlong-dashboard/src/plugins/sinks/common/SinkDefaultInfo.ts
+++ b/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),
         })),
     }),
   })
diff --git a/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts b/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts
index b119c086bdc..1ea4fea74eb 100644
--- a/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts
+++ b/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),
             })),
         });
       }
diff --git a/inlong-dashboard/src/ui/components/CheckCard/index.tsx b/inlong-dashboard/src/ui/components/CheckCard/index.tsx
index 68c3497912e..467bc512227 100644
--- a/inlong-dashboard/src/ui/components/CheckCard/index.tsx
+++ b/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]);