File size: 2,543 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 71 72 73 74 75 76 77 78 |
import * as React from 'react';
import { Link } from 'react-router-dom';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Chip from '@mui/material/Chip';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import { DateTime } from 'luxon';
import * as URLS from 'config/urls';
import useFormatMessage from 'hooks/useFormatMessage';
import FlowAppIcons from 'components/FlowAppIcons';
import { Apps, CardContent, ArrowContainer, Title, Typography } from './style';
import { ExecutionPropType } from 'propTypes/propTypes';
function ExecutionRow(props) {
const formatMessage = useFormatMessage();
const { execution } = props;
const { flow } = execution;
const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10));
const relativeCreatedAt = createdAt.toRelative();
return (
<Link to={URLS.EXECUTION(execution.id)} data-test="execution-row">
<Card sx={{ mb: 1 }}>
<CardActionArea>
<CardContent>
<Apps direction="row" gap={1} sx={{ gridArea: 'apps' }}>
<FlowAppIcons steps={flow.steps} />
</Apps>
<Title justifyContent="center" alignItems="flex-start" spacing={1}>
<Typography variant="h6" noWrap>
{flow.name}
</Typography>
<Typography variant="caption" noWrap>
{formatMessage('execution.createdAt', {
datetime: relativeCreatedAt,
})}
</Typography>
</Title>
<ArrowContainer>
{execution.testRun && (
<Chip
size="small"
color="warning"
variant="outlined"
label={formatMessage('execution.test')}
/>
)}
<Chip
size="small"
color={execution.status === 'success' ? 'success' : 'error'}
label={formatMessage(
execution.status === 'success'
? 'execution.statusSuccess'
: 'execution.statusFailure',
)}
/>
<ArrowForwardIosIcon
sx={{ color: (theme) => theme.palette.primary.main }}
/>
</ArrowContainer>
</CardContent>
</CardActionArea>
</Card>
</Link>
);
}
ExecutionRow.propTypes = {
execution: ExecutionPropType.isRequired,
};
export default ExecutionRow;
|