From 09090a6d5ec0dc968de7493e6c8371b2dbbaa9cf Mon Sep 17 00:00:00 2001 From: Adam Tackett <105462877+TackAdam@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:43:06 -0700 Subject: [PATCH] [Navigation] Register all plugins to NavGroups (#1926) * Add a function to register all plugin Nav groups and categories Signed-off-by: Adam Tackett * Updated addNavLinkGroups path rename dashboards Signed-off-by: Adam Tackett * Fixing Naming Signed-off-by: Adam Tackett * feat: enable default route Signed-off-by: SuZhou-Joe * Update breadcrumb for Trace to default to service page Signed-off-by: Adam Tackett * Update snapshots Signed-off-by: Adam Tackett * feat: update Signed-off-by: SuZhou-Joe * feat: add some features to all use case Signed-off-by: SuZhou-Joe * Depreciated logs, application. Dashboards/Traces adjusted Signed-off-by: Adam Tackett * Not registering logs/applications/dashboards when left nav used Signed-off-by: Adam Tackett * Update snapshots Signed-off-by: Adam Tackett * fixing lint errors Signed-off-by: Adam Tackett * Put applications back Signed-off-by: Adam Tackett * update snapshots Signed-off-by: Adam Tackett * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Update public/plugin.tsx Co-authored-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> * Removed applications from new nav Signed-off-by: Adam Tackett * Add applications back, remove in app nav for trace, remove breadcrumbs while new navigation is active Signed-off-by: Adam Tackett * update snapshots Signed-off-by: Adam Tackett * Adjust order of metrics/traces/services/applications as per guidance from kevin Signed-off-by: Adam Tackett * function for nav breadcrumbs added Signed-off-by: Adam Tackett --------- Signed-off-by: Adam Tackett Signed-off-by: SuZhou-Joe Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com> Co-authored-by: Adam Tackett Co-authored-by: SuZhou-Joe Co-authored-by: Sumukh Swamy --- common/constants/shared.ts | 4 + common/utils/set_nav_bread_crumbs.ts | 19 +++ public/components/app.tsx | 5 +- .../__snapshots__/log_config.test.tsx.snap | 4 + .../service_config.test.tsx.snap | 4 + .../__snapshots__/trace_config.test.tsx.snap | 4 + .../components/app_table.tsx | 25 ++- .../components/application.tsx | 30 ++-- .../components/create.tsx | 33 ++-- .../custom_panel_view.test.tsx.snap | 8 + .../__snapshots__/panel_grid.test.tsx.snap | 2 + public/components/index.tsx | 6 +- public/components/metrics/index.tsx | 17 ++- .../__snapshots__/metrics_grid.test.tsx.snap | 4 + .../notebooks/components/note_table.tsx | 17 ++- .../notebooks/components/notebook.tsx | 25 +-- .../__snapshots__/dashboard.test.tsx.snap | 12 ++ .../__snapshots__/services.test.tsx.snap | 84 +++++++++- .../components/services/service_view.tsx | 33 ++-- .../components/services/services_content.tsx | 4 +- .../__snapshots__/traces.test.tsx.snap | 144 +++++++++++++++++- .../components/traces/trace_view.tsx | 33 ++-- .../components/traces/traces_content.tsx | 10 +- public/components/trace_analytics/home.tsx | 52 +++++-- public/plugin.tsx | 85 +++++++---- public/plugin_nav.tsx | 91 +++++++++++ 26 files changed, 593 insertions(+), 162 deletions(-) create mode 100644 common/utils/set_nav_bread_crumbs.ts create mode 100644 public/plugin_nav.tsx diff --git a/common/constants/shared.ts b/common/constants/shared.ts index 9126d5eae2..b80df28ce4 100644 --- a/common/constants/shared.ts +++ b/common/constants/shared.ts @@ -53,6 +53,10 @@ export const observabilityTracesID = 'observability-traces'; export const observabilityTracesTitle = 'Traces'; export const observabilityTracesPluginOrder = 5093; +export const observabilityServicesID = 'observability-services'; +export const observabilityServicesTitle = 'Services'; +export const observabilityServicesPluginOrder = 5092; + export const observabilityNotebookID = 'observability-notebooks'; export const observabilityNotebookTitle = 'Notebooks'; export const observabilityNotebookPluginOrder = 5094; diff --git a/common/utils/set_nav_bread_crumbs.ts b/common/utils/set_nav_bread_crumbs.ts new file mode 100644 index 0000000000..908e0af309 --- /dev/null +++ b/common/utils/set_nav_bread_crumbs.ts @@ -0,0 +1,19 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { EuiBreadcrumb } from '@elastic/eui'; +import { coreRefs } from '../../public/framework/core_refs'; + +export const setNavBreadCrumbs = ( + parentBreadCrumb: EuiBreadcrumb[], + pageBreadCrumb: EuiBreadcrumb[] +) => { + const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled(); + if (isNavGroupEnabled) { + coreRefs?.chrome?.setBreadcrumbs([...pageBreadCrumb]); + } else { + coreRefs?.chrome?.setBreadcrumbs([...parentBreadCrumb, ...pageBreadCrumb]); + } +}; diff --git a/public/components/app.tsx b/public/components/app.tsx index 1b7150a8cf..3b3d753813 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -35,6 +35,7 @@ interface ObservabilityAppDeps { dataSourceManagement: DataSourceManagementPluginSetup; setActionMenu: (menuMount: MountPoint | undefined) => void; savedObjectsMDSClient: CoreStart['savedObjects']; + defaultRoute?: string; } // for cypress to test redux store @@ -67,8 +68,9 @@ export const App = ({ setActionMenu, dataSourceEnabled, savedObjectsMDSClient, + defaultRoute, }: ObservabilityAppDeps) => { - const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp; + const { chrome, http, notifications, savedObjects: _coreSavedObjects } = CoreStartProp; const parentBreadcrumb = { text: observabilityTitle, href: `${observabilityID}#/`, @@ -102,6 +104,7 @@ export const App = ({ dataSourceEnabled={dataSourceEnabled} setActionMenu={setActionMenu} savedObjectsMDSClient={savedObjectsMDSClient} + defaultRoute={defaultRoute} /> diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap index 7f1fe91c95..b9cbf75a8e 100644 --- a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap +++ b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap @@ -84,9 +84,11 @@ exports[`Log Config component renders empty log config 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -713,9 +715,11 @@ exports[`Log Config component renders with query 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap index 22f894095a..7a5c88cd1e 100644 --- a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap +++ b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap @@ -84,9 +84,11 @@ exports[`Service Config component renders empty service config 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -1283,9 +1285,11 @@ exports[`Service Config component renders with one service selected 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap index e1ef99b5ba..df0635399a 100644 --- a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap +++ b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap @@ -83,9 +83,11 @@ exports[`Trace Config component renders empty trace config 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -995,9 +997,11 @@ exports[`Trace Config component renders with one trace selected 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx index 616ee8c890..f9fd102b67 100644 --- a/public/components/application_analytics/components/app_table.tsx +++ b/public/components/application_analytics/components/app_table.tsx @@ -37,13 +37,9 @@ import moment from 'moment'; import { DeleteModal } from '../../common/helpers/delete_modal'; import { AppAnalyticsComponentDeps } from '../home'; import { getCustomModal } from '../../custom_panels/helpers/modal_containers'; -import { - observabilityID, - observabilityTitle, - pageStyles, - UI_DATE_FORMAT, -} from '../../../../common/constants/shared'; +import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared'; import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics'; +import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs'; interface AppTableProps extends AppAnalyticsComponentDeps { loading: boolean; @@ -57,7 +53,6 @@ interface AppTableProps extends AppAnalyticsComponentDeps { export function AppTable(props: AppTableProps) { const { - chrome, applications, parentBreadcrumbs, fetchApplications, @@ -74,13 +69,15 @@ export function AppTable(props: AppTableProps) { const createButtonText = 'Create application'; useEffect(() => { - chrome.setBreadcrumbs([ - ...parentBreadcrumbs, - { - text: 'Applications', - href: '#/', - }, - ]); + setNavBreadCrumbs( + [...parentBreadcrumbs], + [ + { + text: 'Applications', + href: '#/', + }, + ] + ); clear(); fetchApplications(); }, []); diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx index 07301bed42..bb6fa8e1f5 100644 --- a/public/components/application_analytics/components/application.tsx +++ b/public/components/application_analytics/components/application.tsx @@ -27,7 +27,6 @@ import { useHistory } from 'react-router-dom'; import { useDispatch } from 'react-redux'; import { VisualizationType } from 'common/types/custom_panels'; import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content'; -import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content'; import { ServicesContent } from '../../trace_analytics/components/services/services_content'; import { filtersToDsl, @@ -42,7 +41,6 @@ import { TAB_LOG_ID, TAB_LOG_TITLE, TAB_OVERVIEW_ID, - TAB_OVERVIEW_TITLE, TAB_PANEL_ID, TAB_PANEL_TITLE, TAB_SERVICE_ID, @@ -65,7 +63,7 @@ import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/ import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout'; import { fetchAppById, initializeTabData } from '../helpers/utils'; import { QueryManager } from '../../../../common/query_manager/ppl_query_manager'; -import { observabilityApplicationsID } from '../../../../common/constants/shared'; +import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs'; const searchBarConfigs = { [TAB_EVENT_ID]: { @@ -110,7 +108,6 @@ export function Application(props: AppDetailProps) { updateApp, setAppConfigs, setToasts, - toasts, setFilters, callback, queryManager, @@ -217,17 +214,20 @@ export function Application(props: AppDetailProps) { }, [appId]); useEffect(() => { - chrome.setBreadcrumbs([ - ...parentBreadcrumbs, - { - text: 'Applications', - href: '#/', - }, - { - text: application.name, - href: `#/${appId}`, - }, - ]); + setNavBreadCrumbs( + [...parentBreadcrumbs], + [ + { + text: 'Applications', + href: '#/', + }, + { + text: application.name, + href: `#/${appId}`, + }, + ] + ); + setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h'); setEndTimeForApp(sessionStorage.getItem(`${application.name}EndTime`) || 'now'); }, [appId, application.name]); diff --git a/public/components/application_analytics/components/create.tsx b/public/components/application_analytics/components/create.tsx index cb5f1e9c22..0cce14a28d 100644 --- a/public/components/application_analytics/components/create.tsx +++ b/public/components/application_analytics/components/create.tsx @@ -37,11 +37,8 @@ import { OptionType, } from '../../../../common/types/application_analytics'; import { fetchAppById } from '../helpers/utils'; -import { - observabilityApplicationsID, - observabilityID, - observabilityTitle, -} from '../../../../common/constants/shared'; +import { observabilityApplicationsID } from '../../../../common/constants/shared'; +import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs'; interface CreateAppProps extends AppAnalyticsComponentDeps { dslService: DSLService; @@ -56,7 +53,6 @@ interface CreateAppProps extends AppAnalyticsComponentDeps { export const CreateApp = (props: CreateAppProps) => { const { parentBreadcrumbs, - chrome, http, query, name, @@ -91,17 +87,20 @@ export const CreateApp = (props: CreateAppProps) => { }); useEffect(() => { - chrome.setBreadcrumbs([ - ...parentBreadcrumbs, - { - text: 'Applications', - href: '#/', - }, - { - text: editMode ? 'Edit' : 'Create', - href: `#/${editMode ? 'edit' : 'create'}`, - }, - ]); + setNavBreadCrumbs( + [...parentBreadcrumbs], + [ + ...parentBreadcrumbs, + { + text: 'Applications', + href: '#/', + }, + { + text: editMode ? 'Edit' : 'Create', + href: `#/${editMode ? 'edit' : 'create'}`, + }, + ] + ); }, []); useEffect(() => { diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap index 9761365764..e21d4d8763 100644 --- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap +++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap @@ -1225,9 +1225,11 @@ exports[`Panels View Component renders panel view container with visualizations "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -3020,9 +3022,11 @@ exports[`Panels View Component renders panel view container with visualizations "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -3472,9 +3476,11 @@ exports[`Panels View Component renders panel view container without visualizatio "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -5151,9 +5157,11 @@ exports[`Panels View Component renders panel view container without visualizatio "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap index d61df46a50..1de0dda0ed 100644 --- a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap +++ b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap @@ -241,9 +241,11 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/index.tsx b/public/components/index.tsx index b1ebf1211b..853d463b3b 100644 --- a/public/components/index.tsx +++ b/public/components/index.tsx @@ -21,9 +21,10 @@ export const Observability = ( timestampUtils: any, queryManager: QueryManager, startPage: string, - dataSourcePluggables, + dataSourcePluggables: any, dataSourceManagement: DataSourceManagementPluginSetup, - savedObjectsMDSClient: CoreStart['savedObjects'] + savedObjectsMDSClient: CoreStart['savedObjects'], + defaultRoute?: string ) => { const { setHeaderActionMenu } = AppMountParametersProp; const { dataSource } = DepsStart; @@ -42,6 +43,7 @@ export const Observability = ( setActionMenu={setHeaderActionMenu} dataSourceEnabled={!!dataSource} savedObjectsMDSClient={savedObjectsMDSClient} + defaultRoute={defaultRoute} />, AppMountParametersProp.element ); diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx index 9677d1e15d..14d830d3ae 100644 --- a/public/components/metrics/index.tsx +++ b/public/components/metrics/index.tsx @@ -27,6 +27,7 @@ import { setSelectedDataSourceMDSId } from './redux/slices/metrics_slice'; import { Sidebar } from './sidebar/sidebar'; import { TopMenu } from './top_menu/top_menu'; import { MetricsGrid } from './view/metrics_grid'; +import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs'; interface MetricsProps { parentBreadcrumb: ChromeBreadcrumb; @@ -57,13 +58,15 @@ export const Home = ({ const [reloadSidebar, setReloadSidebar] = useState(false); useEffect(() => { - chrome.setBreadcrumbs([ - parentBreadcrumb, - { - text: 'Metrics', - href: `#/`, - }, - ]); + setNavBreadCrumbs( + [parentBreadcrumb], + [ + { + text: 'Metrics', + href: `#/`, + }, + ] + ); }, [chrome, parentBreadcrumb, dataSourceMDSId]); useEffect(() => { diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap index 2cfb214252..2202044f29 100644 --- a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap +++ b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap @@ -94,9 +94,11 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -262,9 +264,11 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx index d018ae7eb8..7462ff6154 100644 --- a/public/components/notebooks/components/note_table.tsx +++ b/public/components/notebooks/components/note_table.tsx @@ -43,6 +43,7 @@ import { getSampleNotebooksModal, } from './helpers/modal_containers'; import { NotebookType } from './main'; +import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs'; interface NoteTableProps { loading: boolean; @@ -79,13 +80,15 @@ export function NoteTable({ const history = useHistory(); useEffect(() => { - setBreadcrumbs([ - parentBreadcrumb, - { - text: 'Notebooks', - href: '#/', - }, - ]); + setNavBreadCrumbs( + [parentBreadcrumb], + [ + { + text: 'Notebooks', + href: '#/', + }, + ] + ); fetchNotebooks(); }, [setBreadcrumbs, parentBreadcrumb, fetchNotebooks]); diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx index e799333423..38e0b7c493 100644 --- a/public/components/notebooks/components/notebook.tsx +++ b/public/components/notebooks/components/notebook.tsx @@ -42,6 +42,7 @@ import { generateInContextReport, } from './helpers/reporting_context_menu_helper'; import { Paragraphs } from './paragraph_components/paragraphs'; +import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs'; const panelStyles: CSS.Properties = { float: 'left', width: '100%', @@ -617,17 +618,19 @@ export class Notebook extends Component { }; setBreadcrumbs(path: string) { - this.props.setBreadcrumbs([ - this.props.parentBreadcrumb, - { - text: 'Notebooks', - href: '#/', - }, - { - text: path, - href: `#/${this.props.openedNoteId}`, - }, - ]); + setNavBreadCrumbs( + [this.props.parentBreadcrumb], + [ + { + text: 'Notebooks', + href: '#/', + }, + { + text: path, + href: `#/${this.props.openedNoteId}`, + }, + ] + ); } checkIfReportingPluginIsInstalled() { diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap index e85278a15c..799edafb80 100644 --- a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap +++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap @@ -97,9 +97,11 @@ exports[`Dashboard component renders dashboard 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -442,9 +444,11 @@ exports[`Dashboard component renders dashboard 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -1266,9 +1270,11 @@ exports[`Dashboard component renders empty dashboard 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -1610,9 +1616,11 @@ exports[`Dashboard component renders empty dashboard 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -2434,9 +2442,11 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { @@ -2780,9 +2790,11 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap index 4964f087cb..4daf5081c9 100644 --- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap +++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap @@ -97,14 +97,26 @@ exports[`Services component renders empty services page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -430,14 +442,26 @@ exports[`Services component renders empty services page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -2275,14 +2299,26 @@ exports[`Services component renders jaeger services page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -2609,14 +2645,26 @@ exports[`Services component renders jaeger services page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -3887,14 +3935,26 @@ exports[`Services component renders services page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -4220,14 +4280,26 @@ exports[`Services component renders services page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx index 7ca47e6fb4..dfb1461ac1 100644 --- a/public/components/trace_analytics/components/services/service_view.tsx +++ b/public/components/trace_analytics/components/services/service_view.tsx @@ -50,6 +50,7 @@ import { SearchBarProps, renderDatePicker } from '../common/search_bar'; import { SpanDetailFlyout } from '../traces/span_detail_flyout'; import { SpanDetailTable } from '../traces/span_detail_table'; import { ServiceMetrics } from './service_metrics'; +import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs'; interface ServiceViewProps extends TraceAnalyticsComponentDeps { serviceName: string; @@ -101,21 +102,23 @@ export function ServiceView(props: ServiceViewProps) { useEffect(() => { if (page !== 'serviceFlyout') - props.chrome.setBreadcrumbs([ - props.parentBreadcrumb, - { - text: 'Trace analytics', - href: '#/', - }, - { - text: 'Services', - href: '#/services', - }, - { - text: props.serviceName, - href: `#/services/${encodeURIComponent(props.serviceName)}`, - }, - ]); + setNavBreadCrumbs( + [props.parentBreadcrumb], + [ + { + text: 'Trace analytics', + href: '#/', + }, + { + text: 'Services', + href: '#/services', + }, + { + text: props.serviceName, + href: `#/services/${encodeURIComponent(props.serviceName)}`, + }, + ] + ); }, [props.serviceName]); const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu(); diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx index e348237b42..c46d73ade7 100644 --- a/public/components/trace_analytics/components/services/services_content.tsx +++ b/public/components/trace_analytics/components/services/services_content.tsx @@ -20,6 +20,7 @@ import { ServiceMap, ServiceObject } from '../common/plots/service_map'; import { SearchBar } from '../common/search_bar'; import { ServicesProps } from './services'; import { ServicesTable } from './services_table'; +import { coreRefs } from '../../../../framework/core_refs'; export function ServicesContent(props: ServicesProps) { const { @@ -60,7 +61,8 @@ export function ServicesContent(props: ServicesProps) { const searchBarRef = useRef<{ updateQuery: (newQuery: string) => void }>(null); useEffect(() => { - chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]); + const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled(); + chrome.setBreadcrumbs([...(isNavGroupEnabled ? [] : [parentBreadcrumb]), ...childBreadcrumbs]); const validFilters = getValidFilterFields(mode, 'services', attributesFilterFields); setFilters([ diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap index d8c9e2d649..f9d320a818 100644 --- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap +++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap @@ -97,14 +97,36 @@ exports[`Traces component renders empty traces page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + Array [], + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -429,14 +451,36 @@ exports[`Traces component renders empty traces page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + Array [], + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -1726,14 +1770,36 @@ exports[`Traces component renders jaeger traces page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + Array [], + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -2059,14 +2125,36 @@ exports[`Traces component renders jaeger traces page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + Array [], + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -3361,14 +3449,36 @@ exports[`Traces component renders traces page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + Array [], + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, @@ -3693,14 +3803,36 @@ exports[`Traces component renders traces page 1`] = ` "navControls": Object { "getCenter$": [MockFunction], "getLeft$": [MockFunction], + "getLeftBottom$": [MockFunction], "getRight$": [MockFunction], "registerCenter": [MockFunction], "registerLeft": [MockFunction], + "registerLeftBottom": [MockFunction], "registerRight": [MockFunction], }, "navGroup": Object { "getCurrentNavGroup$": [MockFunction], - "getNavGroupEnabled": [MockFunction], + "getNavGroupEnabled": [MockFunction] { + "calls": Array [ + Array [], + Array [], + Array [], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + Object { + "type": "return", + "value": undefined, + }, + ], + }, "getNavGroupsMap$": [MockFunction], "setCurrentNavGroup": [MockFunction], }, diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx index 38fed824c0..b95959967b 100644 --- a/public/components/trace_analytics/components/traces/trace_view.tsx +++ b/public/components/trace_analytics/components/traces/trace_view.tsx @@ -37,6 +37,7 @@ import { PanelTitle, filtersToDsl, processTimeStamp } from '../common/helper_fun import { ServiceMap, ServiceObject } from '../common/plots/service_map'; import { ServiceBreakdownPanel } from './service_breakdown_panel'; import { SpanDetailPanel } from './span_detail_panel'; +import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs'; interface TraceViewProps extends TraceAnalyticsCoreDeps { traceId: string; @@ -230,21 +231,23 @@ export function TraceView(props: TraceViewProps) { }, [serviceMap, ganttData]); useEffect(() => { - props.chrome.setBreadcrumbs([ - props.parentBreadcrumb, - { - text: 'Trace analytics', - href: '#/', - }, - { - text: 'Traces', - href: '#/traces', - }, - { - text: props.traceId, - href: `#/traces/${encodeURIComponent(props.traceId)}`, - }, - ]); + setNavBreadCrumbs( + [props.parentBreadcrumb], + [ + { + text: 'Trace analytics', + href: '#/', + }, + { + text: 'Traces', + href: '#/traces', + }, + { + text: props.traceId, + href: `#/traces/${encodeURIComponent(props.traceId)}`, + }, + ] + ); refresh(); }, [props.mode]); return ( diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx index d70eb7f197..351f04e094 100644 --- a/public/components/trace_analytics/components/traces/traces_content.tsx +++ b/public/components/trace_analytics/components/traces/traces_content.tsx @@ -14,6 +14,7 @@ import { SearchBar } from '../common/search_bar'; import { DashboardContent } from '../dashboard/dashboard_content'; import { TracesProps } from './traces'; import { TracesTable } from './traces_table'; +import { coreRefs } from '../../../../framework/core_refs'; export function TracesContent(props: TracesProps) { const { @@ -25,7 +26,6 @@ export function TracesContent(props: TracesProps) { appConfigs, startTime, endTime, - parentBreadcrumb, childBreadcrumbs, traceIdColumnAction, setQuery, @@ -43,10 +43,14 @@ export function TracesContent(props: TracesProps) { const [redirect, setRedirect] = useState(true); const [loading, setLoading] = useState(false); const [trigger, setTrigger] = useState<'open' | 'closed'>('closed'); - + const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled(); const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu(); + useEffect(() => { - chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]); + chrome.setBreadcrumbs([ + ...(isNavGroupEnabled ? [] : [props.parentBreadcrumb]), + ...childBreadcrumbs, + ]); const validFilters = getValidFilterFields(mode, 'traces', attributesFilterFields); setFilters([ ...filters.map((filter) => ({ diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx index 391c97f236..fa64df8f51 100644 --- a/public/components/trace_analytics/home.tsx +++ b/public/components/trace_analytics/home.tsx @@ -6,7 +6,7 @@ import { EuiGlobalToastList } from '@elastic/eui'; import { Toast } from '@elastic/eui/src/components/toast/global_toast_list'; import React, { ReactChild, useEffect, useState } from 'react'; -import { HashRouter, Route, RouteComponentProps } from 'react-router-dom'; +import { HashRouter, Route, RouteComponentProps, Redirect } from 'react-router-dom'; import { ChromeBreadcrumb, ChromeStart, @@ -44,6 +44,7 @@ export interface TraceAnalyticsCoreDeps { dataSourceManagement: DataSourceManagementPluginSetup; setActionMenu: (menuMount: MountPoint | undefined) => void; savedObjectsMDSClient: SavedObjectsStart; + defaultRoute?: string; } interface HomeProps extends RouteComponentProps, TraceAnalyticsCoreDeps {} @@ -119,6 +120,9 @@ export const Home = (props: HomeProps) => { const [dataSourceMDSId, setDataSourceMDSId] = useState([{ id: '', label: '' }]); const [currentSelectedService, setCurrentSelectedService] = useState(''); + const { defaultRoute = '/services' } = props; + const { chrome } = props; + const isNavGroupEnabled = chrome.navGroup.getNavGroupEnabled(); useEffect(() => { handleDataPrepperIndicesExistRequest( @@ -161,7 +165,7 @@ export const Home = (props: HomeProps) => { const serviceBreadcrumbs = [ { text: 'Trace analytics', - href: '#/', + href: '#/services', }, { text: 'Services', @@ -172,7 +176,7 @@ export const Home = (props: HomeProps) => { const traceBreadcrumbs = [ { text: 'Trace analytics', - href: '#/', + href: '#/services', }, { text: 'Traces', @@ -293,8 +297,19 @@ export const Home = (props: HomeProps) => { ( - + render={(_routerProps) => + !isNavGroupEnabled ? ( + + + + ) : ( { dataSourceMDSId={dataSourceMDSId} {...commonProps} /> - - )} + ) + } /> { /> ( - + path={['/services']} + render={(_routerProps) => + !isNavGroupEnabled ? ( + + + + ) : ( { dataSourceMDSId={dataSourceMDSId} {...commonProps} /> - - )} + ) + } /> { /> )} /> + } /> {flyout} {spanFlyoutComponent} diff --git a/public/plugin.tsx b/public/plugin.tsx index 92ecd76871..f332f6a1cb 100644 --- a/public/plugin.tsx +++ b/public/plugin.tsx @@ -51,6 +51,8 @@ import { observabilityPanelsPluginOrder, observabilityPanelsTitle, observabilityPluginOrder, + observabilityServicesPluginOrder, + observabilityServicesTitle, observabilityTracesID, observabilityTracesPluginOrder, observabilityTracesTitle, @@ -108,6 +110,7 @@ import { SetupDependencies, } from './types'; import { TablesFlyout } from './components/event_analytics/explorer/datasources/tables_flyout'; +import { registerAllPluginNavGroups } from './plugin_nav'; interface PublicConfig { query_assist: { @@ -267,7 +270,9 @@ export class ObservabilityPlugin // prometheus: openSearchLocalDataSourcePluggable }; - const appMountWithStartPage = (startPage: string) => async (params: AppMountParameters) => { + const appMountWithStartPage = (startPage: string, defaultRoute?: string) => async ( + params: AppMountParameters + ) => { const { Observability } = await import('./components/index'); const [coreStart, depsStart] = await core.getStartServices(); const dslService = new DSLService(coreStart.http); @@ -286,26 +291,11 @@ export class ObservabilityPlugin startPage, dataSourcePluggables, // just pass down for now due to time constraint, later may better expose this as context dataSourceManagement, - coreStart.savedObjects + coreStart.savedObjects, + defaultRoute ); }; - core.application.register({ - id: observabilityApplicationsID, - title: observabilityApplicationsTitle, - category: OBSERVABILITY_APP_CATEGORIES.observability, - order: observabilityApplicationsPluginOrder, - mount: appMountWithStartPage('applications'), - }); - - core.application.register({ - id: observabilityLogsID, - title: observabilityLogsTitle, - category: OBSERVABILITY_APP_CATEGORIES.observability, - order: observabilityLogsPluginOrder, - mount: appMountWithStartPage('logs'), - }); - core.application.register({ id: observabilityMetricsID, title: observabilityMetricsTitle, @@ -315,13 +305,54 @@ export class ObservabilityPlugin }); core.application.register({ - id: observabilityTracesID, - title: observabilityTracesTitle, + id: observabilityApplicationsID, + title: observabilityApplicationsTitle, category: OBSERVABILITY_APP_CATEGORIES.observability, - order: observabilityTracesPluginOrder, - mount: appMountWithStartPage('traces'), + order: observabilityApplicationsPluginOrder, + mount: appMountWithStartPage('applications'), }); + if (core.chrome.navGroup.getNavGroupEnabled()) { + core.application.register({ + id: 'observability-traces-nav', + title: observabilityTracesTitle, + order: observabilityTracesPluginOrder, + category: DEFAULT_APP_CATEGORIES.investigate, + mount: appMountWithStartPage('traces', '/traces'), + }); + + core.application.register({ + id: 'observability-services-nav', + title: observabilityServicesTitle, + order: observabilityServicesPluginOrder, + category: DEFAULT_APP_CATEGORIES.investigate, + mount: appMountWithStartPage('traces', '/services'), + }); + } else { + core.application.register({ + id: observabilityTracesID, + title: observabilityTracesTitle, + category: OBSERVABILITY_APP_CATEGORIES.observability, + order: observabilityTracesPluginOrder, + mount: appMountWithStartPage('traces'), + }); + // deprecated in new Nav Groups. + core.application.register({ + id: observabilityPanelsID, + title: observabilityPanelsTitle, + category: OBSERVABILITY_APP_CATEGORIES.observability, + order: observabilityPanelsPluginOrder, + mount: appMountWithStartPage('dashboards'), + }); + core.application.register({ + id: observabilityLogsID, + title: observabilityLogsTitle, + category: OBSERVABILITY_APP_CATEGORIES.observability, + order: observabilityLogsPluginOrder, + mount: appMountWithStartPage('logs'), + }); + } + core.application.register({ id: observabilityNotebookID, title: observabilityNotebookTitle, @@ -330,14 +361,6 @@ export class ObservabilityPlugin mount: appMountWithStartPage('notebooks'), }); - core.application.register({ - id: observabilityPanelsID, - title: observabilityPanelsTitle, - category: OBSERVABILITY_APP_CATEGORIES.observability, - order: observabilityPanelsPluginOrder, - mount: appMountWithStartPage('dashboards'), - }); - core.application.register({ id: observabilityIntegrationsID, title: observabilityIntegrationsTitle, @@ -346,6 +369,8 @@ export class ObservabilityPlugin mount: appMountWithStartPage('integrations'), }); + registerAllPluginNavGroups(core); + core.application.register({ id: observabilityDataConnectionsID, title: observabilityDataConnectionsTitle, diff --git a/public/plugin_nav.tsx b/public/plugin_nav.tsx new file mode 100644 index 0000000000..ac60a0ab95 --- /dev/null +++ b/public/plugin_nav.tsx @@ -0,0 +1,91 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import { + observabilityApplicationsID, + observabilityIntegrationsID, + observabilityMetricsID, + observabilityNotebookID, +} from '../common/constants/shared'; +import { CoreSetup } from '../../../src/core/public'; +import { AppPluginStartDependencies } from './types'; +import { DEFAULT_NAV_GROUPS, DEFAULT_APP_CATEGORIES } from '../../../src/core/public'; + +export function registerAllPluginNavGroups(core: CoreSetup) { + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability, [ + { + id: observabilityApplicationsID, + category: DEFAULT_APP_CATEGORIES.investigate, + order: 400, + }, + ]); + + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability, [ + { + id: observabilityMetricsID, + category: DEFAULT_APP_CATEGORIES.investigate, + showInAllNavGroup: true, + order: 100, + }, + ]); + + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability, [ + { + id: observabilityNotebookID, + category: DEFAULT_APP_CATEGORIES.dashboardAndReport, + order: 400, + }, + ]); + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS[`security-analytics`], [ + { + id: observabilityNotebookID, + category: DEFAULT_APP_CATEGORIES.dashboardAndReport, + order: 400, + }, + ]); + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.analytics, [ + { + id: observabilityNotebookID, + category: DEFAULT_APP_CATEGORIES.dashboardAndReport, + order: 400, + }, + ]); + + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability, [ + { + id: observabilityIntegrationsID, + category: DEFAULT_APP_CATEGORIES.dashboardAndReport, + order: 500, + }, + ]); + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS[`security-analytics`], [ + { + id: observabilityIntegrationsID, + category: DEFAULT_APP_CATEGORIES.dashboardAndReport, + order: 500, + }, + ]); + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.analytics, [ + { + id: observabilityIntegrationsID, + category: DEFAULT_APP_CATEGORIES.dashboardAndReport, + order: 500, + }, + ]); + + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability, [ + { + id: 'observability-traces-nav', + category: DEFAULT_APP_CATEGORIES.investigate, + showInAllNavGroup: true, + order: 200, + }, + { + id: 'observability-services-nav', + category: DEFAULT_APP_CATEGORIES.investigate, + showInAllNavGroup: true, + order: 300, + }, + ]); +}