import * as React from 'react';
|
import { Labeled, useTranslate } from 'react-admin';
|
import { Box, Grid, Typography, Card, CardContent, TextField } from '@mui/material';
|
import { format } from 'date-fns';
|
import { getDirectionLabel } from './direction';
|
|
const IntegrationRecordDetail = (props) => {
|
const { integration } = props;
|
if (!integration) return null;
|
const translate = useTranslate();
|
|
const formatTimestamp = (timestamp) => {
|
if (!timestamp) return '';
|
try {
|
return format(new Date(Number(timestamp)), 'yyyy-MM-dd HH:mm:ss');
|
} catch (e) {
|
return timestamp;
|
}
|
};
|
|
return (
|
<Box width={{ xs: '100vw', sm: 400 }} mt={{ xs: 2, sm: 1 }}>
|
<Card>
|
<CardContent>
|
<Grid container rowSpacing={1} mb={1}>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.uuid">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.uuid || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.namespace">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.namespace || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.url">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.url || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.appkey">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.appkey || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.caller">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.caller || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.direction">
|
<Typography variant="body2" flexWrap="nowrap">
|
{getDirectionLabel(translate, integration.direction)}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.timestamp">
|
<Typography variant="body2" flexWrap="nowrap">
|
{formatTimestamp(integration.timestamp)}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.clientIp">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.clientIp || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.result">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.result$ || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.costMs">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.costMs ?? ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.integrationRecord.err">
|
<Typography variant="body2" flexWrap="nowrap">
|
{integration.err || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
</Grid>
|
<Grid container rowSpacing={2}>
|
<Grid item xs={12}>
|
<TextField
|
label="Request"
|
value={integration.request || ''}
|
maxRows={15}
|
multiline
|
fullWidth
|
InputProps={{ readOnly: true }}
|
/>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label="Response"
|
value={integration.response || ''}
|
maxRows={15}
|
multiline
|
fullWidth
|
InputProps={{ readOnly: true }}
|
/>
|
</Grid>
|
</Grid>
|
</CardContent>
|
</Card>
|
</Box>
|
);
|
};
|
|
export default IntegrationRecordDetail;
|
