diff --git a/common/constants/shared.ts b/common/constants/shared.ts index b5ef687b13..e039ca6d9b 100644 --- a/common/constants/shared.ts +++ b/common/constants/shared.ts @@ -40,7 +40,8 @@ export const observabilityTitle = 'Observability'; export const observabilityPluginOrder = 1500; export const observabilityOverviewID = 'observability-overview'; -export const observabilityOverviewTitle = 'Observability overview'; +export const observabilityOverviewTitle = 'Overview'; +export const observabilityOverviewTitleWithUseCase = 'Observability overview'; export const observabilityOverviewPluginOrder = 5088; export const observabilityGettingStartedID = 'observability-gettingStarted'; diff --git a/public/components/overview/home.tsx b/public/components/overview/home.tsx index 3dcd976f43..1414955811 100644 --- a/public/components/overview/home.tsx +++ b/public/components/overview/home.tsx @@ -6,6 +6,12 @@ import React, { ReactNode, useEffect, useState } from 'react'; import { HashRouter, Route, Switch } from 'react-router-dom'; import { FormattedMessage } from '@osd/i18n/react'; +import { useObservable } from 'react-use'; +import { EMPTY } from 'rxjs'; +import { + observabilityOverviewTitle, + observabilityOverviewTitleWithUseCase, +} from '../../../common/constants/shared'; import { alertsPluginID, anomalyPluginID } from '../../../common/constants/overview'; import { DashboardSavedObjectsType } from '../../../common/types/overview'; import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs'; @@ -17,6 +23,7 @@ import { ObsDashboardStateManager } from './components/obs_dashboard_state_manag import { SelectDashboardFlyout } from './components/select_dashboard_flyout'; import { getObservabilityDashboardsId, setObservabilityDashboardsId } from './components/utils'; import './index.scss'; +import { OBSERVABILITY_USE_CASE_ID } from '../../../../../src/core/public'; export const Home = () => { const [homePage, setHomePage] = useState(<>); @@ -68,6 +75,8 @@ export const Home = () => { description: card.description, title: card.title, cardProps: { + titleSize: 's', + titleElement: 'h4', selectable: { children: ( { loadHomePage(); }, [dashboardsSavedObjects]); + const currentNavGroup = useObservable(coreRefs?.chrome?.navGroup.getCurrentNavGroup$() || EMPTY); + const isObservabilityUseCase = currentNavGroup?.id === OBSERVABILITY_USE_CASE_ID; + useEffect(() => { setNavBreadCrumbs( [], [ { - text: 'Observability overview', + text: isObservabilityUseCase + ? observabilityOverviewTitle + : observabilityOverviewTitleWithUseCase, href: '#/', }, ] ); loadDashboardsState(); - }, []); + }, [isObservabilityUseCase]); return (