From e000d7a133fdab802b772c546ee9583ef8fbae62 Mon Sep 17 00:00:00 2001 From: mintsweet <0x1304570@gmail.com> Date: Mon, 29 Apr 2024 13:04:58 +0800 Subject: [PATCH] feat: simplify scope config configuration --- config-ui/package.json | 2 - config-ui/src/api/blueprint/index.ts | 7 +- config-ui/src/app/store.ts | 3 +- config-ui/src/features/index.ts | 1 - config-ui/src/features/tips/index.ts | 19 --- config-ui/src/features/tips/slice.ts | 58 -------- config-ui/src/plugins/components/index.ts | 1 + .../components/scope-config-form/index.tsx | 3 +- .../components/scope-config-select/index.tsx | 28 +--- .../plugins/components/scope-config/index.tsx | 132 ++++++++++++++++++ .../blueprint/connection-detail/index.tsx | 113 +++++++++++---- .../src/routes/connection/connection.tsx | 72 ++++------ config-ui/src/routes/layout/layout.tsx | 72 +--------- config-ui/src/routes/layout/styled.ts | 34 ----- .../src/routes/layout/tips-transition.css | 38 ----- config-ui/yarn.lock | 40 +----- 16 files changed, 263 insertions(+), 360 deletions(-) delete mode 100644 config-ui/src/features/tips/index.ts delete mode 100644 config-ui/src/features/tips/slice.ts create mode 100644 config-ui/src/plugins/components/scope-config/index.tsx delete mode 100644 config-ui/src/routes/layout/styled.ts delete mode 100644 config-ui/src/routes/layout/tips-transition.css diff --git a/config-ui/package.json b/config-ui/package.json index f5481d98928..8b4a2b693a3 100644 --- a/config-ui/package.json +++ b/config-ui/package.json @@ -43,7 +43,6 @@ "react-medium-image-zoom": "^5.1.10", "react-redux": "^9.1.0", "react-router-dom": "^6.22.2", - "react-transition-group": "^4.4.5", "redux": "^5.0.1", "rehype-raw": "^7.0.0", "styled-components": "^6.1.8" @@ -55,7 +54,6 @@ "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^18.2.19", "@types/react-router-dom": "^5.3.3", - "@types/react-transition-group": "^4.4.10", "@types/styled-components": "^5.1.34", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", diff --git a/config-ui/src/api/blueprint/index.ts b/config-ui/src/api/blueprint/index.ts index 0f63d021076..c514ed74423 100644 --- a/config-ui/src/api/blueprint/index.ts +++ b/config-ui/src/api/blueprint/index.ts @@ -37,8 +37,9 @@ export const update = (id: ID, data: IBlueprint) => request(`/blueprints/${id}`, export const pipelines = (id: ID) => request(`/blueprints/${id}/pipelines`); type TriggerQuery = { - skipCollectors: boolean; - fullSync: boolean; + skipCollectors?: boolean; + fullSync?: boolean; }; -export const trigger = (id: ID, data: TriggerQuery) => request(`/blueprints/${id}/trigger`, { method: 'post', data }); +export const trigger = (id: ID, data: TriggerQuery = { skipCollectors: false, fullSync: false }) => + request(`/blueprints/${id}/trigger`, { method: 'post', data }); diff --git a/config-ui/src/app/store.ts b/config-ui/src/app/store.ts index 5725ddc7a5d..8d2ce0c3429 100644 --- a/config-ui/src/app/store.ts +++ b/config-ui/src/app/store.ts @@ -18,12 +18,11 @@ import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'; -import { connectionsSlice, tipsSlice } from '@/features'; +import { connectionsSlice } from '@/features'; export const store = configureStore({ reducer: { connections: connectionsSlice.reducer, - tips: tipsSlice.reducer, }, }); diff --git a/config-ui/src/features/index.ts b/config-ui/src/features/index.ts index a247f9b2160..4e6e8a4dece 100644 --- a/config-ui/src/features/index.ts +++ b/config-ui/src/features/index.ts @@ -17,4 +17,3 @@ */ export * from './connections'; -export * from './tips'; diff --git a/config-ui/src/features/tips/index.ts b/config-ui/src/features/tips/index.ts deleted file mode 100644 index 513ab48a7f8..00000000000 --- a/config-ui/src/features/tips/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 './slice'; diff --git a/config-ui/src/features/tips/slice.ts b/config-ui/src/features/tips/slice.ts deleted file mode 100644 index b817aaa5c4a..00000000000 --- a/config-ui/src/features/tips/slice.ts +++ /dev/null @@ -1,58 +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 { createSlice } from '@reduxjs/toolkit'; - -import { RootState } from '@/app/store'; - -const initialState: { - show: boolean; - type?: 'data-scope-changed' | 'scope-config-changed'; - payload?: { - pname?: string; - blueprintId: ID; - }; -} = { - show: false, -}; - -export const tipsSlice = createSlice({ - name: 'tips', - initialState, - reducers: { - showTips: (state, action) => { - state.show = true; - state.type = action.payload.type; - state.payload = action.payload.payload; - }, - hideTips: (state) => { - state.show = false; - state.type = undefined; - }, - }, -}); - -export const { showTips, hideTips } = tipsSlice.actions; - -export default tipsSlice.reducer; - -export const selectTipsShow = (state: RootState) => state.tips.show; - -export const selectTipsType = (state: RootState) => state.tips.type; - -export const selectTipsPayload = (state: RootState) => state.tips.payload; diff --git a/config-ui/src/plugins/components/index.ts b/config-ui/src/plugins/components/index.ts index c374a89bbe8..337e446fecd 100644 --- a/config-ui/src/plugins/components/index.ts +++ b/config-ui/src/plugins/components/index.ts @@ -23,5 +23,6 @@ export * from './connection-status'; export * from './data-scope-remote'; export * from './data-scope-select'; export * from './plugin-name'; +export * from './scope-config'; export * from './scope-config-form'; export * from './scope-config-select'; diff --git a/config-ui/src/plugins/components/scope-config-form/index.tsx b/config-ui/src/plugins/components/scope-config-form/index.tsx index 7c8d6f0f5fe..c6ba08d78e0 100644 --- a/config-ui/src/plugins/components/scope-config-form/index.tsx +++ b/config-ui/src/plugins/components/scope-config-form/index.tsx @@ -104,7 +104,8 @@ export const ScopeConfigForm = ({ : API.scopeConfig.update(plugin, connectionId, scopeConfigId, { name, entities, ...transformation }), { setOperating, - formatMessage: () => (!scopeConfigId ? 'Create scope config successful.' : 'Update scope config successful'), + hideToast: !!scopeConfigId, + formatMessage: () => 'Create scope config successful.', }, ); 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 e1105c3c71a..dfc37a16362 100644 --- a/config-ui/src/plugins/components/scope-config-select/index.tsx +++ b/config-ui/src/plugins/components/scope-config-select/index.tsx @@ -17,7 +17,7 @@ */ import { useState, useEffect, useMemo } from 'react'; -import { PlusOutlined, EditOutlined } from '@ant-design/icons'; +import { PlusOutlined } from '@ant-design/icons'; import { Flex, Table, Button, Modal } from 'antd'; import API from '@/api'; @@ -37,7 +37,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance const [version, setVersion] = useState(1); const [trId, setTrId] = useState(); const [open, setOpen] = useState(false); - const [updatedId, setUpdatedId] = useState(); const { ready, data } = useRefreshData(() => API.scopeConfig.list(plugin, connectionId), [version]); @@ -56,12 +55,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance const handleHideDialog = () => { setOpen(false); - setUpdatedId(undefined); - }; - - const handleUpdate = async (id: ID) => { - setUpdatedId(id); - handleShowDialog(); }; const handleSubmit = async (trId: ID) => { @@ -72,7 +65,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance return ( - + @@ -81,17 +74,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance rowKey="id" size="small" loading={!ready} - columns={[ - { title: 'Name', dataIndex: 'name', key: 'name' }, - { - title: '', - dataIndex: 'id', - key: 'id', - width: 100, - render: (id) => - id !== 'None' ? + + ), + onCancel: () => { + navigate( + pname ? PATHS.PROJECT(pname, { tab: 'configuration' }) : PATHS.BLUEPRINT(blueprint.id, 'configuration'), + ); + }, + }); } }; @@ -135,17 +150,52 @@ export const BlueprintConnectionDetailPage = () => { }), }), { - formatMessage: () => 'Update data scope successful.', + hideToast: true, }, ); if (success) { - handleShowTips(); handleHideDataScope(); - setVersion((v) => v + 1); + modal.success({ + closable: true, + centered: true, + width: 500, + title: 'Data Scope Changed', + content: 'Re-collect the data to get the project metrics updated?', + footer: ( +
+ +
+ ), + onCancel: () => { + setVersion(version + 1); + }, + }); } }; + 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 ( { > - If you would like to edit the Data Scope or Scope Config of this Connection, please{' '} + To manage the complete data scope and scope config for this Connection, please{' '} go to the Connection detail page @@ -192,13 +242,6 @@ export const BlueprintConnectionDetailPage = () => { - {pluginConfig.scopeConfig && ( - - - - )} { { title: 'Scope Config', key: 'scopeConfig', - render: (_, { scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'), + render: (_, { id, scopeConfigId, scopeConfigName }) => ( + + ), }, ]} dataSource={scopes} @@ -228,6 +280,7 @@ export const BlueprintConnectionDetailPage = () => { onSubmit={handleChangeDataScope} /> + {contextHolder} ); }; diff --git a/config-ui/src/routes/connection/connection.tsx b/config-ui/src/routes/connection/connection.tsx index 957a793a797..70ca4dc4de5 100644 --- a/config-ui/src/routes/connection/connection.tsx +++ b/config-ui/src/routes/connection/connection.tsx @@ -18,21 +18,21 @@ import { useState, useMemo } from 'react'; import { useParams, useNavigate, Link } from 'react-router-dom'; -import { DeleteOutlined, PlusOutlined, NodeIndexOutlined, LinkOutlined, ClearOutlined } from '@ant-design/icons'; +import { DeleteOutlined, PlusOutlined, LinkOutlined, ClearOutlined } from '@ant-design/icons'; import { theme, Space, Table, Button, Modal, message } from 'antd'; import API from '@/api'; import { PageHeader, Message } from '@/components'; import { PATHS } from '@/config'; import { useAppDispatch, useAppSelector } from '@/hooks'; -import { selectConnection, removeConnection, showTips } from '@/features'; +import { selectConnection, removeConnection } from '@/features'; import { useRefreshData } from '@/hooks'; import { ConnectionStatus, DataScopeRemote, getPluginConfig, getPluginScopeId, - ScopeConfigForm, + ScopeConfig, ScopeConfigSelect, } from '@/plugins'; import { IConnection } from '@/types'; @@ -56,7 +56,6 @@ export const Connection = () => { const [pageSize, setPageSize] = useState(10); const [scopeId, setScopeId] = useState(); const [scopeIds, setScopeIds] = useState([]); - const [scopeConfigId, setScopeConfigId] = useState(); const [conflict, setConflict] = useState([]); const [errorMsg, setErrorMsg] = useState(''); @@ -97,7 +96,7 @@ export const Connection = () => { const handleHideDialog = () => { setType(undefined); }; - + const handleShowDeleteDialog = () => { setType('deleteConnection'); }; @@ -217,12 +216,19 @@ export const Connection = () => { ); if (success) { - setVersion((v) => v + 1); - dispatch(showTips({ type: 'scope-config-changed' })); handleHideDialog(); + setVersion(version + 1); + message.success( + 'Scope Config(s) have been updated. If you would like to re-transform or re-collect the data in the related project(s), please go to the Project page and do so.', + ); } }; + const handleScopeConfigChange = () => { + // TO-DO: check scope config change will effect the scope config + setVersion(version + 1); + }; + return ( { style={{ marginLeft: 8 }} type="primary" disabled={!scopeIds.length} - icon={} + icon={} onClick={() => handleShowScopeConfigSelectDialog(scopeIds)} > Associate Scope Config @@ -290,22 +296,16 @@ export const Connection = () => { { title: 'Scope Config', key: 'scopeConfig', - align: 'center', width: 400, render: (_, { id, configId, configName }) => ( - <> - {configId ? configName : 'N/A'} - {pluginConfig.scopeConfig && ( - - - )} - {tipsType === 'scope-config-changed' && ( - - )} - - -