From b3aa4b3f2571e6cdee1dd5705f962c0a29f61658 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E6=B9=9B?= <0x1304570@gmail.com> Date: Wed, 15 Nov 2023 19:19:55 +1300 Subject: [PATCH] feat(config-ui): use new table component to replace old (#6405) * refactor(config-ui): remove component table * refactor(config-ui): use antd table component to replace old * fix(config-ui): adjust the table component --- config-ui/src/components/index.ts | 1 - .../components/table/components/content.tsx | 95 --------------- .../src/components/table/components/index.ts | 21 ---- .../components/table/components/loading.tsx | 27 ----- .../components/table/components/no-data.tsx | 42 ------- config-ui/src/components/table/hooks/index.ts | 19 --- .../table/hooks/use-row-selection.ts | 93 --------------- config-ui/src/components/table/index.ts | 20 ---- config-ui/src/components/table/styled.ts | 55 --------- config-ui/src/components/table/table.tsx | 56 --------- config-ui/src/components/table/types.ts | 27 ----- .../blueprint/connection-detail/index.tsx | 8 +- .../blueprint/detail/configuration-panel.tsx | 7 +- config-ui/src/pages/blueprint/home/index.tsx | 32 ++--- .../src/pages/connection/detail/index.tsx | 16 +-- config-ui/src/pages/project/home/index.tsx | 23 ++-- .../components/connection-list/index.tsx | 12 +- .../components/scope-config-select/index.tsx | 7 +- .../plugins/register/webhook/connection.tsx | 77 ++++++------ config-ui/src/routes/api-keys/api-keys.tsx | 10 +- config-ui/src/routes/layout/styled.ts | 2 - .../src/routes/pipeline/components/table.tsx | 112 +++++++++--------- 22 files changed, 141 insertions(+), 621 deletions(-) delete mode 100644 config-ui/src/components/table/components/content.tsx delete mode 100644 config-ui/src/components/table/components/index.ts delete mode 100644 config-ui/src/components/table/components/loading.tsx delete mode 100644 config-ui/src/components/table/components/no-data.tsx delete mode 100644 config-ui/src/components/table/hooks/index.ts delete mode 100644 config-ui/src/components/table/hooks/use-row-selection.ts delete mode 100644 config-ui/src/components/table/index.ts delete mode 100644 config-ui/src/components/table/styled.ts delete mode 100644 config-ui/src/components/table/table.tsx delete mode 100644 config-ui/src/components/table/types.ts diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts index f039fc6f9f0..e67e2ac1492 100644 --- a/config-ui/src/components/index.ts +++ b/config-ui/src/components/index.ts @@ -31,6 +31,5 @@ export * from './no-data'; export * from './page-header'; export * from './pagination'; export * from './selector'; -export * from './table'; export * from './toast'; export * from './tooltip'; diff --git a/config-ui/src/components/table/components/content.tsx b/config-ui/src/components/table/components/content.tsx deleted file mode 100644 index a77a283cf26..00000000000 --- a/config-ui/src/components/table/components/content.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { Checkbox, Radio } from '@blueprintjs/core'; - -import { TextTooltip } from '@/components'; - -import { ColumnType } from '../types'; -import { useRowSelection, UseRowSelectionProps } from '../hooks'; -import * as S from '../styled'; - -export interface TableContentProps extends UseRowSelectionProps { - columns: ColumnType; - dataSource: T[]; - noShadow?: boolean; -} - -export const TableContent = >({ - columns, - dataSource, - noShadow, - rowSelection, -}: TableContentProps) => { - const { canSelection, selectionType, getCheckedAll, onCheckedAll, getChecked, onChecked } = useRowSelection({ - dataSource, - rowSelection, - }); - - return ( - - - - {canSelection && ( - - {selectionType === 'checkbox' && onCheckedAll()} />} - - )} - {columns.map(({ key, width, align = 'left', title }) => ( - - {title} - - ))} - - - - {dataSource.map((data, i) => ( - - {canSelection && ( - - {selectionType === 'checkbox' && ( - onChecked(data)} /> - )} - {selectionType === 'radio' && onChecked(data)} />} - - )} - {columns.map(({ key, width, align = 'left', ellipsis, dataIndex, render }) => { - const value = !dataIndex - ? null - : Array.isArray(dataIndex) - ? dataIndex.reduce((acc, cur) => { - acc[cur] = data[cur]; - return acc; - }, {} as any) - : data[dataIndex]; - return ( - - {render ? render(value, data) : ellipsis ? {value} : value} - - ); - })} - - ))} - - - ); -}; diff --git a/config-ui/src/components/table/components/index.ts b/config-ui/src/components/table/components/index.ts deleted file mode 100644 index df5950d7f5a..00000000000 --- a/config-ui/src/components/table/components/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export * from './loading'; -export * from './no-data'; -export * from './content'; diff --git a/config-ui/src/components/table/components/loading.tsx b/config-ui/src/components/table/components/loading.tsx deleted file mode 100644 index c0d73a28b2a..00000000000 --- a/config-ui/src/components/table/components/loading.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { Card, PageLoading } from '@/components'; - -export const TableLoading = () => { - return ( - - - - ); -}; diff --git a/config-ui/src/components/table/components/no-data.tsx b/config-ui/src/components/table/components/no-data.tsx deleted file mode 100644 index 6dbe940706d..00000000000 --- a/config-ui/src/components/table/components/no-data.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { Button, Intent } from '@blueprintjs/core'; - -import { NoData } from '@/components'; - -interface Props { - text?: React.ReactNode; - btnText?: string; - onCreate?: () => void; -} - -export const TableNoData = ({ text, btnText, onCreate }: Props) => { - return ( - - {btnText ?? 'Create'} - - ) - } - /> - ); -}; diff --git a/config-ui/src/components/table/hooks/index.ts b/config-ui/src/components/table/hooks/index.ts deleted file mode 100644 index 97fc2872160..00000000000 --- a/config-ui/src/components/table/hooks/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export * from './use-row-selection'; diff --git a/config-ui/src/components/table/hooks/use-row-selection.ts b/config-ui/src/components/table/hooks/use-row-selection.ts deleted file mode 100644 index 5342811f83c..00000000000 --- a/config-ui/src/components/table/hooks/use-row-selection.ts +++ /dev/null @@ -1,93 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { useState, useEffect, useMemo } from 'react'; - -export interface UseRowSelectionProps { - dataSource: T[]; - rowSelection?: { - rowKey?: ID; - getRowKey?: (data: T) => ID; - type?: 'checkbox' | 'radio'; - selectedRowKeys?: ID[]; - onChange?: (selectedRowKeys: ID[]) => void; - }; -} - -export const useRowSelection = ({ dataSource, rowSelection }: UseRowSelectionProps) => { - const [selectedKeys, setSelectedKeys] = useState([]); - - const { - rowKey = 'id', - getRowKey = (data: T) => (data as any)[rowKey], - type = 'checkbox', - selectedRowKeys, - onChange, - } = { - rowKey: 'id', - type: 'checkbox', - ...rowSelection, - }; - - useEffect(() => { - setSelectedKeys(selectedRowKeys ?? []); - }, [selectedRowKeys]); - - const handleChecked = (data: T) => { - const key = getRowKey(data); - let result: ID[] = selectedKeys; - - switch (true) { - case !selectedKeys.includes(key) && type === 'radio': - result = [key]; - break; - case !selectedKeys.includes(key) && type === 'checkbox': - result = [...selectedKeys, key]; - break; - case selectedKeys.includes(key) && type === 'checkbox': - result = selectedKeys.filter((k) => k !== key); - break; - } - - onChange ? onChange(result) : setSelectedKeys(result); - }; - - const handleCheckedAll = () => { - let result: string[] = []; - - if (selectedKeys.length !== dataSource.length) { - result = dataSource.map(getRowKey); - } - - onChange ? onChange(result) : setSelectedKeys(result); - }; - - return useMemo( - () => ({ - canSelection: !!rowSelection, - selectionType: type, - getCheckedAll: () => dataSource.length === selectedKeys.length, - onCheckedAll: handleCheckedAll, - getChecked: (data: T) => { - return selectedKeys.includes(getRowKey(data)); - }, - onChecked: handleChecked, - }), - [selectedKeys], - ); -}; diff --git a/config-ui/src/components/table/index.ts b/config-ui/src/components/table/index.ts deleted file mode 100644 index 9ede1edc43d..00000000000 --- a/config-ui/src/components/table/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export * from './table'; -export * from './types'; diff --git a/config-ui/src/components/table/styled.ts b/config-ui/src/components/table/styled.ts deleted file mode 100644 index 58d093623b5..00000000000 --- a/config-ui/src/components/table/styled.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import styled from 'styled-components'; - -export const Table = styled.table` - table-layout: fixed; - width: 100%; - background-color: #fff; - border-radius: 4px; - border-spacing: 0; -`; - -export const THeader = styled.thead` - background-color: #f0f4fe; -`; - -export const TBody = styled.tbody``; - -export const TR = styled.tr``; - -export const TH = styled.th` - padding: 12px 16px; - font-weight: 400; - border-bottom: 1px solid #dbdcdf; - - label.bp5-control { - margin-bottom: 0; - } -`; - -export const TD = styled.td` - padding: 12px 16px; - border-bottom: 1px solid #dbdcdf; - word-break: break-word; - - label.bp5-control { - margin-bottom: 0; - } -`; diff --git a/config-ui/src/components/table/table.tsx b/config-ui/src/components/table/table.tsx deleted file mode 100644 index b55b6021bb6..00000000000 --- a/config-ui/src/components/table/table.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import type { PaginationProps } from '../pagination'; -import { Pagination } from '../pagination'; - -import type { TableContentProps } from './components'; -import { TableLoading, TableNoData, TableContent } from './components'; - -interface Props extends TableContentProps { - loading?: boolean; - noData?: { - text?: React.ReactNode; - btnText?: string; - onCreate?: () => void; - }; - pagination?: PaginationProps; -} - -export const Table = >({ - loading, - dataSource, - noData = {}, - pagination, - ...props -}: Props) => { - if (loading) { - return ; - } - - if (!dataSource.length) { - return ; - } - - return ( - <> - - {pagination && } - - ); -}; diff --git a/config-ui/src/components/table/types.ts b/config-ui/src/components/table/types.ts deleted file mode 100644 index 44d2829127b..00000000000 --- a/config-ui/src/components/table/types.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export type ColumnType = Array<{ - title: string; - dataIndex?: string | string[]; - key: string; - width?: number; - align?: 'left' | 'center' | 'right'; - ellipsis?: boolean; - render?: (value: any, row: T) => React.ReactNode; -}>; diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx index 478af373abf..6b821702fa9 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'; @@ -215,6 +216,8 @@ export const BlueprintConnectionDetailPage = () => { )} { }, { title: 'Scope Config', - dataIndex: ['scopeConfigId', 'scopeConfigName'], key: 'scopeConfig', - render: ({ scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'), + render: (_, { scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'), }, ]} dataSource={scopes} diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx index cd7848f4cde..1dddb6069b8 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'; @@ -134,6 +135,8 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
{blueprint.mode === IBPMode.NORMAL && ( diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx index 8f65246f09e..5d8fb0b3775 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'; @@ -111,13 +112,14 @@ export const BlueprintHomePage = () => {
( + render: (_, { id, name }) => ( {name} @@ -125,21 +127,16 @@ export const BlueprintHomePage = () => { }, { title: 'Data Connections', - dataIndex: ['mode', 'connections'], key: 'connections', - render: ({ mode, connections }: Pick) => { + render: (_, { mode, connections }: Pick) => { if (mode === IBPMode.ADVANCED) { return 'Advanced Mode'; } return ( {connections.map((it) => ( -
  • - +
  • +
    • ))}     @@ -148,20 +145,18 @@ export const BlueprintHomePage = () => { }, { title: 'Frequency', - dataIndex: ['isManual', 'cronConfig'], key: 'frequency', width: 100, - render: ({ isManual, cronConfig }) => { + render: (_, { isManual, cronConfig }) => { const cron = getCron(isManual, cronConfig); return cron.label; }, }, { title: 'Next Run Time', - dataIndex: ['isManual', 'cronConfig'], key: 'nextRunTime', width: 200, - render: ({ isManual, cronConfig }) => { + render: (_, { isManual, cronConfig }) => { const cron = getCron(isManual, cronConfig); return formatTime(cron.nextTime); }, @@ -206,16 +201,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, - }} /> { )}
    { }, { title: 'Scope Config', - dataIndex: ['id', 'configId', 'configName'], key: 'scopeConfig', width: 400, - render: ({ id, configId, configName }) => ( + render: (_, { id, configId, configName }) => ( <> {configId ? configName : 'N/A'} {pluginConfig.scopeConfig && ( @@ -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 5f1e2f06a5e..81ffa6b65c2 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'; @@ -122,6 +123,8 @@ export const ProjectHomePage = () => { extra={
    { ) : ( {val.map((it) => ( -
  • - +
  • +
    • ))}     @@ -157,9 +156,8 @@ export const ProjectHomePage = () => { }, { title: 'Sync Frequency', - dataIndex: ['isManual', 'cronConfig'], key: 'frequency', - render: ({ isManual, cronConfig }) => { + render: (_, { isManual, cronConfig }) => { const cron = getCron(isManual, cronConfig); return cron.label; }, @@ -199,16 +197,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, - }} /> { return ( <>
    { }, { title: '', - dataIndex: ['plugin', 'id'], key: 'link', width: 100, - render: ({ plugin, id }) => Details, + render: (_, { plugin, id }) => Details, }, ]} dataSource={connections} - noData={{ - text: 'There is no data connection yet. Please add a new connection.', - }} + pagination={false} />
    setTrId(selectedRowKeys[0]), }} - noShadow + pagination={false} />
    handleShowDialog('show', row)}>{name}, + }, + { + title: '', + dataIndex: '', + key: 'action', + align: 'center', + render: (_, row) => ( + + handleShowDialog('show', row)} /> + handleShowDialog('edit', row)} /> + handleShowDialog('delete', row)} /> + + ), + }, + ]} dataSource={webhooks.filter((cs) => (filterIds ? filterIds.includes(cs.id) : true))} - noData={{ - text: ( - <> - There is no Webhook yet. Please add a new Webhook.{' '} - Learn more - - ), - btnText: 'Add a Webhook', - onCreate: () => handleShowDialog('add'), - }} + pagination={false} /> + +
    { ]} dataSource={dataSource} pagination={{ - page, + current: page, pageSize, total, onChange: setPage, }} - noData={{ - text: 'There is no API key yet.', - }} /> {modal === 'create' && ( { setId(id); }; - const columns = useMemo( - () => - [ - { - title: 'ID', - dataIndex: 'id', - key: 'id', - }, - { - title: 'Status', - dataIndex: 'status', - key: 'status', - render: (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 }) => ( - - ), - }, - { - title: '', - dataIndex: 'id', - key: 'action', - align: 'center', - render: (id: ID, row) => ( - - handleShowJSON(row)} /> - handleDownloadLog(id)} /> - handleShowDetails(id)} /> - - ), - }, - ] as ColumnType, - [], - ); - return ( <> -
    +
    , + }, + { + 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', + key: 'duration', + render: (_, { status, beganAt, finishedAt }) => ( + + ), + }, + { + title: '', + dataIndex: 'id', + key: 'action', + align: 'center', + render: (id: ID, row) => ( + + handleShowJSON(row)} /> + handleDownloadLog(id)} /> + handleShowDetails(id)} /> + + ), + }, + ]} + dataSource={dataSource} + pagination={pagination} + /> {JSON && setJSON(null)} />} {id && ( setId(null)}>