You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2024/04/03 08:01:52 UTC
(incubator-devlake) branch feat-onboard-card created (now 72e630de0)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch feat-onboard-card
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at 72e630de0 feat: support different status style for onboard card
This branch includes the following new commits:
new 72e630de0 feat: support different status style for onboard card
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(incubator-devlake) 01/01: feat: support different status style for onboard card
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch feat-onboard-card
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 72e630de01fc4e62036a9acb3ed1e819a4ce40d2
Author: mintsweet <0x...@gmail.com>
AuthorDate: Wed Apr 3 21:01:40 2024 +1300
feat: support different status style for onboard card
---
config-ui/src/routes/onboard/components/card.tsx | 121 +++++++++++++++++++----
config-ui/src/routes/onboard/step-4.tsx | 2 +-
2 files changed, 105 insertions(+), 18 deletions(-)
diff --git a/config-ui/src/routes/onboard/components/card.tsx b/config-ui/src/routes/onboard/components/card.tsx
index 63a3fb911..c607bd8eb 100644
--- a/config-ui/src/routes/onboard/components/card.tsx
+++ b/config-ui/src/routes/onboard/components/card.tsx
@@ -16,15 +16,17 @@
*
*/
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
-import { CloseOutlined } from '@ant-design/icons';
-import { Card, Flex, Progress, Button, Modal } from 'antd';
+import { CloseOutlined, LoadingOutlined, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import { theme, Card, Flex, Progress, Space, Button, Modal } from 'antd';
import API from '@/api';
-import { useRefreshData } from '@/hooks';
+import { useRefreshData, useAutoRefresh } from '@/hooks';
import { operator } from '@/utils';
+import { DashboardURLMap } from '../step-4';
+
interface Props {
style?: React.CSSProperties;
}
@@ -35,10 +37,54 @@ export const OnboardCard = ({ style }: Props) => {
const navigate = useNavigate();
+ const {
+ token: { green5, orange5, red5 },
+ } = theme.useToken();
+
const [modal, contextHolder] = Modal.useModal();
const { ready, data } = useRefreshData(() => API.store.get('onboard'), [version]);
+ const record = useMemo(() => (data ? data.records.find((it: any) => it.plugin === data.plugin) : null), [data]);
+
+ const tasksRes = useAutoRefresh(
+ async () => {
+ if (!record) {
+ return;
+ }
+
+ return await API.pipeline.subTasks(record?.pipelineId as string);
+ },
+ [record],
+ {
+ cancel: (data) => {
+ return !!(data && ['TASK_COMPLETED', 'TASK_PARTIAL', 'TASK_FAILED'].includes(data.status));
+ },
+ },
+ );
+
+ const status = useMemo(() => {
+ if (!data || data.step !== 4) {
+ return 'prepare';
+ }
+
+ if (!tasksRes.data) {
+ return 'running';
+ }
+
+ switch (tasksRes.data.status) {
+ case 'TASK_COMPLETED':
+ return 'success';
+ case 'TASK_PARTIAL':
+ return 'partial';
+ case 'TASK_FAILED':
+ return 'failed';
+ case 'TASK_RUNNING':
+ default:
+ return 'running';
+ }
+ }, [data, tasksRes]);
+
const handleClose = async () => {
modal.confirm({
width: 600,
@@ -66,24 +112,65 @@ export const OnboardCard = ({ style }: Props) => {
return (
<Card style={style}>
- <Flex align="center" justify="space-between">
+ <Flex style={{ paddingRight: 50 }} align="center" justify="space-between">
<Flex align="center">
- <Progress
- type="circle"
- size={30}
- format={() => `${data.step > 3 ? 3 : data.step}/3`}
- percent={(data.step / 3) * 100}
- />
+ {status === 'prepare' && (
+ <Progress type="circle" size={30} format={() => `${data.step}/3`} percent={(data.step / 3) * 100} />
+ )}
+ {status === 'running' && <LoadingOutlined />}
+ {status === 'success' && <CheckCircleFilled style={{ color: green5 }} />}
+ {status === 'partial' && <CheckCircleFilled style={{ color: orange5 }} />}
+ {status === 'failed' && <CloseCircleFilled style={{ color: red5 }} />}
<div style={{ marginLeft: 16 }}>
<h4>Onboard Session</h4>
- <h5 style={{ fontWeight: 400 }}>
- You are not far from connecting to your first tool. Continue to finish it.
- </h5>
+ {['prepare', 'running'].includes(status) && (
+ <h5 style={{ fontWeight: 400 }}>
+ You are not far from connecting to your first tool. Continue to finish it.
+ </h5>
+ )}
+ {status === 'success' && (
+ <h5 style={{ fontWeight: 400 }}>The data of your first tool has been collected. Please check it out.</h5>
+ )}
+ {status === 'partial' && (
+ <h5 style={{ fontWeight: 400 }}>
+ The data of your first tool has been parted collected. Please check it out.
+ </h5>
+ )}
+ {status === 'failed' && (
+ <h5 style={{ fontWeight: 400 }}>Something went wrong with the collection process.</h5>
+ )}
</div>
</Flex>
- <Button type="primary" onClick={() => navigate('/onboard')}>
- Continue
- </Button>
+ {status === 'prepare' && (
+ <Space>
+ <Button type="primary" onClick={() => navigate('/onboard')}>
+ Continue
+ </Button>
+ </Space>
+ )}
+ {['running', 'failed'].includes(status) && (
+ <Space>
+ <Button type="primary" onClick={() => navigate('/onboard')}>
+ Details
+ </Button>
+ </Space>
+ )}
+ {status === 'success' && (
+ <Space>
+ <Button type="primary" onClick={() => window.open(DashboardURLMap[data.plugin])}>
+ Check Dashboard
+ </Button>
+ <Button onClick={handleClose}>Finish</Button>
+ </Space>
+ )}
+ {status === 'partial' && (
+ <Space>
+ <Button type="primary" onClick={() => navigate('/onboard')}>
+ Details
+ </Button>
+ <Button onClick={() => window.open(DashboardURLMap[data.plugin])}>Check Dashboard</Button>
+ </Space>
+ )}
</Flex>
<CloseOutlined
style={{ position: 'absolute', top: 10, right: 20, cursor: 'pointer', fontSize: 12 }}
diff --git a/config-ui/src/routes/onboard/step-4.tsx b/config-ui/src/routes/onboard/step-4.tsx
index 556dbe3ca..22992d3db 100644
--- a/config-ui/src/routes/onboard/step-4.tsx
+++ b/config-ui/src/routes/onboard/step-4.tsx
@@ -75,7 +75,7 @@ const Wrapper = styled.div`
}
`;
-const DashboardURLMap: Record<string, string> = {
+export const DashboardURLMap: Record<string, string> = {
github: '/grafana/d/KXWvOFQnz/github?orgId=1&var-repo_id=All&var-interval=WEEKDAY',
gitlab: '/grafana/d/msSjEq97z/gitlab?orgId=1&var-repo_id=All&var-interval=WEEKDAY',
bitbucket: '/grafana/d/4LzQHZa4k/bitbucket?orgId=1&var-repo_id=All&var-interval=WEEKDAY',