File size: 2,099 Bytes
3206347 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import * as React from 'react';
import { useParams } from 'react-router-dom';
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 useFormatMessage from 'hooks/useFormatMessage';
import ExecutionHeader from 'components/ExecutionHeader';
import ExecutionStep from 'components/ExecutionStep';
import Container from 'components/Container';
import useExecutionSteps from 'hooks/useExecutionSteps';
import useExecution from 'hooks/useExecution';
export default function Execution() {
const { executionId } = useParams();
const formatMessage = useFormatMessage();
const { data: execution } = useExecution({ executionId });
const {
data,
isLoading: isExecutionStepsLoading,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
} = useExecutionSteps({
executionId: executionId,
});
React.useEffect(() => {
if (!isFetching && !isFetchingNextPage && hasNextPage) {
fetchNextPage();
}
}, [isFetching, isFetchingNextPage, hasNextPage, fetchNextPage]);
return (
<Container sx={{ py: 3 }}>
<ExecutionHeader execution={execution?.data} />
<Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
{!isExecutionStepsLoading && !data?.pages?.[0].data.length && (
<Alert severity="warning" sx={{ flex: 1 }}>
<AlertTitle sx={{ fontWeight: 700 }}>
{formatMessage('execution.noDataTitle')}
</AlertTitle>
<Box sx={{ fontWeight: 400 }}>
{formatMessage('execution.noDataMessage')}
</Box>
</Alert>
)}
{data?.pages?.map((group, i) => (
<React.Fragment key={i}>
{group?.data?.map((executionStep) => (
<ExecutionStep
key={executionStep.id}
executionStep={executionStep}
step={executionStep.step}
/>
))}
</React.Fragment>
))}
</Grid>
</Container>
);
}
|