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 cb4b897f6bdf6726dd03c3d0d0263dc9f4ee9ce6 Author: mintsweet <[email protected]> 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 8f65246f0..fb7a4d740 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'; @@ -206,16 +207,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 da9d7c56c..551eff76c 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 5f1e2f06a..f18f6df1b 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'; @@ -199,16 +200,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)}>
