diff --git a/packages/backend/src/graphql/queries/get-executions.ts b/packages/backend/src/graphql/queries/get-executions.ts
index 2d41d722..068fb36b 100644
--- a/packages/backend/src/graphql/queries/get-executions.ts
+++ b/packages/backend/src/graphql/queries/get-executions.ts
@@ -13,7 +13,11 @@ const getExecutions = async (
) => {
const executions = context.currentUser
.$relatedQuery('executions')
- .withGraphFetched('flow')
+ .withGraphFetched({
+ flow: {
+ steps: true
+ }
+ })
.orderBy('created_at', 'desc');
return paginate(executions, params.limit, params.offset);
diff --git a/packages/web/src/components/ExecutionRow/index.tsx b/packages/web/src/components/ExecutionRow/index.tsx
index 01db1847..ae2038b6 100644
--- a/packages/web/src/components/ExecutionRow/index.tsx
+++ b/packages/web/src/components/ExecutionRow/index.tsx
@@ -6,26 +6,34 @@ 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 { CardContent, Typography } from './style';
+import useFormatMessage from 'hooks/useFormatMessage';
+import FlowAppIcons from 'components/FlowAppIcons';
+import { Apps, CardContent, Typography } from './style';
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 (
+
+
+
+
- {getHumanlyDate(parseInt(execution.createdAt, 10))}
+ {formatMessage('execution.executedAt', { datetime: relativeCreatedAt })}
diff --git a/packages/web/src/components/ExecutionRow/style.ts b/packages/web/src/components/ExecutionRow/style.ts
index c392df8b..052482c6 100644
--- a/packages/web/src/components/ExecutionRow/style.ts
+++ b/packages/web/src/components/ExecutionRow/style.ts
@@ -1,15 +1,30 @@
import { styled } from '@mui/material/styles';
import MuiCardContent from '@mui/material/CardContent';
+import MuiStack from '@mui/material/Stack';
import MuiTypography from '@mui/material/Typography';
export const CardContent = styled(MuiCardContent)(({ theme }) => ({
display: 'grid',
gridTemplateRows: 'auto',
- gridTemplateColumns: '1fr auto',
- gridColumnGap: theme.spacing(2),
+ gridTemplateColumns: 'calc(30px * 3 + 8px * 2) minmax(0, auto) min-content',
+ gridGap: theme.spacing(2),
+ gridTemplateAreas: `
+ "apps title menu"
+ `,
alignItems: 'center',
+ [theme.breakpoints.down('sm')]: {
+ gridTemplateAreas: `
+ "apps menu"
+ "title menu"
+ `,
+ gridTemplateColumns: 'minmax(0, auto) min-content',
+ gridTemplateRows: 'auto auto',
+ }
}));
+export const Apps = styled(MuiStack)(() => ({
+ gridArea: 'apps',
+}));
export const Typography = styled(MuiTypography)(() => ({
display: 'inline-block',
diff --git a/packages/web/src/graphql/queries/get-executions.ts b/packages/web/src/graphql/queries/get-executions.ts
index 1241ad35..1c015677 100644
--- a/packages/web/src/graphql/queries/get-executions.ts
+++ b/packages/web/src/graphql/queries/get-executions.ts
@@ -17,6 +17,9 @@ export const GET_EXECUTIONS = gql`
id
name
active
+ steps {
+ iconUrl
+ }
}
}
}
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",