This is an automated email from the ASF dual-hosted git repository.
abeizn pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new ceb94c9ae fix(config-ui): the tips wording and when to show (#5438)
ceb94c9ae is described below
commit ceb94c9aedb7fd850f3de2ebc8e4ea07ab2776de
Author: 青湛 <[email protected]>
AuthorDate: Mon Jun 12 15:44:32 2023 +0800
fix(config-ui): the tips wording and when to show (#5438)
* feat(config-ui): add props style for buttons component
* fix(config-ui): tips wording and when to show
---------
Co-authored-by: abeizn <[email protected]>
---
config-ui/src/components/buttons/index.tsx | 5 +--
.../src/pages/blueprint/connection-detail/api.ts | 3 ++
.../pages/blueprint/connection-detail/index.tsx | 42 ++++++++++++++++++++--
config-ui/src/pages/connection/detail/index.tsx | 24 +++++--------
4 files changed, 54 insertions(+), 20 deletions(-)
diff --git a/config-ui/src/components/buttons/index.tsx
b/config-ui/src/components/buttons/index.tsx
index 43580427c..550eb21fa 100644
--- a/config-ui/src/components/buttons/index.tsx
+++ b/config-ui/src/components/buttons/index.tsx
@@ -52,14 +52,15 @@ const Wrapper = styled.div<{ position: 'top' | 'bottom';
align: 'left' | 'right'
`;
interface Props {
+ style?: React.CSSProperties;
position?: 'top' | 'bottom';
align?: 'left' | 'right' | 'center';
children: React.ReactNode;
}
-export const Buttons = ({ position = 'top', align = 'left', children }: Props)
=> {
+export const Buttons = ({ style, position = 'top', align = 'left', children }:
Props) => {
return (
- <Wrapper position={position} align={align}>
+ <Wrapper style={style} position={position} align={align}>
{children}
</Wrapper>
);
diff --git a/config-ui/src/pages/blueprint/connection-detail/api.ts
b/config-ui/src/pages/blueprint/connection-detail/api.ts
index 6e6109e21..6dd6beb12 100644
--- a/config-ui/src/pages/blueprint/connection-detail/api.ts
+++ b/config-ui/src/pages/blueprint/connection-detail/api.ts
@@ -30,3 +30,6 @@ export const getConnection = (plugin: string, connectionId:
ID) =>
export const getDataScopes = (plugin: string, connectionId: ID) =>
request(`/plugins/${plugin}/connections/${connectionId}/scopes`);
+
+export const runBlueprint = (id: ID, skipCollectors: boolean) =>
+ request(`/blueprints/${id}/trigger`, { method: 'post', data: {
skipCollectors } });
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 3615a856f..213eadf45 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -21,8 +21,8 @@ import { useHistory, useParams } from 'react-router-dom';
import { Button, Intent, Position } from '@blueprintjs/core';
import { Popover2 } from '@blueprintjs/popover2';
-import { PageLoading, PageHeader, ExternalLink, Buttons, Table, Dialog } from
'@/components';
-import { useRefreshData } from '@/hooks';
+import { PageLoading, PageHeader, ExternalLink, Buttons, Table, Dialog,
Message } from '@/components';
+import { useRefreshData, useTips } from '@/hooks';
import { DataScopeSelect, getPluginId } from '@/plugins';
import { operator } from '@/utils';
@@ -32,10 +32,13 @@ import * as S from './styled';
export const BlueprintConnectionDetailPage = () => {
const [version, setVersion] = useState(1);
const [isOpen, setIsOpen] = useState(false);
+ const [operating, setOperating] = useState(false);
const { pname, bid, unique } = useParams<{ pname?: string; bid?: string;
unique: string }>();
const history = useHistory();
+ const { setTips } = useTips();
+
const getBlueprint = async (pname?: string, bid?: string) => {
if (pname) {
const res = await API.getProject(pname);
@@ -78,6 +81,39 @@ export const BlueprintConnectionDetailPage = () => {
const handleShowDataScope = () => setIsOpen(true);
const handleHideDataScope = () => setIsOpen(false);
+ const handleRunBP = async (skipCollectors: boolean) => {
+ const [success] = await operator(() => API.runBlueprint(blueprint.id,
skipCollectors), {
+ setOperating,
+ formatMessage: () => 'Trigger blueprint successful.',
+ });
+
+ if (success) {
+ history.push(pname ? `/projects/${pname}` :
`/blueprints/${blueprint.id}`);
+ }
+ };
+
+ const handleShowTips = () => {
+ setTips(
+ <>
+ <Message content="The Scope Config and/or Data Scope in this project
have been updated. Would you like to re-transform or recollect the data in this
project?" />
+ <Buttons style={{ marginLeft: 8, marginBottom: 0 }}>
+ <Button
+ loading={operating}
+ intent={Intent.PRIMARY}
+ text="Only Re-transform Data"
+ onClick={() => handleRunBP(true)}
+ />
+ <Button
+ loading={operating}
+ intent={Intent.PRIMARY}
+ text="Recollect All Data"
+ onClick={() => handleRunBP(false)}
+ />
+ </Buttons>
+ </>,
+ );
+ };
+
const handleRemoveConnection = async () => {
const [success] = await operator(() =>
API.updateBlueprint(blueprint.id, {
@@ -92,6 +128,7 @@ export const BlueprintConnectionDetailPage = () => {
);
if (success) {
+ handleShowTips();
history.push(pname ? `/projects/${pname}` :
`/blueprints/${blueprint.id}`);
}
};
@@ -120,6 +157,7 @@ export const BlueprintConnectionDetailPage = () => {
);
if (success) {
+ handleShowTips();
handleHideDataScope();
setVersion((v) => v + 1);
}
diff --git a/config-ui/src/pages/connection/detail/index.tsx
b/config-ui/src/pages/connection/detail/index.tsx
index 76e3860f2..d8c2783f2 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -20,7 +20,7 @@ import { useState, useEffect, useMemo } from 'react';
import { useParams, useHistory, Link } from 'react-router-dom';
import { Button, Icon, Intent } from '@blueprintjs/core';
-import { PageHeader, Buttons, Dialog, IconButton, Table } from '@/components';
+import { PageHeader, Buttons, Dialog, IconButton, Table, Message } from
'@/components';
import { useTips, useConnections, useRefreshData } from '@/hooks';
import {
ConnectionForm,
@@ -72,24 +72,13 @@ const ConnectionDetail = ({ plugin, connectionId }: Props)
=> {
useEffect(() => {
onTest(`${plugin}-${connectionId}`);
+ return () => setTips('');
}, [plugin, connectionId]);
const handleHideDialog = () => {
setType(undefined);
};
- const handleShowTips = () => {
- setTips(
- <div>
- <Icon icon="warning-sign" style={{ marginRight: 8 }} color="#F4BE55" />
- <span>
- The transformation of certain data scope has been updated. If you
would like to re-transform the data in the
- related project(s), please go to the Project page and do so.
- </span>
- </div>,
- );
- };
-
const handleShowDeleteDialog = () => {
setType('deleteConnection');
};
@@ -122,7 +111,6 @@ const ConnectionDetail = ({ plugin, connectionId }: Props)
=> {
const handleCreateDataScope = () => {
setVersion((v) => v + 1);
handleHideDialog();
- handleShowTips();
};
const handleShowClearDataScopeDialog = (scopeId: ID) => {
@@ -145,7 +133,6 @@ const ConnectionDetail = ({ plugin, connectionId }: Props)
=> {
if (success) {
setVersion((v) => v + 1);
- handleShowTips();
handleHideDialog();
}
};
@@ -175,7 +162,12 @@ const ConnectionDetail = ({ plugin, connectionId }: Props)
=> {
if (success) {
setVersion((v) => v + 1);
- handleShowTips();
+ setTips(
+ <Message
+ content="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."
+ />,
+ );
handleHideDialog();
}
};
