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 7a57760542 [INLONG-8008][Dashboard] Add default icon for different
data nodes (#8770)
7a57760542 is described below
commit 7a577605425028be1dd6b8597a7787772d6c4c60
Author: richardji202 <[email protected]>
AuthorDate: Mon Aug 21 17:21:59 2023 +0800
[INLONG-8008][Dashboard] Add default icon for different data nodes (#8770)
* [INLONG-8008][Dashboard] Add default icon for different data nodes
* [INLONG-8008][Dashboard] Change "Mongodb" to "MongoDB"
* [INLONG-8008][Dashboard] Add Tooltip and Translate the comment info
English
* [INLONG-8008][Dashboard] Remove Mongodb.png
---
.../src/plugins/sources/defaults/index.ts | 2 +-
.../src/ui/components/CheckCard/index.module.less | 18 ++++++++
.../src/ui/components/CheckCard/index.tsx | 49 ++++++++++++++++++---
.../ui/components/CheckCard/logo/ClickHouse.png | Bin 0 -> 92597 bytes
.../src/ui/components/CheckCard/logo/Doris.png | Bin 0 -> 21669 bytes
.../ui/components/CheckCard/logo/Elasticsearch.png | Bin 0 -> 263903 bytes
.../src/ui/components/CheckCard/logo/File.png | Bin 0 -> 15400 bytes
.../src/ui/components/CheckCard/logo/Greenplum.png | Bin 0 -> 14436 bytes
.../src/ui/components/CheckCard/logo/HBase.png | Bin 0 -> 21196 bytes
.../src/ui/components/CheckCard/logo/Hive.png | Bin 0 -> 25237 bytes
.../src/ui/components/CheckCard/logo/Hudi.png | Bin 0 -> 14848 bytes
.../src/ui/components/CheckCard/logo/Iceberg.png | Bin 0 -> 11068 bytes
.../src/ui/components/CheckCard/logo/Kafka.png | Bin 0 -> 372391 bytes
.../src/ui/components/CheckCard/logo/Kudu.png | Bin 0 -> 21572 bytes
.../src/ui/components/CheckCard/logo/MQTT.png | Bin 0 -> 40272 bytes
.../src/ui/components/CheckCard/logo/MongoDB.png | Bin 0 -> 288742 bytes
.../src/ui/components/CheckCard/logo/MySQL.png | Bin 0 -> 49318 bytes
.../src/ui/components/CheckCard/logo/Oracle.png | Bin 0 -> 177423 bytes
.../ui/components/CheckCard/logo/PostgreSQL.png | Bin 0 -> 63200 bytes
.../src/ui/components/CheckCard/logo/Redis.png | Bin 0 -> 62668 bytes
.../src/ui/components/CheckCard/logo/SQLServer.png | Bin 0 -> 211804 bytes
.../src/ui/components/CheckCard/logo/StarRocks.png | Bin 0 -> 4279 bytes
.../components/CheckCard/logo/TDSQLPostgreSQL.png | Bin 0 -> 27434 bytes
.../pages/GroupDetail/DataSources/DetailModal.tsx | 2 +-
24 files changed, 64 insertions(+), 7 deletions(-)
diff --git a/inlong-dashboard/src/plugins/sources/defaults/index.ts
b/inlong-dashboard/src/plugins/sources/defaults/index.ts
index 4d9ef7b974..13f6e9717e 100644
--- a/inlong-dashboard/src/plugins/sources/defaults/index.ts
+++ b/inlong-dashboard/src/plugins/sources/defaults/index.ts
@@ -45,7 +45,7 @@ export const allDefaultSources:
MetaExportWithBackendList<SourceMetaType> = [
LoadEntity: () => import('./MySQLBinlog'),
},
{
- label: 'Mongodb',
+ label: 'MongoDB',
value: 'MONGODB',
LoadEntity: () => import('./Mongodb'),
},
diff --git a/inlong-dashboard/src/ui/components/CheckCard/index.module.less
b/inlong-dashboard/src/ui/components/CheckCard/index.module.less
index 1d2952c53a..d0e86d1f4b 100644
--- a/inlong-dashboard/src/ui/components/CheckCard/index.module.less
+++ b/inlong-dashboard/src/ui/components/CheckCard/index.module.less
@@ -43,3 +43,21 @@
transform: translateX(5px);
}
}
+
+.cardInfo {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ border-radius: 8px;
+ margin: -12px;
+ background-color: #FFF;
+ height: 36px;
+ color: #000;
+
+ img {
+ background-color: #FFF;
+ border-radius: 8px;
+ max-width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/inlong-dashboard/src/ui/components/CheckCard/index.tsx
b/inlong-dashboard/src/ui/components/CheckCard/index.tsx
index 65b85feea7..68c3497912 100644
--- a/inlong-dashboard/src/ui/components/CheckCard/index.tsx
+++ b/inlong-dashboard/src/ui/components/CheckCard/index.tsx
@@ -18,7 +18,7 @@
*/
import React, { useState, useEffect } from 'react';
-import { Card, Col, Row, theme } from 'antd';
+import { Card, Col, Row, theme, Tooltip } from 'antd';
import { DoubleRightOutlined, DatabaseOutlined } from '@ant-design/icons';
import styles from './index.module.less';
@@ -40,6 +40,8 @@ const { useToken } = theme;
const CheckCard: React.FC<CheckCardProps> = ({ options, value, onChange,
disabled, span = 6 }) => {
const [currentValue, setCurrentValue] = useState(value);
+ const [logoMap, setLogoMap] = useState({});
+
const [isExpand, setExpandStatus] = useState(!Boolean(currentValue));
const { token } = useToken();
@@ -52,6 +54,29 @@ const CheckCard: React.FC<CheckCardProps> = ({ options,
value, onChange, disable
// eslint-disable-next-line
}, [value]);
+ useEffect(() => {
+ /*
+ The dynamic loading of logo images is based on the "label" property of
the option.
+ Since Vite does not support require.context, import() is used instead.
+ It also can be used to determine whether the image exists and handle the
module cache.
+ */
+ (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;
+ }, {}),
+ );
+ })();
+ }, [options]);
+
const handleCardClick = newValue => {
setExpandStatus(false);
if (newValue !== currentValue) {
@@ -62,8 +87,23 @@ const CheckCard: React.FC<CheckCardProps> = ({ options,
value, onChange, disable
}
};
+ const renderContent = label => (
+ <Tooltip placement="top" title={label}>
+ <div className={styles.cardInfo}>
+ {logoMap[label] ? (
+ <img height="100%" alt={label} src={logoMap[label]}></img>
+ ) : (
+ <>
+ <DatabaseOutlined style={{ fontSize: 20 }} />
+ <span>{label}</span>
+ </>
+ )}
+ </div>
+ </Tooltip>
+ );
+
return (
- <Row gutter={10} className={styles.cardRow}>
+ <Row gutter={15} className={styles.cardRow}>
{!isExpand ? (
<>
<Col span={span} className={styles.cardCol}>
@@ -72,8 +112,7 @@ const CheckCard: React.FC<CheckCardProps> = ({ options,
value, onChange, disable
bodyStyle={{ textAlign: 'center' }}
className={disabled ? styles.cardDisabled : ''}
>
- <DatabaseOutlined style={{ fontSize: 20 }} />
- <div>{options.find(item => item.value ===
currentValue)?.label}</div>
+ {renderContent(options.find(item => item.value ===
currentValue)?.label)}
</Card>
</Col>
{!disabled && (
@@ -94,7 +133,7 @@ const CheckCard: React.FC<CheckCardProps> = ({ options,
value, onChange, disable
onClick={() => handleCardClick(item.value)}
style={item.value === currentValue ? { borderColor:
token.colorPrimary } : {}}
>
- {item.label}
+ {renderContent(item.label)}
</Card>
</Col>
))
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/ClickHouse.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/ClickHouse.png
new file mode 100644
index 0000000000..0d1e4f1145
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/ClickHouse.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Doris.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Doris.png
new file mode 100644
index 0000000000..b2a0f261ae
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Doris.png differ
diff --git
a/inlong-dashboard/src/ui/components/CheckCard/logo/Elasticsearch.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Elasticsearch.png
new file mode 100644
index 0000000000..f5bd2df0c4
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Elasticsearch.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/File.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/File.png
new file mode 100644
index 0000000000..1990e698e2
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/File.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Greenplum.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Greenplum.png
new file mode 100644
index 0000000000..fa1571a8fd
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Greenplum.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/HBase.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/HBase.png
new file mode 100644
index 0000000000..e91eb8d740
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/HBase.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Hive.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Hive.png
new file mode 100644
index 0000000000..9a49644c26
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Hive.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Hudi.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Hudi.png
new file mode 100644
index 0000000000..96ae05e396
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Hudi.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Iceberg.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Iceberg.png
new file mode 100644
index 0000000000..82f18a2ef1
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Iceberg.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Kafka.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Kafka.png
new file mode 100644
index 0000000000..f7347cd703
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Kafka.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Kudu.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Kudu.png
new file mode 100644
index 0000000000..1afca89769
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Kudu.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/MQTT.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/MQTT.png
new file mode 100644
index 0000000000..fa7fca714e
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/MQTT.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/MongoDB.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/MongoDB.png
new file mode 100644
index 0000000000..cb2e7a3a09
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/MongoDB.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/MySQL.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/MySQL.png
new file mode 100644
index 0000000000..8800d27203
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/MySQL.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Oracle.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Oracle.png
new file mode 100644
index 0000000000..7a89089513
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Oracle.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/PostgreSQL.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/PostgreSQL.png
new file mode 100644
index 0000000000..6d79be3867
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/PostgreSQL.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/Redis.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/Redis.png
new file mode 100644
index 0000000000..16ce300ec1
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/Redis.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/SQLServer.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/SQLServer.png
new file mode 100644
index 0000000000..2ceda69288
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/SQLServer.png differ
diff --git a/inlong-dashboard/src/ui/components/CheckCard/logo/StarRocks.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/StarRocks.png
new file mode 100644
index 0000000000..f0e325c9fb
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/StarRocks.png differ
diff --git
a/inlong-dashboard/src/ui/components/CheckCard/logo/TDSQLPostgreSQL.png
b/inlong-dashboard/src/ui/components/CheckCard/logo/TDSQLPostgreSQL.png
new file mode 100644
index 0000000000..e005f7beb5
Binary files /dev/null and
b/inlong-dashboard/src/ui/components/CheckCard/logo/TDSQLPostgreSQL.png differ
diff --git
a/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/DetailModal.tsx
b/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/DetailModal.tsx
index 1daf710156..970ccd6106 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/DetailModal.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/DetailModal.tsx
@@ -108,7 +108,7 @@ const Comp: React.FC<Props> = ({
<Modal
{...modalProps}
title={id ? t('pages.GroupDetail.Sources.Edit') :
t('pages.GroupDetail.Sources.Create')}
- width={666}
+ width={777}
onOk={onOk}
>
<Spin spinning={loading}>
