import React , { useEffect } from 'react' ; import moment from 'moment-timezone' ; import { FormattedDate , FormattedTime , FormattedMessage } from '@kbn/i18n-react' ; import { i18n } from '@kbn/i18n' ; import { METRIC_TYPE } from '@kbn/analytics' ; import { EuiLoadingContent , EuiFlexGroup , EuiFlexItem , EuiIcon , EuiText , EuiButton , EuiSpacer , EuiCallOut , } from '@elastic/eui' ; import { CLOUD_SNAPSHOT_REPOSITORY } from '../../../../../common/constants' ; import { useAppContext } from '../../../app_context' ; import { ResponseError } from '../../../../../common/types' ; import { uiMetricService , UIM_BACKUP_DATA_CLOUD_CLICK } from '../../../lib/ui_metric' ; interface Props { cloudSnapshotsUrl : string ; setIsComplete : ( isComplete : boolean ) => void ; setForceOnPremStep : ( forceOnPrem : boolean ) => void ; } const isMissingFoundSnapshotsRepo = ( error ) => { return error . statusCode === 404 && error . message . toString ( ) . includes ( CLOUD_SNAPSHOT_REPOSITORY ) ; } ; export const CloudBackup = ( { cloudSnapshotsUrl , setIsComplete , setForceOnPremStep , } ) => { const { services : { api } , } = useAppContext ( ) ; const { isInitialRequest , isLoading , error , data , resendRequest } = api . useLoadCloudBackupStatus ( ) ; useEffect ( ( ) => { if ( ! isLoading ) { setIsComplete ( ( ! error && data ?. isBackedUp ) ?? false ) ; if ( error && isMissingFoundSnapshotsRepo ( error ) ) { setForceOnPremStep ( true ) ; } } } , [ error , isLoading , data , setForceOnPremStep ] ) ; if ( isInitialRequest && isLoading ) { return < EuiLoadingContent data - test - subj = "cloudBackupLoading" lines = { 3 } / > ; } if ( error ) { return ( < EuiCallOut title = { i18n . translate ( 'xpack.upgradeAssistant.overview.cloudBackup.loadingError' , { defaultMessage : 'An error occurred while retrieving the latest snapshot status' , } ) } color = "danger" iconType = "alert" data - test - subj = "cloudBackupErrorCallout" > < p > { error . statusCode } - { error . message } < /p> < EuiButton color = "danger" onClick = { resendRequest } data - test - subj = "cloudBackupRetryButton" > { i18n . translate ( 'xpack.upgradeAssistant.overview.cloudBackup.retryButton' , { defaultMessage : 'Try again' , } ) } < /EuiButton> < /EuiCallOut>); } const lastBackupTime = moment ( data ! . lastBackupTime ) . toISOString ( ) ; const statusMessage = data ! . isBackedUp ? ( < EuiFlexGroup alignItems = "center" gutterSize = "s" data - test - subj = "dataBackedUpStatus" > < EuiFlexItem grow = { false } > < EuiIcon type = "check" color = "success" / > < /EuiFlexItem> < EuiFlexItem > < EuiText > < p > < FormattedMessage id = "xpack.upgradeAssistant.overview.cloudBackup.hasSnapshotMessage" defaultMessage = "Last snapshot created on {lastBackupTime}." values = { { lastBackupTime : ( < > < FormattedDate value = { lastBackupTime } year = "numeric" month = "long" day = "2-digit" / > { ' ' } < FormattedTime value = { lastBackupTime } timeZoneName = "short" hour12 = { false } / > < />), } } /> < /p> < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>) : (<EuiFlexGroup alignItems="center" gutterSize="s" data-test-subj="dataNotBackedUpStatus"> < EuiFlexItem grow = { false } > < EuiIcon type = "alert" color = "danger" / > < /EuiFlexItem> < EuiFlexItem > < EuiText > < p > { i18n . translate ( 'xpack.upgradeAssistant.overview.cloudBackup.noSnapshotMessage' , { defaultMessage : `Your data isn't backed up.` , } ) } < /p> < /EuiText> < /EuiFlexItem> < /EuiFlexGroup>); return ( < > { statusMessage } < EuiSpacer size = "s" / > { } < EuiButton href = { cloudSnapshotsUrl } onClick = { ( ) => { uiMetricService . trackUiMetric ( METRIC_TYPE . CLICK , UIM_BACKUP_DATA_CLOUD_CLICK ) ; } } data - test - subj = "cloudSnapshotsLink" target = "_blank" iconType = "popout" iconSide = "right" > < FormattedMessage id = "xpack.upgradeAssistant.overview.cloudBackup.snapshotsLink" defaultMessage = "Create snapshot" / > < /EuiButton> < />); } ;