From a5dbac981799b59cc53c3fd8bf089cc948f49a03 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Fri, 12 May 2023 20:13:47 +0000 Subject: [PATCH] feat(ExecutionStep): show execution date --- .../src/components/ExecutionHeader/index.tsx | 2 +- .../src/components/ExecutionStep/index.tsx | 28 +++++++++++++++++-- packages/web/src/locales/en.json | 1 + 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/web/src/components/ExecutionHeader/index.tsx b/packages/web/src/components/ExecutionHeader/index.tsx index e146acae..a6bff309 100644 --- a/packages/web/src/components/ExecutionHeader/index.tsx +++ b/packages/web/src/components/ExecutionHeader/index.tsx @@ -36,7 +36,7 @@ function ExecutionDate(props: Pick) { const relativeCreatedAt = createdAt.toRelative(); return ( - + {relativeCreatedAt} diff --git a/packages/web/src/components/ExecutionStep/index.tsx b/packages/web/src/components/ExecutionStep/index.tsx index 3c011fa2..26b1616b 100644 --- a/packages/web/src/components/ExecutionStep/index.tsx +++ b/packages/web/src/components/ExecutionStep/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { DateTime } from 'luxon'; import { useQuery } from '@apollo/client'; import Stack from '@mui/material/Stack'; import ErrorIcon from '@mui/icons-material/Error'; @@ -6,6 +7,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typography from '@mui/material/Typography'; +import Tooltip from '@mui/material/Tooltip'; import Box from '@mui/material/Box'; import type { IApp, IExecutionStep, IStep } from '@automatisch/types'; @@ -29,6 +31,22 @@ type ExecutionStepProps = { executionStep: IExecutionStep; }; +function ExecutionStepDate(props: Pick) { + const formatMessage = useFormatMessage(); + const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10)); + const relativeCreatedAt = createdAt.toRelative(); + + return ( + + + {formatMessage('executionStep.executedAt', { + datetime: relativeCreatedAt + })} + + + ); +} + const validIcon = ; const errorIcon = ; @@ -56,7 +74,7 @@ export default function ExecutionStep( return (
- + @@ -65,7 +83,7 @@ export default function ExecutionStep( -
+ {isTrigger ? formatMessage('flowStep.triggerType') @@ -75,7 +93,11 @@ export default function ExecutionStep( {step.position}. {app?.name} -
+ + + + +
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index bf5973a8..75462da4 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -83,6 +83,7 @@ "execution.statusFailure": "Failure", "execution.noDataTitle": "No data", "execution.noDataMessage": "We successfully ran the execution, but there was no new data to process.", + "executionStep.executedAt": "executed {datetime}", "profileSettings.title": "My Profile", "profileSettings.fullName": "Full name", "profileSettings.email": "Email",