Observability landing page title (#72088)
* updating window title based on breadcrumbs * updating window title based on breadcrumbs * updating window title based on breadcrumbs
This commit is contained in:
parent
5160c7ee45
commit
f9baaa267d
|
@ -3,18 +3,31 @@
|
||||||
* or more contributor license agreements. Licensed under the Elastic License;
|
* or more contributor license agreements. Licensed under the Elastic License;
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
import { createHashHistory } from 'history';
|
import { createHashHistory } from 'history';
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { Route, Router, Switch } from 'react-router-dom';
|
import { Route, Router, Switch } from 'react-router-dom';
|
||||||
import { i18n } from '@kbn/i18n';
|
|
||||||
import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
|
|
||||||
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
|
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
|
||||||
|
import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
|
||||||
import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
|
import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
|
||||||
import { PluginContext } from '../context/plugin_context';
|
import { PluginContext } from '../context/plugin_context';
|
||||||
import { useRouteParams } from '../hooks/use_route_params';
|
|
||||||
import { routes } from '../routes';
|
|
||||||
import { usePluginContext } from '../hooks/use_plugin_context';
|
import { usePluginContext } from '../hooks/use_plugin_context';
|
||||||
|
import { useRouteParams } from '../hooks/use_route_params';
|
||||||
|
import { Breadcrumbs, routes } from '../routes';
|
||||||
|
|
||||||
|
const observabilityLabelBreadcrumb = {
|
||||||
|
text: i18n.translate('xpack.observability.observability.breadcrumb.', {
|
||||||
|
defaultMessage: 'Observability',
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumbs) {
|
||||||
|
return breadcrumbs
|
||||||
|
.map(({ text }) => text)
|
||||||
|
.reverse()
|
||||||
|
.join(' | ');
|
||||||
|
}
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -25,16 +38,12 @@ const App = () => {
|
||||||
const route = routes[path];
|
const route = routes[path];
|
||||||
const Wrapper = () => {
|
const Wrapper = () => {
|
||||||
const { core } = usePluginContext();
|
const { core } = usePluginContext();
|
||||||
|
|
||||||
|
const breadcrumb = [observabilityLabelBreadcrumb, ...route.breadcrumb];
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
core.chrome.setBreadcrumbs([
|
core.chrome.setBreadcrumbs(breadcrumb);
|
||||||
{
|
document.title = getTitleFromBreadCrumbs(breadcrumb);
|
||||||
text: i18n.translate('xpack.observability.observability.breadcrumb.', {
|
}, [core, breadcrumb]);
|
||||||
defaultMessage: 'Observability',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
...route.breadcrumb,
|
|
||||||
]);
|
|
||||||
}, [core]);
|
|
||||||
|
|
||||||
const { query, path: pathParams } = useRouteParams(route.params);
|
const { query, path: pathParams } = useRouteParams(route.params);
|
||||||
return route.handler({ query, path: pathParams });
|
return route.handler({ query, path: pathParams });
|
||||||
|
|
|
@ -17,6 +17,8 @@ type DecodeParams<TParams extends Params | undefined> = {
|
||||||
[key in keyof TParams]: TParams[key] extends t.Any ? t.TypeOf<TParams[key]> : never;
|
[key in keyof TParams]: TParams[key] extends t.Any ? t.TypeOf<TParams[key]> : never;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type Breadcrumbs = Array<{ text: string }>;
|
||||||
|
|
||||||
export interface Params {
|
export interface Params {
|
||||||
query?: t.HasProps;
|
query?: t.HasProps;
|
||||||
path?: t.HasProps;
|
path?: t.HasProps;
|
||||||
|
|
Loading…
Reference in a new issue