|  |  |  | 
|---|
|  |  |  | 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> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|