import React from 'react' ; import { EuiFlexItem , EuiText , EuiFlexGroup , EuiIcon , EuiLoadingSpinner , EuiToolTip , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { Status } from '../../../types' ; const i18nTexts = { deleteInProgressText : i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.indexSettings.deletingButtonLabel' , { defaultMessage : 'Settings removal in progress…' , } ) , deleteCompleteText : i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.indexSettings.deleteCompleteText' , { defaultMessage : 'Deprecated settings removed' , } ) , deleteFailedText : i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.indexSettings.deleteFailedText' , { defaultMessage : 'Settings removal failed' , } ) , resolutionText : i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.indexSettings.resolutionText' , { defaultMessage : 'Remove settings' , } ) , resolutionTooltipLabel : i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.indexSettings.resolutionTooltipLabel' , { defaultMessage : 'Resolve this issue by removing settings from this index. This issue can be resolved automatically.' , } ) , } ; interface Props { status : { statusType : Status ; } ; } export const IndexSettingsResolutionCell = ( { status } ) => { const { statusType } = status ; if ( statusType === 'in_progress' ) { return ( < EuiFlexGroup gutterSize = "s" alignItems = "center" data - test - subj = "indexSettingsResolutionStatusCell" > < EuiFlexItem grow = { false } > < EuiLoadingSpinner size = "m" / > < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiText size = "s" > { i18nTexts . deleteInProgressText } < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>); } if ( statusType === 'complete' ) { return ( < EuiFlexGroup gutterSize = "s" alignItems = "center" data - test - subj = "indexSettingsResolutionStatusCell" > < EuiFlexItem grow = { false } > < EuiIcon type = "check" color = "success" / > < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiText size = "s" > { i18nTexts . deleteCompleteText } < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>); } if ( statusType === 'error' ) { return ( < EuiFlexGroup gutterSize = "s" alignItems = "center" data - test - subj = "indexSettingsResolutionStatusCell" > < EuiFlexItem grow = { false } > < EuiIcon type = "alert" color = "danger" / > < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiText size = "s" > { i18nTexts . deleteFailedText } < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>); } return ( < EuiToolTip position = "top" content = { i18nTexts . resolutionTooltipLabel } > < EuiFlexGroup gutterSize = "s" alignItems = "center" data - test - subj = "indexSettingsResolutionStatusCell" > < EuiFlexItem grow = { false } > < EuiIcon type = "indexSettings" / > < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiText size = "s" > { i18nTexts . resolutionText } < /EuiText> < /EuiFlexItem> < /EuiFlexGroup> < /EuiToolTip>); } ;