From 58d223c647a1646ca36b23567bdd8ce89e71a4f8 Mon Sep 17 00:00:00 2001 From: Dima Arnautov Date: Tue, 31 May 2022 15:01:11 +0200 Subject: [PATCH] replace not found page with a warning banner --- .../components/ml_page/ml_page.tsx | 5 +- .../components/not_found_page/index.ts | 8 -- .../not_found_page/not_found_page.tsx | 51 ---------- .../application/routing/use_active_route.ts | 53 ---------- .../application/routing/use_active_route.tsx | 98 +++++++++++++++++++ 5 files changed, 100 insertions(+), 115 deletions(-) delete mode 100644 x-pack/plugins/ml/public/application/components/not_found_page/index.ts delete mode 100644 x-pack/plugins/ml/public/application/components/not_found_page/not_found_page.tsx delete mode 100644 x-pack/plugins/ml/public/application/routing/use_active_route.ts create mode 100644 x-pack/plugins/ml/public/application/routing/use_active_route.tsx diff --git a/x-pack/plugins/ml/public/application/components/ml_page/ml_page.tsx b/x-pack/plugins/ml/public/application/components/ml_page/ml_page.tsx index 667026a880b55..7602da6a6c4e3 100644 --- a/x-pack/plugins/ml/public/application/components/ml_page/ml_page.tsx +++ b/x-pack/plugins/ml/public/application/components/ml_page/ml_page.tsx @@ -8,10 +8,9 @@ import React, { createContext, FC, useCallback, useMemo, useReducer } from 'react'; import { EuiLoadingContent, EuiPageContentBody } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { Route, Switch } from 'react-router-dom'; +import { Redirect, Route, Switch } from 'react-router-dom'; import type { AppMountParameters } from '@kbn/core/public'; import { KibanaPageTemplate, RedirectAppLinks } from '@kbn/kibana-react-plugin/public'; -import { NotFoundPage } from '../not_found_page'; import { useSideNavItems } from './side_nav'; import * as routes from '../../routing/routes'; import { MlPageWrapper } from '../../routing/ml_page_wrapper'; @@ -158,7 +157,7 @@ const CommonPageWrapper: FC = React.memo( /> ); })} - + diff --git a/x-pack/plugins/ml/public/application/components/not_found_page/index.ts b/x-pack/plugins/ml/public/application/components/not_found_page/index.ts deleted file mode 100644 index a58faef193ff9..0000000000000 --- a/x-pack/plugins/ml/public/application/components/not_found_page/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -export { NotFoundPage } from './not_found_page'; diff --git a/x-pack/plugins/ml/public/application/components/not_found_page/not_found_page.tsx b/x-pack/plugins/ml/public/application/components/not_found_page/not_found_page.tsx deleted file mode 100644 index 2b928714df76f..0000000000000 --- a/x-pack/plugins/ml/public/application/components/not_found_page/not_found_page.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { FormattedMessage } from '@kbn/i18n-react'; -import React, { FC } from 'react'; -import { EuiButton, EuiCallOut } from '@elastic/eui'; -import { useLocation } from 'react-router-dom'; -import { ML_PAGES } from '../../../../common/constants/locator'; -import { useMlLink } from '../../contexts/kibana'; -import { MlPageHeader } from '../page_header'; - -export const NotFoundPage: FC = () => { - const { pathname } = useLocation(); - const overviewUrl = useMlLink({ - page: ML_PAGES.OVERVIEW, - }); - - return ( - <> - - - - - } - > -

- - - -

- - - ); -}; diff --git a/x-pack/plugins/ml/public/application/routing/use_active_route.ts b/x-pack/plugins/ml/public/application/routing/use_active_route.ts deleted file mode 100644 index 9183e45c3d0ae..0000000000000 --- a/x-pack/plugins/ml/public/application/routing/use_active_route.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { useLocation, useRouteMatch } from 'react-router-dom'; -import { keyBy } from 'lodash'; -import { useMemo } from 'react'; -import { useExecutionContext } from '@kbn/kibana-react-plugin/public'; -import { useMlKibana } from '../contexts/kibana'; -import type { MlRoute } from './router'; - -/** - * Provides an active route of the ML app. - * @param routesList - */ -export const useActiveRoute = (routesList: MlRoute[]): MlRoute => { - const { pathname } = useLocation(); - - const { - services: { executionContext }, - } = useMlKibana(); - - /** - * Temp fix for routes with params. - */ - const editCalendarMatch = useRouteMatch('/settings/calendars_list/edit_calendar/:calendarId'); - const editFilterMatch = useRouteMatch('/settings/filter_lists/edit_filter_list/:filterId'); - - const routesMap = useMemo(() => keyBy(routesList, 'path'), []); - - const activeRoute = useMemo(() => { - if (editCalendarMatch) { - return routesMap[editCalendarMatch.path]; - } - if (editFilterMatch) { - return routesMap[editFilterMatch.path]; - } - // Remove trailing slash from the pathname - const pathnameKey = pathname.replace(/\/$/, ''); - return routesMap[pathnameKey] ?? routesMap['/overview']; - }, [pathname]); - - useExecutionContext(executionContext, { - name: 'Machine Learning', - type: 'application', - page: activeRoute?.path, - }); - - return activeRoute; -}; diff --git a/x-pack/plugins/ml/public/application/routing/use_active_route.tsx b/x-pack/plugins/ml/public/application/routing/use_active_route.tsx new file mode 100644 index 0000000000000..6ee0ae4b571b0 --- /dev/null +++ b/x-pack/plugins/ml/public/application/routing/use_active_route.tsx @@ -0,0 +1,98 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useLocation, useRouteMatch } from 'react-router-dom'; +import { keyBy } from 'lodash'; +import React, { useEffect, useMemo, useRef } from 'react'; +import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public'; +import { EuiCallOut } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { useMlKibana } from '../contexts/kibana'; +import type { MlRoute } from './router'; + +/** + * Provides an active route of the ML app. + * @param routesList + */ +export const useActiveRoute = (routesList: MlRoute[]): MlRoute => { + const { pathname } = useLocation(); + + const { + services: { executionContext, overlays, theme }, + } = useMlKibana(); + + /** + * Temp fix for routes with params. + */ + const editCalendarMatch = useRouteMatch('/settings/calendars_list/edit_calendar/:calendarId'); + const editFilterMatch = useRouteMatch('/settings/filter_lists/edit_filter_list/:filterId'); + + const routesMap = useMemo(() => keyBy(routesList, 'path'), []); + + const activeRoute = useMemo(() => { + if (editCalendarMatch) { + return routesMap[editCalendarMatch.path]; + } + if (editFilterMatch) { + return routesMap[editFilterMatch.path]; + } + // Remove trailing slash from the pathname + const pathnameKey = pathname.replace(/\/$/, ''); + return routesMap[pathnameKey]; + }, [pathname]); + + const bannerId = useRef(); + + useEffect( + function handleNotFoundRoute() { + if (!activeRoute) { + bannerId.current = overlays.banners.replace( + bannerId.current, + toMountPoint( + + } + > +

+ +

+ , + { theme$: theme.theme$ } + ) + ); + + // hide the message after the user has had a chance to acknowledge it -- so it doesn't permanently stick around + setTimeout(() => { + if (bannerId.current) { + overlays.banners.remove(bannerId.current); + } + }, 15000); + } + }, + [activeRoute, overlays, theme, pathname] + ); + + useExecutionContext(executionContext, { + name: 'Machine Learning', + type: 'application', + page: activeRoute?.path ?? '/overview', + }); + + return activeRoute ?? routesMap['/overview']; +};