Navigation: Rearrange IA based on tree test (#78804)

* rearrange IA

* add landing page routes and subtitles

* Translate menu items

* add frontend-observability icon

* proper frontend-observability icon

---------

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>

packages/grafana-data/src/types/icon.ts

@@ -21,6 +21,7 @@ export const availableIconsIndex = {
   'angle-up': true,
   'align-left': true,
   'align-right': true,
+  'application-observability': true,
   apps: true,
   arrow: true,
   'arrow-down': true,
@@ -110,6 +111,7 @@ export const availableIconsIndex = {
   'folder-plus': true,
   'folder-upload': true,
   forward: true,
+  'frontend-observability': true,
   'gf-bar-alignment-after': true,
   'gf-bar-alignment-before': true,
   'gf-bar-alignment-center': true,

pkg/services/navtree/models.go

@@ -13,17 +13,18 @@ const (
 
 	WeightHome = (iota - 20) * 100
 	WeightSavedItems
-	WeightCreate
 	WeightDashboard
 	WeightExplore
 	WeightAlerting
 	WeightAlertsAndIncidents
 	WeightMonitoring
+	WeightInfrastructure
+	WeightApplication
+	WeightFrontend
 	WeightDataConnections
 	WeightApps
 	WeightPlugin
 	WeightConfig
-	WeightAdmin
 	WeightProfile
 	WeightHelp
 )
@@ -31,11 +32,14 @@ const (
 const (
 	NavIDRoot               = "root"
 	NavIDDashboards         = "dashboards/browse"
+	NavIDExplore            = "explore"
 	NavIDCfg                = "cfg" // NavIDCfg is the id for org configuration navigation node
 	NavIDAlertsAndIncidents = "alerts-and-incidents"
 	NavIDAlerting           = "alerting"
 	NavIDAlertingLegacy     = "alerting-legacy"
 	NavIDMonitoring         = "monitoring"
+	NavIDInfrastructure     = "infrastructure"
+	NavIDFrontend           = "frontend"
 	NavIDReporting          = "reports"
 	NavIDApps               = "apps"
 	NavIDCfgGeneral         = "cfg/general"

pkg/services/navtree/navtreeimpl/applinks.go

@@ -213,6 +213,26 @@ func (s *ServiceImpl) addPluginToSection(c *contextmodel.ReqContext, treeRoot *n
 				Children:   []*navtree.NavLink{appLink},
 				Url:        s.cfg.AppSubURL + "/monitoring",
 			})
+		case navtree.NavIDInfrastructure:
+			treeRoot.AddSection(&navtree.NavLink{
+				Text:       "Infrastructure",
+				Id:         navtree.NavIDInfrastructure,
+				SubTitle:   "Understand your infrastructure's health",
+				Icon:       "heart-rate",
+				SortWeight: navtree.WeightInfrastructure,
+				Children:   []*navtree.NavLink{appLink},
+				Url:        s.cfg.AppSubURL + "/infrastructure",
+			})
+		case navtree.NavIDFrontend:
+			treeRoot.AddSection(&navtree.NavLink{
+				Text:       "Frontend",
+				Id:         navtree.NavIDFrontend,
+				SubTitle:   "Gain real user monitoring insights",
+				Icon:       "frontend-observability",
+				SortWeight: navtree.WeightFrontend,
+				Children:   []*navtree.NavLink{appLink},
+				Url:        s.cfg.AppSubURL + "/frontend",
+			})
 		case navtree.NavIDAlertsAndIncidents:
 			alertsAndIncidentsChildren := []*navtree.NavLink{}
 			if alertingNode != nil {
@@ -252,12 +272,34 @@ func (s *ServiceImpl) hasAccessToInclude(c *contextmodel.ReqContext, pluginID st
 }
 
 func (s *ServiceImpl) readNavigationSettings() {
+	k8sCfg := NavigationAppConfig{SectionID: navtree.NavIDMonitoring, SortWeight: 1, Text: "Kubernetes"}
+	appO11yCfg := NavigationAppConfig{SectionID: navtree.NavIDMonitoring, SortWeight: 2, Text: "Application"}
+	profilesCfg := NavigationAppConfig{SectionID: navtree.NavIDMonitoring, SortWeight: 3, Text: "Profiles"}
+	frontendCfg := NavigationAppConfig{SectionID: navtree.NavIDMonitoring, SortWeight: 4, Text: "Frontend"}
+	syntheticsCfg := NavigationAppConfig{SectionID: navtree.NavIDMonitoring, SortWeight: 5, Text: "Synthetics"}
+
+	if s.features.IsEnabledGlobally(featuremgmt.FlagDockedMegaMenu) {
+		k8sCfg.SectionID = navtree.NavIDInfrastructure
+
+		appO11yCfg.SectionID = navtree.NavIDRoot
+		appO11yCfg.SortWeight = navtree.WeightApplication
+
+		profilesCfg.SectionID = navtree.NavIDExplore
+		profilesCfg.SortWeight = 1
+
+		frontendCfg.SectionID = navtree.NavIDFrontend
+		frontendCfg.SortWeight = 1
+
+		syntheticsCfg.SectionID = navtree.NavIDFrontend
+		syntheticsCfg.SortWeight = 2
+	}
+
 	s.navigationAppConfig = map[string]NavigationAppConfig{
-		"grafana-k8s-app":                  {SectionID: navtree.NavIDMonitoring, SortWeight: 1, Text: "Kubernetes"},
+		"grafana-k8s-app":                  k8sCfg,
-		"grafana-app-observability-app":    {SectionID: navtree.NavIDMonitoring, SortWeight: 2, Text: "Application"},
+		"grafana-app-observability-app":    appO11yCfg,
-		"grafana-pyroscope-app":            {SectionID: navtree.NavIDMonitoring, SortWeight: 3, Text: "Profiles"},
+		"grafana-pyroscope-app":            profilesCfg,
-		"grafana-kowalski-app":             {SectionID: navtree.NavIDMonitoring, SortWeight: 4, Text: "Frontend"},
+		"grafana-kowalski-app":             frontendCfg,
-		"grafana-synthetic-monitoring-app": {SectionID: navtree.NavIDMonitoring, SortWeight: 5, Text: "Synthetics"},
+		"grafana-synthetic-monitoring-app": syntheticsCfg,
 		"grafana-oncall-app":               {SectionID: navtree.NavIDAlertsAndIncidents, SortWeight: 1, Text: "OnCall"},
 		"grafana-incident-app":             {SectionID: navtree.NavIDAlertsAndIncidents, SortWeight: 2, Text: "Incidents"},
 		"grafana-ml-app":                   {SectionID: navtree.NavIDAlertsAndIncidents, SortWeight: 3, Text: "Machine Learning"},

pkg/services/navtree/navtreeimpl/navtree.go

@@ -119,7 +119,7 @@ func (s *ServiceImpl) GetNavTree(c *contextmodel.ReqContext, prefs *pref.Prefere
 	if setting.ExploreEnabled && hasAccess(ac.EvalPermission(ac.ActionDatasourcesExplore)) {
 		treeRoot.AddSection(&navtree.NavLink{
 			Text:       "Explore",
-			Id:         "explore",
+			Id:         navtree.NavIDExplore,
 			SubTitle:   "Explore your data",
 			Icon:       "compass",
 			SortWeight: navtree.WeightExplore,

public/app/core/utils/navBarItem-translations.ts

@@ -118,6 +118,10 @@ export function getNavTitle(navId: string | undefined) {
       return t('nav.upgrading.title', 'Stats and license');
     case 'monitoring':
       return t('nav.monitoring.title', 'Observability');
+    case 'infrastructure':
+      return t('nav.infrastructure.title', 'Infrastructure');
+    case 'frontend':
+      return t('nav.frontend.title', 'Frontend');
     case 'apps':
       return t('nav.apps.title', 'Apps');
     case 'alerts-and-incidents':
@@ -139,7 +143,7 @@ export function getNavTitle(navId: string | undefined) {
     case 'plugin-page-grafana-pyroscope-app':
       return t('nav.profiles.title', 'Profiles');
     case 'plugin-page-grafana-kowalski-app':
-      return t('nav.frontend.title', 'Frontend');
+      return t('nav.frontend-app.title', 'Frontend');
     case 'plugin-page-grafana-synthetic-monitoring-app':
       return t('nav.synthetics.title', 'Synthetics');
     case 'help':
@@ -161,7 +165,7 @@ export function getNavTitle(navId: string | undefined) {
     case 'connections-datasources':
       return t('nav.data-sources.title', 'Data sources');
     case 'standalone-plugin-page-/connections/infrastructure':
-      return t('nav.infrastructure.title', 'Integrations');
+      return t('nav.integrations.title', 'Integrations');
     case 'standalone-plugin-page-/connections/connect-data':
       return t('nav.connect-data.title', 'Connect data');
     case 'plugin-page-grafana-detect-app':
@@ -246,6 +250,10 @@ export function getNavSubTitle(navId: string | undefined) {
       return t('nav.apps.subtitle', 'App plugins that extend the Grafana experience');
     case 'monitoring':
       return t('nav.monitoring.subtitle', 'Out-of-the-box observability solutions');
+    case 'infrastructure':
+      return t('nav.infrastructure.subtitle', "Understand your infrastructure's health");
+    case 'frontend':
+      return t('nav.frontend.subtitle', 'Gain real user monitoring insights');
     case 'alerts-and-incidents':
       return t('nav.alerts-and-incidents.subtitle', 'Alerting and incident management apps');
     case 'connections-add-new-connection':

public/app/routes/routes.tsx

@@ -174,6 +174,14 @@ export function getAppRoutes(): RouteDescriptor[] {
       path: '/monitoring',
       component: () => <NavLandingPage navId="monitoring" />,
     },
+    {
+      path: '/infrastructure',
+      component: () => <NavLandingPage navId="infrastructure" />,
+    },
+    {
+      path: '/frontend',
+      component: () => <NavLandingPage navId="frontend" />,
+    },
     {
       path: '/admin/general',
       component: () => <NavLandingPage navId="cfg/general" />,

public/img/icons/unicons/application-observability.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 524.55 535.34">
+  <defs>
+    <style>.cls-1{fill:currentColor;stroke-width:0px;}</style>
+  </defs>
+  <g id="Layer_1-2">
+    <path class="cls-1" d="m424.19,427.44L268.02,3.84c-.85-2.31-3.05-3.84-5.51-3.84h-99.87c-2.46,0-4.65,1.53-5.5,3.83L.37,427.43c-1.42,3.83,1.42,7.91,5.5,7.91h93.43c2.55,0,4.82-1.65,5.59-4.09l29.62-92.92c.78-2.43,3.04-4.09,5.59-4.09h144.35c2.54,0,4.8,1.64,5.58,4.05l30.22,92.99c.79,2.42,3.04,4.05,5.58,4.05h92.84c4.08,0,6.92-4.07,5.51-7.9Zm-252.11-178.19c0,4.68-3.81,8.48-8.48,8.48h-13.86c-4.68,0-8.48-3.81-8.48-8.48v-93.63c0-4.68,3.81-8.49,8.48-8.49h13.86c4.68,0,8.48,3.81,8.48,8.49v93.63Zm55.61,0c0,4.68-3.81,8.48-8.48,8.48h-13.86c-4.68,0-8.48-3.81-8.48-8.48V90.2c0-4.68,3.81-8.48,8.48-8.48h13.86c4.68,0,8.48,3.81,8.48,8.48v159.05Zm55.61,0c0,4.68-3.81,8.48-8.49,8.48h-13.86c-4.68,0-8.49-3.81-8.49-8.48v-64.14c0-4.68,3.81-8.48,8.49-8.48h13.86c4.68,0,8.49,3.81,8.49,8.48v64.14Z"/>
+  </g>
+</svg>

public/img/icons/unicons/frontend-observability.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.60039 3.27265V1.60015H16.3454V4.71265H14.6729V4.37265C14.6729 3.76513 14.1804 3.27265 13.5729 3.27265H4.60039ZM4.50039 0.400146C3.89288 0.400146 3.40039 0.892635 3.40039 1.50015V3.38989H1.55801C1.48169 3.38989 1.40719 3.39766 1.33525 3.41246C0.806079 3.49213 0.400391 3.94876 0.400391 4.50015V8.60015H0.458008V16.4349C0.458008 17.0424 0.950494 17.5349 1.55801 17.5349H13.503C14.1105 17.5349 14.603 17.0424 14.603 16.4349V14.6623H16.3902C16.9977 14.6623 17.4902 14.1698 17.4902 13.5623V5.91265H17.5454V1.50015C17.5454 0.892633 17.0529 0.400146 16.4454 0.400146H4.50039ZM1.65801 8.60015V16.3349H13.403V8.60015H1.65801ZM1.65801 7.40015V4.60015H13.4004V7.40015H1.65801ZM14.6102 6.02983V13.4623H16.2902V6.02983H14.6102ZM4.65777 6.7498H3.21777V5.5498H4.65777V6.7498ZM6.09766 6.7498H7.53766V5.5498H6.09766V6.7498Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.07147 12.3438C9.04238 11.9084 8.97021 11.5011 8.86196 11.1503C9.25024 11.436 9.53279 11.857 9.64008 12.3438H9.07147ZM8.19422 12.3438C8.15897 11.8895 8.07059 11.4953 7.95391 11.2036C7.87705 11.0114 7.79646 10.8853 7.72936 10.8143C7.6971 10.7802 7.67528 10.7659 7.66406 10.7602C7.65284 10.7659 7.63103 10.7802 7.59877 10.8143C7.53166 10.8853 7.45108 11.0114 7.37421 11.2036C7.25754 11.4953 7.16915 11.8895 7.13391 12.3438H8.19422ZM7.13391 13.2188H8.19422C8.15897 13.673 8.07059 14.0672 7.95391 14.3589C7.87705 14.5511 7.79646 14.6772 7.72936 14.7482C7.6971 14.7823 7.67528 14.7966 7.66406 14.8023C7.65284 14.7966 7.63103 14.7823 7.59877 14.7482C7.53166 14.6772 7.45108 14.5511 7.37421 14.3589C7.25754 14.0672 7.16915 13.673 7.13391 13.2188ZM6.25665 12.3438C6.28574 11.9084 6.35791 11.5011 6.46616 11.1503C6.07789 11.436 5.79533 11.857 5.68805 12.3438H6.25665ZM5.68805 13.2188H6.25665C6.28574 13.6541 6.35791 14.0614 6.46616 14.4122C6.07789 14.1265 5.79533 13.7055 5.68805 13.2188ZM4.76562 12.7812C4.76562 11.1805 6.0633 9.88281 7.66406 9.88281C9.26483 9.88281 10.5625 11.1805 10.5625 12.7812C10.5625 14.382 9.26483 15.6797 7.66406 15.6797C6.0633 15.6797 4.76562 14.382 4.76562 12.7812ZM9.64008 13.2188C9.53279 13.7055 9.25024 14.1265 8.86196 14.4122C8.97021 14.0614 9.04238 13.6541 9.07147 13.2188H9.64008Z" fill="currentColor"/>
+</svg>

public/locales/de-DE/grafana.json

@@ -773,6 +773,10 @@
       "title": "Entdecken"
     },
     "frontend": {
+      "subtitle": "",
+      "title": ""
+    },
+    "frontend-app": {
       "title": "Frontend"
     },
     "global-orgs": {
@@ -800,6 +804,10 @@
       "title": "Störungen"
     },
     "infrastructure": {
+      "subtitle": "",
+      "title": ""
+    },
+    "integrations": {
       "title": "Integrationen"
     },
     "kubernetes": {

public/locales/en-US/grafana.json

@@ -773,6 +773,10 @@
       "title": "Explore"
     },
     "frontend": {
+      "subtitle": "Gain real user monitoring insights",
+      "title": "Frontend"
+    },
+    "frontend-app": {
       "title": "Frontend"
     },
     "global-orgs": {
@@ -800,6 +804,10 @@
       "title": "Incidents"
     },
     "infrastructure": {
+      "subtitle": "Understand your infrastructure's health",
+      "title": "Infrastructure"
+    },
+    "integrations": {
       "title": "Integrations"
     },
     "kubernetes": {

public/locales/es-ES/grafana.json

@@ -779,6 +779,10 @@
       "title": "Explorar"
     },
     "frontend": {
+      "subtitle": "",
+      "title": ""
+    },
+    "frontend-app": {
       "title": "Interfaz"
     },
     "global-orgs": {
@@ -806,6 +810,10 @@
       "title": "Incidentes"
     },
     "infrastructure": {
+      "subtitle": "",
+      "title": ""
+    },
+    "integrations": {
       "title": "Integraciones"
     },
     "kubernetes": {

public/locales/fr-FR/grafana.json

@@ -779,6 +779,10 @@
       "title": "Explorer"
     },
     "frontend": {
+      "subtitle": "",
+      "title": ""
+    },
+    "frontend-app": {
       "title": "Frontend"
     },
     "global-orgs": {
@@ -806,6 +810,10 @@
       "title": "Incidents"
     },
     "infrastructure": {
+      "subtitle": "",
+      "title": ""
+    },
+    "integrations": {
       "title": "Intégrations"
     },
     "kubernetes": {

public/locales/pseudo-LOCALE/grafana.json

@@ -773,6 +773,10 @@
       "title": "Ēχpľőřę"
     },
     "frontend": {
+      "subtitle": "Ğäįʼn řęäľ ūşęř mőʼnįŧőřįʼnģ įʼnşįģĥŧş",
+      "title": "Fřőʼnŧęʼnđ"
+    },
+    "frontend-app": {
       "title": "Fřőʼnŧęʼnđ"
     },
     "global-orgs": {
@@ -800,6 +804,10 @@
       "title": "Ĩʼnčįđęʼnŧş"
     },
     "infrastructure": {
+      "subtitle": "Ůʼnđęřşŧäʼnđ yőūř įʼnƒřäşŧřūčŧūřę'ş ĥęäľŧĥ",
+      "title": "Ĩʼnƒřäşŧřūčŧūřę"
+    },
+    "integrations": {
       "title": "Ĩʼnŧęģřäŧįőʼnş"
     },
     "kubernetes": {

public/locales/zh-Hans/grafana.json

@@ -767,6 +767,10 @@
       "title": "探索"
     },
     "frontend": {
+      "subtitle": "",
+      "title": ""
+    },
+    "frontend-app": {
       "title": "前端"
     },
     "global-orgs": {
@@ -794,6 +798,10 @@
       "title": "事件"
     },
     "infrastructure": {
+      "subtitle": "",
+      "title": ""
+    },
+    "integrations": {
       "title": "集成"
     },
     "kubernetes": {