resolve oceanbase/odc#747

oceanbase · Nov 13, 2023 · aaee738 · aaee738
1 parent 597ec21
commit aaee738
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/page/Project/Database/AddDataBaseButton/index.tsx b/src/page/Project/Database/AddDataBaseButton/index.tsx
@@ -19,8 +19,10 @@ import { listDatabases, updateDataBase } from '@/common/network/database';
 import RiskLevelLabel from '@/component/RiskLevelLabel';
 import { formatMessage } from '@/util/intl';
 import { useRequest } from 'ahooks';
-import { Button, Col, Form, message, Modal, Row, Select, Tag } from 'antd';
+import { Button, Col, Form, message, Modal, Row, Select, Space, Tag } from 'antd';
 import { useState } from 'react';
+import Icon from '@ant-design/icons';
+import { getDataSourceStyle, getDataSourceStyleByConnectType } from '@/common/datasource';
 
 interface IProps {
   projectId: number;
@@ -114,7 +116,16 @@ export default function AddDataBaseButton({ projectId, onSuccess }: IProps) {
                   onChange={() => form.setFieldsValue({ databaseIds: [] })}
                 >
                   {dataSourceList?.contents?.map((item) => {
-                    return <Select.Option key={item.id}>{item.name}</Select.Option>;
+                    const icon = getDataSourceStyleByConnectType(item.type);
+                    return (
+                      <Select.Option key={item.id}>
+                        <Icon
+                          component={icon?.icon?.component}
+                          style={{ color: icon?.icon?.color, fontSize: 16, marginRight: 4 }}
+                        />
+                        {item.name}
+                      </Select.Option>
+                    );
                   })}
                 </Select>
               </Form.Item>

diff --git a/src/page/Project/Database/index.tsx b/src/page/Project/Database/index.tsx
@@ -18,6 +18,7 @@ import { listDatabases } from '@/common/network/database';
 import { listEnvironments } from '@/common/network/env';
 import Action from '@/component/Action';
 import FilterIcon from '@/component/Button/FIlterIcon';
+import Icon from '@ant-design/icons';
 import Reload from '@/component/Button/Reload';
 import HelpDoc from '@/component/helpDoc';
 import MiniTable from '@/component/Table/MiniTable';
@@ -42,6 +43,7 @@ import RiskLevelLabel from '@/component/RiskLevelLabel';
 import {
   getDataSourceModeConfig,
   getDataSourceModeConfigByConnectionMode,
+  getDataSourceStyleByConnectType,
 } from '@/common/datasource';
 interface IProps {
   id: string;
@@ -166,6 +168,21 @@ const Database: React.FC<IProps> = ({ id }) => {
             title: formatMessage({ id: 'odc.Project.Database.DataSource' }), //所属数据源
             dataIndex: ['dataSource', 'name'],
             width: 160,
+            render(value, record, index) {
+              /**
+               * return datasource icon + label
+               */
+              const style = getDataSourceStyleByConnectType(record.dataSource?.type);
+              return (
+                <Space size={4}>
+                  <Icon
+                    component={style?.icon?.component}
+                    style={{ color: style?.icon?.color, fontSize: 16 }}
+                  />
+                  {value}
+                </Space>
+              );
+            },
           },
           {
             title: formatMessage({ id: 'odc.Project.Database.Environment' }), //环境