You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/01/10 03:54:14 UTC
[incubator-devlake] branch main updated: fix(config-ui): pipeline and task duration calculation errors (#4169)
This is an automated email from the ASF dual-hosted git repository.
likyh 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 39c37215a fix(config-ui): pipeline and task duration calculation errors (#4169)
39c37215a is described below
commit 39c37215ac6b90594e74212523d396e24589d29d
Author: 青湛 <0x...@gmail.com>
AuthorDate: Tue Jan 10 11:54:10 2023 +0800
fix(config-ui): pipeline and task duration calculation errors (#4169)
---
.../components/{index.ts => duration/index.tsx} | 23 +++++++++++++++++++++-
.../pages/pipeline/components/historical/index.tsx | 10 +++++++---
config-ui/src/pages/pipeline/components/index.ts | 1 +
.../pipeline/detail/components/task/index.tsx | 4 ++--
.../src/pages/pipeline/detail/pipeline-detail.tsx | 7 +++++--
config-ui/src/pages/pipeline/types.ts | 4 ++--
config-ui/src/utils/time.ts | 10 ----------
7 files changed, 39 insertions(+), 20 deletions(-)
diff --git a/config-ui/src/pages/pipeline/components/index.ts b/config-ui/src/pages/pipeline/components/duration/index.tsx
similarity index 60%
copy from config-ui/src/pages/pipeline/components/index.ts
copy to config-ui/src/pages/pipeline/components/duration/index.tsx
index 484dfb785..042b787db 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/pages/pipeline/components/duration/index.tsx
@@ -16,4 +16,25 @@
*
*/
-export * from './historical';
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { StatusEnum } from '../../types';
+
+interface Props {
+ status: StatusEnum;
+ beganAt: string;
+ finishedAt: string | null;
+}
+
+export const PipelineDuration = ({ status, beganAt, finishedAt }: Props) => {
+ if (![StatusEnum.CANCELLED, StatusEnum.COMPLETED, StatusEnum.FAILED].includes(status)) {
+ return <span>{dayjs(beganAt).toNow(true)}</span>;
+ }
+
+ if (!finishedAt) {
+ return <span>-</span>;
+ }
+
+ return <span>{dayjs(beganAt).from(finishedAt, true)}</span>;
+};
diff --git a/config-ui/src/pages/pipeline/components/historical/index.tsx b/config-ui/src/pages/pipeline/components/historical/index.tsx
index c7aaa3ddf..22ebf2623 100644
--- a/config-ui/src/pages/pipeline/components/historical/index.tsx
+++ b/config-ui/src/pages/pipeline/components/historical/index.tsx
@@ -25,13 +25,15 @@ import { saveAs } from 'file-saver';
import { DEVLAKE_ENDPOINT } from '@/config';
import { Card, Loading, Table, ColumnType, Inspector } from '@/components';
import { useAutoRefresh } from '@/hooks';
-import { formatTime, duration } from '@/utils';
+import { formatTime } from '@/utils';
import type { PipelineType } from '../../types';
import { StatusEnum } from '../../types';
import { STATUS_ICON, STATUS_LABEL, STATUS_CLS } from '../../misc';
import * as API from '../../api';
+import { PipelineDuration } from '../duration';
+
import * as S from './styled';
interface Props {
@@ -96,9 +98,11 @@ export const PipelineHistorical = ({ blueprintId }: Props) => {
},
{
title: 'Duration',
- dataIndex: ['beganAt', 'finishedAt'],
+ dataIndex: ['status', 'beganAt', 'finishedAt'],
key: 'duration',
- render: ({ beganAt, finishedAt }) => <span>{duration(beganAt, finishedAt)}</span>,
+ render: ({ status, beganAt, finishedAt }) => (
+ <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
+ ),
},
{
title: '',
diff --git a/config-ui/src/pages/pipeline/components/index.ts b/config-ui/src/pages/pipeline/components/index.ts
index 484dfb785..294a8fde5 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/pages/pipeline/components/index.ts
@@ -17,3 +17,4 @@
*/
export * from './historical';
+export * from './duration';
diff --git a/config-ui/src/pages/pipeline/detail/components/task/index.tsx b/config-ui/src/pages/pipeline/detail/components/task/index.tsx
index 2aaf4cd22..f8b868dd7 100644
--- a/config-ui/src/pages/pipeline/detail/components/task/index.tsx
+++ b/config-ui/src/pages/pipeline/detail/components/task/index.tsx
@@ -22,8 +22,8 @@ import { Tooltip2 } from '@blueprintjs/popover2';
import type { PluginConfigType } from '@/plugins';
import { Plugins, PluginConfig } from '@/plugins';
-import { duration } from '@/utils';
+import { PipelineDuration } from '../../../components';
import { StatusEnum, TaskType } from '../../../types';
import { STATUS_CLS } from '../../../misc';
@@ -106,7 +106,7 @@ export const Task = ({ task, operating, onRerun }: Props) => {
<Icon icon="repeat" style={{ color: Colors.BLUE3 }} onClick={handleRerun} />
</Tooltip2>
)}
- <span>{duration(beganAt, finishedAt)}</span>
+ <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
</S.Duration>
</S.Wrapper>
);
diff --git a/config-ui/src/pages/pipeline/detail/pipeline-detail.tsx b/config-ui/src/pages/pipeline/detail/pipeline-detail.tsx
index 3b02bf343..c4c1ae858 100644
--- a/config-ui/src/pages/pipeline/detail/pipeline-detail.tsx
+++ b/config-ui/src/pages/pipeline/detail/pipeline-detail.tsx
@@ -23,8 +23,9 @@ import classNames from 'classnames';
import { Card, Loading } from '@/components';
import { useAutoRefresh } from '@/hooks';
-import { formatTime, duration } from '@/utils';
+import { formatTime } from '@/utils';
+import { PipelineDuration } from '../components';
import type { PipelineType, TaskType } from '../types';
import { StatusEnum } from '../types';
import { STATUS_ICON, STATUS_LABEL, STATUS_CLS } from '../misc';
@@ -102,7 +103,9 @@ export const PipelineDetail = ({ id }: Props) => {
</li>
<li>
<span>Duration</span>
- <strong>{duration(beganAt, finishedAt)}</strong>
+ <strong>
+ <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
+ </strong>
</li>
<li>
<span>Current Stage</span>
diff --git a/config-ui/src/pages/pipeline/types.ts b/config-ui/src/pages/pipeline/types.ts
index eb1e30a54..72860c3d6 100644
--- a/config-ui/src/pages/pipeline/types.ts
+++ b/config-ui/src/pages/pipeline/types.ts
@@ -46,8 +46,8 @@ export type TaskType = {
status: StatusEnum;
pipelineRow: number;
pipelineCol: number;
- beganAt?: string;
- finishedAt?: string;
+ beganAt: string;
+ finishedAt: string | null;
options: string;
message: string;
progressDetail?: {
diff --git a/config-ui/src/utils/time.ts b/config-ui/src/utils/time.ts
index 2e72ddded..92039f24d 100644
--- a/config-ui/src/utils/time.ts
+++ b/config-ui/src/utils/time.ts
@@ -47,13 +47,3 @@ dayjs.extend(utc);
dayjs.updateLocale('en', localeConfiguration);
export const formatTime = (val: string | null, format = 'YYYY-MM-DD HH:mm') => (val ? dayjs(val).format(format) : '-');
-
-export const duration = (beganAt?: string, finishedAt?: string) => {
- if (beganAt && finishedAt) {
- return dayjs(beganAt).from(finishedAt, true);
- } else if (beganAt) {
- return dayjs(beganAt).toNow(true);
- } else {
- return '-';
- }
-};