import React from 'react' ; import PropTypes from 'prop-types' ; import TextEditor from 'shared/components/TextEditor' ; import Dialog , { DialogFooter , DialogHeader , DialogTitle , DialogContent , } from 'design/Dialog' ; import { Event } from 'teleport/services/audit' ; import { ButtonSecondary } from 'design' ; type EventDialogProps = { event : Event ; onClose : ( ) => void ; } ; function EventDialog ( props ) { const { event , onClose } = props ; const json = JSON . stringify ( event . raw , null , 2 ) ; const title = event . codeDesc || 'Event Details' ; return ( < Dialog dialogCss = { dialogCss } disableEscapeKeyDown = { false } onClose = { onClose } open = { true } > < DialogHeader > < DialogTitle typography = "body1" caps = { true } bold > { title } < /DialogTitle> < /DialogHeader> < DialogContent > < TextEditor readOnly = { true } data = { [ { content : json , type : 'json' } ] } / > < /DialogContent> < DialogFooter > < ButtonSecondary onClick = { onClose } > Close < /ButtonSecondary> < /DialogFooter> < /Dialog>); } EventDialog . propTypes = { event : PropTypes . object . isRequired , onClose : PropTypes . func . isRequired , } ; const dialogCss = ( ) => `
  min-height: 400px;
  max-width: 600px;
  width: 100%;
` ; export default EventDialog ;