import * as React from 'react';
|
import {
|
useTranslate,
|
TextInput,
|
SimpleForm,
|
DateField,
|
Labeled,
|
} from 'react-admin';
|
import { Box, Grid, Stack, IconButton, Typography, Card, CardContent, TextField, Button } from '@mui/material';
|
import CloseIcon from '@mui/icons-material/Close';
|
import { format } from 'date-fns';
|
|
const OperationDetail = (props) => {
|
const { operation, ...rest } = props;
|
|
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.operationRecord.namespace">
|
<Typography
|
variant="body2"
|
flexWrap="nowrap"
|
>
|
{operation.namespace || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.operationRecord.url">
|
<Typography
|
variant="body2"
|
flexWrap="nowrap"
|
>
|
{operation.url || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.operationRecord.timestamp">
|
<Typography
|
variant="body2"
|
flexWrap="nowrap"
|
>
|
{format(new Date(Number(operation.timestamp)), 'yyyy-MM-dd HH:mm:ss')}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.operationRecord.userId">
|
<Typography
|
variant="body2"
|
flexWrap="nowrap"
|
>
|
{operation.userId$ || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
<Grid item sm={12}>
|
<TextField
|
label="Request"
|
value={operation.request || ''}
|
maxRows={15}
|
multiline
|
/>
|
</Grid>
|
<Box mt={1} />
|
<Grid item sm={12}>
|
<TextField
|
label="Response"
|
value={operation.response || ''}
|
maxRows={15}
|
multiline
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<Labeled label="table.field.operationRecord.clientIp">
|
<Typography
|
variant="body2"
|
flexWrap="nowrap"
|
>
|
{operation.clientIp || ''}
|
</Typography>
|
</Labeled>
|
</Grid>
|
</Grid>
|
</CardContent>
|
</Card>
|
</Box>
|
</>
|
)
|
}
|
|
export default OperationDetail;
|
