import React , { useState } from 'react' ; import { ButtonBorder } from 'design' ; import Table , { Cell } from 'design/DataTableNext' ; import { displayDateTime } from 'shared/services/loc' ; import { Event } from 'teleport/services/audit' ; import { State } from '../useAuditEvents' ; import EventDialog from '../EventDialog' ; import renderTypeCell from './EventTypeCell' ; export default function EventList ( props ) { const { clusterId , events = [ ] , fetchMore , fetchStatus , pageSize = 50 , } = props ; const [ detailsToShow , setDetailsToShow ] = useState < Event > ( ) ; return ( < > < Table data = { events } columns = { [ { key : 'codeDesc' , headerText : 'Type' , isSortable : true , render : event => renderTypeCell ( event , clusterId ) , } , { key : 'message' , headerText : 'Description' , render : renderDescCell , } , { key : 'time' , headerText : 'Created' , isSortable : true , render : renderTimeCell , } , { altKey : 'show-details-btn' , render : event => renderActionCell ( event , setDetailsToShow ) , } , ] } emptyText = { 'No Events Found' } isSearchable initialSort = { { key : 'time' , dir : 'DESC' } } pagination = { { pageSize } } fetching = { { onFetchMore : fetchMore , fetchStatus , } } /> { detailsToShow && ( < EventDialog event = { detailsToShow } onClose = { ( ) => setDetailsToShow ( null ) } />)} < />); } export const renderActionCell = ( event , onShowDetails ) => ( < Cell align = "right" > < ButtonBorder size = "small" onClick = { ( ) => onShowDetails ( event ) } width = "87px" > Details < /ButtonBorder> < /Cell>); export const renderTimeCell = ( { time } ) => ( < Cell style = { { minWidth : '120px' } } > { displayDateTime ( time ) } < /Cell>); export function renderDescCell ( { message } ) { return < Cell style = { { wordBreak : 'break-word' } } > { message } < /Cell>; } type Props = { clusterId : State [ 'clusterId' ] ; events : State [ 'events' ] ; fetchMore : State [ 'fetchMore' ] ; fetchStatus : State [ 'fetchStatus' ] ; pageSize ? : number ; } ;