Implement new o11y nav hierarchy for serverless (#193510)

Fixes #192804 This PR updates the nav hierarchy on serverless and changes the `accordion` to `panelOpener`. The menu items have been updated according to the [Figma file](https://www.figma.com/design/IAR7FjBaSCDWypNYL83fzy/Observability-Navigation?node-id=1232-10087&node-type=frame&t=AMlUqaK2UhhiyqGi-0). Here's a Video of how nav hierarchy looks like on serverless with the new changes: https://github.com/user-attachments/assets/55d04969-379e-4cd1-8e25-d50382cf51e0 ## What was changed - AI & ML menu is removed and split into - `AI Assistant` - `Machine learning` - `Applications` now opens a `panelOpener` instead of an `accordion` - `Service Inventory` was renamed to `Service inventory` to meet the use of sentence-case requirement - Synthetics was moved to a new section - `Infrastructure` - `Infrastructure Inventory` was renamed to `Infrastructure inventory` to match the sentence-case requirement - `Machine learning`: this menu was not present at all on serverless ## Notes for the Reviewer - `Stack Management` on security and search don't use any `panelOpener`, they use a landing page instead. In order to be consistent with the rest solutions, I kept Stack Management as is. - `Machine Learning` menu item was not present at all on serverless. I need a confirmation, that it is fine to bring it in as it is from stateful cc @vinaychandrasekhar --------- Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit 0e736e3)
elastic · Nov 8, 2024 · a81ef07 · a81ef07
1 parent 43f304b
commit a81ef07
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 140 deletions.
diff --git a/x-pack/plugins/serverless_observability/public/navigation_tree.ts b/x-pack/plugins/serverless_observability/public/navigation_tree.ts
@@ -70,147 +70,258 @@ export const navigationTree: NavigationTreeDefinition = {
           link: 'slo',
         },
         {
-          id: 'aiops',
-          title: 'AIOps',
-          link: 'ml:anomalyDetection',
-          renderAs: 'accordion',
-          spaceBefore: null,
+          link: 'observabilityAIAssistant',
+          title: i18n.translate('xpack.serverlessObservability.nav.aiAssistant', {
+            defaultMessage: 'AI Assistant',
+          }),
+        },
+        { link: 'inventory', spaceBefore: 'm' },
+        {
+          id: 'apm',
+          title: i18n.translate('xpack.serverlessObservability.nav.applications', {
+            defaultMessage: 'Applications',
+          }),
+          renderAs: 'panelOpener',
           children: [
             {
-              title: i18n.translate('xpack.serverlessObservability.nav.ml.jobs', {
-                defaultMessage: 'Anomaly detection',
-              }),
-              link: 'ml:anomalyDetection',
-              id: 'ml:anomalyDetection',
-              renderAs: 'item',
               children: [
                 {
-                  link: 'ml:singleMetricViewer',
-                },
-                {
-                  link: 'ml:anomalyExplorer',
+                  link: 'apm:services',
+                  title: i18n.translate('xpack.serverlessObservability.nav.apm.services', {
+                    defaultMessage: 'Service inventory',
+                  }),
                 },
+                { link: 'apm:traces' },
+                { link: 'apm:dependencies' },
+                { link: 'apm:settings' },
                 {
-                  link: 'ml:settings',
+                  id: 'synthetics',
+                  title: i18n.translate('xpack.serverlessObservability.nav.synthetics', {
+                    defaultMessage: 'Synthetics',
+                  }),
+                  children: [
+                    {
+                      title: i18n.translate(
+                        'xpack.serverlessObservability.nav.synthetics.overviewItem',
+                        {
+                          defaultMessage: 'Overview',
+                        }
+                      ),
+                      id: 'synthetics-overview',
+                      link: 'synthetics:overview',
+                      breadcrumbStatus: 'hidden',
+                    },
+                    {
+                      link: 'synthetics:certificates',
+                      title: i18n.translate(
+                        'xpack.serverlessObservability.nav.synthetics.certificatesItem',
+                        {
+                          defaultMessage: 'TLS certificates',
+                        }
+                      ),
+                      id: 'synthetics-certificates',
+                      breadcrumbStatus: 'hidden',
+                    },
+                  ],
                 },
               ],
             },
-            {
-              title: i18n.translate('xpack.serverlessObservability.ml.logRateAnalysis', {
-                defaultMessage: 'Log rate analysis',
-              }),
-              link: 'ml:logRateAnalysis',
-              getIsActive: ({ pathNameSerialized, prepend }) => {
-                return pathNameSerialized.includes(prepend('/app/ml/aiops/log_rate_analysis'));
-              },
-            },
-            {
-              title: i18n.translate('xpack.serverlessObservability.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.serverlessObservability.nav.ml.job.notifications', {
-                defaultMessage: 'Job notifications',
-              }),
-              link: 'ml:notifications',
-            },
           ],
         },
-        { link: 'inventory', spaceBefore: 'm' },
         {
-          id: 'apm',
-          title: i18n.translate('xpack.serverlessObservability.nav.applications', {
-            defaultMessage: 'Applications',
+          id: 'metrics',
+          title: i18n.translate('xpack.serverlessObservability.nav.infrastructure', {
+            defaultMessage: 'Infrastructure',
           }),
-          link: 'apm:services',
-          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'));
-              },
-            },
-            {
-              link: 'apm:settings',
-              sideNavStatus: 'hidden', // only to be considered in the breadcrumbs
+              children: [
+                {
+                  link: 'metrics:inventory',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.infrastructureInventory',
+                    {
+                      defaultMessage: 'Infrastructure inventory',
+                    }
+                  ),
+                },
+                { link: 'metrics:hosts' },
+                { link: 'metrics:settings' },
+                { link: 'metrics:assetDetails' },
+              ],
             },
           ],
         },
         {
-          id: 'metrics',
-          title: i18n.translate('xpack.serverlessObservability.nav.infrastructure', {
-            defaultMessage: 'Infrastructure',
+          id: 'machine_learning-landing',
+          renderAs: 'panelOpener',
+          title: i18n.translate('xpack.serverlessObservability.nav.machineLearning', {
+            defaultMessage: 'Machine learning',
           }),
-          link: 'metrics:inventory',
-          renderAs: 'accordion',
           children: [
             {
-              link: 'metrics:inventory',
-              getIsActive: ({ pathNameSerialized, prepend }) => {
-                return pathNameSerialized.startsWith(prepend('/app/metrics/inventory'));
-              },
+              children: [
+                {
+                  link: 'ml:overview',
+                },
+                {
+                  link: 'ml:notifications',
+                },
+                {
+                  link: 'ml:memoryUsage',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.machineLearning.memoryUsage',
+                    {
+                      defaultMessage: 'Memory usage',
+                    }
+                  ),
+                },
+              ],
             },
             {
-              link: 'metrics:hosts',
-              getIsActive: ({ pathNameSerialized, prepend }) => {
-                return pathNameSerialized.startsWith(prepend('/app/metrics/hosts'));
-              },
+              id: 'category-anomaly_detection',
+              title: i18n.translate('xpack.serverlessObservability.nav.ml.anomaly_detection', {
+                defaultMessage: 'Anomaly detection',
+              }),
+              breadcrumbStatus: 'hidden',
+              children: [
+                {
+                  link: 'ml:anomalyDetection',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.anomaly_detection.jobs',
+                    {
+                      defaultMessage: 'Jobs',
+                    }
+                  ),
+                },
+                {
+                  link: 'ml:anomalyExplorer',
+                },
+                {
+                  link: 'ml:singleMetricViewer',
+                },
+                {
+                  link: 'ml:settings',
+                },
+                {
+                  link: 'ml:suppliedConfigurations',
+                },
+              ],
             },
             {
-              link: 'metrics:settings',
-              sideNavStatus: 'hidden', // only to be considered in the breadcrumbs
+              id: 'category-data_frame analytics',
+              title: i18n.translate('xpack.serverlessObservability.nav.ml.data_frame_analytics', {
+                defaultMessage: 'Data frame analytics',
+              }),
+              breadcrumbStatus: 'hidden',
+              children: [
+                {
+                  link: 'ml:dataFrameAnalytics',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.data_frame_analytics.jobs',
+                    {
+                      defaultMessage: 'Jobs',
+                    }
+                  ),
+                },
+                {
+                  link: 'ml:resultExplorer',
+                },
+                {
+                  link: 'ml:analyticsMap',
+                },
+              ],
             },
             {
-              link: 'metrics:assetDetails',
-              sideNavStatus: 'hidden', // only to be considered in the breadcrumbs
+              id: 'category-model_management',
+              title: i18n.translate('xpack.serverlessObservability.nav.ml.model_management', {
+                defaultMessage: 'Model management',
+              }),
+              breadcrumbStatus: 'hidden',
+              children: [
+                {
+                  link: 'ml:nodesOverview',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.model_management.trainedModels',
+                    {
+                      defaultMessage: 'Trained models',
+                    }
+                  ),
+                },
+              ],
             },
