This is an automated email from the ASF dual-hosted git repository.
healchow pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new 2ab581eb73 [INLONG-8804][Dashboard] Separate plugin images and UI
components (#9006)
2ab581eb73 is described below
commit 2ab581eb739cfcb31ab7daf4ae072ef8d6593318
Author: richardji202 <[email protected]>
AuthorDate: Mon Oct 9 15:43:56 2023 +0800
[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
.../CheckCard/logo => plugins/images}/Doris.png | Bin
.../logo => plugins/images}/Elasticsearch.png | Bin
.../CheckCard/logo => plugins/images}/File.png | Bin
.../logo => plugins/images}/Greenplum.png | Bin
.../CheckCard/logo => plugins/images}/HBase.png | Bin
.../CheckCard/logo => plugins/images}/Hive.png | Bin
.../CheckCard/logo => plugins/images}/Hudi.png | Bin
.../CheckCard/logo => plugins/images}/Iceberg.png | Bin
.../CheckCard/logo => plugins/images}/Kafka.png | Bin
.../CheckCard/logo => plugins/images}/Kudu.png | Bin
.../CheckCard/logo => plugins/images}/MQTT.png | Bin
.../CheckCard/logo => plugins/images}/MongoDB.png | Bin
.../CheckCard/logo => plugins/images}/MySQL.png | Bin
.../CheckCard/logo => plugins/images}/Oracle.png | Bin
.../logo => plugins/images}/PostgreSQL.png | Bin
.../CheckCard/logo => plugins/images}/Pulsar.png | Bin
.../CheckCard/logo => plugins/images}/Redis.png | Bin
.../logo => plugins/images}/SQLServer.png | Bin
.../logo => plugins/images}/StarRocks.png | Bin
.../logo => plugins/images}/TDSQLPostgreSQL.png | Bin
inlong-dashboard/src/plugins/images/index.ts | 19 ++++++++++++++++++
.../src/plugins/sinks/common/SinkDefaultInfo.ts | 2 ++
.../plugins/sources/common/SourceDefaultInfo.ts | 4 ++++
.../src/ui/components/CheckCard/index.tsx | 22 ++++++++++-----------
25 files changed, 36 insertions(+), 11 deletions(-)
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 0000000000..c2a85f7709
--- /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 d662c76391..73969b82ed 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 b119c086bd..1ea4fea74e 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 68c3497912..467bc51222 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]);
