From 2cc08c7ecb15dfdaf1fd9274badad42277eb29d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E6=B9=9B?= <0x1304570@gmail.com> Date: Fri, 10 May 2024 21:12:36 +1200 Subject: [PATCH] fix: some bugs for scope config (#7452) --- .../components/action/icon-button/index.tsx | 8 +- .../components/scope-config-form/index.tsx | 9 +- .../plugins/components/scope-config/index.tsx | 23 ++-- .../blueprint/connection-detail/index.tsx | 78 +++----------- .../blueprint/connection-detail/table.tsx | 102 ++++++++++++++++++ .../src/routes/connection/connection.tsx | 23 ++-- 6 files changed, 160 insertions(+), 83 deletions(-) create mode 100644 config-ui/src/routes/blueprint/connection-detail/table.tsx diff --git a/config-ui/src/components/action/icon-button/index.tsx b/config-ui/src/components/action/icon-button/index.tsx index 04950c39b17..fb63f60f719 100644 --- a/config-ui/src/components/action/icon-button/index.tsx +++ b/config-ui/src/components/action/icon-button/index.tsx @@ -20,16 +20,14 @@ import { forwardRef, Ref } from 'react'; import type { ButtonProps } from 'antd'; import { Tooltip, Button } from 'antd'; -interface Props extends Pick { - icon: React.ReactNode; +interface Props extends Pick { helptip: string; - onClick?: React.MouseEventHandler | undefined; } -export const IconButton = forwardRef(function ({ icon, helptip, type, onClick }: Props, ref?: Ref) { +export const IconButton = forwardRef(function ({ helptip, ...props }: Props, ref?: Ref) { return ( - - - ), - onCancel: () => { - setVersion(version + 1); - }, - }); - }; - return ( { Manage Data Scope - ( - - ), - }, - ]} - dataSource={scopes} + @@ -284,7 +236,7 @@ export const BlueprintConnectionDetailPage = () => { plugin={connection.plugin} connectionId={connection.id} showWarning - initialScope={scopes} + initialScope={scopeIds.map((id) => ({ id }))} onCancel={handleHideDataScope} onSubmit={handleChangeDataScope} /> diff --git a/config-ui/src/routes/blueprint/connection-detail/table.tsx b/config-ui/src/routes/blueprint/connection-detail/table.tsx new file mode 100644 index 00000000000..35de59ad1e2 --- /dev/null +++ b/config-ui/src/routes/blueprint/connection-detail/table.tsx @@ -0,0 +1,102 @@ +/* + * 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 } from 'react'; +import { Table, Modal, Button } from 'antd'; + +import API from '@/api'; +import { useRefreshData } from '@/hooks'; +import { getPluginScopeId, ScopeConfig } from '@/plugins'; + +interface Props { + plugin: string; + connectionId: ID; + scopeIds: ID[]; + operating: boolean; + onRun: (params: { skipCollectors: boolean }) => void; +} + +export const BlueprintConnectionDetailTable = ({ plugin, connectionId, scopeIds, operating, onRun }: Props) => { + const [version, setVersion] = useState(1); + + const { ready, data } = useRefreshData(async () => { + const scopes = await Promise.all(scopeIds.map((scopeId) => API.scope.get(plugin, connectionId, scopeId))); + return scopes.map((sc) => ({ + id: getPluginScopeId(plugin, sc.scope), + name: sc.scope.fullName ?? sc.scope.name, + scopeConfigId: sc.scopeConfig?.id, + scopeConfigName: sc.scopeConfig?.name, + })); + }, [version]); + + const [modal, contextHolder] = Modal.useModal(); + + const handleChangeScopeConfig = () => { + modal.success({ + closable: true, + centered: true, + width: 550, + title: 'Scope Config Saved', + content: 'Please re-transform data to apply the updated scope config.', + footer: ( +
+ +
+ ), + onCancel: () => { + setVersion(version + 1); + }, + }); + }; + + return ( + <> +
( + + ), + }, + ]} + dataSource={data ?? []} + /> + {contextHolder} + + ); +}; diff --git a/config-ui/src/routes/connection/connection.tsx b/config-ui/src/routes/connection/connection.tsx index fbb90126fa6..e6b2915897e 100644 --- a/config-ui/src/routes/connection/connection.tsx +++ b/config-ui/src/routes/connection/connection.tsx @@ -230,7 +230,18 @@ export const Connection = () => { } }; - const handleScopeConfigChange = async (scopeConfigId?: ID) => { + const handleRun = async (pname: string, blueprintId: ID, data?: { skipCollectors?: boolean; fullSync?: boolean }) => { + const [success] = await operator(() => API.blueprint.trigger(blueprintId, data), { + setOperating, + hideToast: true, + }); + + if (success) { + window.open(PATHS.PROJECT(pname, { tab: 'status' })); + } + }; + + const handleScopeConfigChange = async (scopeConfigId?: ID, hideToast?: boolean) => { if (!scopeConfigId) { setVersion(version + 1); return; @@ -239,7 +250,7 @@ export const Connection = () => { const [success, res] = await operator(() => API.scopeConfig.check(plugin, scopeConfigId), { hideToast: true }); if (success) { - if (!res.projects) { + if (!res.projects || hideToast) { setVersion(version + 1); return; } @@ -255,14 +266,14 @@ export const Connection = () => { The listed projects are impacted. Please re-transform the data to apply the updated scope config.
    - {res.projects.map((it: any) => ( -
  • + {res.projects.map(({ name, blueprintId }: { name: string; blueprintId: ID }) => ( +
  • - {it.name} + {name}