#

whycq

2025-02-15 e8d6ad127efeba2d16d0a04bdaf92b747fc467ec

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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;