This is an automated email from the ASF dual-hosted git repository. abeizn pushed a commit to branch release-v1.0 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 7b95c9fa95c434a726752263f9daaaf9463c38b0 Author: 青湛 <[email protected]> AuthorDate: Fri Mar 29 15:51:56 2024 +1300 fix: some bugs for onboard (#7248) * fix: adjust the wording for onboard finish * fix: add margin top for onboard finish * fix: adjust the style for onboard failed * fix: adjust the style for onboard logs detail * feat: add name mapping for onboard logs * fix: disabled next step when no scopes are selected * fix: missed progress in onboard log subtask * fix: name error in onboard log --- config-ui/src/api/pipeline/types.ts | 2 +- config-ui/src/routes/onboard/components/logs.tsx | 39 ++++++++++++++----- config-ui/src/routes/onboard/step-3.tsx | 2 +- config-ui/src/routes/onboard/step-4.tsx | 49 +++++++++++++++--------- 4 files changed, 61 insertions(+), 31 deletions(-) diff --git a/config-ui/src/api/pipeline/types.ts b/config-ui/src/api/pipeline/types.ts index 854ac2160..96f7ab26c 100644 --- a/config-ui/src/api/pipeline/types.ts +++ b/config-ui/src/api/pipeline/types.ts @@ -22,7 +22,7 @@ export type SubTasksRes = { subtasks: Array<{ plugin: string; options: { - name: string; + fullName: string; }; status: string; subtaskDetails: Array<{ diff --git a/config-ui/src/routes/onboard/components/logs.tsx b/config-ui/src/routes/onboard/components/logs.tsx index 1fae57707..f4bbb62c1 100644 --- a/config-ui/src/routes/onboard/components/logs.tsx +++ b/config-ui/src/routes/onboard/components/logs.tsx @@ -17,6 +17,7 @@ */ import { LoadingOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; +import { theme, Progress } from 'antd'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -26,7 +27,19 @@ const Wrapper = styled.div` background: #f6f6f8; .title { - font-weight: 600; + display: flex; + align-items: center; + justify-content: space-between; + + & > span.name { + flex: auto; + font-weight: 600; + } + + & > span.progress { + margin-left: 12px; + flex: 0 0 60px; + } } ul { @@ -48,8 +61,7 @@ const Wrapper = styled.div` } span.status { - flex: 0 0 140px; - text-align: right; + flex: 0 0 150px; } span.anticon { @@ -62,8 +74,8 @@ interface LogsProps { style?: React.CSSProperties; log: { plugin: string; - scopeName: string; - status: string; + name: string; + percent: number; tasks: Array<{ step: number; name: string; @@ -73,7 +85,11 @@ interface LogsProps { }; } -export const Logs = ({ style, log: { plugin, scopeName, status, tasks } }: LogsProps) => { +export const Logs = ({ style, log: { plugin, name, percent, tasks } }: LogsProps) => { + const { + token: { green5, red5, colorPrimary }, + } = theme.useToken(); + if (!plugin) { return null; } @@ -81,7 +97,10 @@ export const Logs = ({ style, log: { plugin, scopeName, status, tasks } }: LogsP return ( <Wrapper style={style}> <div className="title"> - {plugin}:{scopeName} + <span className="name">{name}</span> + <span className="progress"> + <Progress size="small" percent={percent} showInfo={false} /> + </span> </div> <ul> {tasks.map((task) => ( @@ -94,9 +113,9 @@ export const Logs = ({ style, log: { plugin, scopeName, status, tasks } }: LogsP ) : ( <span className="status">Records collected: {task.finishedRecords}</span> )} - {task.status === 'running' && <LoadingOutlined />} - {task.status === 'success' && <CheckCircleOutlined />} - {task.status === 'failed' && <CloseCircleOutlined />} + {task.status === 'running' && <LoadingOutlined style={{ color: colorPrimary }} />} + {task.status === 'success' && <CheckCircleOutlined style={{ color: green5 }} />} + {task.status === 'failed' && <CloseCircleOutlined style={{ color: red5 }} />} </li> ))} </ul> diff --git a/config-ui/src/routes/onboard/step-3.tsx b/config-ui/src/routes/onboard/step-3.tsx index 9a251b440..b87f5bdf0 100644 --- a/config-ui/src/routes/onboard/step-3.tsx +++ b/config-ui/src/routes/onboard/step-3.tsx @@ -157,7 +157,7 @@ export const Step3 = () => { <Button ghost type="primary" loading={operating} onClick={() => setStep(step - 1)}> Previous Step </Button> - <Button type="primary" loading={operating} onClick={handleSubmit}> + <Button type="primary" loading={operating} disabled={!scopes.length} onClick={handleSubmit}> Next Step </Button> </Flex> diff --git a/config-ui/src/routes/onboard/step-4.tsx b/config-ui/src/routes/onboard/step-4.tsx index e4d8ed1f6..d7c88fc3b 100644 --- a/config-ui/src/routes/onboard/step-4.tsx +++ b/config-ui/src/routes/onboard/step-4.tsx @@ -31,6 +31,7 @@ import { Logs } from './components'; import { Context } from './context'; const Wrapper = styled.div` + margin-top: 150px; padding: 24px; background-color: #fff; box-shadow: 0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.1), 0px 1.6px 8px 0px rgba(0, 0, 0, 0.07); @@ -129,24 +130,32 @@ export const Step4 = () => { const collectorTask = (data?.subtasks ?? [])[0] ?? {}; const extractorTask = (data?.subtasks ?? [])[1] ?? {}; + const collectorSubtasks = (collectorTask.subtaskDetails ?? []).filter((it) => it.isCollector); + const collectorSubtasksFinished = collectorSubtasks.filter((it) => it.finishedAt || it.isFailed); + const collector = { plugin: collectorTask.plugin, - scopeName: collectorTask.options?.name, - status: collectorTask.status, - tasks: (collectorTask.subtaskDetails ?? []) - .filter((it) => it.isCollector) - .map((it) => ({ - step: it.sequence, - name: it.name, - status: it.isFailed ? 'failed' : !it.beganAt ? 'pending' : it.finishedAt ? 'success' : 'running', - finishedRecords: it.finishedRecords, - })), + name: `Collect non-Git entitles in ${collectorTask.options?.fullName ?? 'Unknown'}`, + percent: collectorSubtasks.length + ? Math.floor(((collectorSubtasks.length - collectorSubtasksFinished.length) / collectorSubtasks.length) * 100) + : 0, + tasks: collectorSubtasks.map((it) => ({ + step: it.sequence, + name: it.name, + status: it.isFailed ? 'failed' : !it.beganAt ? 'pending' : it.finishedAt ? 'success' : 'running', + finishedRecords: it.finishedRecords, + })), }; + const extractorSubtasks = (extractorTask.subtaskDetails ?? []).filter((it) => it.isCollector); + const extractorSubtasksFinished = extractorSubtasks.filter((it) => it.finishedAt || it.isFailed); + const extractor = { plugin: extractorTask.plugin, - scopeName: extractorTask.options?.name, - status: extractorTask.status, + name: `Collect Git entitles in ${extractorTask.options?.fullName ?? 'Unknown'}`, + percent: extractorSubtasks.length + ? Math.floor(((extractorSubtasks.length - extractorSubtasksFinished.length) / extractorSubtasks.length) * 100) + : 0, tasks: (extractorTask.subtaskDetails ?? []) .filter((it) => it.isCollector) .map((it) => ({ @@ -161,7 +170,7 @@ export const Step4 = () => { }, [data]); const { - token: { green5, orange5, red5 }, + token: { green5, orange5, red5, colorPrimary }, } = theme.useToken(); const handleFinish = async () => { @@ -194,7 +203,7 @@ export const Step4 = () => { <Wrapper> {status === 'running' && ( <div className="top"> - <div className="info">syncing up data from {scopeName}...</div> + <div className="info">Syncing up data from {scopeName}...</div> <div className="tip"> This may take a few minutes to hours, depending on the size of your data and rate limits of the tool you choose. @@ -234,12 +243,14 @@ export const Step4 = () => { )} {status === 'failed' && ( <div className="top"> - <div className="info">Something went wrong with the collection process. </div> + <div className="info" style={{ marginBottom: 10 }}> + Something went wrong with the collection process. + </div> <div className="info"> - Please check out the - <Button type="link" onClick={() => setOpen(true)}> + Please check out the{' '} + <span style={{ color: colorPrimary, cursor: 'pointer' }} onClick={() => setOpen(true)}> network and token permission - </Button> + </span>{' '} and retry data collection </div> <CloseCircleOutlined style={{ fontSize: 120, color: red5 }} /> @@ -251,7 +262,7 @@ export const Step4 = () => { </div> )} <div className="logs"> - <div className="tip">Sync progress details</div> + <div className="tip">Data synchronization progress:</div> <div className="detail"> <Logs log={collector} /> <Logs log={extractor} style={{ marginLeft: 16 }} />
