feat: add header with id, name, date in Execution

packages/backend/src/graphql/queries/get-execution.ts

@@ -16,7 +16,8 @@ const getExecution = async (
         steps: true
       }
     })
-    .findById(params.executionId);
+    .findById(params.executionId)
+    .throwIfNotFound();
 
   return execution;
 };

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { DateTime } from 'luxon';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import type { IExecution } from '@automatisch/types';
+
+type ExecutionHeaderProps = {
+  execution: IExecution;
+};
+
+function ExecutionName(props: Pick<IExecution["flow"], "name">) {
+  return (
+    <Typography variant="h3" gutterBottom>{props.name}</Typography>
+  );
+}
+
+function ExecutionId(props: Pick<IExecution, "id">) {
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Typography variant="body2">
+        Execution ID: <Typography variant="body1" component="span">{props.id}</Typography>
+      </Typography>
+    </Box>
+  );
+}
+
+function ExecutionDate(props: Pick<IExecution, "createdAt">) {
+  const createdAt = DateTime.fromMillis(
+    parseInt(props.createdAt, 10)
+  );
+  const relativeCreatedAt = createdAt.toRelative();
+
+  return (
+    <Tooltip title={createdAt.toLocaleString(DateTime.DATE_MED)}>
+      <Typography variant="body1" gutterBottom>{relativeCreatedAt}</Typography>
+    </Tooltip>
+  );
+}
+
+export default function ExecutionHeader(props: ExecutionHeaderProps): React.ReactElement {
+  const { execution } = props;
+
+  if (!execution) return <React.Fragment />;
+
+  return (
+    <Stack direction="column">
+      <Stack direction={{ xs: 'column', sm: 'row' }} justifyContent="space-between">
+        <ExecutionDate createdAt={execution.createdAt} />
+        <ExecutionId id={execution.id} />
+      </Stack>
+
+      <Stack direction="row">
+        <ExecutionName name={execution.flow.name} />
+      </Stack>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const GET_EXECUTION = gql`
+  query GetExecution($executionId: String!) {
+    getExecution(executionId: $executionId) {
+      id
+      testRun
+      createdAt
+      updatedAt
+      flow {
+        id
+        name
+        active
+      }
+    }
+  }
+`;

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

@@ -4,15 +4,17 @@ import { useQuery } from '@apollo/client';
 import Grid from '@mui/material/Grid';
 import type { IExecutionStep } from '@automatisch/types';
 
+import ExecutionHeader from 'components/ExecutionHeader';
 import ExecutionStep from 'components/ExecutionStep';
 import Container from 'components/Container';
+import { GET_EXECUTION } from 'graphql/queries/get-execution';
 import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps';
 
 type ExecutionParams = {
   executionId: string;
 };
 
-const EXECUTION_PER_PAGE = 5;
+const EXECUTION_PER_PAGE = 100;
 
 const getLimitAndOffset = (page: number) => ({
   limit: EXECUTION_PER_PAGE,
@@ -21,25 +23,19 @@ const getLimitAndOffset = (page: number) => ({
 
 export default function Execution(): React.ReactElement {
   const { executionId } = useParams() as ExecutionParams;
-  const { data, fetchMore } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
+  const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId } });
+  const { data } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
 
-  const { edges, pageInfo } = data?.getExecutionSteps || {};
+  const { edges } = data?.getExecutionSteps || {};
   const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);
 
-  React.useEffect(() => {
-    if (pageInfo?.currentPage < pageInfo?.totalPages) {
-      fetchMore({
-        variables: {
-          executionId,
-          ...getLimitAndOffset(pageInfo.currentPage + 1),
-        }
-      });
-    }
-  }, [executionId, fetchMore, pageInfo]);
-
   return (
     <Container sx={{ py: 3 }}>
-      <Grid container item sx={{ mb: [2, 5] }} rowGap={3}>
+      <ExecutionHeader
+        execution={execution?.getExecution}
+      />
+
+      <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
         {executionSteps?.map((executionStep) => (
           <ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
         ))}