You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2023/11/07 06:11:41 UTC
(incubator-devlake) 03/03: refactor(config-ui): use antd table component to replace old
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch feat-6307
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 2e4ea6e6f703ddb1332a9a317b0486bb4111008d
Author: mintsweet <0x...@gmail.com>
AuthorDate: Tue Nov 7 19:11:26 2023 +1300
refactor(config-ui): use antd table component to replace old
---
.../pages/blueprint/connection-detail/index.tsx | 3 +-
.../pages/blueprint/detail/configuration-panel.tsx | 3 +-
config-ui/src/pages/blueprint/home/index.tsx | 10 +-
config-ui/src/pages/connection/detail/index.tsx | 12 +--
config-ui/src/pages/project/home/index.tsx | 10 +-
.../plugins/components/connection-list/index.tsx | 6 +-
.../components/scope-config-select/index.tsx | 4 +-
.../src/plugins/register/webhook/connection.tsx | 68 ++++++-------
config-ui/src/routes/api-keys/api-keys.tsx | 8 +-
config-ui/src/routes/pipeline/components/table.tsx | 111 ++++++++++-----------
10 files changed, 103 insertions(+), 132 deletions(-)
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 478af373a..9aa183ca2 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -18,11 +18,12 @@
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
+import { Table } from 'antd';
import { Button, Intent, Position } from '@blueprintjs/core';
import { Popover2 } from '@blueprintjs/popover2';
import API from '@/api';
-import { PageLoading, PageHeader, ExternalLink, Message, Buttons, Table, Dialog } from '@/components';
+import { PageLoading, PageHeader, ExternalLink, Message, Buttons, Dialog } from '@/components';
import { useRefreshData, useTips } from '@/hooks';
import { DataScopeSelect, getPluginConfig, getPluginScopeId } from '@/plugins';
import { operator } from '@/utils';
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index cd7848f4c..9c81f02c5 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -18,10 +18,11 @@
import { useState, useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';
+import { Table } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import API from '@/api';
-import { IconButton, Table, NoData, Buttons } from '@/components';
+import { IconButton, NoData, Buttons } from '@/components';
import { getCron } from '@/config';
import { ConnectionName } from '@/features';
import { getPluginConfig } from '@/plugins';
diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
index 7dc7d3bca..c12bb1ae5 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -18,11 +18,12 @@
import { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
+import { Table } from 'antd';
import { ButtonGroup, Button, Tag, Intent, FormGroup, InputGroup, RadioGroup, Radio } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Table, IconButton, TextTooltip, Dialog } from '@/components';
+import { PageHeader, IconButton, TextTooltip, Dialog } from '@/components';
import { getCronOptions, cronPresets, getCron } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -208,16 +209,11 @@ export const BlueprintHomePage = () => {
]}
dataSource={dataSource}
pagination={{
- page,
+ current: page,
pageSize,
total,
onChange: setPage,
}}
- noData={{
- text: 'There is no Blueprint yet. Please add a new Blueprint here or from a Project.',
- btnText: 'New Blueprint',
- onCreate: handleShowDialog,
- }}
/>
</S.Wrapper>
<Dialog
diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx
index 9ac4eccc1..e0a07a8f5 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -18,11 +18,12 @@
import { useState, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
+import { Table } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import API from '@/api';
import { useAppDispatch, useAppSelector } from '@/app/hook';
-import { PageHeader, Buttons, Dialog, IconButton, Table, Message, toast } from '@/components';
+import { PageHeader, Buttons, Dialog, IconButton, Message, toast } from '@/components';
import { selectConnection, removeConnection } from '@/features';
import { useTips, useRefreshData } from '@/hooks';
import ClearImg from '@/images/icons/clear.svg';
@@ -265,6 +266,7 @@ export const ConnectionDetailPage = () => {
)}
</Buttons>
<Table
+ rowKey={(row) => row.id}
loading={!ready}
columns={[
{
@@ -336,18 +338,12 @@ export const ConnectionDetailPage = () => {
]}
dataSource={dataSource}
pagination={{
- page,
+ current: page,
pageSize,
total,
onChange: setPage,
}}
- noData={{
- text: 'Add data to this connection.',
- btnText: 'Add Data Scope',
- onCreate: handleShowCreateDataScopeDialog,
- }}
rowSelection={{
- getRowKey: (row) => row.id,
selectedRowKeys: scopeIds,
onChange: (selectedRowKeys) => setScopeIds(selectedRowKeys),
}}
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index 8ef59916b..b9bc38cc0 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -18,11 +18,12 @@
import { useState, useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
+import { Table } from 'antd';
import { Button, InputGroup, Checkbox, Intent, FormGroup } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Table, Dialog, ExternalLink, IconButton, toast } from '@/components';
+import { PageHeader, Dialog, ExternalLink, IconButton, toast } from '@/components';
import { getCron, cronPresets } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -197,16 +198,11 @@ export const ProjectHomePage = () => {
]}
dataSource={dataSource}
pagination={{
- page,
+ current: page,
pageSize,
total,
onChange: setPage,
}}
- noData={{
- text: 'Add new projects to see engineering metrics based on projects.',
- btnText: 'New Project',
- onCreate: handleShowDialog,
- }}
/>
<Dialog
isOpen={isOpen}
diff --git a/config-ui/src/plugins/components/connection-list/index.tsx b/config-ui/src/plugins/components/connection-list/index.tsx
index d113c1788..20b6b8975 100644
--- a/config-ui/src/plugins/components/connection-list/index.tsx
+++ b/config-ui/src/plugins/components/connection-list/index.tsx
@@ -17,10 +17,10 @@
*/
import { Link } from 'react-router-dom';
+import { Table } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import { useAppSelector } from '@/app/hook';
-import { Table } from '@/components';
import { selectConnections } from '@/features/connections';
import { ConnectionStatus } from '@/plugins';
@@ -41,7 +41,6 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
return (
<>
<Table
- noShadow
columns={[
{
title: 'Connection Name',
@@ -63,9 +62,6 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
},
]}
dataSource={connections}
- noData={{
- text: 'There is no data connection yet. Please add a new connection.',
- }}
/>
<Button
style={{ marginTop: 16 }}
diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx b/config-ui/src/plugins/components/scope-config-select/index.tsx
index 9329aa0bb..409b4db0b 100644
--- a/config-ui/src/plugins/components/scope-config-select/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -17,10 +17,11 @@
*/
import { useState, useEffect, useMemo } from 'react';
+import { Table } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import API from '@/api';
-import { Buttons, Table, IconButton, Dialog } from '@/components';
+import { Buttons, IconButton, Dialog } from '@/components';
import { useRefreshData } from '@/hooks';
import { ScopeConfigForm } from '../scope-config-form';
@@ -92,7 +93,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
selectedRowKeys: trId ? [trId] : [],
onChange: (selectedRowKeys) => setTrId(selectedRowKeys[0]),
}}
- noShadow
/>
<Buttons position="bottom" align="right">
<Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />
diff --git a/config-ui/src/plugins/register/webhook/connection.tsx b/config-ui/src/plugins/register/webhook/connection.tsx
index cdb8660e4..55ea71e94 100644
--- a/config-ui/src/plugins/register/webhook/connection.tsx
+++ b/config-ui/src/plugins/register/webhook/connection.tsx
@@ -17,12 +17,12 @@
*/
import { useState } from 'react';
+import { Table } from 'antd';
import { Button, Intent } from '@blueprintjs/core';
import { useAppSelector } from '@/app/hook';
-import { Buttons, Table, ColumnType, ExternalLink, IconButton } from '@/components';
+import { Buttons, IconButton } from '@/components';
import { selectWebhooks } from '@/features/connections';
-import { DOC_URL } from '@/release';
import { IWebhook } from '@/types';
import { CreateDialog, ViewDialog, EditDialog, DeleteDialog } from './components';
@@ -53,51 +53,39 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
setCurrentID(r?.id);
};
- const columns: ColumnType<IWebhook> = [
- {
- title: 'ID',
- dataIndex: 'id',
- key: 'id',
- },
- {
- title: 'Webhook Name',
- dataIndex: 'name',
- key: 'name',
- render: (name, row) => <span onClick={() => handleShowDialog('show', row)}>{name}</span>,
- },
- {
- title: '',
- dataIndex: '',
- key: 'action',
- align: 'center',
- render: (_, row) => (
- <S.Action>
- <IconButton icon="eye-open" tooltip="View" onClick={() => handleShowDialog('show', row)} />
- <IconButton icon="annotation" tooltip="Edit" onClick={() => handleShowDialog('edit', row)} />
- <IconButton icon="trash" tooltip="Delete" onClick={() => handleShowDialog('delete', row)} />
- </S.Action>
- ),
- },
- ];
-
return (
<S.Wrapper>
<Buttons position="top">
<Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
</Buttons>
<Table
- columns={columns}
+ columns={[
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ key: 'id',
+ },
+ {
+ title: 'Webhook Name',
+ dataIndex: 'name',
+ key: 'name',
+ render: (name, row) => <span onClick={() => handleShowDialog('show', row)}>{name}</span>,
+ },
+ {
+ title: '',
+ dataIndex: '',
+ key: 'action',
+ align: 'center',
+ render: (_, row) => (
+ <S.Action>
+ <IconButton icon="eye-open" tooltip="View" onClick={() => handleShowDialog('show', row)} />
+ <IconButton icon="annotation" tooltip="Edit" onClick={() => handleShowDialog('edit', row)} />
+ <IconButton icon="trash" tooltip="Delete" onClick={() => handleShowDialog('delete', row)} />
+ </S.Action>
+ ),
+ },
+ ]}
dataSource={webhooks.filter((cs) => (filterIds ? filterIds.includes(cs.id) : true))}
- noData={{
- text: (
- <>
- There is no Webhook yet. Please add a new Webhook.{' '}
- <ExternalLink link={DOC_URL.PLUGIN.WEBHOOK.BASIS}>Learn more</ExternalLink>
- </>
- ),
- btnText: 'Add a Webhook',
- onCreate: () => handleShowDialog('add'),
- }}
/>
{type === 'add' && (
<CreateDialog isOpen onCancel={handleHideDialog} onSubmitAfter={(id) => onCreateAfter?.(id)} />
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index f2f9a4c4f..5c033dedd 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -17,11 +17,12 @@
*/
import { useState, useMemo } from 'react';
+import { Table } from 'antd';
import { Button, Tag, Intent, InputGroup } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Table, Dialog, FormItem, Selector, ExternalLink, CopyText, Message } from '@/components';
+import { PageHeader, Dialog, FormItem, Selector, ExternalLink, CopyText, Message } from '@/components';
import { useRefreshData } from '@/hooks';
import { operator, formatTime } from '@/utils';
@@ -142,14 +143,11 @@ export const ApiKeys = () => {
]}
dataSource={dataSource}
pagination={{
- page,
+ current: page,
pageSize,
total,
onChange: setPage,
}}
- noData={{
- text: 'There is no API key yet.',
- }}
/>
{modal === 'create' && (
<Dialog
diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx
index 5ed8334d2..f3bc21c4f 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -16,14 +16,15 @@
*
*/
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
+import { Table } from 'antd';
import { ButtonGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { saveAs } from 'file-saver';
import API from '@/api';
import { DEVLAKE_ENDPOINT } from '@/config';
-import { Table, ColumnType, IconButton, Inspector, Dialog } from '@/components';
+import { IconButton, Inspector, Dialog } from '@/components';
import { IPipeline } from '@/types';
import { formatTime } from '@/utils';
@@ -66,62 +67,60 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
setId(id);
};
- const columns = useMemo(
- () =>
- [
- {
- title: 'ID',
- dataIndex: 'id',
- key: 'id',
- },
- {
- title: 'Status',
- dataIndex: 'status',
- key: 'status',
- render: (val) => <PipelineStatus status={val} />,
- },
- {
- title: 'Started at',
- dataIndex: 'beganAt',
- key: 'beganAt',
- align: 'center',
- render: (val) => formatTime(val),
- },
- {
- title: 'Completed at',
- dataIndex: 'finishedAt',
- key: 'finishedAt',
- align: 'center',
- render: (val) => formatTime(val),
- },
- {
- title: 'Duration',
- dataIndex: ['status', 'beganAt', 'finishedAt'],
- key: 'duration',
- render: ({ status, beganAt, finishedAt }) => (
- <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
- ),
- },
- {
- title: '',
- dataIndex: 'id',
- key: 'action',
- align: 'center',
- render: (id: ID, row) => (
- <ButtonGroup>
- <IconButton icon="code" tooltip="View JSON" onClick={() => handleShowJSON(row)} />
- <IconButton icon="document" tooltip="Download Logs" onClick={() => handleDownloadLog(id)} />
- <IconButton icon="chevron-right" tooltip="View Details" onClick={() => handleShowDetails(id)} />
- </ButtonGroup>
- ),
- },
- ] as ColumnType<IPipeline>,
- [],
- );
-
return (
<>
- <Table columns={columns} dataSource={dataSource} pagination={pagination} noData={noData} />
+ <Table
+ columns={[
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ key: 'id',
+ },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ key: 'status',
+ render: (val) => <PipelineStatus status={val} />,
+ },
+ {
+ title: 'Started at',
+ dataIndex: 'beganAt',
+ key: 'beganAt',
+ align: 'center',
+ render: (val) => formatTime(val),
+ },
+ {
+ title: 'Completed at',
+ dataIndex: 'finishedAt',
+ key: 'finishedAt',
+ align: 'center',
+ render: (val) => formatTime(val),
+ },
+ {
+ title: 'Duration',
+ dataIndex: ['status', 'beganAt', 'finishedAt'],
+ key: 'duration',
+ render: ({ status, beganAt, finishedAt }) => (
+ <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
+ ),
+ },
+ {
+ title: '',
+ dataIndex: 'id',
+ key: 'action',
+ align: 'center',
+ render: (id: ID, row) => (
+ <ButtonGroup>
+ <IconButton icon="code" tooltip="View JSON" onClick={() => handleShowJSON(row)} />
+ <IconButton icon="document" tooltip="Download Logs" onClick={() => handleDownloadLog(id)} />
+ <IconButton icon="chevron-right" tooltip="View Details" onClick={() => handleShowDetails(id)} />
+ </ButtonGroup>
+ ),
+ },
+ ]}
+ dataSource={dataSource}
+ pagination={pagination}
+ />
{JSON && <Inspector isOpen title={`Pipeline ${JSON?.id}`} data={JSON} onClose={() => setJSON(null)} />}
{id && (
<Dialog style={{ width: 820 }} isOpen title={`Pipeline ${id}`} footer={null} onCancel={() => setId(null)}>