-          ],
-        },
-        {
-          id: 'synthetics',
-          title: i18n.translate('xpack.serverlessObservability.nav.synthetics', {
-            defaultMessage: 'Synthetics',
-          }),
-          renderAs: 'accordion',
-          breadcrumbStatus: 'hidden',
-          children: [
             {
-              title: i18n.translate('xpack.serverlessObservability.nav.synthetics.overviewItem', {
-                defaultMessage: 'Overview',
+              id: 'category-data_visualizer',
+              title: i18n.translate('xpack.serverlessObservability.nav.ml.data_visualizer', {
+                defaultMessage: 'Data visualizer',
               }),
-              id: 'synthetics-overview',
-              link: 'synthetics:overview',
               breadcrumbStatus: 'hidden',
+              children: [
+                {
+                  link: 'ml:fileUpload',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.data_visualizer.file_data_visualizer',
+                    {
+                      defaultMessage: 'File data visualizer',
+                    }
+                  ),
+                },
+                {
+                  link: 'ml:indexDataVisualizer',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.data_visualizer.data_view_data_visualizer',
+                    {
+                      defaultMessage: 'Data view data visualizer',
+                    }
+                  ),
+                },
+                {
+                  link: 'ml:dataDrift',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.data_visualizer.data_drift',
+                    {
+                      defaultMessage: 'Data drift',
+                    }
+                  ),
+                },
+              ],
             },
             {
-              link: 'synthetics:certificates',
-              title: i18n.translate(
-                'xpack.serverlessObservability.nav.synthetics.certificatesItem',
-                {
-                  defaultMessage: 'TLS Certificates',
-                }
-              ),
-              id: 'synthetics-certificates',
+              id: 'category-aiops_labs',
+              title: i18n.translate('xpack.serverlessObservability.nav.ml.aiops_labs', {
+                defaultMessage: 'Aiops labs',
+              }),
               breadcrumbStatus: 'hidden',
+              children: [
+                {
+                  link: 'ml:logRateAnalysis',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.aiops_labs.log_rate_analysis',
+                    {
+                      defaultMessage: 'Log rate analysis',
+                    }
+                  ),
+                },
+                {
+                  link: 'ml:logPatternAnalysis',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.aiops_labs.log_pattern_analysis',
+                    {
+                      defaultMessage: 'Log pattern analysis',
+                    }
+                  ),
+                },
+                {
+                  link: 'ml:changePointDetections',
+                  title: i18n.translate(
+                    'xpack.serverlessObservability.nav.ml.aiops_labs.change_point_detection',
+                    {
+                      defaultMessage: 'Change point detection',
+                    }
+                  ),
+                },
+              ],
             },
           ],
         },

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -43141,16 +43141,12 @@
     "xpack.serverless.nav.manageOrgMembersTitle": "Gérer les membres de l'organisation",
     "xpack.serverlessObservability.aiAssistantManagementDescription": "Gérez la base de connaissances et contrôlez le comportement de l'assistant, y compris le langage de réponse.",
     "xpack.serverlessObservability.aiAssistantManagementTitle": "Paramètres de l'Assistant d'IA pour Observability",
