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 f6045b861b06deb56ef8e01f4977f13c13ff6b2c Author: mintsweet <[email protected]> AuthorDate: Tue Nov 14 19:26:38 2023 +1300 fix(config-ui): adjust the table component --- .../pages/blueprint/connection-detail/index.tsx | 5 +++-- .../pages/blueprint/detail/configuration-panel.tsx | 4 ++++ config-ui/src/pages/blueprint/home/index.tsx | 22 ++++++++-------------- config-ui/src/pages/connection/detail/index.tsx | 6 +++--- config-ui/src/pages/project/home/index.tsx | 13 +++++-------- .../plugins/components/connection-list/index.tsx | 6 ++++-- .../components/scope-config-select/index.tsx | 3 +++ .../src/plugins/register/webhook/connection.tsx | 9 ++++++--- config-ui/src/routes/api-keys/api-keys.tsx | 2 ++ config-ui/src/routes/layout/styled.ts | 2 -- config-ui/src/routes/pipeline/components/table.tsx | 5 +++-- 11 files changed, 41 insertions(+), 36 deletions(-) diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx index 9aa183ca2..6b821702f 100644 --- a/config-ui/src/pages/blueprint/connection-detail/index.tsx +++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx @@ -216,6 +216,8 @@ export const BlueprintConnectionDetailPage = () => { )} </Buttons> <Table + rowKey="id" + size="middle" columns={[ { title: 'Data Scope', @@ -224,9 +226,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 9c81f02c5..1dddb6069 100644 --- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx +++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx @@ -135,6 +135,8 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }: <IconButton icon="annotation" tooltip="Edit" onClick={handleShowPolicyDialog} /> </h3> <Table + rowKey="id" + size="middle" columns={[ { title: 'Data Time Range', @@ -162,12 +164,14 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }: ]} dataSource={[ { + id: blueprint.id, timeRange: blueprint.timeAfter, frequency: blueprint.cronConfig, isManual: blueprint.isManual, skipFailed: blueprint.skipOnFail, }, ]} + pagination={false} /> </div> {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 fb7a4d740..5d8fb0b37 100644 --- a/config-ui/src/pages/blueprint/home/index.tsx +++ b/config-ui/src/pages/blueprint/home/index.tsx @@ -112,13 +112,14 @@ export const BlueprintHomePage = () => { <Button icon="plus" intent={Intent.PRIMARY} text="New Blueprint" onClick={handleShowDialog} /> </div> <Table + rowKey="id" + size="middle" loading={!ready} columns={[ { title: 'Blueprint Name', - dataIndex: ['id', 'name'], key: 'name', - render: ({ id, name }) => ( + render: (_, { id, name }) => ( <Link to={`/blueprints/${id}?tab=configuration`} style={{ color: '#292b3f' }}> <TextTooltip content={name}>{name}</TextTooltip> </Link> @@ -126,21 +127,16 @@ export const BlueprintHomePage = () => { }, { title: 'Data Connections', - dataIndex: ['mode', 'connections'], key: 'connections', - render: ({ mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => { + render: (_, { mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => { if (mode === IBPMode.ADVANCED) { return 'Advanced Mode'; } return ( <S.ConnectionList> {connections.map((it) => ( - <li> - <ConnectionName - key={`${it.pluginName}-${it.connectionId}`} - plugin={it.pluginName} - connectionId={it.connectionId} - /> + <li key={`${it.pluginName}-${it.connectionId}`}> + <ConnectionName plugin={it.pluginName} connectionId={it.connectionId} /> </li> ))} </S.ConnectionList> @@ -149,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); }, diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx index 551eff76c..3a25e18ec 100644 --- a/config-ui/src/pages/connection/detail/index.tsx +++ b/config-ui/src/pages/connection/detail/index.tsx @@ -266,7 +266,8 @@ export const ConnectionDetailPage = () => { )} </Buttons> <Table - rowKey={(row) => row.id} + rowKey="id" + size="middle" loading={!ready} columns={[ { @@ -296,10 +297,9 @@ export const ConnectionDetailPage = () => { }, { title: 'Scope Config', - dataIndex: ['id', 'configId', 'configName'], key: 'scopeConfig', width: 400, - render: ({ id, configId, configName }) => ( + render: (_, { id, configId, configName }) => ( <> <span>{configId ? configName : 'N/A'}</span> {pluginConfig.scopeConfig && ( diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx index f18f6df1b..81ffa6b65 100644 --- a/config-ui/src/pages/project/home/index.tsx +++ b/config-ui/src/pages/project/home/index.tsx @@ -123,6 +123,8 @@ export const ProjectHomePage = () => { extra={<Button intent={Intent.PRIMARY} icon="plus" text="New Project" onClick={handleShowDialog} />} > <Table + rowKey="name" + size="middle" loading={!ready} columns={[ { @@ -145,12 +147,8 @@ export const ProjectHomePage = () => { ) : ( <S.ConnectionList> {val.map((it) => ( - <li> - <ConnectionName - key={`${it.pluginName}-${it.connectionId}`} - plugin={it.pluginName} - connectionId={it.connectionId} - /> + <li key={`${it.pluginName}-${it.connectionId}`}> + <ConnectionName plugin={it.pluginName} connectionId={it.connectionId} /> </li> ))} </S.ConnectionList> @@ -158,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; }, diff --git a/config-ui/src/plugins/components/connection-list/index.tsx b/config-ui/src/plugins/components/connection-list/index.tsx index 20b6b8975..65cb33c76 100644 --- a/config-ui/src/plugins/components/connection-list/index.tsx +++ b/config-ui/src/plugins/components/connection-list/index.tsx @@ -41,6 +41,8 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => { return ( <> <Table + rowKey="id" + size="small" columns={[ { title: 'Connection Name', @@ -55,13 +57,13 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => { }, { title: '', - dataIndex: ['plugin', 'id'], key: 'link', width: 100, - render: ({ plugin, id }) => <Link to={`/connections/${plugin}/${id}`}>Details</Link>, + render: (_, { plugin, id }) => <Link to={`/connections/${plugin}/${id}`}>Details</Link>, }, ]} dataSource={connections} + pagination={false} /> <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 409b4db0b..88492e4d4 100644 --- a/config-ui/src/plugins/components/scope-config-select/index.tsx +++ b/config-ui/src/plugins/components/scope-config-select/index.tsx @@ -76,6 +76,8 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance <Button icon="add" intent={Intent.PRIMARY} text="Add New Scope Config" onClick={handleShowDialog} /> </Buttons> <Table + rowKey="id" + size="small" loading={!ready} columns={[ { title: 'Name', dataIndex: 'name', key: 'name' }, @@ -93,6 +95,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance selectedRowKeys: trId ? [trId] : [], onChange: (selectedRowKeys) => setTrId(selectedRowKeys[0]), }} + pagination={false} /> <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 55ea71e94..0a7d83352 100644 --- a/config-ui/src/plugins/register/webhook/connection.tsx +++ b/config-ui/src/plugins/register/webhook/connection.tsx @@ -55,10 +55,9 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P return ( <S.Wrapper> - <Buttons position="top"> - <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} /> - </Buttons> <Table + rowKey="id" + size="middle" columns={[ { title: 'ID', @@ -86,7 +85,11 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P }, ]} dataSource={webhooks.filter((cs) => (filterIds ? filterIds.includes(cs.id) : true))} + pagination={false} /> + <Buttons position="bottom"> + <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} /> + </Buttons> {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 5c033dedd..ef3acdcef 100644 --- a/config-ui/src/routes/api-keys/api-keys.tsx +++ b/config-ui/src/routes/api-keys/api-keys.tsx @@ -97,6 +97,8 @@ export const ApiKeys = () => { > <p>You can generate and manage your API keys to access the DevLake API.</p> <Table + rowKey="id" + size="middle" loading={!ready} columns={[ { diff --git a/config-ui/src/routes/layout/styled.ts b/config-ui/src/routes/layout/styled.ts index b6726a7ad..e253d49be 100644 --- a/config-ui/src/routes/layout/styled.ts +++ b/config-ui/src/routes/layout/styled.ts @@ -22,7 +22,6 @@ import { Navbar } from '@blueprintjs/core'; export const Wrapper = styled.div` display: flex; height: 100vh; - background-color: #f9f9fa; overflow: hidden; `; @@ -89,7 +88,6 @@ export const Sider = styled.div` export const Header = styled(Navbar)` flex: 0 0 50px; - background-color: #f9f9fa; box-shadow: none; a { diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx index f3bc21c4f..eb6c31233 100644 --- a/config-ui/src/routes/pipeline/components/table.tsx +++ b/config-ui/src/routes/pipeline/components/table.tsx @@ -70,6 +70,8 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => { return ( <> <Table + rowKey="id" + size="middle" columns={[ { title: 'ID', @@ -98,9 +100,8 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => { }, { title: 'Duration', - dataIndex: ['status', 'beganAt', 'finishedAt'], key: 'duration', - render: ({ status, beganAt, finishedAt }) => ( + render: (_, { status, beganAt, finishedAt }) => ( <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} /> ), },
