import React , { useEffect } from 'react' ; import { i18n } from '@osd/i18n' ; import { FormattedMessage } from '@osd/i18n/react' ; import { EuiCallOut , EuiLink } from '@elastic/eui' ; import { useOpenSearchDashboards , toMountPoint , } from '../../../../opensearch_dashboards_react/public' ; import { VisualizeServices } from '../types' ; import { VisualizeConstants } from '../visualize_constants' ; let bannerId ; export const VisualizeNoMatch = ( ) => { const { services } = useOpenSearchDashboards < VisualizeServices > ( ) ; useEffect ( ( ) => { services . restorePreviousUrl ( ) ; const { navigated } = services . urlForwarding . navigateToLegacyOpenSearchDashboardsUrl ( services . history . location . pathname ) ; if ( ! navigated ) { const bannerMessage = i18n . translate ( 'visualize.noMatchRoute.bannerTitleText' , { defaultMessage : 'Page not found' , } ) ; bannerId = services . overlays . banners . replace ( bannerId , toMountPoint ( < EuiCallOut color = "warning" iconType = "iInCircle" title = { bannerMessage } > < p > < FormattedMessage id = "visualize.noMatchRoute.bannerText" defaultMessage = "Visualize application doesn't recognize this route: {route}." values = { { route : ( < EuiLink href = { window . location . href } > { services . history . location . pathname } < /EuiLink>), } } /> < /p> < /EuiCallOut>)); setTimeout ( ( ) => { services . overlays . banners . remove ( bannerId ) ; } , 15000 ) ; services . history . replace ( VisualizeConstants . LANDING_PAGE_PATH ) ; } } , [ services ] ) ; return null ; } ;