import React , { FunctionComponent } from 'react' ; import { EuiText , EuiFlexGroup , EuiFlexItem , EuiTitle , EuiBadge } from '@elastic/eui' ; import { FormattedMessage } from '@osd/i18n/react' ; import type { FormattedStatus } from '../lib' ; interface ServerStateProps { name : string ; serverState : FormattedStatus [ 'state' ] ; } export const ServerStatus = ( { name , serverState } ) => ( < EuiFlexGroup alignItems = "center" justifyContent = "spaceBetween" style = { { flexGrow : 0 } } > < EuiFlexItem grow = { false } > < EuiTitle > < h2 data - test - subj = "serverStatusTitle" > < FormattedMessage id = "core.statusPage.serverStatus.statusTitle" defaultMessage = "OpenSearch Dashboards status is {opensearchDashboardsStatus}" values = { { opensearchDashboardsStatus : ( < EuiBadge data - test - subj = "serverStatusTitleBadge" color = { serverState . uiColor } aria - label = { serverState . title } > { serverState . title } < /EuiBadge>), } } /> < /h2> < /EuiTitle> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiText > < p > { name } < /p> < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>);