feat: add executions page

packages/web/package.json

@@ -22,7 +22,7 @@
     "clipboard-copy": "^4.0.1",
     "graphql": "^15.6.0",
     "lodash.template": "^4.5.0",
-    "luxon": "^2.2.0",
+    "luxon": "^2.3.1",
     "notistack": "^2.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/web/src/components/Drawer/index.tsx

@@ -6,6 +6,7 @@ import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import AppsIcon from '@mui/icons-material/Apps';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
+import HistoryIcon from '@mui/icons-material/History';
 import ExploreIcon from '@mui/icons-material/Explore';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
@@ -54,6 +55,13 @@ export default function Drawer(props: SwipeableDrawerProps): React.ReactElement
           onClick={closeOnClick}
         />
 
+        <ListItemLink
+          icon={<HistoryIcon htmlColor={theme.palette.primary.main} />}
+          primary={formatMessage('drawer.executions')}
+          to={URLS.EXECUTIONS}
+          onClick={closeOnClick}
+        />
+
         <ListItemLink
           icon={<ExploreIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.explore')}

packages/web/src/components/ExecutionRow/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+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';
+
+type ExecutionRowProps = {
+  execution: IExecution;
+}
+
+const getHumanlyDate = (timestamp: number) => DateTime.fromMillis(timestamp).toLocaleString(DateTime.DATETIME_MED);
+
+export default function ExecutionRow(props: ExecutionRowProps): React.ReactElement {
+  const { execution } = props;
+  const { flow } = execution;
+
+  return (
+    <Link to={URLS.FLOW(flow.id.toString())}>
+      <Card sx={{ mb: 1 }}>
+        <CardActionArea>
+          <CardContent>
+            <Box
+              display="flex"
+              flex={1}
+              flexDirection="column"
+            >
+              <Typography variant="h6" noWrap>
+                {flow.name}
+              </Typography>
+
+              <Typography variant="subtitle1" noWrap>
+                {getHumanlyDate(parseInt(execution.createdAt, 10))}
+              </Typography>
+            </Box>
+
+            <Box>
+              <ArrowForwardIosIcon sx={{ color: (theme) => theme.palette.primary.main }} />
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Link>
+  );
+}

packages/web/src/components/ExecutionRow/style.ts

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material/styles';
+import MuiCardContent from '@mui/material/CardContent';
+import MuiTypography from '@mui/material/Typography';
+
+export const CardContent = styled(MuiCardContent)(({ theme }) => ({
+  display: 'grid',
+  gridTemplateRows: 'auto',
+  gridTemplateColumns: '1fr auto',
+  gridColumnGap: theme.spacing(2),
+  alignItems: 'center',
+}));
+
+
+export const Typography = styled(MuiTypography)(() => ({
+  display: 'inline-block',
+  width: 500,
+  maxWidth: '70%',
+}));
+
+export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    display: 'none',
+  }
+}));

packages/web/src/components/FlowRow/index.tsx

@@ -21,7 +21,7 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
       <Card sx={{ mb: 1 }}>
         <CardActionArea>
           <CardContent>
-            <Box>
+            <Box display="flex" flex={1}>
               <Typography variant="h6" noWrap>
                 {flow.name}
               </Typography>

packages/web/src/components/FlowRow/style.ts

@@ -13,7 +13,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 
 export const Typography = styled(MuiTypography)(() => ({
   display: 'inline-block',
-  width: 500,
+  width: '100%',
   maxWidth: '70%',
 }));
 

packages/web/src/config/urls.ts

@@ -1,5 +1,6 @@
 export const CONNECTIONS = '/connections';
 export const EXPLORE = '/explore';
+export const EXECUTIONS = '/executions';
 
 export const LOGIN = '/login';
 

packages/web/src/graphql/cache.ts

@@ -29,7 +29,7 @@ const cache = new InMemoryCache({
           }
         }
       }
-    }
+    },
   }
 });
 

packages/web/src/graphql/pagination.ts

@@ -0,0 +1,70 @@
+import type { FieldPolicy, Reference } from '@apollo/client';
+
+type KeyArgs = FieldPolicy<unknown>["keyArgs"];
+
+export type TEdge<TNode> = {
+  node: TNode;
+} | Reference;
+
+export type TPageInfo = {
+  currentPage: number;
+  totalPages: number;
+};
+
+export type TExisting<TNode> = Readonly<{
+  edges: TEdge<TNode>[];
+  pageInfo: TPageInfo;
+}>;
+
+export type TIncoming<TNode> = {
+  edges: TEdge<TNode>[];
+  pageInfo: TPageInfo;
+};
+
+export type CustomFieldPolicy<TNode> = FieldPolicy<
+  TExisting<TNode> | null,
+  TIncoming<TNode> | null,
+  TIncoming<TNode> | null
+>;
+
+
+const makeEmptyData = <TNode>(): TExisting<TNode> => {
+  return {
+    edges: [],
+    pageInfo: {
+      currentPage: 1,
+      totalPages: 1,
+    },
+  };
+};
+
+function offsetLimitPagination<TNode = Reference>(
+  keyArgs: KeyArgs = false
+): CustomFieldPolicy<TNode> {
+  return {
+    keyArgs,
+    merge(existing, incoming, { args }) {
+      if (!existing) {
+        existing = makeEmptyData<TNode>();
+      }
+
+      if (!incoming || incoming === null) return existing;
+
+      const existingEdges = existing?.edges || [];
+      const incomingEdges = incoming.edges || []
+
+
+      if (args) {
+        const newEdges = [...existingEdges, ...incomingEdges];
+        return {
+          pageInfo: incoming.pageInfo,
+          edges: newEdges,
+        };
+      } else {
+        return existing;
+      }
+    },
+  };
+}
+
+export default offsetLimitPagination;

