From 69e4796504d83e1823ca5d45c864abc49b98bf26 Mon Sep 17 00:00:00 2001 From: Konrad Lalik Date: Wed, 2 Feb 2022 10:57:43 +0100 Subject: [PATCH] Alerting: Split legacy and unified routing configuration (#44641) * Disable add alert menu entry for legacy alerting * Split legacy and unified routing configuration * Fix fallback routes configuration --- pkg/api/index.go | 2 +- .../features/alerting/AlertRuleListIndex.tsx | 7 -- .../features/alerting/NotificationsIndex.tsx | 7 -- public/app/features/alerting/routes.tsx | 108 ++++++++++++++---- .../alerting/unified/RuleList.test.tsx | 2 +- .../features/alerting/unified/RuleList.tsx | 4 +- 6 files changed, 89 insertions(+), 41 deletions(-) delete mode 100644 public/app/features/alerting/AlertRuleListIndex.tsx delete mode 100644 public/app/features/alerting/NotificationsIndex.tsx diff --git a/pkg/api/index.go b/pkg/api/index.go index f07b9ba375a..2358fa61821 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -491,7 +491,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", diff --git a/public/app/features/alerting/AlertRuleListIndex.tsx b/public/app/features/alerting/AlertRuleListIndex.tsx deleted file mode 100644 index bffd5585027..00000000000 --- a/public/app/features/alerting/AlertRuleListIndex.tsx +++ /dev/null @@ -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; diff --git a/public/app/features/alerting/NotificationsIndex.tsx b/public/app/features/alerting/NotificationsIndex.tsx deleted file mode 100644 index 06d9bd801f0..00000000000 --- a/public/app/features/alerting/NotificationsIndex.tsx +++ /dev/null @@ -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; diff --git a/public/app/features/alerting/routes.tsx b/public/app/features/alerting/routes.tsx index 9254e343dc5..3d7cf8a7e1f 100644 --- a/public/app/features/alerting/routes.tsx +++ b/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: RouteDescriptor[] = [ +const commonRoutes: RouteDescriptor[] = [ { path: '/alerting', // eslint-disable-next-line react/display-name component: () => , }, +]; + +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: RouteDescriptor[] = [ () => 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'], @@ -67,54 +136,42 @@ const alertingRoutes: RouteDescriptor[] = [ 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') ), }, { @@ -161,12 +218,15 @@ const alertingRoutes: RouteDescriptor[] = [ ]; 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') ), diff --git a/public/app/features/alerting/unified/RuleList.test.tsx b/public/app/features/alerting/unified/RuleList.test.tsx index 4a3f133ba03..c874090c24c 100644 --- a/public/app/features/alerting/unified/RuleList.test.tsx +++ b/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'; diff --git a/public/app/features/alerting/unified/RuleList.tsx b/public/app/features/alerting/unified/RuleList.tsx index cf42aecee17..a2ca8e82e2f 100644 --- a/public/app/features/alerting/unified/RuleList.tsx +++ b/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;