From 34f378e2f565e66c96e2d16b9341324706ac8e5e Mon Sep 17 00:00:00 2001 From: Panagiota Mitsopoulou Date: Fri, 13 Sep 2024 10:41:28 +0300 Subject: [PATCH] change nav hierarchy for stateful cloud to use panelOpener --- .../src/project_navigation/utils.ts | 5 - .../components/navigation_item_open_panel.tsx | 9 +- .../observability/public/navigation_tree.ts | 399 ++++++++---------- 3 files changed, 188 insertions(+), 225 deletions(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.ts b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.ts index 06e5156dfac6e..9a45290c95389 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.ts +++ b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.ts @@ -274,11 +274,6 @@ function validateNodeProps< `[Chrome navigation] Error in node [${id}]. Only one of "href" or "cloudLink" can be provided.` ); } - if (renderAs === 'panelOpener' && !link) { - throw new Error( - `[Chrome navigation] Error in node [${id}]. If renderAs is set to "panelOpener", a "link" must also be provided.` - ); - } if (renderAs === 'item' && !link && !onClick) { throw new Error( `[Chrome navigation] Error in node [${id}]. If renderAs is set to "item", a "link" or "onClick" must also be provided.` diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx index 9d354ec27bc31..8beb9a809264c 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx @@ -81,13 +81,18 @@ export const NavigationItemOpenPanel: FC = ({ item, navigateToUrl, active const onLinkClick = useCallback( (e: React.MouseEvent) => { if (!href) { + if (selectedNode?.id === item.id) { + closePanel(); + } else { + openPanel(item); + } return; } e.preventDefault(); navigateToUrl(href); closePanel(); }, - [closePanel, href, navigateToUrl] + [closePanel, href, item, navigateToUrl, openPanel, selectedNode] ); const onIconClick = useCallback(() => { @@ -123,7 +128,7 @@ export const NavigationItemOpenPanel: FC = ({ item, navigateToUrl, active size="s" color="text" onClick={onIconClick} - iconType="spaces" + iconType="arrowRight" iconSize="m" aria-label={i18n.translate('sharedUXPackages.chrome.sideNavigation.togglePanel', { defaultMessage: 'Toggle "{title}" panel navigation', diff --git a/x-pack/plugins/observability_solution/observability/public/navigation_tree.ts b/x-pack/plugins/observability_solution/observability/public/navigation_tree.ts index 9a064af35d3e8..3da27ca241e62 100644 --- a/x-pack/plugins/observability_solution/observability/public/navigation_tree.ts +++ b/x-pack/plugins/observability_solution/observability/public/navigation_tree.ts @@ -66,97 +66,36 @@ const navTree: NavigationTreeDefinition = { link: 'slo', }, { - id: 'aiMl', - title: i18n.translate('xpack.observability.obltNav.ml.aiAndMlGroupTitle', { - defaultMessage: 'AI & ML', + link: 'observabilityAIAssistant', + title: i18n.translate('xpack.observability.obltNav.aiMl.aiAssistant', { + defaultMessage: 'AI Assistant', }), - renderAs: 'accordion', - children: [ - { - link: 'observabilityAIAssistant', - title: i18n.translate('xpack.observability.obltNav.aiMl.aiAssistant', { - defaultMessage: 'AI Assistant', - }), - }, - { - link: 'ml:anomalyDetection', - renderAs: 'item', - children: [ - { - link: 'ml:singleMetricViewer', - }, - { - link: 'ml:anomalyExplorer', - }, - { - link: 'ml:settings', - }, - ], - }, - { - title: i18n.translate('xpack.observability.obltNav.ml.logRateAnalysis', { - defaultMessage: 'Log rate analysis', - }), - link: 'ml:logRateAnalysis', - getIsActive: ({ pathNameSerialized, prepend }) => { - return pathNameSerialized.includes(prepend('/app/ml/aiops/log_rate_analysis')); - }, - }, - { - link: 'logs:anomalies', - }, - { - link: 'logs:log-categories', - }, - { - title: i18n.translate('xpack.observability.obltNav.ml.changePointDetection', { - defaultMessage: 'Change point detection', - }), - link: 'ml:changePointDetections', - getIsActive: ({ pathNameSerialized, prepend }) => { - return pathNameSerialized.includes(prepend('/app/ml/aiops/change_point_detection')); - }, - }, - { - title: i18n.translate('xpack.observability.obltNav.ml.job.notifications', { - defaultMessage: 'Job notifications', - }), - link: 'ml:notifications', - }, - ], }, { id: 'apm', title: i18n.translate('xpack.observability.obltNav.applications', { defaultMessage: 'Applications', }), - renderAs: 'accordion', + renderAs: 'panelOpener', children: [ { - link: 'apm:services', - getIsActive: ({ pathNameSerialized }) => { - const regex = /app\/apm\/.*service.*/; - return regex.test(pathNameSerialized); - }, - }, - { - link: 'apm:traces', - getIsActive: ({ pathNameSerialized, prepend }) => { - return pathNameSerialized.startsWith(prepend('/app/apm/traces')); - }, - }, - { - link: 'apm:dependencies', - getIsActive: ({ pathNameSerialized, prepend }) => { - return pathNameSerialized.startsWith(prepend('/app/apm/dependencies')); - }, + children: [ + { link: 'apm:services' }, + { link: 'apm:traces' }, + { link: 'apm:dependencies' }, + { + link: 'ux', + title: i18n.translate('xpack.observability.obltNav.apm.ux', { + defaultMessage: 'User experience', + }), + }, + ], }, { id: 'synthetics', title: i18n.translate('xpack.observability.obltNav.apm.syntheticsGroupTitle', { defaultMessage: 'Synthetics', }), - renderAs: 'accordion', children: [ { link: 'synthetics', @@ -164,10 +103,17 @@ const navTree: NavigationTreeDefinition = { defaultMessage: 'Monitors', }), }, - { link: 'synthetics:certificates' }, + { + link: 'synthetics:certificates', + title: i18n.translate( + 'xpack.observability.obltNav.apm.synthetics.tlsCertificates', + { + defaultMessage: 'TLS certificates', + } + ), + }, ], }, - { link: 'ux' }, ], }, { @@ -175,32 +121,31 @@ const navTree: NavigationTreeDefinition = { title: i18n.translate('xpack.observability.obltNav.infrastructure', { defaultMessage: 'Infrastructure', }), - renderAs: 'accordion', + renderAs: 'panelOpener', children: [ { - link: 'metrics:inventory', - getIsActive: ({ pathNameSerialized, prepend }) => { - return pathNameSerialized.startsWith(prepend('/app/metrics/inventory')); - }, - }, - { - link: 'metrics:hosts', - getIsActive: ({ pathNameSerialized, prepend }) => { - return pathNameSerialized.startsWith(prepend('/app/metrics/hosts')); - }, - }, - { - link: 'metrics:metrics-explorer', + children: [ + { link: 'metrics:inventory' }, + { link: 'metrics:hosts' }, + { + link: 'metrics:metrics-explorer', + title: i18n.translate( + 'xpack.observability.obltNav.infrastructure.metricsExplorer', + { + defaultMessage: 'Metrics explorer', + } + ), + }, + ], }, { id: 'profiling', title: i18n.translate( 'xpack.observability.obltNav.infrastructure.universalProfiling', { - defaultMessage: 'Universal Profiling', + defaultMessage: 'Universal profiling', } ), - renderAs: 'accordion', children: [ { link: 'profiling:stacktraces', @@ -215,134 +160,10 @@ const navTree: NavigationTreeDefinition = { }, ], }, - { - id: 'otherTools', - title: i18n.translate('xpack.observability.obltNav.otherTools', { - defaultMessage: 'Other tools', - }), - renderAs: 'accordion', - children: [ - { - link: 'logs:stream', - title: i18n.translate('xpack.observability.obltNav.otherTools.logsStream', { - defaultMessage: 'Logs stream', - }), - }, - { link: 'maps' }, - { link: 'canvas' }, - { link: 'graph' }, - ], - }, - ], - }, - ], - footer: [ - { type: 'recentlyAccessed' }, - { - type: 'navItem', - title: i18n.translate('xpack.observability.obltNav.getStarted', { - defaultMessage: 'Get started', - }), - link: 'observabilityOnboarding', - icon: 'launch', - }, - { - type: 'navItem', - id: 'devTools', - title: i18n.translate('xpack.observability.obltNav.devTools', { - defaultMessage: 'Developer tools', - }), - link: 'dev_tools', - icon: 'editorCodeBlock', - }, - { - type: 'navGroup', - id: 'project_settings_project_nav', - title: i18n.translate('xpack.observability.obltNav.management', { - defaultMessage: 'Management', - }), - icon: 'gear', - breadcrumbStatus: 'hidden', - children: [ - { - link: 'management', - title: i18n.translate('xpack.observability.obltNav.stackManagement', { - defaultMessage: 'Stack Management', - }), - renderAs: 'panelOpener', - spaceBefore: null, - children: [ - { - title: 'Ingest', - children: [{ link: 'management:ingest_pipelines' }, { link: 'management:pipelines' }], - }, - { - title: 'Data', - children: [ - { link: 'management:index_management' }, - { link: 'management:index_lifecycle_management' }, - { link: 'management:snapshot_restore' }, - { link: 'management:rollup_jobs' }, - { link: 'management:transform' }, - { link: 'management:cross_cluster_replication' }, - { link: 'management:remote_clusters' }, - { link: 'management:migrate_data' }, - ], - }, - { - title: 'Alerts and Insights', - children: [ - { link: 'management:triggersActions' }, - { link: 'management:cases' }, - { link: 'management:triggersActionsConnectors' }, - { link: 'management:reporting' }, - { link: 'management:jobsListLink' }, - { link: 'management:watcher' }, - { link: 'management:maintenanceWindows' }, - ], - }, - { - title: 'Security', - children: [ - { link: 'management:users' }, - { link: 'management:roles' }, - { link: 'management:api_keys' }, - { link: 'management:role_mappings' }, - ], - }, - { - title: 'Kibana', - children: [ - { link: 'management:dataViews' }, - { link: 'management:filesManagement' }, - { link: 'management:objects' }, - { link: 'management:tags' }, - { link: 'management:search_sessions' }, - { link: 'management:aiAssistantManagementSelection' }, - { link: 'management:spaces' }, - { link: 'management:settings' }, - ], - }, - { - title: 'Stack', - children: [ - { link: 'management:license_management' }, - { link: 'management:upgrade_assistant' }, - ], - }, - ], - }, - { - link: 'integrations', - }, - { - link: 'fleet', - }, { id: 'machine_learning-landing', link: 'securitySolutionUI:machine_learning-landing', renderAs: 'panelOpener', - spaceBefore: null, children: [ { children: [ @@ -467,6 +288,148 @@ const navTree: NavigationTreeDefinition = { }, ], }, + { + id: 'otherTools', + title: i18n.translate('xpack.observability.obltNav.otherTools', { + defaultMessage: 'Other tools', + }), + renderAs: 'panelOpener', + icon: 'editorCodeBlock', + children: [ + { + link: 'logs:stream', + title: i18n.translate('xpack.observability.obltNav.otherTools.logsStream', { + defaultMessage: 'Logs stream', + }), + }, + { + link: 'logs:anomalies', + title: i18n.translate('xpack.observability.obltNav.otherTools.logsAnomalies', { + defaultMessage: 'Logs anomalies', + }), + }, + { + link: 'logs:log-categories', + title: i18n.translate('xpack.observability.obltNav.otherTools.logsCategories', { + defaultMessage: 'Logs categories', + }), + }, + { link: 'maps' }, + { link: 'canvas' }, + { link: 'graph' }, + { + link: 'visualize', + title: i18n.translate('xpack.observability.obltNav.otherTools.logsCategories', { + defaultMessage: 'Visualize library', + }), + }, + ], + }, + ], + }, + ], + footer: [ + { type: 'recentlyAccessed' }, + { + type: 'navItem', + title: i18n.translate('xpack.observability.obltNav.addData', { + defaultMessage: 'Add data', + }), + link: 'observabilityOnboarding', + icon: 'launch', + }, + { + type: 'navItem', + id: 'devTools', + title: i18n.translate('xpack.observability.obltNav.devTools', { + defaultMessage: 'Developer tools', + }), + link: 'dev_tools', + icon: 'editorCodeBlock', + }, + { + type: 'navGroup', + id: 'project_settings_project_nav', + title: i18n.translate('xpack.observability.obltNav.management', { + defaultMessage: 'Management', + }), + icon: 'gear', + breadcrumbStatus: 'hidden', + children: [ + { + link: 'management', + title: i18n.translate('xpack.observability.obltNav.stackManagement', { + defaultMessage: 'Stack Management', + }), + renderAs: 'panelOpener', + spaceBefore: null, + children: [ + { + title: 'Ingest', + children: [{ link: 'management:ingest_pipelines' }, { link: 'management:pipelines' }], + }, + { + title: 'Data', + children: [ + { link: 'management:index_management' }, + { link: 'management:index_lifecycle_management' }, + { link: 'management:snapshot_restore' }, + { link: 'management:rollup_jobs' }, + { link: 'management:transform' }, + { link: 'management:cross_cluster_replication' }, + { link: 'management:remote_clusters' }, + { link: 'management:migrate_data' }, + ], + }, + { + title: 'Alerts and Insights', + children: [ + { link: 'management:triggersActions' }, + { link: 'management:cases' }, + { link: 'management:triggersActionsConnectors' }, + { link: 'management:reporting' }, + { link: 'management:jobsListLink' }, + { link: 'management:watcher' }, + { link: 'management:maintenanceWindows' }, + ], + }, + { + title: 'Security', + children: [ + { link: 'management:users' }, + { link: 'management:roles' }, + { link: 'management:api_keys' }, + { link: 'management:role_mappings' }, + ], + }, + { + title: 'Kibana', + children: [ + { link: 'management:dataViews' }, + { link: 'management:filesManagement' }, + { link: 'management:objects' }, + { link: 'management:tags' }, + { link: 'management:search_sessions' }, + { link: 'management:aiAssistantManagementSelection' }, + { link: 'management:spaces' }, + { link: 'management:settings' }, + ], + }, + { + title: 'Stack', + children: [ + { link: 'management:license_management' }, + { link: 'management:upgrade_assistant' }, + ], + }, + ], + }, + { + link: 'integrations', + }, + { + link: 'fleet', + }, { id: 'cloudLinkUserAndRoles', cloudLink: 'userAndRoles',