59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useQuery } from '@apollo/client';
|
|
import Grid from '@mui/material/Grid';
|
|
import Box from '@mui/material/Box';
|
|
import AlertTitle from '@mui/material/AlertTitle';
|
|
import Alert from '@mui/material/Alert';
|
|
import type { IExecutionStep } from '@automatisch/types';
|
|
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
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 = 100;
|
|
|
|
const getLimitAndOffset = (page: number) => ({
|
|
limit: EXECUTION_PER_PAGE,
|
|
offset: (page - 1) * EXECUTION_PER_PAGE,
|
|
});
|
|
|
|
export default function Execution(): React.ReactElement {
|
|
const { executionId } = useParams() as ExecutionParams;
|
|
const formatMessage = useFormatMessage();
|
|
const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId } });
|
|
const { data, loading } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
|
|
|
|
const { edges } = data?.getExecutionSteps || {};
|
|
const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);
|
|
|
|
return (
|
|
<Container sx={{ py: 3 }}>
|
|
<ExecutionHeader
|
|
execution={execution?.getExecution}
|
|
/>
|
|
|
|
<Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
|
|
{!loading && !executionSteps?.length && (
|
|
<Alert severity="warning" sx={{ flex: 1 }}>
|
|
<AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('execution.noDataTitle')}</AlertTitle>
|
|
|
|
<Box sx={{ fontWeight: 400 }}>{formatMessage('execution.noDataMessage')}</Box>
|
|
</Alert>
|
|
)}
|
|
|
|
{executionSteps?.map((executionStep) => (
|
|
<ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
);
|
|
};
|