diff --git a/packages/web/src/components/ExecutionRow/index.tsx b/packages/web/src/components/ExecutionRow/index.tsx
index 5e3652b1..ae2038b6 100644
--- a/packages/web/src/components/ExecutionRow/index.tsx
+++ b/packages/web/src/components/ExecutionRow/index.tsx
@@ -6,9 +6,10 @@ import Stack from '@mui/material/Stack';
import CardActionArea from '@mui/material/CardActionArea';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import { DateTime } from 'luxon';
-
import type { IExecution } from '@automatisch/types';
+
import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
import FlowAppIcons from 'components/FlowAppIcons';
import { Apps, CardContent, Typography } from './style';
@@ -16,12 +17,14 @@ type ExecutionRowProps = {
execution: IExecution;
}
-const getHumanlyDate = (timestamp: number) => DateTime.fromMillis(timestamp).toLocaleString(DateTime.DATETIME_MED);
-
export default function ExecutionRow(props: ExecutionRowProps): React.ReactElement {
+ const formatMessage = useFormatMessage();
const { execution } = props;
const { flow } = execution;
+ const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10));
+ const relativeCreatedAt = createdAt.toRelative();
+
return (
@@ -41,7 +44,7 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
- {getHumanlyDate(parseInt(execution.createdAt, 10))}
+ {formatMessage('execution.executedAt', { datetime: relativeCreatedAt })}
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 5e75c89f..629d9b4c 100644
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -48,6 +48,7 @@
"flows.create": "Create flow",
"flows.title": "Flows",
"executions.title": "Executions",
+ "execution.executedAt": "executed {datetime}",
"profileSettings.title": "My Profile",
"profileSettings.email": "Email",
"profileSettings.updateEmail": "Update email",