import React , { useState , useEffect } from 'react' ; import { Router , Switch , Route , Redirect } from 'react-router-dom' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiEmptyPrompt , EuiPageContent , EuiLoadingSpinner } from '@elastic/eui' ; import { ScopedHistory } from 'src/core/public' ; import { API_BASE_PATH } from '../../common/constants' ; import { ClusterUpgradeState } from '../../common/types' ; import { APP_WRAPPER_CLASS , GlobalFlyout , AuthorizationProvider , RedirectAppLinks , KibanaThemeProvider , } from '../shared_imports' ; import { AppDependencies } from '../types' ; import { AppContextProvider , useAppContext } from './app_context' ; import { EsDeprecations , EsDeprecationLogs , ComingSoonPrompt , KibanaDeprecations , Overview , } from './components' ; const { GlobalFlyoutProvider } = GlobalFlyout ; const AppHandlingClusterUpgradeState = ( ) => { const { isReadOnlyMode , services : { api } , } = useAppContext ( ) ; const [ clusterUpgradeState , setClusterUpradeState ] = useState < ClusterUpgradeState > ( 'isPreparingForUpgrade' ) ; useEffect ( ( ) => { api . onClusterUpgradeStateChange ( ( newClusterUpgradeState ) => { setClusterUpradeState ( newClusterUpgradeState ) ; } ) ; } , [ api ] ) ; if ( isReadOnlyMode ) { return < ComingSoonPrompt />; } if ( clusterUpgradeState === 'isUpgrading' ) { return ( < EuiPageContent hasShadow = { false } paddingSize = "none" verticalPosition = "center" horizontalPosition = "center" data - test - subj = "isUpgradingMessage" > < EuiEmptyPrompt iconType = "logoElasticsearch" title = { < h1 > < FormattedMessage id = "xpack.upgradeAssistant.upgradingTitle" defaultMessage = "Your cluster is upgrading" / > < /h1>} body={<p> < FormattedMessage id = "xpack.upgradeAssistant.upgradingDescription" defaultMessage = "One or more Elasticsearch nodes have a newer version of Elasticsearch than Kibana . Once all your nodes are upgraded , upgrade Kibana . "/> < /p>} data-test-subj="emptyPrompt"/ > < /EuiPageContent>); } if ( clusterUpgradeState === 'isUpgradeComplete' ) { return ( < EuiPageContent hasShadow = { false } paddingSize = "none" verticalPosition = "center" horizontalPosition = "center" data - test - subj = "isUpgradeCompleteMessage" > < EuiEmptyPrompt iconType = "logoElasticsearch" title = { < h1 > < FormattedMessage id = "xpack.upgradeAssistant.upgradedTitle" defaultMessage = "Your cluster has been upgraded" / > < /h1>} body={<p> < FormattedMessage id = "xpack.upgradeAssistant.upgradedDescription" defaultMessage = "All Elasticsearch nodes have been upgraded. You may now upgrade Kibana." / > < /p>} data-test-subj="emptyPrompt"/ > < /EuiPageContent>); } return ( < Switch > < Route exact path = "/overview" component = { Overview } / > < Route exact path = "/es_deprecations" component = { EsDeprecations } / > < Route exact path = "/es_deprecation_logs" component = { EsDeprecationLogs } / > < Route exact path = "/kibana_deprecations" component = { KibanaDeprecations } / > < Redirect from = "/" to = "/overview" / > < /Switch>); } ; export const App = ( { history } ) => { const { services : { api } , } = useAppContext ( ) ; const { isLoading , isInitialRequest } = api . useLoadClusterUpgradeStatus ( ) ; if ( isLoading && isInitialRequest ) { return ( < EuiPageContent hasShadow = { false } paddingSize = "none" verticalPosition = "center" horizontalPosition = "center" > < EuiEmptyPrompt body = { < EuiLoadingSpinner size = "l" / > } /> < /EuiPageContent>); } return ( < Router history = { history } > < AppHandlingClusterUpgradeState /> < /Router>); } ; export const RootComponent = ( dependencies ) => { const { history , core : { i18n , application , http } , } = dependencies . services ; return ( < RedirectAppLinks application = { application } className = { APP_WRAPPER_CLASS } > < AuthorizationProvider httpClient = { http } privilegesEndpoint = { `${ API_BASE_PATH }/privileges` } > < i18n . Context > < KibanaThemeProvider theme$ = { dependencies . theme$ } > < AppContextProvider value = { dependencies } > < GlobalFlyoutProvider > < App history = { history } /> < /GlobalFlyoutProvider> < /AppContextProvider> < /KibanaThemeProvider> < /i18n.Context> < /AuthorizationProvider> < /RedirectAppLinks>); } ;