mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
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
2 changed files with 24 additions and 13 deletions
|
@ -3,18 +3,31 @@
|
|||
* or more contributor license agreements. Licensed under 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 React, { useEffect } from 'react';
|
||||
import ReactDOM from 'react-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 { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
|
||||
import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
|
||||
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 { 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 = () => {
|
||||
return (
|
||||
|
@ -25,16 +38,12 @@ const App = () => {
|
|||
const route = routes[path];
|
||||
const Wrapper = () => {
|
||||
const { core } = usePluginContext();
|
||||
|
||||
const breadcrumb = [observabilityLabelBreadcrumb, ...route.breadcrumb];
|
||||
useEffect(() => {
|
||||
core.chrome.setBreadcrumbs([
|
||||
{
|
||||
text: i18n.translate('xpack.observability.observability.breadcrumb.', {
|
||||
defaultMessage: 'Observability',
|
||||
}),
|
||||
},
|
||||
...route.breadcrumb,
|
||||
]);
|
||||
}, [core]);
|
||||
core.chrome.setBreadcrumbs(breadcrumb);
|
||||
document.title = getTitleFromBreadCrumbs(breadcrumb);
|
||||
}, [core, breadcrumb]);
|
||||
|
||||
const { query, path: pathParams } = useRouteParams(route.params);
|
||||
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;
|
||||
};
|
||||
|
||||
export type Breadcrumbs = Array<{ text: string }>;
|
||||
|
||||
export interface Params {
|
||||
query?: t.HasProps;
|
||||
path?: t.HasProps;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue