import React , { useEffect , useState } from 'react' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { RouteComponentProps } from 'react-router-dom' ; import { EuiPageContentBody , EuiPageHeader , EuiSpacer } from '@elastic/eui' ; import { SnapshotDetails , RestoreSettings } from '../../../../common/types' ; import { SectionError , Error , PageError } from '../../../shared_imports' ; import { BASE_PATH } from '../../constants' ; import { PageLoading , RestoreSnapshotForm } from '../../components' ; import { useServices } from '../../app_context' ; import { breadcrumbService , docTitleService } from '../../services/navigation' ; import { useLoadSnapshot , executeRestore } from '../../services/http' ; import { useDecodedParams } from '../../lib' ; interface MatchParams { repositoryName : string ; snapshotId : string ; } export const RestoreSnapshot = ( { history , } ) => { const { i18n } = useServices ( ) ; const { repositoryName , snapshotId } = useDecodedParams < MatchParams > ( ) ; useEffect ( ( ) => { breadcrumbService . setBreadcrumbs ( 'restoreSnapshot' ) ; docTitleService . setTitle ( 'restoreSnapshot' ) ; } , [ ] ) ; const [ snapshotDetails , setSnapshotDetails ] = useState < SnapshotDetails | { } > ( { } ) ; const { error : snapshotError , isLoading : loadingSnapshot , data : snapshotData , } = useLoadSnapshot ( repositoryName , snapshotId ) ; useEffect ( ( ) => { if ( snapshotData ) { setSnapshotDetails ( snapshotData ) ; } } , [ snapshotData ] ) ; const [ isSaving , setIsSaving ] = useState < boolean > ( false ) ; const [ saveError , setSaveError ] = useState < any > ( null ) ; const onSave = async ( restoreSettings ) => { setIsSaving ( true ) ; setSaveError ( null ) ; const { error } = await executeRestore ( repositoryName , snapshotId , restoreSettings ) ; if ( error ) { setIsSaving ( false ) ; setSaveError ( error ) ; } else { setTimeout ( ( ) => { setIsSaving ( false ) ; history . push ( `${ BASE_PATH }/restore_status` ) ; } , 5 * 1000 ) ; } } ; const renderLoading = ( ) => { return ( < PageLoading > < FormattedMessage id = "xpack.snapshotRestore.restoreSnapshot.loadingSnapshotDescription" defaultMessage = "Loading snapshot details…" / > < /PageLoading>); } ; const renderError = ( ) => { const notFound = ( snapshotError as any ) . status === 404 ; const errorObject = notFound ? { data : { error : i18n . translate ( 'xpack.snapshotRestore.restoreSnapshot.snapshotNotFoundErrorMessage' , { defaultMessage : `The snapshot '{snapshot}' does not exist in repository '{repository}'.` , values : { snapshot : snapshotId , repository : repositoryName , } , } ) , } , } : snapshotError ; return ( < PageError title = { < FormattedMessage id = "xpack.snapshotRestore.restoreSnapshot.loadingSnapshotErrorTitle" defaultMessage = "Error loading snapshot details" / > } error = { errorObject as Error } / > ) ; } ; const renderSaveError = ( ) => { return saveError ? ( < SectionError title = { < FormattedMessage id = "xpack.snapshotRestore.restoreSnapshot.executeRestoreErrorTitle" defaultMessage = "Unable to restore snapshot" / > } error = { saveError } / > ) : null ; } ; const clearSaveError = ( ) => { setSaveError ( null ) ; } ; if ( loadingSnapshot ) { return renderLoading ( ) ; } if ( snapshotError ) { return renderError ( ) ; } return ( < EuiPageContentBody restrictWidth style = { { width : '100%' } } > < EuiPageHeader pageTitle = { < span data - test - subj = "pageTitle" > < FormattedMessage id = "xpack.snapshotRestore.restoreSnapshotTitle" defaultMessage = "Restore '{snapshot}'" values = { { snapshot : snapshotId } } /> < /span>}/ > < EuiSpacer size = "l" / > < RestoreSnapshotForm snapshotDetails = { snapshotDetails as SnapshotDetails } isSaving = { isSaving } saveError = { renderSaveError ( ) } clearSaveError = { clearSaveError } onSave = { onSave } / > < /EuiPageContentBody>); } ;