Alerting: Split legacy and unified routing configuration (#44641) (#44757)

* Disable add alert menu entry for legacy alerting

* Split legacy and unified routing configuration

* Fix fallback routes configuration

(cherry picked from commit 69e4796504)

pkg/api/index.go

@@ -469,7 +469,7 @@ func (hs *HTTPServer) buildCreateNavLinks(c *models.ReqContext) []*dtos.NavLink
 	_, uaIsDisabledForOrg := hs.Cfg.UnifiedAlerting.DisabledOrgs[c.OrgId]
 	uaVisibleForOrg := hs.Cfg.UnifiedAlerting.IsEnabled() && !uaIsDisabledForOrg
 
-	if setting.AlertingEnabled != nil && *setting.AlertingEnabled || uaVisibleForOrg {
+	if uaVisibleForOrg {
 		children = append(children, &dtos.NavLink{
 			Text: "Alert rule", SubTitle: "Create an alert rule", Id: "alert",
 			Icon: "bell", Url: hs.Cfg.AppSubURL + "/alerting/new",

public/app/features/alerting/AlertRuleListIndex.tsx

@@ -1,7 +0,0 @@
-import { config } from '@grafana/runtime';
-import { RuleList } from './unified/RuleList';
-import AlertRuleList from './AlertRuleList';
-
-// route between unified and "old" alerting pages based on feature flag
-
-export default config.unifiedAlertingEnabled ? RuleList : AlertRuleList;

public/app/features/alerting/NotificationsIndex.tsx

@@ -1,7 +0,0 @@
-import { config } from '@grafana/runtime';
-import NotificationsListPage from './NotificationsListPage';
-import Receivers from './unified/Receivers';
-
-// route between unified and "old" alerting pages based on feature flag
-
-export default config.unifiedAlertingEnabled ? Receivers : NotificationsListPage;

public/app/features/alerting/routes.tsx

@@ -3,17 +3,22 @@ import { Redirect } from 'react-router-dom';
 import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport';
 import { config } from 'app/core/config';
 import { RouteDescriptor } from 'app/core/navigation/types';
+import { uniq } from 'lodash';
 
-const alertingRoutes = [
+const commonRoutes: RouteDescriptor[] = [
   {
     path: '/alerting',
     // eslint-disable-next-line react/display-name
     component: () => <Redirect to="/alerting/list" />,
   },
+];
+
+const legacyRoutes: RouteDescriptor[] = [
+  ...commonRoutes,
   {
     path: '/alerting/list',
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "AlertRuleListIndex" */ 'app/features/alerting/AlertRuleListIndex')
+      () => import(/* webpackChunkName: "AlertRuleListIndex" */ 'app/features/alerting/AlertRuleList')
     ),
   },
   {
@@ -22,6 +27,70 @@ const alertingRoutes = [
       () => import(/* webpackChunkName: "AlertRuleList" */ 'app/features/alerting/AlertRuleList')
     ),
   },
+  {
+    path: '/alerting/notifications',
+    roles: config.unifiedAlertingEnabled ? () => ['Editor', 'Admin'] : undefined,
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsListPage')
+    ),
+  },
+  {
+    path: '/alerting/notifications/templates/new',
+    roles: () => ['Editor', 'Admin'],
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsListPage')
+    ),
+  },
+  {
+    path: '/alerting/notifications/templates/:id/edit',
+    roles: () => ['Editor', 'Admin'],
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsListPage')
+    ),
+  },
+  {
+    path: '/alerting/notifications/receivers/new',
+    roles: () => ['Editor', 'Admin'],
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsListPage')
+    ),
+  },
+  {
+    path: '/alerting/notifications/receivers/:id/edit',
+    roles: () => ['Editor', 'Admin'],
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsListPage')
+    ),
+  },
+  {
+    path: '/alerting/notifications/global-config',
+    roles: () => ['Admin', 'Editor'],
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsListPage')
+    ),
+  },
+  {
+    path: '/alerting/notification/new',
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NewNotificationChannel" */ 'app/features/alerting/NewNotificationChannelPage')
+    ),
+  },
+  {
+    path: '/alerting/notification/:id/edit',
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "EditNotificationChannel"*/ 'app/features/alerting/EditNotificationChannelPage')
+    ),
+  },
+];
+
+const unifiedRoutes: RouteDescriptor[] = [
+  ...commonRoutes,
+  {
+    path: '/alerting/list',
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "AlertRuleListIndex" */ 'app/features/alerting/unified/RuleList')
+    ),
+  },
   {
     path: '/alerting/routes',
     roles: () => ['Admin', 'Editor'],
@@ -53,54 +122,42 @@ const alertingRoutes = [
     path: '/alerting/notifications',
     roles: config.unifiedAlertingEnabled ? () => ['Editor', 'Admin'] : undefined,
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex')
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
     ),
   },
   {
     path: '/alerting/notifications/templates/new',
     roles: () => ['Editor', 'Admin'],
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex')
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
     ),
   },
   {
     path: '/alerting/notifications/templates/:id/edit',
     roles: () => ['Editor', 'Admin'],
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex')
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
     ),
   },
   {
     path: '/alerting/notifications/receivers/new',
     roles: () => ['Editor', 'Admin'],
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex')
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
     ),
   },
   {
     path: '/alerting/notifications/receivers/:id/edit',
     roles: () => ['Editor', 'Admin'],
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex')
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
     ),
   },
   {
     path: '/alerting/notifications/global-config',
     roles: () => ['Admin', 'Editor'],
     component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex')
-    ),
-  },
-  {
-    path: '/alerting/notification/new',
-    component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NewNotificationChannel" */ 'app/features/alerting/NewNotificationChannelPage')
-    ),
-  },
-  {
-    path: '/alerting/notification/:id/edit',
-    component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "EditNotificationChannel"*/ 'app/features/alerting/EditNotificationChannelPage')
+      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
     ),
   },
   {
@@ -147,12 +204,15 @@ const alertingRoutes = [
 ];
 
 export function getAlertingRoutes(cfg = config): RouteDescriptor[] {
-  if (cfg.alertingEnabled || cfg.unifiedAlertingEnabled) {
-    return alertingRoutes;
+  if (cfg.unifiedAlertingEnabled) {
+    return unifiedRoutes;
+  } else if (cfg.alertingEnabled) {
+    return legacyRoutes;
   }
 
-  return alertingRoutes.map((route) => ({
-    ...route,
+  const uniquePaths = uniq([...legacyRoutes, ...unifiedRoutes].map((route) => route.path));
+  return uniquePaths.map((path) => ({
+    path,
     component: SafeDynamicImport(
       () => import(/* webpackChunkName: "Alerting feature toggle page"*/ 'app/features/alerting/FeatureTogglePage')
     ),

public/app/features/alerting/unified/RuleList.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { configureStore } from 'app/store/configureStore';
 import { Provider } from 'react-redux';
-import { RuleList } from './RuleList';
+import RuleList from './RuleList';
 import { byLabelText, byRole, byTestId, byText } from 'testing-library-selector';
 import { typeAsJestMock } from 'test/helpers/typeAsJestMock';
 import { getAllDataSources } from './utils/config';

public/app/features/alerting/unified/RuleList.tsx

@@ -26,7 +26,7 @@ const VIEWS = {
   state: RuleListStateView,
 };
 
-export const RuleList = withErrorBoundary(
+const RuleList = withErrorBoundary(
   () => {
     const dispatch = useDispatch();
     const styles = useStyles2(getStyles);
@@ -133,3 +133,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
     margin-right: ${theme.spacing(1)};
   `,
 });
+
+export default RuleList;