import React , { FunctionComponent } from 'react' ; import { EuiBasicTable , EuiIcon } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import type { FormattedStatus } from '../lib' ; interface StatusTableProps { statuses ? : FormattedStatus [ ] ; } const tableColumns = [ { field : 'state' , name : '' , render : ( state ) => ( < EuiIcon type = "dot" aria - hidden color = { state . uiColor } / > ) , width : '32px' , } , { field : 'id' , name : i18n . translate ( 'core.statusPage.statusTable.columns.idHeader' , { defaultMessage : 'ID' , } ) , } , { field : 'state' , name : i18n . translate ( 'core.statusPage.statusTable.columns.statusHeader' , { defaultMessage : 'Status' , } ) , render : ( state ) => < span > { state . message } < /span>, } , ] ; export const StatusTable = ( { statuses } ) => { if ( ! statuses ) { return null ; } return ( < EuiBasicTable < FormattedStatus > columns = { tableColumns } items = { statuses } rowProps = { ( { state } ) => ( { className : `status-table-row-${ state . uiColor }` , } ) } data - test - subj = "statusBreakdown" / > ) ; } ;