|  |  |  | 
|---|
|  |  |  | DateField, | 
|---|
|  |  |  | Labeled, | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import { Box, Grid, Stack, IconButton, Typography, Card, CardContent, TextField, Button } from '@mui/material'; | 
|---|
|  |  |  | import { Box, Grid, Stack, IconButton, Typography, Card, CardContent, TextField, Button,FormLabel } from '@mui/material'; | 
|---|
|  |  |  | import CloseIcon from '@mui/icons-material/Close'; | 
|---|
|  |  |  | import { format } from 'date-fns'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const OperationDetail = (props) => { | 
|---|
|  |  |  | const { operation, ...rest } = props; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <FormLabel component="legend"> | 
|---|
|  |  |  | {translate('table.field.operationRecord.namespace')} | 
|---|
|  |  |  | </FormLabel> | 
|---|
|  |  |  | <Typography variant="body2" flexWrap="nowrap"> | 
|---|
|  |  |  | {operation.namespace || ''} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <Labeled label="table.field.operationRecord.url"> | 
|---|
|  |  |  | <FormLabel component="legend"> | 
|---|
|  |  |  | {translate('table.field.operationRecord.url')} | 
|---|
|  |  |  | </FormLabel> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Typography | 
|---|
|  |  |  | variant="body2" | 
|---|
|  |  |  | flexWrap="nowrap" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {operation.url || ''} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Labeled> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <Labeled label="table.field.operationRecord.timestamp"> | 
|---|
|  |  |  | <FormLabel component="legend"> | 
|---|
|  |  |  | {translate('table.field.operationRecord.timestamp')} | 
|---|
|  |  |  | </FormLabel> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | <FormLabel component="legend"> | 
|---|
|  |  |  | {translate('table.field.operationRecord.userId')} | 
|---|
|  |  |  | </FormLabel> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Typography | 
|---|
|  |  |  | variant="body2" | 
|---|
|  |  |  | flexWrap="nowrap" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {operation.userId$ || ''} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Labeled> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item sm={12}> | 
|---|
|  |  |  | <TextField | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <Labeled label="table.field.operationRecord.clientIp"> | 
|---|
|  |  |  | <FormLabel component="legend"> | 
|---|
|  |  |  | {translate('table.field.operationRecord.userId')} | 
|---|
|  |  |  | </FormLabel> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Typography | 
|---|
|  |  |  | variant="body2" | 
|---|
|  |  |  | flexWrap="nowrap" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {operation.clientIp || ''} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Labeled> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </CardContent> | 
|---|