71 lines
2.2 KiB
TypeScript
71 lines
2.2 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>
|
|
);
|
|
}
|