This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 5229ac040 fix(config-ui): some styles for connection detail (#6815)
5229ac040 is described below
commit 5229ac040ee56c2cb7176ac8ece7961635058f5d
Author: 青湛 <[email protected]>
AuthorDate: Tue Jan 16 16:15:54 2024 +1300
fix(config-ui): some styles for connection detail (#6815)
---
config-ui/src/routes/connection/connection.tsx | 200 +++++++++++++------------
1 file changed, 102 insertions(+), 98 deletions(-)
diff --git a/config-ui/src/routes/connection/connection.tsx
b/config-ui/src/routes/connection/connection.tsx
index 45179e430..4683d0f8f 100644
--- a/config-ui/src/routes/connection/connection.tsx
+++ b/config-ui/src/routes/connection/connection.tsx
@@ -19,7 +19,7 @@
import { useState, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { DeleteOutlined, PlusOutlined, NodeIndexOutlined, LinkOutlined,
ClearOutlined } from '@ant-design/icons';
-import { theme, Table, Button, Modal, message, Space } from 'antd';
+import { theme, Space, Table, Button, Modal, message } from 'antd';
import API from '@/api';
import { PageHeader, Message } from '@/components';
@@ -235,106 +235,110 @@ export const Connection = () => {
</Button>
}
>
- <div style={{ marginBottom: 36 }}>
- <span>Status:</span>
- <ConnectionStatus connection={connection} />
- </div>
- <div style={{ marginBottom: 36 }}>
- Please note: In order to view DORA metrics, you will need to add Scope
Configs.
- </div>
- <div style={{ marginBottom: 36 }}>
- <Button type="primary" icon={<PlusOutlined />}
onClick={handleShowCreateDataScopeDialog}>
- Add Data Scope
- </Button>
- {plugin !== 'tapd' && pluginConfig.scopeConfig && (
- <Button
- style={{ marginLeft: 8 }}
- type="primary"
- disabled={!scopeIds.length}
- icon={<NodeIndexOutlined />}
- onClick={() => handleShowScopeConfigSelectDialog(scopeIds)}
- >
- Associate Scope Config
+ <Space style={{ display: 'flex' }} direction="vertical" size={36}>
+ <div>
+ <span style={{ marginRight: 4 }}>Status:</span>
+ <ConnectionStatus connection={connection} />
+ </div>
+ <div>Please note: In order to view DORA metrics, you will need to add
Scope Configs.</div>
+ <div>
+ <Button type="primary" icon={<PlusOutlined />}
onClick={handleShowCreateDataScopeDialog}>
+ Add Data Scope
</Button>
- )}
- </div>
- <Table
- rowKey="id"
- size="middle"
- loading={!ready}
- columns={[
- {
- title: 'Data Scope',
- dataIndex: 'name',
- key: 'name',
- },
- {
- title: 'Project',
- dataIndex: 'projects',
- key: 'projects',
- render: (projects) => (
- <>
- {projects.length ? (
- <ul>
- {projects.map((it: string) => (
- <li key={it}>
- <Link to={PATHS.PROJECT(it)}>{it}</Link>
- </li>
- ))}
- </ul>
- ) : (
- '-'
- )}
- </>
- ),
- },
- {
- title: 'Scope Config',
- key: 'scopeConfig',
- align: 'center',
- width: 400,
- render: (_, { id, configId, configName }) => (
- <>
- <span>{configId ? configName : 'N/A'}</span>
- {pluginConfig.scopeConfig && (
+ {plugin !== 'tapd' && pluginConfig.scopeConfig && (
+ <Button
+ style={{ marginLeft: 8 }}
+ type="primary"
+ disabled={!scopeIds.length}
+ icon={<NodeIndexOutlined />}
+ onClick={() => handleShowScopeConfigSelectDialog(scopeIds)}
+ >
+ Associate Scope Config
+ </Button>
+ )}
+ </div>
+ <Table
+ rowKey="id"
+ size="middle"
+ loading={!ready}
+ columns={[
+ {
+ title: 'Data Scope',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Project',
+ dataIndex: 'projects',
+ key: 'projects',
+ render: (projects) => (
+ <>
+ {projects.length ? (
+ <ul>
+ {projects.map((it: string) => (
+ <li key={it}>
+ <Link to={PATHS.PROJECT(it)}>{it}</Link>
+ </li>
+ ))}
+ </ul>
+ ) : (
+ '-'
+ )}
+ </>
+ ),
+ },
+ {
+ title: 'Scope Config',
+ key: 'scopeConfig',
+ align: 'center',
+ width: 400,
+ render: (_, { id, configId, configName }) => (
+ <>
+ <span>{configId ? configName : 'N/A'}</span>
+ {pluginConfig.scopeConfig && (
+ <Button
+ type="link"
+ icon={<LinkOutlined />}
+ onClick={() => {
+ handleShowScopeConfigSelectDialog([id]);
+ setScopeConfigId(configId);
+ }}
+ />
+ )}
+ </>
+ ),
+ },
+ {
+ title: '',
+ dataIndex: 'id',
+ key: 'id',
+ align: 'center',
+ width: 200,
+ render: (id) => (
+ <Space>
+ <Button type="primary" icon={<ClearOutlined />} onClick={()
=> handleShowClearDataScopeDialog(id)} />
<Button
- type="link"
- icon={<LinkOutlined />}
- onClick={() => {
- handleShowScopeConfigSelectDialog([id]);
- setScopeConfigId(configId);
- }}
+ type="primary"
+ icon={<DeleteOutlined />}
+ onClick={() => handleShowDeleteDataScopeDialog(id)}
/>
- )}
- </>
- ),
- },
- {
- title: '',
- dataIndex: 'id',
- key: 'id',
- align: 'center',
- width: 200,
- render: (id) => (
- <Space>
- <Button type="primary" icon={<ClearOutlined />} onClick={() =>
handleShowClearDataScopeDialog(id)} />
- <Button type="primary" icon={<DeleteOutlined />} onClick={()
=> handleShowDeleteDataScopeDialog(id)} />
- </Space>
- ),
- },
- ]}
- dataSource={dataSource}
- pagination={{
- current: page,
- pageSize,
- total,
- onChange: setPage,
- }}
- rowSelection={{
- selectedRowKeys: scopeIds,
- onChange: (selectedRowKeys) => setScopeIds(selectedRowKeys),
- }}
- />
+ </Space>
+ ),
+ },
+ ]}
+ dataSource={dataSource}
+ pagination={{
+ current: page,
+ pageSize,
+ total,
+ onChange: setPage,
+ }}
+ rowSelection={{
+ selectedRowKeys: scopeIds,
+ onChange: (selectedRowKeys) => setScopeIds(selectedRowKeys),
+ }}
+ />
+ </Space>
{type === 'deleteConnection' && (
<Modal
open
