| | |
| | | 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; |
| | |
| | | |
| | | return ( |
| | | <> |
| | | <Box width={{ xs: '100vW', sm: 400 }} mt={{ xs: 2, sm: 1 }}> |
| | | <Card> |
| | | <CardContent> |
| | | <TextField value={JSON.stringify(operation)} maxRows={15} multiline /> |
| | | <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> |
| | | </> |
| | | ) |
| | | } |
| | |
| | | <TextField source="appkey" label="table.field.operationRecord.appkey" /> |
| | | <FormattedTimestampField source="timestamp" label="table.field.operationRecord.timestamp" /> |
| | | <NumberField source="spendTime" label="table.field.operationRecord.spendTime" sx={{ fontWeight: 'bold' }} /> |
| | | <TextField source="request" label="table.field.operationRecord.request" sortable={false} /> |
| | | <TextField source="response" label="table.field.operationRecord.response" sortable={false} /> |
| | | <TextField source="request" label="table.field.operationRecord.request" sortable={false} hidden={!!drawerVal} /> |
| | | <TextField source="response" label="table.field.operationRecord.response" sortable={false} hidden={!!drawerVal} /> |
| | | <ResultField source="result" label="table.field.operationRecord.result" /> |
| | | <TextField source="err" label="table.field.operationRecord.err" /> |
| | | <TextField source="clientIp" label="table.field.operationRecord.clientIp" /> |