-    "xpack.serverlessObservability.ml.changePointDetection": "Modifier la détection du point",
-    "xpack.serverlessObservability.ml.logRateAnalysis": "Analyse du taux de log",
     "xpack.serverlessObservability.nav.applications": "Applications",
     "xpack.serverlessObservability.nav.dashboards": "Tableaux de bord",
     "xpack.serverlessObservability.nav.devTools": "Outils de développeur",
     "xpack.serverlessObservability.nav.discover": "Discover",
     "xpack.serverlessObservability.nav.getStarted": "Ajouter des données",
     "xpack.serverlessObservability.nav.infrastructure": "Infrastructure",
-    "xpack.serverlessObservability.nav.ml.job.notifications": "Notifications de tâches",
-    "xpack.serverlessObservability.nav.ml.jobs": "Détection des anomalies",
     "xpack.serverlessObservability.nav.mngt": "Gestion",
     "xpack.serverlessObservability.nav.projectSettings": "Paramètres de projet",
     "xpack.serverlessObservability.nav.slo": "SLO",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -43106,16 +43106,12 @@
     "xpack.serverless.nav.manageOrgMembersTitle": "組織メンバーを管理",
     "xpack.serverlessObservability.aiAssistantManagementDescription": "対応言語をはじめ、ナレッジベースを管理し、アシスタント動作を制御します。",
     "xpack.serverlessObservability.aiAssistantManagementTitle": "AI Assistant for Observability設定",
-    "xpack.serverlessObservability.ml.changePointDetection": "変化点検出",
-    "xpack.serverlessObservability.ml.logRateAnalysis": "ログレート分析",
     "xpack.serverlessObservability.nav.applications": "アプリケーション",
     "xpack.serverlessObservability.nav.dashboards": "ダッシュボード",
     "xpack.serverlessObservability.nav.devTools": "開発者ツール",
     "xpack.serverlessObservability.nav.discover": "Discover",
     "xpack.serverlessObservability.nav.getStarted": "データの追加",
     "xpack.serverlessObservability.nav.infrastructure": "インフラストラクチャー",
-    "xpack.serverlessObservability.nav.ml.job.notifications": "ジョブ通知",
-    "xpack.serverlessObservability.nav.ml.jobs": "異常検知",
     "xpack.serverlessObservability.nav.mngt": "管理",
     "xpack.serverlessObservability.nav.projectSettings": "プロジェクト設定",
     "xpack.serverlessObservability.nav.slo": "SLO",