packages/web/src/graphql/queries/get-executions.ts

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+
+export const GET_EXECUTIONS = gql`
+  query GetExecutions($limit: Int!, $offset: Int!) {
+    getExecutions(limit: $limit, offset: $offset) {
+      pageInfo {
+        currentPage
+        totalPages
+      }
+      edges {
+        node {
+          id
+          testRun
+          createdAt
+          updatedAt
+          flow {
+            id
+            name
+            active
+          }
+        }
+      }
+    }
+  }
+`;

packages/web/src/locales/en.json

@@ -4,6 +4,7 @@
   "drawer.dashboard": "Dashboard",
   "drawer.flows": "Flows",
   "drawer.apps": "My Apps",
+  "drawer.executions": "Executions",
   "drawer.explore": "Explore",
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
@@ -35,5 +36,6 @@
   "flowStep.triggerType": "Trigger",
   "flowStep.actionType": "Action",
   "flows.create": "Create flow",
-  "flows.title": "Flows"
-}
+  "flows.title": "Flows",
+  "executions.title": "Executions"
+}

packages/web/src/pages/Executions/index.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Link, useSearchParams  } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import type { IExecution } from '@automatisch/types';
+
+import ExecutionRow from 'components/ExecutionRow';
+import Container from 'components/Container';
+import PageTitle from 'components/PageTitle';
+import useFormatMessage from 'hooks/useFormatMessage'
+import { GET_EXECUTIONS } from 'graphql/queries/get-executions';
+
+const EXECUTION_PER_PAGE = 10;
+
+const getLimitAndOffset = (page: number) => ({
+  limit: EXECUTION_PER_PAGE,
+  offset: (page - 1) * EXECUTION_PER_PAGE,
+});
+
+export default function Executions(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = parseInt(searchParams.get('page') || '', 10) || 1;
+
+  const { data, refetch } = useQuery(GET_EXECUTIONS, { variables: getLimitAndOffset(page), fetchPolicy: 'cache-and-network' });
+  const getExecutions = data?.getExecutions || {};
+  const { pageInfo, edges } = getExecutions;
+
+  React.useEffect(() => {
+    refetch(getLimitAndOffset(page));
+  }, [refetch, page])
+
+  const executions: IExecution[] = edges?.map(({ node }: { node: IExecution }) => node);
+
+  return (
+    <Box sx={{ py: 3 }}>
+      <Container>
+        <Grid container sx={{ mb: [2, 5] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center" order={{ xs: 0 }}>
+            <PageTitle>{formatMessage('executions.title')}</PageTitle>
+          </Grid>
+        </Grid>
+
+        {executions?.map((execution) => (<ExecutionRow key={execution.id} execution={execution} />))}
+
+        {pageInfo && pageInfo.totalPages > 1 && <Pagination
+          sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
+          page={pageInfo?.currentPage}
+          count={pageInfo?.totalPages}
+          onChange={(event, page) => setSearchParams({ page: page.toString() })}
+          renderItem={(item) => (
+            <PaginationItem
+              component={Link}
+              to={`${item.page === 1 ? '' : `?page=${item.page}`}`}
+              {...item}
+            />
+          )}
+        />}
+      </Container>
+    </Box>
+  );
+};

packages/web/src/routes.tsx

@@ -4,6 +4,7 @@ import PublicLayout from 'components/PublicLayout';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
 import Flows from 'pages/Flows';
+import Executions from 'pages/Executions';
 import Flow from 'pages/Flow';
 import Explore from 'pages/Explore';
 import Login from 'pages/Login';
@@ -12,6 +13,8 @@ import * as URLS from 'config/urls';
 
 export default (
   <Routes>
+    <Route path={URLS.EXECUTIONS} element={<Layout><Executions /></Layout>} />
+
     <Route path={URLS.FLOWS} element={<Layout><Flows /></Layout>} />
 
     <Route path={`${URLS.FLOW_PATTERN}/*`} element={<Layout><Flow /></Layout>} />