#

vincentlu

2025-02-28 c3082458b464b07a571888a94a6070305c9798de

 zy-acs-flow/src/page/operationRecord/OperationDetail.jsx

@@ -1,26 +1,95 @@
import * as React from 'react';
import {
    EditBase,
    useTranslate,
    TextInput,
    SimpleForm,
    DateField,
    Labeled,
} from 'react-admin';
import { Box, Grid, Stack, IconButton, Typography, Card, CardContent, TextField } from '@mui/material';
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, setDrawerVal, ...rest } = props;
    console.log(operation);

    const { operation, ...rest } = props;
    
    return (
        <>
            <Card>
                <CardContent>
                    <TextField value={JSON.stringify(operation)} maxRows={15} multiline />
                </CardContent>
            </Card>
            <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>
        </>
    )
}